Creating the response for generating Quick Replies

We coded time script and made sure that user makes a reservation between opening time and closing time of restaurant. (Timings were decided by us for time being).

<?php

	include "myFunctions.php";

    date_default_timezone_set('Asia/Kolkata');

    //$data = json_decode(file_get_contents("php://input"), true);

    $date = myUrlEncode($_POST['date']);
	$time = myUrlEncode($_POST['time']);
	$today = date("Y-m-d");
	$opening_time = Datetime::createFromFormat('H:i', '10:00');
	$closing_time = Datetime::createFromFormat('H:i', '19:00');
	$booking_time = Datetime::createFromFormat('Y-m-d H:i', $date. ' ' .$time);
    $messages = array();

    $zero = array("interval"=>"00:30", "showInterval"=>"30 mins");
    $one = array("interval"=>"01:00", "showInterval"=>"1 hr"); 
    $two = array("interval"=>"01:30", "showInterval"=>"1 hr 30 mins"); 
    $three = array("interval"=>"02:00", "showInterval"=>"2 hrs"); 
    $four = array("interval"=>"02:30", "showInterval"=>"2 hrs 30 mins"); 
    $five = array("interval"=>"03:00", "showInterval"=>"3 hrs");


	$quick_replies[0] = array("title"=>"30 mins", "set_attributes"=>$zero);
	$quick_replies[1] = array("title"=>"1 hr", "set_attributes"=>$one);
	$quick_replies[2] = array("title"=>"1 hr 30 mins", "set_attributes"=>$two);
	$quick_replies[3] = array("title"=>"2 hrs", "set_attributes"=>$three);
	$quick_replies[4] = array("title"=>"2 hrs 30 mins", "set_attributes"=>$four);
	$quick_replies[5] = array("title"=>"3 hrs", "set_attributes"=>$five);

    $pattern = "/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/";
	if(preg_match($pattern, $time)){
		$resv_time = Datetime::createFromFormat('H:i', date($time));

		if(strtotime($date)==strtotime($today)){

			if($resv_time <= Datetime::createFromFormat('H:i', date('H:i'))){
			$messages[0] = array("text" => "Sorry! But it seems this time has already passed");
			$res = array("messages"=>$messages, "redirect_to_blocks"=>array("Time exception"));
			}

		}
		if($resv_time < $opening_time){
			$messages[0] = array("text" => "Sorry! Restaurant opens after 10 AM");
			$res = array("messages"=>$messages, "redirect_to_blocks"=>array("Time exception"));
		} else if($resv_time > $closing_time){
			$messages[0] = array("text" => "Sorry! No Reservations after 7 PM");
			$res = array("messages"=>$messages, "redirect_to_blocks"=>array("Time exception"));
		} else {
			$showTime = date("g:i a", strtotime($time));
			$attributes = array("showTime"=>$showTime);
			$messages[0] = array("text" => "What will be the time interval of stay?", "quick_replies"=>$quick_replies);
			$res = array("messages"=>$messages, "set_attributes"=>$attributes);
		}
		
	} else {
		$messages[0] = array("text" => "Umm..I couldn't understand that.");
		$res = array("messages"=>$messages, "redirect_to_blocks"=>array("Time exception"));
	}

	echo json_encode($res, JSON_UNESCAPED_SLASHES);

?>

The Problem

Before even getting the first user input we faced a problem. There were very few inbuilt validations for eg., for date, time etc. We therefore had to make scripts for that as well.

Date script PHP :

<?php


date_default_timezone_set('Asia/Kolkata');
$date = date('Y-m-d');
$maxResTime = DateTime::createFromFormat('h:i:sa', '07:00:00pm');
$currentTime = DateTime::createFromFormat('h:i:sa', date('h:i:sa'));

$allDates = array();
$quick_replies = array();

if($currentTime >= $maxResTime){
	$startIndex = 1;
	$endIndex = 7;
	$flag = true;
}else{
	$startIndex = 1;
	$endIndex = 6;
	$flag = false;
	$d = Datetime::createFromFormat('Y-m-d', $date)->format('jS M, Y(D)');
	$attributes = array("date"=>$date);
	//$quick_replies[0] = array("title"=>$d, "set_attributes"=>$attributes);
	array_push($quick_replies, array("title"=>$d, "set_attributes"=>$attributes));
	array_push($allDates, $date);
}

for($i=$startIndex ;$i<=$endIndex; $i++){
	$date = date("Y-m-d",strtotime("+$i days"));
	$showDate = date("jS M",strtotime("+$i days"));

	$d = Datetime::createFromFormat('Y-m-d', $date)->format('jS M, Y(D)');
	$attributes = array("date"=>$date, "showDate"=>$showDate);
	
	//$quick_replies[$i] = array("title"=>$d, "set_attributes"=>$attributes);
	array_push($quick_replies, array("title"=>$d, "set_attributes"=>$attributes));
	array_push($allDates, $date);
}

$messages = array();
$messages[0] = array("text"=>"On which date would you like to come?",
	"quick_replies"=>$quick_replies);
$res = array("messages"=>$messages);

echo json_encode($res, JSON_UNESCAPED_SLASHES);
?>

Understanding the algorithm

The client side of Restaurant app is a facebook messenger chat bot. This week, we started with its development.

We recognised various user inputs requied for making reservations. These were –

• Date
• Time of arrival
• Time interval to stay
• Number of members arriving
• Category of table to be chosen

We had to design an algorithm such that we could give the best possible choice for the table. It should be efficient and fulfilling all the needs.

We also designed the flow of the coversation between the user and bot. The different ways to input the user’s input was decided.  We decided to use mainly quick replies, galleries, text input.

For users convinience we decided to give food menu of the restaurant along with the reservation module.

 

Some other JSON responses

Buttons

Use this JSON to add buttons to your responses. We can set buttons to link to a block in the dashboard, open a website, or send another request to our backend. Buttons are limited to 3 items per message.

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "button",
          "text": "Hello!",
          "buttons": [
            {
              "type": "show_block",
              "block_names": ["name of block"],
              "title": "Show Block"
            },
            {
              "type": "web_url",
              "url": https://rockets.chatfuel.com/               "title": "Visit Website"
            },
            {
              "url": https://rockets.chatfuel.com/api/postback              "type":"json_plugin_url",
              "title":"Postback"
            }
          ]
        }
      }
    }
  ]
}

Messenger also supports specialised buttons:

• The Call button dials a phone number when tapped.
• The Share button opens a share dialog in Messenger enabling people to share the bot message with their friends. (Gallery template only)

Setting user attributes

Use this JSON to set user attributes for a user depending on the button they tap.
(show_block  or json_plugin_url  only)

{
  "set_attributes": 
    {
      "some attribute": "some value",
      "another attribute": "another value"
    },
  "block_names": ["Block 1"],
  "type": "show_block",
  "title": "Go!"
}

Redirect to blocks

We can redirect a user to a block or to a sequence of blocks — no user action is needed.

{
  "redirect_to_blocks": ["Welcome message", "Default answer"]
}

Responses of Chatfuel

Sending text

{
 "messages": [
   {"text": "Welcome to the Chatfuel Rockets!"},
   {"text": "What are you up to?"}
 ]
}

Sending images

{
  "messages": [
    {
      "attachment": {
        "type": "image",
        "payload": {
          "url": https://rockets.chatfuel.com/img/welcome.png        }
      }
    }
  ]
}

 

Sending video

{
  "messages": [
    {
      "attachment": {
        "type": "video",
        "payload": {
          "url":https://rockets.chatfuel.com/img/welcome.png        }
      }
    }
  ]
}

Dynamicity of Chatbots

Today, I explored how chatbot at chatfuel will work with dynamic content. By reading a lot of documentation and examples we were able to make out how request will be made and responses will be delivered.

Chatfuel uses JSON API – this plugin enables your bot to send HTTP GET and POST requests and interpret responses.

It allows us to

• Generate dynamic content
• Get and set user attributes
• Redirect users to another block in the bot
• Create postbacks

 

In  responses, we can

• combine several messages in one answer by sending several dictionaries in the messages array.
• use any content type header.
• send an empty response to not show the user any dynamic content.

A beginning with Chatfuel…

Along with development of admin side Restaurant app, we had to make a client side interface. We were assigned the task of creating facebook chatbot for client side rather than a website or android app for reserving tables.

We searched on internet about platforms. We found the best one to be Chatfuel.

 

This was completely new to us. There are some sample chatbots which chatfuel provides. There are various chatbot templates – marketing, restaurant, famous ones like – techcrunch user’s template, quiz template by livebotter.

We are going to explore something new and definitely it’s gonna be interesting 😃

 

Working with E-commerce template

We can make different blocks which will execute as soon as user takes a developer’s defined action. Although we have a little idea about how they work..I think there’s a long way to go.

The response reference can be of many types – sending text, images, video, audio, files, galleries, buttons, lists etc.

We took the e-commerce template – modified it and played with it.

The development phase was somethng like this –

Here are the output screens –

 

 

Entered into the world of Chatbots…

The simple definition of Chatbot : A chatbot is a computer program designed to simulate conversation with human users, especially over the Internet.

We have come across Chatbots many times while using applications such as ecommerce customer service, call centers and Internet gaming. Chat bots used for these purposes are typically limited to conversations regarding a specialized purpose and not for the entire range of human communication.

There are several chatbot development platforms eg. Dialogflow , Chatfuel.

I am crazy to learn these platforms.. 😄

Finally…the Dashboard layout

Our working project was ready. Only thing which was remaining was the dashboard’s layout. We went through many ideas in Pinterest about UI design in android related to dashboards. If anyone wants the idea for UI, definitely go through this site. You will get confused 🤔 seeing so many beautiful screen designs. This site is definitely going to help the UI Lovers.

Finally, after lot of struggling with appropriate layout to show 6 items in the dashboard, we ended up with this layout –