What does it take to build chatbot?

My answer: Firebase + API.AI + Coffee

This is what we are going to build.

chatbot demo

Let’s start with creating the layout for our chatbot.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.beast.chatbot.MainActivity">





<android.support.v7.widget.RecyclerView

android:id="@+id/recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingTop="10dp"

android:paddingBottom="50dp"

android:clipToPadding="false"

android:background="#f4f6f7"

/>





<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true">





<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginStart="10dp"

android:layout_marginEnd="5dp"

android:layout_marginBottom="10dp"

android:elevation="2dp"

android:background="@drawable/back_addtask"

android:layout_toStartOf="@+id/addBtn"

android:layout_centerVertical="true"

>

<EditText

android:id="@+id/editText"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:minHeight="50dp"

android:layout_marginStart="20dp"

android:layout_marginEnd="20dp"

android:background="#fff"

android:hint="Type a Message"

android:textSize="18sp"/>

</RelativeLayout>



<RelativeLayout

android:id="@+id/addBtn"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_alignParentEnd="true"

android:background="@drawable/back_fab"

android:layout_marginBottom="10dp"

android:layout_marginEnd="5dp"

android:elevation="4dp"

android:layout_centerInParent="true"

>

<ImageView

android:id="@+id/fab_img"

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_centerInParent="true"

android:src="@drawable/ic_mic_white_24dp"

android:tint="#fff"/>

</RelativeLayout>



</RelativeLayout>



</RelativeLayout>

msglist.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">



<TextView

android:id="@+id/leftText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:layout_alignParentStart="true"

android:text="Hello this is me!!"

android:padding="8dp"

android:textColor="#212121"

android:background="@drawable/left_background"

android:elevation="2dp"

/>





<TextView

android:id="@+id/rightText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:layout_alignParentEnd="true"

android:text="Hi!! How are you!!"

android:background="@drawable/right_background"

android:textColor="#fff"

android:padding="8dp"

android:elevation="2dp"/>





</RelativeLayout>

Now all we have to do is initialize the firebase and recycler adapter with FirebaseRecyclerAdapter.

RecyclerView recyclerView;

EditText editText;

RelativeLayout addBtn;

DatabaseReference ref;

FirebaseRecyclerAdapter<ChatMessage,chat_rec> adapter;

Boolean flagFab = true;





@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);



recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

editText = (EditText)findViewById(R.id.editText);

addBtn = (RelativeLayout)findViewById(R.id.addBtn);



recyclerView.setHasFixedSize(true);

final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);

linearLayoutManager.setStackFromEnd(true);

recyclerView.setLayoutManager(linearLayoutManager);



ref = FirebaseDatabase.getInstance().getReference();

ref.keepSynced(true);





addBtn.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {



String message = editText.getText().toString().trim();



if (!message.equals("")) {



ChatMessage chatMessage = new ChatMessage(message, "user");

ref.child("chat").push().setValue(chatMessage);



}



editText.setText("");



}

});





adapter = new FirebaseRecyclerAdapter<ChatMessage, chat_rec>(ChatMessage.class,R.layout.msglist,chat_rec.class,ref.child("chat")) {

@Override

protected void populateViewHolder(chat_rec viewHolder, ChatMessage model, int position) {



if (model.getMsgUser().equals("user")) {





viewHolder.rightText.setText(model.getMsgText());



viewHolder.rightText.setVisibility(View.VISIBLE);

viewHolder.leftText.setVisibility(View.GONE);

}

else {

viewHolder.leftText.setText(model.getMsgText());



viewHolder.rightText.setVisibility(View.GONE);

viewHolder.leftText.setVisibility(View.VISIBLE);

}

}

};





recyclerView.setAdapter(adapter);





}

Now in this part we will implement api.ai. First create an agent in api.ai and enable small talks.

Note: Small talks allows you to easily import a lot of predefined answers for simple questions and phrases like “Hi!”, “How are you?”, “Are you robot?”, “What’s your hobby?”, “How old are you?” and many-many more.

Now we will configure api.ai in our java code.

private AIService aiService; @Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main); final AIConfiguration config = new AIConfiguration("Client access token", AIConfiguration.SupportedLanguages.English,

AIConfiguration.RecognitionEngine.System);



aiService = AIService.getService(this, config);

aiService.setListener(this);



final AIDataService aiDataService = new AIDataService(config);



final AIRequest aiRequest = new AIRequest(); addBtn.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {



String message = editText.getText().toString().trim();



if (!message.equals("")) {



ChatMessage chatMessage = new ChatMessage(message, "user");

ref.child("chat").push().setValue(chatMessage);



aiRequest.setQuery(message);

new AsyncTask<AIRequest,Void,AIResponse>(){



@Override

protected AIResponse doInBackground(AIRequest... aiRequests) {

final AIRequest request = aiRequests[0];

try {

final AIResponse response = aiDataService.request(aiRequest);

return response;

} catch (AIServiceException e) {

}

return null;

}

@Override

protected void onPostExecute(AIResponse response) {

if (response != null) {



Result result = response.getResult();

String reply = result.getFulfillment().getSpeech();

ChatMessage chatMessage = new ChatMessage(reply, "bot");

ref.child("chat").push().setValue(chatMessage);

}

}

}.execute(aiRequest);

}

else {

aiService.startListening();

}



editText.setText("");



}

});

}

Implementing voice command in chatbot

public class MainActivity extends AppCompatActivity implements AIListener{ @Override

public void onResult(ai.api.model.AIResponse response) {





Result result = response.getResult();



String message = result.getResolvedQuery();

ChatMessage chatMessage0 = new ChatMessage(message, "user");

ref.child("chat").push().setValue(chatMessage0);





String reply = result.getFulfillment().getSpeech();

ChatMessage chatMessage = new ChatMessage(reply, "bot");

ref.child("chat").push().setValue(chatMessage);





}



@Override

public void onError(ai.api.model.AIError error) {



}



@Override

public void onAudioLevel(float level) {



}



@Override

public void onListeningStarted() {



}



@Override

public void onListeningCanceled() {



}



@Override

public void onListeningFinished() {



}

}

That’s it! Your chatbot is ready to talk to you.

Check out my github repository for full code of chatbot. https://github.com/divyanshub024/ChatBot