DEV Community: Dhruv Rajkotia

RGB color picker using HTML & Bootstrap

Dhruv Rajkotia — Sun, 03 Apr 2022 07:45:08 +0000

Today, I have created a RGB color picker using the HTML and Bootstrap. It was kind of fun and completed this within the 10 minutes of the development.

Here is the LIVE DEMO

Technologies that used to build this demo

HTML
CSS (Inline)
Bootstrap 5
Javascript(A few lines)

Code snippet

Here is the link of the code snippet if you wanted to have a look at the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB Color Chooser</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="background-color: black;">
    <header>
        <h1 class="text-center my-4 font-monospace text-white">RGB COLOR PICKER</h1>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div id="result" class="shadow rounded col-md-4 d-flex justify-content-center p-5 my-5" style="background-color: rgb(127,127,127);">

            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">RED</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">GREEN</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange2" oninput='OutputIdGreen.value = customRange2.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdGreen">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">BLUE</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange3" oninput='OutputIdBlue.value = customRange3.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdBlue">127</output>
            </div>
        </div>
    </div>

    <script>

        function changebackground(){
            document.getElementById('result').style.backgroundColor = 'rgb(' + document.getElementById("OutputIdRed").value + ',' + document.getElementById("OutputIdGreen").value + ',' + document.getElementById("OutputIdBlue").value + ')';
        }
    </script>
</body>
</html>

Key Points to learn with this demo

Bootstraps Classes
Display Scroll value without using the javascript.

So If you have checked the code,

<input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
<output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>

So here we are showing the scroll value that user has selected. So for that we have used the oninput field and set the user selected value in the output field.

Conclusion:
Today, We have created a small demo where user can see the actual color based on the RGB values. We have created that demo using the HTML and Bootstrap. Also we have covered the key points that we can learn from this small demo which has developed within the 10 minutes😀. Hope you liked it and learn something new today.

I'm also posting some useful content on twitter. So You guys can follow me there. Link

TOP 5 NLP Platforms for AI Chatbots

Dhruv Rajkotia — Fri, 01 Apr 2022 04:26:55 +0000

Currently, we are living in the world where we regularly dealing with the chatbots/messaging apps like WhatsApp, Instagram etc. Now a days a lot of businesses uses the chatbots for there business marketing through this messaging platforms like WhatsApp, Instagram, Facebook etc. Isn't it great like if you wanted to book an appointment for the doctor visit which can be done via a simple bot. Sound interesting right?

So today we are discussing about What is a Chatbot and Top 5 NLP platforms which helps to create a most intelligent AI chatbots to make human life better.

Let's first talk about What is Chatbot?
A chatbot is a computer program that simulates and processes human conversation (either written or spoken), allowing humans to interact with digital devices as if they were communicating with a real person.

So Now questions arise 🧐, How those bots are developing. So most intelligent chatbots are built with NLP and NLU technology.

NLP (Natural Language Processing)

NLP or Natural Language Processing consists in the processing of natural language by machines.

NLU (Natural Language Understanding)

NLU is a sub-component of NLP which consists in this case of adding statistical learning (Machine Learning). The NLU intervenes to identify the intentions and meanings of natural language, to basically understand what the user is saying. In order to achieve this, NLU algorithms use NLP.

So for building the chatbots some companies has developed a low code/no-code NLP platform for developer to build a great chatbot. So let's talk about what is NLP platform?

NLP Platform

A NLP platform is a SaaS (software as a service) that proposes NLP algorithms to integrate conversation interfaces with chatbots or other types of applications.

Hope you guys are with me till yet, Now probably you are thinking how many NLP platforms are in the market and which platforms are leading the chatbot market. So here you go 😀.

Top 5 NLP platforms for your chatbot

1. Dialogflow

Dialogflow is developed by the Google. So the main advantages of this NLP platform are.

Different pricing including a freemium version
Channel specific answers are customisable to each of your channels can display the most suitable response.
Many channel integrations are available (ie: Messenger, Twilio, Slack)
In build conversation history and analytics based on the user's conversations
Multi-lingual supports
System as well as custom entity to capture the required information from the users.
Create custom dashboards for analytics using the Big-query and data-studio based on the Conversation logs
A test interface is available with the following text features: utterance, engine responses, contexts, intent, action, detected entities, values, JSON streams.
For more info: Dialogflow

2. Witai

Witai is developed by the Facebook. So the main advantages of this NLP platform are.

No difference between intent and entity as all actions are intents
Open source
Logs of past conversation history in the form of a chat dialogue.
Management of a very large number of languages (multi language) 58 languages
For more info: Witai

3. IBM Watson

IBM Watson is developed by the IBM. So the main advantages of this NLP platform are.

Different pricing starting with freemium
Automated named entity recognition
Full query history
Multilanguage on the most used languages in the world
For more info: IBM Watson

4. Rasa NLP

Rasa NLP is developed by the Rasa Enterprise. So the main advantages of this NLP platform are.

Open-source
Requires programming knowledge
Can be installed on premise as well as used as Saas Specialized in customer experience
For more info: Rasa NLP

5. Amazon Lex

Amazon Lex is developed by the Amazon. So the main advantages of this NLP platform are.

Tagging of model versions, intents or entities.
Tagging of entities in intents in an explicit way by indicating slots.
Evolutive pricing starting from freemium.
Supports 6 different languages
For more info: Amazon Lex

Conclusion

Today we have covered What is chatbot and Top 5 low code NLP tools that can help us to build a great AI chatbots(🤖) and make human life much better(🤩).

Please follow me on Twitter for more updates regarding the programming cool stuff😄. Have a great day.

Which Python Framework is fastest?

Dhruv Rajkotia — Thu, 30 Dec 2021 12:29:26 +0000

Now a days, we have seen an usage of the web development is increased a lot & along with that Python language is became the world's 2nd most popular programming language based on it's usage. Python has grown to become one of the most popular server-side languages on the Internet. According to W3Techs, it is used by more high-traffic sites than ColdFusion, PHP, ASP.NET And Java. Even Tech giants like Google, Facebook, Netflix, Microsoft all have started using the Python as a server side language for their applications.

Today, there is a wide variety of Python frameworks that make creating web applications much easier. These frameworks bring together the modules and packages that allow you to build applications quickly, without the need to take care of involved details, like sockets and protocols, all in one place.

Top Python Frameworks

Django
Flask
FastAPI
CherryPy
Bottle

To know more Python frameworks visit here

Now our questions arise, which python framework is fastest among all the python frameworks. Based on the Techempower listing, Fastest Python Framework is "FastAPI".

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints.

The key features are:

Fast: Very high performance, on par with NodeJS and Go. One of the fastest Python frameworks available.
Fast to code: Increase the speed to develop features by about 200% to 300%. *
Fewer bugs: Reduce about 40% of human (developer) induced errors. *
Intuitive: Great editor support. Completion everywhere. Less time debugging.
Easy: Designed to be easy to use and learn. Less time reading docs.
Short: Minimize code duplication. Multiple features from each parameter declaration. Fewer bugs.
Robust: Get production-ready code. With automatic interactive documentation.
Standards-based: Based on (and fully compatible with) the open standards for APIs: OpenAPI (previously known as Swagger) and JSON Schema.

You can check the full documentation here

I do recommend to check the documentation and use this framework for one of your microservice.

Summary
As there are so many Python frameworks available in the market, we first need to identify which framework we should use to build our web applications. So we need to identify which Python framework is best, easy and fast. Python FastAPI is one of the fastest and come up with so many good features which reduce the development efforts. So I would highly recommend to use this framework for one of your next web services. Hope you liked it. Have a Great Day.

How to get rid of code formatting

Dhruv Rajkotia — Sat, 25 Dec 2021 08:31:06 +0000

As a Developer, We used to be in the situation to format the code after writing it. It became very frustrating when we have written the tons of lines of code and then we need to format it. So Isn't it better if we use some IDE extension to solve our issue🤪. Yes, Correct in this blog we are going to discuss one of the best formatting extension for VS Code that I'm using it regularly. It's Prettier Extension. I'm sure you guys gonna loved it once start using it :).

What is Prettier?

Prettier is an opinionated code formatter with support for:

JavaScript (including experimental features)
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, including GFM and MDX
YAML

Benefits Of Using Prettier

Code consistency across all the files that you have worked
Easily format the old code base if you are working on any new features with the same file
Prettier support the pre-commit Hook which can re-format your files that are marked as staged. Ref
Easy to adopt
Reduce overall development time
Prettier provide functionality to ignore some of the files that we don't want to format.
It reminds me of how Steve Jobs used to wear the same clothes every day because he has a million decisions to make and he didn’t want to be bothered to make trivial ones like picking out clothes. I think Prettier is like that.😃

How to install in VS Code

As I'm mostly using the VS Code so I'll take VS Code IDE example for explaining the setup of the prettier extension. You can check other IDE setup here

Step-1: Open Visual Code Editor

Step-2: Go to Extension tab and search for the Prettier

Step-3: Install Extension. (It may takes few seconds 😉)

Step-4: Go to settings or use the command (Ctr + "," or Command + "," (mac users 😏))
In this step we are going to configure to format code when we save the file. You may find the below screen.

Perform the below operations:

Set Prettier-Code formatter as Default Formatter (Take reference from above screenshot)
Enabled Format On Save option
There are some other options if you want then you can enabled it.

Step-5: Now let's test it.
Now let's add some extra space like below code.

Now if you save the file then it'll automatically remove the extra spaces and format the code of that file. Hope you see the magic 😄.

Ignore certain files and folder completely Feature
We can achieve it using the 2 methods

Use .prettierignore to ignore (i.e. not reformat) certain files and folders completely. To exclude files from formatting, create a .prettierignore file in the root of your project. .prettierignore uses gitignore syntax.

# Ignore all HTML files:
*.html

Use “prettier-ignore” comments to ignore parts of files. Here we can add the comment above the code lines to ignore the parts of the file. It's normal like a comments based on the language. for more info check here

For more info you can check the below links regarding the features

Summary

Today, we have covered how to add the Prettier extension to our IDE for getting rid of code formatting and reduce the development time for most used programming languages. I have been using it for a long time and I really liked it. Once you start using it you'll definitely liked it. Hope you learn something new today😀.

Please follow me on Twitter for more updates regarding the programming cool stuff😄. Have a great day.

Make Cloud Storage Objects Publicly Accessible

Dhruv Rajkotia — Wed, 15 Dec 2021 06:17:33 +0000

Recently, I'm working on the website development and I wanted to store some of my images in the cloud so that I can easily access those images using the public link.😄

So I thought🤔 to go with the google cloud services for the same, But by default the public access of the GCP storage objects is disabled in the Cloud Storage services. To access using the public URL we need to perform some steps. So today we are going to discuss about the same like how we can enabled the public access URL for cloud storage objects.

Step 1: Create GCP storage bucket

First of all go to https://console.cloud.google.com/
Search Cloud storage and select the service from suggestions
Click on the Create Bucket option
Provide name of your bucket
Click Continue and select the region and location based on your requirement. For me It's Multi-region & Asia
Then Click continue and select the default storage class for your data. I'll choose standard as I need the frequent access to my data.
For the next step we need to choose how to control access to objects option which is basically an access mechanism for the bucket's object.

We have 2 options:

Uniform: Means that access mechanism will be at the bucket level so all the objects of the bucket will have a same access mechanism

Fine-grained: Here we can manage access at the object level so if we have a requirements like some object can be accessible and some of them are not then we can select this one.

I'll choose the first option as I want the access management at the bucket level so I can easily manage of my all the objects access management.

Last step for the bucket creation is Choose how to protect object data. Let's keep it as a none for now as we don't have any specific requirement regarding the protect object data.
Click on the create button, So now your bucket will be created.

Step 2: Upload the objects/data that you want to access publicly
Now the next steps is to upload the objects/data. So that we can make it public and use it further in our applications/website based on our requirements.

Step 3: Check the object configurations
Now let's first check the object configuration and check how we can identify that the object is publicly available or not.

When you click on the object configuration then you may find the below screen.

Here if you check Public URL option, which has Not applicable as a value. So it means that this object can only be access by those users who has the access to the cloud bucket which you can check on IAM. So this object will not be publicly accessible. So Now let's move to the final step for how we can make that object publicly accessible.

Step 4: Make Object publicly accessible
Now let's go to the cloud bucket main page. Click on the browser in the left panel of the GCP console and select the bucket that you have created.

You probably on the below screen. (May be our bucket name and regions will be different 😀)

Now let's go to the Permission tab. Click on the Add permission button.

Provide New principals as a allUsers and Role as a "Storage Legacy Object Reader"

Click on the Save button which leads to open the new popup for confirmation. Select the Allow Public Access.

Congratulations, now you have enabled the public access to your buckets which means that all the objects in that bucket can be publicly accessible.

Step 5: Test the accessibility of the Object
Now let's go to the object configuration and check the public URL field. Now we have a link associate with the public URL field which is our publicly accessible link. Using that link we can able to access the object publicly. 🤟

That's it. Congratulations now you know that how to make cloud storage objects publicly accessible.

Hope you liked it 🤞. Please Follow me on twitter for more updates regarding my blogs. Have a great day :)😉.

Automation Script for the Flight Searching

Dhruv Rajkotia — Sat, 13 Nov 2021 08:27:46 +0000

How's it going guys😀, Today I wanted to share you how to write an automation script for any website. for this example I'm going to use the example of the Google Flight(https://www.google.com/travel/flights).

Step 1: Download the latest chrome driver

Go to https://chromedriver.storage.googleapis.com/index.html?path=95.0.4638.69/

Download the chrome driver based on your OS(I'm using Windows💻)

Step 2: Clone repository and setup virtual env

Clone repo: https://github.com/dhruvrajkotia/automation_scripts

git clone git@github.com:dhruvrajkotia/automation_scripts.git

cd automation_scripts

python -m venv (I'm using Python 3.9)

pip install -r requirements.txt (Install all requirements)

Put your chrome driver in the chrome_driver directory in the project.

Great👏, You have setup the Project.

Step 3: Run Python Script

python google_flights_automation_script.py

You can see that one new browser window will shown up and search for the flight based on the parameters that we have provided in the script.

Now you have successfully configured the script in your local file. Now let's talk about the script logic and how it's working. Hope 🤞 you enjoyed to see the result of the Automation script.

Code Explanation



import time
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By

So here we are using the selenium library for automation script. Selenium is one of the best library available for the Python Automation script. for more information check it out the official documentation of the selenium: https://selenium-python.readthedocs.io/



chromedriver_location = "chrome_driver/chromedriver.exe"  # Path of chrome driver script. OS: windows

Here we have provided the path to the chromium driver.



# test inputs
site = "https://www.google.com/flights?hl=en"
source_city = "Ahmeda"
destination_city = "Mumbai"
departure_date = "2021-11-21" # YYYY-MM-DD
return_date = "2022-02-27"


# XPATH List of the UI elements
source_city_XPATH = "//*[@id='i6']/div[1]/div/div/div[1]/div/div/input"
dropdown_selection_XPATH = "//*[@id='i6']/div[6]/div[2]/div[2]/div[1]/div/input"
destination_XPATH = "//*[@id='i6']/div[4]/div/div/div[1]/div/div/input"
departure_date_XPATH = '//*[@id="yDmH0d"]/c-wiz[2]/div/div[2]/div/c-wiz/div/c-wiz/div[2]/div[1]/div[1]/div[2]/div[2]/div/div/div[1]/div/div/div[1]/div/div[1]/div/input'
return_date_XPATH = '//*[@id="yDmH0d"]/c-wiz[2]/div/div[2]/div/c-wiz/div/c-wiz/div[2]/div[1]/div[1]/div[2]/div[2]/div/div/div[1]/div/div/div[1]/div/div[2]/div/input'
search_button_XPATH = '//*[@id="yDmH0d"]/c-wiz[2]/div/div[2]/div/c-wiz/div/c-wiz/div[2]/div[1]/div[2]/div/button'
calendar_date_XPATH = '//div[@data-iso = "{date}"]//div[@class="lkvzbb KQqAEc"]'
calendar_submit_button_XPATH = '//*[@id="ow59"]/div[2]/div/div[3]/div[3]/div/button'

Here we have defined the static test input which will fill the values in the google flights website via script.

we have defined the XPATH for the UI component which will help us to fill the test values using automation script.



    driver = webdriver.Chrome(chromedriver_location)
    driver.maximize_window()
    driver.get(site)  # Open Site in new chrome window

So using above code new chrome window will open and then maximize the size of the chrome window to full size and open the site that we have configured in the test inputs. (https://www.google.com/flights?hl=en)



   # source_city selection steps
    fly_from = driver.find_element(By.XPATH, source_city_XPATH)
    fly_from.click()
    fly_from_text = driver.find_element(By.XPATH, dropdown_selection_XPATH)
    fly_from_text.send_keys(source_city)
    fly_from_text.send_keys(Keys.ENTER)

So here we first find the source city element. For that you need to open the site and open the inspect window. Select the element and copy the XPATH for the element.(How to find XPATH: https://www.browserstack.com/guide/find-element-by-xpath-in-selenium) After then we click on that div so the dropdown will be open where we can search for the city name.



  # destination_city selection steps
    fly_to = driver.find_element(By.XPATH, destination_XPATH)
    fly_to.click()
    fly_to_text = driver.find_element(By.XPATH, dropdown_selection_XPATH)
    fly_to_text.send_keys(destination_city)
    fly_to_text.send_keys(Keys.ENTER)

For the destination city, we are going to follow the same sequence.



# departure_date selection steps
    departure_date_element = driver.find_element(By.XPATH, departure_date_XPATH)
    departure_date_element.click()
    time.sleep(2)
    calendar_div = driver.find_element(By.XPATH, calendar_date_XPATH.format(date=departure_date))
    calendar_div.click()

This is for the calendar picker, to pick the calendar date. So here we first open the calendar by clicking on the div. and select the date.

Here we are going to use the one of the element in div which is data-iso, which has the date in the format of YYYY-MM-DD . So based on that we can select the appropriate date.

calendar_date_XPATH = '//div[@data-iso = "{date}"]//div[@class="lkvzbb KQqAEc"]'

The same way we are going to perform for the return date.



 # return_date selection steps
    return_date_calendar_div = driver.find_element(By.XPATH, calendar_date_XPATH.format(date=return_date))
    return_date_calendar_div.click()

Once we added all the information we need to click on the Done button in the calendar picker.



 # click on the Done button in calendar picker
    submit_button = driver.find_element(By.XPATH, calendar_submit_button_XPATH)
    submit_button.click()

So, Yeah Congratulations, You probably understood all the concepts regarding automation script for flight search.

Hope 🤞 you liked it, Feel free to reach out to me if you have any doubts.

Please Follow me on twitter, I'm regularly posting some information regarding the ChatBot development, NLP, Python, NodeJS. Glad to connect with you.

Deploy NodeJS Application within 5 minutes

Dhruv Rajkotia — Thu, 04 Nov 2021 14:13:17 +0000

Now a days a lots of people are working on a side projects or the PoC(proof of concept) to showcase their work with rest of the world. For showing your work to rest of the world it required a deployment cost and also the person should have a knowledge regarding the deploying their apps to some server. Looking a bit weird 😟, right? Here I have come up with the quick solution for you guys. How we can deploy our NodeJs application within 5 minutes using App Engine.

Google App Engine is a cloud computing platform as a service for developing and hosting web applications in Google-managed data centers. App Engine offers automatic scaling for web applications—as the number of requests increases for an application, App Engine automatically allocates more resources for the web application to handle the additional demand.

Google App Engine primarily supports Go, PHP, Java, Python, Node.js, .NET, and Ruby applications, although it can also support other languages via "custom runtimes". Here we are going to use the Standard environment provide some free quota which can be enough for showing our work to the world.🤙

Step 1

First step is to create your own NodeJS project that you wanted to deploy using App Engine

Here is link of the sample boiler plate code for the NodeJS application. Link

You can clone (hint: git clone ) this repo in your local and our step 1 is done 👏.

Step 2

We need to create a GCP project to deploy our Node application.

Go to https://console.cloud.google.com/cloud-resource-manager
Click on the create new project
Provide Project name and location
Click on the Create button.

Note: Make sure you have enabled the Cloud Build API and Enabled the Billing for your GCP project

You probably see that new project will be created. Congratulations 👏 you have passed the 2nd stage 💪. To be honest you nailed it.😄.

Step 3

Download Cloud SDK installer & setup our GCP project in local

Follow the steps mention in the official document of the Google.
Link

Once you have downloaded the Cloud SDK then go to the location of your repository.

1: Run the command: gcloud init
You probably see the below screen. (You may have some less options which I have in the below screenshot)

2: Select Create a new configuration option.

3: Copy Project ID from GCP Console.

4: Provide that project ID in Command prompt.
Probably you'll see the below screen.

5: Login with your Google Account

After that, Select Login with the new account option. So You'll be redirect to the new browser window for login. Login using the same account in which you have created your GCP project.

6: Select the project ID

Select the option for your project id. You'll see the success message in the CMD.

Congratulations guys, You just completed almost 80% 👍

Step 4

Create app.yaml file

Create new file at the root level of the project structure.

Add below code snippet in your app.yaml file

runtime: nodejs16

for more info regarding the app.yaml file, please have a look here

Step 5

Run Deploy Application Command

Run Below command to deploy your application in APP Engine

gcloud app deploy
Select the region of your APP Engine deployment

You'll see the App Deployment is in progress, Once it's done you'll get the public URL of your application which you can use it anywhere you want.

You'll see the below screen once deployment is done.

Open the URL mentioned in the response(For me: https://dhruv-rajkotia.uc.r.appspot.com/)

Note: Here you can also use the gcloud app browse command which open URL in the new browser window.

That's it, You have come too far to learn the deployment with App Engine. Hope 🤞 you liked it.

Please Follow me on Twitter to get update regarding upcoming blogs. Glad to connect with you guys😊.

Partial Response Feature in Dialogflow CX

Dhruv Rajkotia — Mon, 25 Oct 2021 13:47:29 +0000

Dialogflow CX short for Dialogflow Customer Experience is a recent launch from Google in December 2020. It provides a new way for designing agents, taking a state machine approach to agent design. This gives you a clear and explicit control over a conversation, a better end-user experience, and a better development workflow. The older version of Dialogflow which is Dialogflow ES short for Dialogflow Essentials is still supported but the Dialogflow CX should allow chatbots with higher complexity to be built more seamlessly using a visual editor and not require one to write complex code.

With Dialogflow CX, Google has come up with a lots of new features and overcomes some of the limitation of the Dialogflow ES. Today we are going to discuss about the one of the feature of Dialogflow CX which is the partial response. You probably have seen that option when setuping webhook in Dialogflow CX. Let's have a deeper discussion on that.

What is Partial Response? Why we need it?

Sometimes we got into a problem where API takes more time to respond back to the end users and if we need to integrate those API in our bot then probably it's not a good experience to the end users as they need to wait until the API response. Let's understand this issue with some practical example.

Like, If we have food ordering bot and user has reached to payment flow. User has asked "what is my bill amount?". So here we need to go back to our system and generate bill for the user. So let's assume that our generate bill API takes more than 5s(Dialogflow CX support the webhook timeout till 30s). So here user needs to wait until the API response which may feels user like Is he/she disconnected? or what happened to bot? which leads to a very bad user experience.

To overcome this problem Dialogflow CX comes up with partial Response feature which has ability to notify users while we are fetching details through webhook. notify users and fetching details from webhook will perform parallel. So here we can notify users with some text like "One moment please while I look that up." So using end user will notified while we are fetching details in backend.

How to add partial response in Dialogflow CX

Step 1

Go to the Route which has the webhook integrated. like from which route you are going to call your webhook. For reference I have attached a screenshot below.

Step 2

Add the fulfillment message for that route as per the screenshot. (One moment please while I look that up.)

Step 3

Enabled Return Partial Response option.

That's it, you have configured the partial response successfully.

Now let's have a quick test.

Go to your Simulator and click on the 3 dots setting and enabled the partial response option. please take reference from screenshot.

Now try with your query which execute the route and call the webhook. After some time you'll received the defined message from bot site before your webhook success message.

Hope you liked this blog. Please FOLLOW me on Twitter to get notified regarding my upcoming blogs. Have a nice day..!!

Steps to create your own Facebook Messenger chatbot

Dhruv Rajkotia — Thu, 21 Oct 2021 08:20:54 +0000

What is a Chatbot? Why it's important?

A chatbot is an artificial intelligence software that can simulate a conversation (or a chat) with a user in natural language through messaging applications, websites, mobile apps or through the telephone. It's more like a replacement of the human services to a bot which can understand the user requirement and provide assistance at any time with very low cost.

A chatbot is often described as one of the most advanced and promising expressions of interaction between humans and machines. However, from a technological point of view, a chatbot only represents the natural evolution of a Question Answering system leveraging Natural Language Processing (NLP). Formulating responses to questions in natural language is one of the most typical Examples of Natural Language Processing applied in various enterprises’ end-use applications.

Now a days we are seeing that social media platforms are becomes a crucial part in our lives and also beneficial for business perceptive. So today we are going to discuss regarding the How we can create our own Facebook messenger chatbot using Dialogflow CX.

Step 1: Create Facebook App

First, we need to create a developer app for the Facebook.
Go to https://developers.facebook.com/ and login using your Facebook credential.

Click on My Apps and then you will redirect to the Developer console. Now we need to create a new app for this demo. Click on the Create App button on top right corner of the console. One you click that you can see the below screen.

Select App type based on your requirement. For this I'll go with the Business option. Click on the Next and you'll redirect to below screen.

Provide the below details:

App Name: (I have provided as a Claudio)
App Purpose: (I have selected Yourself or your own business)
Business Manager Account: If you have created any business account then you can use that or you can ignore this one.

Click on Create App button. App will be created and you will redirect to the App Dashboard.

Step 2: Create Facebook page

Go to https://www.facebook.com/ and click on the Pages tab from left panel. Now click on the create New Page from left panel.

Provide the page name and the category:
Page name: Claudio ChatBot
Category: Entertainment website (You can choose whatever you want)

Click on the Create Page button.

Now click on the Add action button and select the Send Message Action button. Remove the pre-prompted question and click on Save.

Now we are all set regarding the Facebook Page setup. Now let's move on to setup Dialogflow bot.

Step 3: Create Dialogflow CX Agent

Here, We are going to create a Dialogflow Agent for our Facebook bot. For the demo purpose we are going to develop very simple flow in which bot will ask the Name and Phone number to user. Here you create a Dialogflow Agent based on your requirements.

Please download the agent blob file from here. https://drive.google.com/file/d/1AMID0_v4Qa2oUoQYYilLL5N5jT5mwGA-/view?usp=sharing

Import Agent file using the Dialogflow console. https://cloud.google.com/dialogflow/cx/docs/concept/agent?hl=en#export

Step 4: Connect Dialogflow CX Agent with Messenger

Click on the Manage tab in Dialogflow CX Console.

Click on the Integration option from the Menu list.

Now Click on the connect button for the Facebook Messenger card. You'll see the below screen as a popup.

Add below details in the popup.

App Secret: Go to the Facebook developer console and then go to Settings -> Basic option.

Get the App secret and add the value here.

Page Access Token: Go to Messenger -> Settings -> Access Tokens section.

Click on the Add or Remove Pages
Select your page (Cloudio Chatbot) and then save changes.
You can see the below screen after performing the above steps.

Now click on the generate token and copy the page access tokens from popup.

Paste page access token in you dialogflow messenger bot connect popup.

Verify token: Add verify token as a random string which will help us in the next step for the webhook verification.(I have added as a dhruv123.)

Now click on the start button so you'll see the below screen on the same popup window.

Copy the Webhook URL and go to the Developer Console -> Messenger -> Settings -> Webhooks section.

Paste Webhook URL as a Callback URL value and along with that add the verification token that we have added in the previous step. (dhruv123).

Click on the verify and save.

After that Click on the Add Subscriptions option and checkmark messages and messaging_postbacks options.

That's it. Now your Facebook Messenger bot is up and running. Go to the messenger and search for your page (Claudio-ChatBot) and start conversation by sending hi message.

You can see the bot will send you welcome message and conversation is started as per expectation.

Thanks for reading this blog and Hope🤞 you liked it.

Please FOLLOW me on twitter to get notify for my upcoming blogs regarding Deeper Dive into Dialogflow CX.

Difference between Dialogflow CX vs Dialogflow ES

Dhruv Rajkotia — Sat, 09 Oct 2021 14:37:16 +0000

Google Dialogflow has introduced Dialogflow CX in December 2020. It is a powerful tool to build virtual agents. So Now Dialogflow has 2 versions one is Dialogflow ES(Older Version) and New is Dialogflow CX. So Now we have basic question arises what is a difference between Dialogflow versions(CX vs ES).

Dialogflow ES supported a flat structure of intents and implicit controls for conversation flows, mainly using contexts. This approach didn't scale well for building, understanding, and maintaining large agents with complex conversation flows.

Dialogflow CX addresses these issues by providing conversation flow controls in a more explicit and structured way. CX follows graphical structure which allows designing of complex conversation flows.

Notable Features of Dialogflow CX

Visual Flow Builder

A new visual builder makes building and maintaining agents easier. Conversation paths are graphed as a state machine model, which makes conversations easier to design, enhance, and maintain.

Console overview: https://cloud.google.com/dialogflow/cx/docs/concept/console

Reusable Intents

One of the main features of the CX is the Reusable Intents. Fulfillment is decoupled from intents, making intents a truly reusable component for multiple different conversational flows.

In Dialogflow ES intent is tightly coupled with the fulfillment so it's too difficult to reuse it.

Separate Flows for Easier Collaboration On Agents

Separate flows let multiple teams work simultaneously. With Flows, you can partition your agent into smaller conversation topics. Different team members can work on different flows, which make Virtual Agent development very easy for the more complex conversation flow. Also It has versioning support at the flow level so you can run multiple versions based on your environments. In short, It allows modularization of bot for ease of management.

For example, If you are creating an Agent for the Restaurants booking then it may create flows like order confirmation, order booking, Get Customer Details etc. So Here you can give the individual flows to different teams and speed up the development of the virtual agent.

For more information regarding Flows: https://cloud.google.com/dialogflow/cx/docs/concept/console

State Based Data Model:

A state-based data model allows us to reuse intents, intuitively define transitions and data conditions, and handle supplemental questions.

You can set conditions for each flow. A conditional trigger determines how the route will occur. For example, if a parameter equals a specific value, or if all parameters have been filled then route to the specific page or flow. I'll cover this topics in details for upcoming blog with some examples.

Parameters feature enhancement

In Dialogflow CX thwy have come up with mainly 3 types of parameters.

Session Parameters
Dialogflow Stores all the captured parameter through out the session so you can use the specific parameters in further flow. This feature in not available in the Dialogflow ES but you can do it via setting the long output context in Welcome intent.
Intent Parameters
Intents use parameters to extract data provided by end-users when intents are matched. The following data is used to define an intent parameter. Due to the short-lived life span of intent parameters, Dialogflow recommended to use the session parameters.
Form Parameters
For each page, you can define a form, which is a list of parameters that should be collected from the end-user for the page. It's kind of similar to the ES Slot fillings.

For more information regarding parameters: https://cloud.google.com/dialogflow/cx/docs/concept/parameter

Note: I'll create a separate blog to explain the dialogflow parameters with examples.

Now that we have explored the newest features of Dialogflow CX, let’s look into the comparison between Dialogflow CX vs ES.

Category	ES Agent	CX Agent
Editions	Dialogflow Essentials Edition	Dialogflow CX Edition
Definition	This is the standard agent type that is suitable for small to medium and simple to moderately complex agents. Intents are the building blocks of conversation design, and contexts are used to control conversation paths. The ES agent type is summarized in Dialogflow ES basics.	This is an advanced agent type that is suitable for large or very complex agents. Flows and pages are the building blocks of conversation design, and state handlers are used to control conversation paths. The CX agent type is summarized in Dialogflow CX basics.
Agents per project	1	100
Recommended agent size	Up to medium size agents	Up to very large
Recommended agent complexity	Up to moderately complex agents	Up to highly complex
Integrations	Many different telephony as well as text based integrations are available. Dialogflow ES supports telephony integrations with Genesys, Avaya, etc. Also possible to integrate with many popular conversation platforms like Google Assistant, Slack, Facebook Messenger, Kommunicate, and Google-contributed open-source integrations.	Telephony integrations are available only for Avaya, Voximplant, Audio Codes and text based integrations are available for Dialogflow Messenger, Facebook Messenger and Line. The support for the rest of the platforms is not available yet.
Language Support	Language support available for multiple languages.	Language support available for fewer languages than DF ES.
History feature	The History page shows a simplified version of the conversations your agent has engaged in. These logs are chronological and intended to be an overview of how users interact with your agent.	Not available in DF-CX
Agent building blocks	Flat structure of intents	Graph structure of flows and pages
Conversation control	Linear conversation paths that simulate nonlinear paths using intents as nodes and contexts to control paths	State machine model with explicit conversation control using pages as nodes and state handlers to control paths
Console user experience	Mostly text forms	Visual graphs showing conversation paths and text forms for configurations
Intent reusability	Intents are coupled with fulfillment, events, and responses; specific to a conversation state, so difficult to reuse	Intents are simplified to remove this coupling and made highly reusable
Webhook Error handling	Errors quietly ignored by agent, passed to API caller if present	Explicit error event handling built-in to your agent
Parameter scope	Can be scoped to intent, context, or event	Can be scoped to intent, form, or session
Pricing	Pricing is more granular More economical. For Text: Production-ready quota $0.002 per request, For Audio input: Production-ready quota $0.0065 per 15 seconds of audio, For Audio output: Production-ready quota $4 to $16 per million characters	Pricing is simplified 2.5 - 3 times higher than DF-ES For Text: 1200 requests per minute $20 per 100 chat sessions, For Audio input/output: 600 requests per minute $45 per 100 voice sessions

Conclusion

In conclusion, DialogFlow CX is an improved version of the Dialgoflow ES. CX has resolved all major drawbacks of the Dialogflow ES like improvement in slot filling, event handlers, parameters etc. But still it come up with the very high pricing rate as compare to ES. Based on my opinion both version has it's prons and cons. If you have very complex conversation flow then I suggest to go with the Dialogflow CX otherwise for simple flows Dialogflow ES is good enough.

Thanks for reading this blog and Hope🤞 you liked it. I'm planning to create a series of blogs for Dialogflow CX concepts(Deeper Dive into Dialogflow CX).

Please FOLLOW me on twitter to get notify for my upcoming blogs regarding Deeper Dive into Dialogflow CX.

References:

https://cloud.google.com/dialogflow#section-9
https://cloud.google.com/dialogflow/cx/docs
https://cloud.google.com/dialogflow/es/docs

What is a difference between git pull and git fetch?

Dhruv Rajkotia — Sat, 02 Oct 2021 06:18:57 +0000

As we all know that git commands become mandatory if you are software developer. So here today I wanted to share basic understanding of the git two commands. Git pull vs fetch.

Situation:

If there were some changes recently made to your remote repository and you want to incorporate them into your local copy. then you have basically a 2 options one is git pull and another one is git fetch.

So, Now question arise what’s the difference between Git pull vs fetch.

Now let’s understand with some diagram so probably you will never forgot the difference :)

As per the above diagram The git fetch command downloads commits, files, and refs from a remote repository into your local repo but not update your local repo's working state. Fetching is what you do when you want to see what everybody else has been working on.

git pull is the more aggressive alternative; it will download the remote content for the active local branch and immediately execute git merge to create a merge commit for the new remote content. If you have pending changes in progress this will cause conflicts and kick-off the merge conflict resolution flow.

When we should use git fetch?

If you only want to see all of the current branches and changes in your remote repository without affecting your current local copy then Git fetch can get you all of the information you need.

When we should use git pull?

when you are ready to get latest updates from your remote repository and adding to your local copy.

That's all folks, Hope you got the idea regarding Git pull vs fetch. Please like the post if you loved it and please let me know if you have any question in comments.