Introduction

Hello everybody! Today, I shall show you how to make a simple Simsimi chat application.

Prerequisites

  • Simsimi API key
  • Bubble View
  • Newtonsoft.json
  • Xamarin Android Support Design
  • Icon of Simsimi and Arrow

About Request Parameters:

Parameter

Value

Required

Default

Description

Key

String

Yes

Your key value

Text

String

Yes

Query message

Language code

String

Yes

Language code(List)

Ft

Double(0.0 ~ 1.0)

0.0

1.0 : 'Bad Word Discriminator'

Step 1

First, we need to subscribe Simsimi API key. Go to developer.simsimi.com

Create an account on Simsimi Developer.

Step 2

Next, login to your account by providing the login email and password.

Step 3

Now, go to application list and click on View Details/Extra function edit and get 7 days’ free trial key.

Step 4

Give this an application name and purpose of trial. Now, you can use this API to request Simsimi to talk.

Create Xamarin Android Application

Step 1

Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name, like SimsimiChat.

Step 2

Go to Solution Explorer -> Project Name -> Resources-> Drawable right click Arrow and Simsimi icon. Paste into the drawable folder.

Step 3

Next, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for JSON. Install the Newtonsoft.json package.

Step 4

Similarly, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for Bubble. Install the Bubble package.

Step 5

Now again, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for Xamarin.Android.Support.Design. Install the Support Design Packages.

Step 6

Next, open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.

(File Name: Main.axml)

(Folder Name: Layout)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
  3. <android.support.design.widget.FloatingActionButton android:clickable="true" android:src="@drawable/send" android:id="@+id/fab" android:tint="@android:color/white" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
  4. <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/fab" android:layout_marginBottom="20dp" android:id="@+id/list_of_message" android:stackFromBottom="true" android:transcriptMode="alwaysScroll" android:dividerHeight="0dp" android:divider="@android:color/transparent" />
  5. <EditText android:layout_toLeftOf="@+id/fab" android:layout_alignParentBottom="true" android:layout_alignParentStart="true" android:id="@+id/user_message" android:layout_width="match_parent" android:layout_height="wrap_content" />
  6. </RelativeLayout>

Step 7

Next, add a new Layout, go to Solution Explorer-> Project Name-> Resources-> Layout-> Right click to add a new item, select Layout, give it a name as List_item_message_send.axml. Open this layout file and add the following code.

(File Name: List_item_message_send.axml)

(Folder Name: Layout)

AXML Code

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
  3. <com.github.library.bubbleview.BubbleTextView android:id="@+id/text_message" android:padding="10dp" android:textColor="#FFF" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" app:arrowWidth="8dp" app:angle="8dp" app:arrowHeight="10dp" app:arrowPosition="14dp" app:arrowLocation="right" app:arrowCenter="true" app:bubbleColor="#7EC0EE" />
  4. </RelativeLayout>

Step 8

Next, add another new Layout. Go to Solution Explorer-> Project Name-> Resources-> Layout-> Right click to add a new item, select Layout, give it a name as List_item_message_recv.axml. Open this layout file and add the following code.

(File Name: List_item_message_recv.axml)

(Folder Name: Layout)

AXML Code

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
  3. <ImageView android:id="@+id/simsimi_image" android:src="@drawable/simsimi" android:layout_width="40dp" android:layout_height="40dp" />
  4. <com.github.library.bubbleview.BubbleTextView android:id="@+id/text_message" android:padding="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFF" android:layout_toRightOf="@id/simsimi_image" app:arrowWidth="8dp" app:angle="8dp" app:arrowHeight="10dp" app:arrowPosition="14dp" app:arrowLocation="left" app:arrowCenter="true" app:bubbleColor="#FF4081" />
  5. </RelativeLayout>
Step 9

Next, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name as SimsimiModel.cs and write the following code.

(File Name: SimsimiModel.cs)

C# Code

  1. namespace SimsimiChat.Model {
  2. public class SimsimiModel {
  3. public string response {
  4. get;
  5. set;
  6. }
  7. public int id {
  8. get;
  9. set;
  10. }
  11. public int result {
  12. get;
  13. set;
  14. }
  15. public string msg {
  16. get;
  17. set;
  18. }
  19. }
  20. }

Step 10

Similarly, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like, ChatModel.cs and write the following code.

(File Name: ChatModel.cs)

  1. namespace SimsimiChat.Model {
  2. public class ChatModel {
  3. public string ChatMessage {
  4. get;
  5. set;
  6. }
  7. public bool IsSend {
  8. get;
  9. set;
  10. }
  11. }
  12. }

Step 11

Next, add a HttpDataHandler class. Go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like, HttpDataHandler.cs and write the following code with appropriate namespaces.

(File Name: HttpDataHandler.cs)

C# Code

  1. using Java.IO;
  2. using Java.Net;
  3. using System;
  4. using System.Text;
  5. namespace SimsimiChat.Helper {
  6. public class HttpDataHandler {
  7. static string stream = null;
  8. public HttpDataHandler() {}
  9. public string GetHTTPData(string urlString) {
  10. try {
  11. URL url = new URL(urlString);
  12. HttpURLConnection urLConnection = (HttpURLConnection) url.OpenConnection();
  13. if (urLConnection.ResponseCode == HttpStatus.Ok) {
  14. BufferedReader r = new BufferedReader(new InputStreamReader(urLConnection.InputStream));
  15. StringBuilder sb = new StringBuilder();
  16. String line;
  17. while ((line = r.ReadLine()) != null) sb.Append(line);
  18. stream = sb.ToString();
  19. urLConnection.Disconnect();
  20. }
  21. } catch (Exception ex) {}
  22. return stream;
  23. }
  24. }
  25. }

Step 12

Next, add a new class. Go to Solution Explorer-> Project Name and right-click Add -> New Item-> Class. Give it a name like CustomAdapter.cs, and write the following code.

(FileName: CustomAdapter)

C# Code

  1. using Android.Content;
  2. using Android.Views;
  3. using Android.Widget;
  4. using Com.Github.Library.Bubbleview;
  5. using SimsimiChat.Model;
  6. using System.Collections.Generic;
  7. namespace SimsimiChat.Adapter {
  8. public class CustomAdapter: BaseAdapter {
  9. private List < ChatModel > listChatModel;
  10. private Context context;
  11. private LayoutInflater inflater;
  12. public CustomAdapter(List < ChatModel > listChatModel, Context context) {
  13. this.context = context;
  14. this.listChatModel = listChatModel;
  15. inflater = (LayoutInflater) context.GetSystemService(Context.LayoutInflaterService);
  16. }
  17. public override int Count {
  18. get {
  19. return listChatModel.Count;
  20. }
  21. }
  22. public override Java.Lang.Object GetItem(int position) {
  23. return position;
  24. }
  25. public override long GetItemId(int position) {
  26. return position;
  27. }
  28. public override View GetView(int position, View convertView, ViewGroup parent) {
  29. View view = convertView;
  30. if (view == null) {
  31. if (listChatModel[position].IsSend) view = inflater.Inflate(Resource.Layout.List_item_message_send, null);
  32. else view = inflater.Inflate(Resource.Layout.List_item_message_recv, null);
  33. BubbleTextView bubbleTextView = view.FindViewById < BubbleTextView > (Resource.Id.text_message);
  34. bubbleTextView.Text = (listChatModel[position].ChatMessage);
  35. }
  36. return view;
  37. }
  38. }
  39. }

Step 13

Lastly, go to Solution Explorer-> Project Name-> MainActivity and add the following code to main activity with appropriate namespaces.

(FileName: MainActivity)

C# Code

  1. using Android.App;
  2. using Android.Widget;
  3. using Android.OS;
  4. using Android.Support.V7.App;
  5. using Android.Support.Design.Widget;
  6. using SimsimiChat.Model;
  7. using System.Collections.Generic;
  8. using SimsimiChat.Helper;
  9. using Newtonsoft.Json;
  10. using SimsimiChat.Adapter;
  11. namespace SimsimiChat {
  12. [Activity(Label = "SimsimiChat", MainLauncher = true, Theme = "@style/Theme.AppCompat.Light.NoActionBar")]
  13. public class MainActivity: AppCompatActivity {
  14. public ListView list_of_message;
  15. public EditText user_message;
  16. FloatingActionButton btn_send;
  17. public List < ChatModel > list_chat = new List < ChatModel > ();
  18. protected override void OnCreate(Bundle savedInstanceState) {
  19. base.OnCreate(savedInstanceState);
  20. // Set our view from the "main" layout resource
  21. SetContentView(Resource.Layout.Main);
  22. list_of_message = FindViewById < ListView > (Resource.Id.list_of_message);
  23. user_message = FindViewById < EditText > (Resource.Id.user_message);
  24. btn_send = FindViewById < FloatingActionButton > (Resource.Id.fab);
  25. btn_send.Click += delegate {
  26. string text = user_message.Text;
  27. ChatModel model = new ChatModel();
  28. model.ChatMessage = text;
  29. model.IsSend = true;
  30. list_chat.Add(model);
  31. new SimsimiAPI(this).Execute(user_message.Text);
  32. user_message.Text = "";
  33. };
  34. }
  35. }
  36. internal class SimsimiAPI: AsyncTask < string, string, string > {
  37. private MainActivity mainActivity;
  38. private
  39. const string API_KEY = "d3a0b788-28d6-4506-8baa-730335ecc978";
  40. public SimsimiAPI(MainActivity mainActivity) {
  41. this.mainActivity = mainActivity;
  42. }
  43. protected override string RunInBackground(params string[] @params) {
  44. string url = $ "http://sandbox.api.simsimi.com/request.p?key={API_KEY}&lc=en&ft=1.0&text={@params[0]}";
  45. HttpDataHandler dataHandler = new HttpDataHandler();
  46. return dataHandler.GetHTTPData(url);
  47. }
  48. protected override void OnPostExecute(string result) {
  49. SimsimiModel simsimiModel = JsonConvert.DeserializeObject < SimsimiModel > (result.ToString());
  50. ChatModel model = new ChatModel();
  51. model.ChatMessage = simsimiModel.response;
  52. model.IsSend = false;
  53. mainActivity.list_chat.Add(model);
  54. CustomAdapter adapter = new CustomAdapter(mainActivity.list_chat, mainActivity.BaseContext);
  55. mainActivity.list_of_message.Adapter = adapter;
  56. }
  57. }
  58. }

Step 14

We need permission for internet. Let's open Solution Explorer and go to Properties-> AndroidManifest and add the following code inside application tags.

  1. <uses-permission android:name="android.permission.INTERNET" />

Finally, we have made an app with our Simsimi chat app. Just rebuild and run the project. You will have the result like below.

Output