日常API之图灵聊天机器人
机器人是什么？可以吃吗？
嗯，他可以和你聊天，不能吃哦。
首先需要到www.tuling123.com注册一只KEY，你才能调用机器人API哦
一、布局
（控制台程序可以跳过这一步）本文以WPF为示例来讲解。
首先我们需要一只聊天界面，大概需要这些组件：
“发送”Button一只 TextBox一条 ScrollViewer和WrapPanel各一只。
这里我把它写成UserControl方便使用，喵。
以下是XAML布局:(ScrollViewer的Style可以删掉(如果报错))
1 <UserControl 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Lemon_App" 7 xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Name="userControl" x:Class="Lemon_App.IMBOX" 8 mc:Ignorable="d" Loaded="UserControl_Loaded" SizeChanged="UserControl_SizeChanged"> 9 <Grid> 10 <Border Height="1" VerticalAlignment="Bottom" Background="#FFE6E6E6" Margin="0,0,0,90"/> 11 <TextBox x:Name="textBox1" TextWrapping="Wrap" FontSize="14" BorderThickness="0" BorderBrush="{x:Null}" SelectionBrush="#FF31C27C" KeyDown="textBox1_KeyDown" Height="90" VerticalAlignment="Bottom" Background="{x:Null}"/> 12 <Border BorderThickness="1" Background="#B2007ACC" CornerRadius="5" HorizontalAlignment="Right" Width="57" Height="30" VerticalAlignment="Bottom" Margin="3"> 13 <Label x:Name="label" Content="发送" Margin="9.919,1.833,4.331,-1" Foreground="White" MouseDown="label_MouseDown" Height="27.167" VerticalAlignment="Top"/> 14 </Border> 15 <ScrollViewer x:Name="Sllv" PanningMode="Both" Margin="0,0,0,90" BorderBrush="{x:Null}" Template="{DynamicResource SCS}"> 16 <WrapPanel x:Name="Robot" Height="Auto" SizeChanged="Robot_SizeChanged" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}"/> 17 </ScrollViewer> 18 </Grid> 19 </UserControl>
部分事件处理代码:
1 public IMBOX() 2 { 3 InitializeComponent(); 4 } 5 6 private void UserControl_Loaded(object sender, RoutedEventArgs e) 7 { 8 Robot.Width = this.ActualWidth; 9 } 10 private void textBox1_KeyDown(object sender, KeyEventArgs e) 11 { 12 if (e.Key == Key.Enter) 13 { 14 label_MouseDown(null, null); 15 } 16 } 17 18 private void Robot_SizeChanged(object sender, SizeChangedEventArgs e) 19 { 20 double d = this.Sllv.ActualHeight + this.Sllv.ViewportHeight + this.Sllv.ExtentHeight; 21 this.Sllv.ScrollToVerticalOffset(d); 22 } 23 24 private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e) 25 { 26 Robot.Width = this.ActualWidth; 27 foreach(var o in Robot.Children) 28 { 29 (o as UserControl).Width = this.ActualWidth; 30 } 31 } 32 //以上负责自适应大小 33 private async void label_MouseDown(object sender, MouseButtonEventArgs e){ 34 //待会处理机器人事件时用到 35 }
接着是聊天气泡，可以分为机器人（在左边）、自己（在右边）以下是XAML：
机器人:(名称及头像可以自己定义)
1 <UserControl 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Lemon_App" 7 x:Class="Lemon_App.Robot" 8 mc:Ignorable="d" Height="Auto" Width="Auto"> 9 <Grid> 10 11 <Border x:Name="Image" BorderThickness="0" HorizontalAlignment="Left" Margin="12,12,0,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top"> 12 <Border.Background> 13 <ImageBrush ImageSource="/Lemon App;component/Page/Lemon App Ico.ico"/> 14 </Border.Background> 15 <!--ed:RegularPolygon Fill="White" InnerRadius="0.47211" Margin="5" PointCount="5" Stretch="Fill"/!--> 16 </Border> 17 <Border Width="Auto" Height="Auto" Margin="55,35,0,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF3399FF"> 18 <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="欢迎回来"/> 19 </Border> 20 <TextBlock Margin="50,15,40,35.78" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30"/> 21 <Border HorizontalAlignment="Left" Height="16" Margin="46,38,0,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5"> 22 <Border.RenderTransform> 23 <TransformGroup> 24 <ScaleTransform/> 25 <SkewTransform/> 26 <RotateTransform Angle="-60"/> 27 <TranslateTransform/> 28 </TransformGroup> 29 </Border.RenderTransform> 30 <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/> 31 </Border> 32 33 </Grid> 34 </UserControl>
事件处理代码:
1 public partial class Robot : UserControl 2 { 3 public Robot() 4 { 5 InitializeComponent(); 6 RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant); 7 } 8 public Robot(string Text) 9 { 10 InitializeComponent(); 11 Te.Text = Text; 12 RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant); 13 } 14 }
接下来是自己的XAML:
1 <UserControl 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Lemon_App" 7 x:Class="Lemon_App.User" 8 mc:Ignorable="d" Height="Auto" Width="Auto" Loaded="UserControl_Loaded"> 9 <Grid> 10 11 <Border x:Name="bd" BorderThickness="0" HorizontalAlignment="Right" Margin="0,12,12,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top" Background="#FF007ACC"/> 12 <Border Width="Auto" Height="Auto" Margin="0,35,55,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right" Background="#FF3399FF"> 13 <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="啦啦啦"/> 14 </Border> 15 <Grid HorizontalAlignment="Right" Height="18" Margin="0,16,45,0" VerticalAlignment="Top" Width="Auto"> 16 <Grid.ColumnDefinitions> 17 <ColumnDefinition Width="Auto"/> 18 <ColumnDefinition Width="Auto"/> 19 </Grid.ColumnDefinitions> 20 <TextBlock x:Name="UName" Margin="0,0,1.636,0" TextWrapping="Wrap" Text="小萌机器人" Foreground="#FF2D2D30" HorizontalAlignment="Right" Width="Auto"/> 21 </Grid> 22 <Border HorizontalAlignment="Right" Height="16" Margin="0,38,46,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5"> 23 <Border.RenderTransform> 24 <TransformGroup> 25 <RotateTransform Angle="60"/> 26 <TranslateTransform/> 27 </TransformGroup> 28 </Border.RenderTransform> 29 <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/> 30 </Border> 31 32 </Grid> 33 </UserControl>
事件处理代码:
1 public partial class User : UserControl 2 { 3 public User() 4 { 5 InitializeComponent(); 6 } 7 public User(String Text) 8 { 9 InitializeComponent(); 10 RenderOptions.SetBitmapScalingMode(bd, BitmapScalingMode.Fant); 11 Te.Text = Text; 12 } 13 14 private void UserControl_Loaded(object sender, RoutedEventArgs e) 15 { 16 if (System.IO.File.Exists(He.Settings.UserImage)) 17 { 18 var image = new System.Drawing.Bitmap(He.Settings.UserImage); 19 bd.Background = new ImageBrush(image.ToImageSource()); 20 } 21 UName.Text = He.Settings.RobotName; 22 } 23 }
其中的He.Settings.UserImage可以替换成你的图像路径，或直接在XAML中定义
二、编码
我们有了KEY就可以向机器人发送请求惹：
http://www.tuling123.com/openapi/api?key={0}&info={1}&userid={2}
{0} : 你注册的KEY
{1} : 对机器人说的话
{2} :（选填，但最好还是填写，用于辨认用户）用户名称或ID
接下来就要对机器人发回的数据进行解码
首先要识别他发回的是什么类型的：（简单的文本或链接）
状态码位于json数据的["code"]处
简单的文本处理：
1 if ((string)obj["code"] == "100000" || obj["code"].ToString() == "40002") 2 { 3 User U = new User(textBox1.Text) 4 { 5 Width = Robot.ActualWidth,Opacity = 0 6 }; 7 Robot Rb = new Robot((string)obj["text"]) 8 { 9 Width = Robot.ActualWidth, Opacity = 0 10 }; 11 Robot.Children.Add(U); 12 Robot.Children.Add(Rb); 13 var b = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2)); 14 U.BeginAnimation(OpacityProperty, b); 15 Rb.BeginAnimation(OpacityProperty, b); 16 }
链接处理:
1 else if ((string)obj["code"] == "200000") 2 { 3 string i = (string)obj["text"]; 4 User Uu = new User(textBox1.Text) 5 { 6 Opacity = 0, 7 Width = Robot.ActualWidth 8 }; 9 Lemon_App.Robot Rbu = new Lemon_App.Robot((string)obj["url"] + i) 10 { 11 Opacity = 0, 12 Width = Robot.ActualWidth, 13 ToolTip = (string)obj["url"].ToString() 14 }; 15 Rbu.MouseDown += Rbu_MouseDown; 16 Robot.Children.Add(Uu); 17 Robot.Children.Add(Rbu); 18 var b = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2)); 19 Uu.BeginAnimation(OpacityProperty, b); 20 Rbu.BeginAnimation(OpacityProperty, b); 21 }
附一只事件处理代码，用于处理用户点击链接时打开浏览器:
1 private void Rbu_MouseDown(object sender, MouseButtonEventArgs e) 2 { 3 Process.Start((sender as Grid).ToolTip.ToString()); 4 }
这样我们就完成了编码工作。
三、测试
接下来就可以和机器人愉快地聊天啦o(*￣▽￣*)ブ
测试成功！( •̀ ω •́ )y
已更新
本教程示例代码（WPF）：https://github.com/TwilightLemon/Lime
这次的教程到这里就结束啦，如果喜欢就快快关注我吧！
