Create a chatbot for website with DialogFlow, React and NodeJs and GIT

Create a chatbot for website. Have a smart assistant for commerce

Instructed by Jana Bergant

  • have an intelligent chatbot build in a website
  • have a demo chatbot that they can tweak and suit to their needs

  In this course, you will build a chatbot for a Webpage. We'll use Node.js and React for programming and GIT for deploying and version control. The bot will be hosted on Heroku, but you can simply hostedanywhere else where they support Node.js. We’ll use DialogFlow to process natural language, that is understand what users want. 

In the course, we’ll be building a sample chatbot. Its purpose is only to show you how things work. Our bot on the page will help us sell products. It will give recommendations and measure demand.

In the process of building this chatbot, you’ll learn all that is needed to build a great bot. To get the most out of the course you can work on this sample bot and at the end tweak it to suit your needs.

You need to have at least basic knowledge of Node.js and React to start with this course. For versioning we use GIT, therefore you need to be familiar at least with basic git commands.

To make it easier for you I’ve added git commits with changes to every video that has a change in the code. This way you can compare your code to mine. And you won’t lose time debugging. And remember for any questions I’m available in the Questions and answers. You are not alone.

And remember, I'LL BE THERE FOR YOU.

Bot will be able to remember things, that is store information into a database or connect to other API services. I’ll show you different implementations, so that you can play and find out what suits you most.

At the end of the course, you’ll have a demo chatbot that you can tweak and tailor to your needs.

 

My name is Jana Bergant and I’m a developer with over 20 years of experience. I’m an IT instructor teaching people new tech skills.  Over 12300 people are already taking my course.

I help all my students at every step of development. And I'll be here for you!

Let me tell you a bit about every section of this course.

In the first section we’ll take an overview of the app and get familiar with tech stack, that is the technology used in this course. We’ll look at application architecture and different ways we can implement it. We’ll go through every implementation. And I’ll take you through the development stages.

 

Second section will introduce you to DialogFlow, natural language processor, that we’ll use to understand what our visitors want from the chatbot. We’ll go through building blocks of DialogFlow. You’ll learn about agents, intents, entities, parameters, prebuild agents and more.

 

Then in the third section, we start building the server side app for the chatbot. We’ll install Expresslibrary and generate express app. We’ll configure it for Heroku and deploy to Heroku. We’ll also setup local development server called Nodemon.

 

When you have a basic server side app created, you’ll be able to connect it to DialogFlow. And that is what we’ll do in section 4.

 

And frontend will be the next step. In the fifth section, we setup React, configure local servers, create a proxy for communicating with the backend. And we’ll create components. Components for the page and for the chatbot. Our chatbot will begin to look like a chatbot in the 5th section.

 

But we’ll really polish it in the 6th section, where we’ll create rich messages for the chatbot like cards and quick replies. And also we’ll go deeper into DialogFlow’s features, like follow up intents, contexts, events and slot feeling. Features that make bot creation much easier and much friendlier!

 

When our bot is polished, we can make it smarter. We want our bot to remember what the user says. Therefore we need to store information that we get from the user. In the 7th section, we’ll be saving to the database and also use what we know about the user in a conversation. To make the bot friendlier. We like if people remember our preferences, it is the same with bots.

 

In the 8th section, I’ll show you a different way of implement handling actions. We’ll be using DialogFlow's fulfillment. I’ll show you how to call fulfillment only for intents that need extra code to be run. Only for intents that need to get information from a database, or that need to call some other API, or maybe connect to a device.

 

When we master fulfillment, we’ll deploy to Heroku. In the 9th section we’ll take care of some extra configuration like routing, postbuild scripts for generating frontend, we’ll also go through the code and make sure all is as needed before we deploy.

 

And finally, in the 10th section, I’ll show you how to connect to DialogFlow straight from FrontEnd. To do that we’ll need to make some changes in the architecture. I’ll tell you the benefits of every decision.

 

After the course, you’ll have a demo bot that you can tweak and tailor to you needs. And you’ll have the knowledge to upgrade it.

See you in the course!

Jana

  • you need a basic knowledge of node.js, react and GIT
  • IDE for writing code (Visual Studio code or Webstorm or Sublime or any editor you prefer and are used to)
  • everyone who want's to build a chatbot for the website
  • has at least a basic programming skills (nodejs & react)
  • everyone who is interested in conversational commerce
View More...

Section 1 : Course Overview

  • Lecture 1 :
  • Lecture 2 :
  • Application overview
  • Lecture 3 :
  • Technology stack
  • Lecture 4 :
  • Behind the scenes – application architecture
  • Lecture 5 :
  • Fulfillment Flow
  • Lecture 6 :
  • Development stages

Section 2 : DialogFlow introduction

  • Lecture 1 :
  • DialogFlow Introduction / Create an agent
  • Lecture 2 :
  • Google project / service accounts / agent settings
  • Lecture 3 :
  • Intents Basics – Fallback and Welcome
  • Lecture 4 :
  • Intents Basics – developer defined intents
  • Lecture 5 :
  • Entities
  • Lecture 6 :
  • Intents with parameters
  • Lecture 7 :
  • Prebuilt agents
  • Lecture 8 :
  • Smalltalk

Section 3 : Server Side application

  • Lecture 1 :
  • Server Side Architecture Introduction
  • Lecture 2 :
  • Install Express & Generate Express App
  • Lecture 3 :
  • Heroku deployment configuration
  • Lecture 4 :
  • Heroku deployment
  • Lecture 5 :
  • Nodemon setup

Section 4 : Connect Server Side app & DialogFlow

  • Lecture 1 :
  • Connect Server Side app & DialogFlow Introduction
  • Lecture 2 :
  • Routes
  • Lecture 3 :
  • DialogFlow module Authentication setup part 1
  • Lecture 4 :
  • DialogFlow module Authentication setup part 2
  • Lecture 5 :
  • Text query to DialogFlow with Async await
  • Lecture 6 :
  • Chatbot module
  • Lecture 7 :
  • Event query to DialogFlow
  • Lecture 8 :
  • Config local & server
  • Lecture 9 :
  • Deploy to Heroku / Test endpoints

Section 5 : FrontEnd - Client Side – React setup

  • Lecture 1 :
  • FrontEnd - Client Side Introduction
  • Lecture 2 :
  • React app Generation
  • Lecture 3 :
  • Two servers for development
  • Lecture 4 :
  • Proxy
  • Lecture 5 :
  • Components for the page - part 1
  • Lecture 6 :
  • Components for the page - part 2
  • Lecture 7 :
  • HTML & CSS with Materialize
  • Lecture 8 :
  • Connect Server and Client
  • Lecture 9 :
  • Add API calls to backend APP
  • Lecture 10 :
  • Simple Message component
  • Lecture 11 :
  • Welcome message
  • Lecture 12 :
  • Enable text input from user
  • Lecture 13 :
  • Scroll to last message rendered
  • Lecture 14 :
  • Input focus - solution
  • Lecture 15 :
  • Unique Session for visitors

Section 6 : Developing Frontend

  • Lecture 1 :
  • Introduction
  • Lecture 2 :
  • Cards Message in DialogFlow
  • Lecture 3 :
  • Cards response from DialogFlow in React App
  • Lecture 4 :
  • Card component
  • Lecture 5 :
  • Render card galleries part 1
  • Lecture 6 :
  • Render card galleries on client part 2
  • Lecture 7 :
  • QuickReplies Message in DialogFlow
  • Lecture 8 :
  • Quick replies components
  • Lecture 9 :
  • Quick replies components implementation
  • Lecture 10 :
  • Follow up intents
  • Lecture 11 :
  • Contexts
  • Lecture 12 :
  • Quick replies test
  • Lecture 13 :
  • DialogFlow events
  • Lecture 14 :
  • Slot filling
  • Lecture 15 :
  • Assignments – create slot feeling for masterclass
  • Lecture 16 :
  • Show / hide bot
  • Lecture 17 :
  • Welcome on Shop – DialogFlow setup
  • Lecture 18 :
  • Welcome on Shop – listen to navigation history
  • Lecture 19 :
  • Chatbot – a pause between messages

Section 7 : Save data from conversation to database

  • Lecture 1 :
  • MongoDB introduction
  • Lecture 2 :
  • MongoDB setup
  • Lecture 3 :
  • Mongoose Introduction
  • Lecture 4 :
  • Add Mongoose to code
  • Lecture 5 :
  • Where to catch and save registration
  • Lecture 6 :
  • Mongoose model Classes
  • Lecture 7 :
  • Saving registration

Section 8 : Fulfillment

  • Lecture 1 :
  • Introduction to fulfillment
  • Lecture 2 :
  • Ngrook for local fulfillment
  • Lecture 3 :
  • Fullfilment setup
  • Lecture 4 :
  • Fullfilment - write to a database
  • Lecture 5 :
  • Fullfilment - read from a database

Section 9 : Deploying to Heroku

  • Lecture 1 :
  • Development vs Production environment
  • Lecture 2 :
  • FrontEnd routing on Server
  • Lecture 3 :
  • Build script for client - postbuild
  • Lecture 4 :
  • Code optimisation before deployment
  • Lecture 5 :
  • Deploying on Heroku

Section 10 : JavaScript client

  • Lecture 1 :
  • JavaScript client introduction
  • Lecture 2 :
  • JavaScript token generation
  • Lecture 3 :
  • Call DialogFlow from FrontEnd
  • Lecture 4 :
  • Response format
  • Lecture 5 :
  • Token and extra configuration to environment variables
  • Lecture 6 :
  • Generate token in nodejs
  • Lecture 7 :
  • Registration via fulfillment
  • Lecture 8 :
  • Publish the code

Jana Bergant,

Jana Bergant has travelled the path of self-taught web development for 19 years, to reach the level of a full-stack developer with a passion for chatbot technology. She has successfully delivered web solutions and chatbot systems, and she is an active consultant to numerous customers throughout the world. But as teaching is her passion, that is why she is offering these courses! She knows how to efficiently break through the development frustration barriers when confronting issues, and she has experienced all the challenges that separate beginners from experts.   She will help you learn how to: ·       Make the first steps ·       Navigate the landscape of resources and pick the right ones ·       Avoid bugs in the process ·       Reach your goals! ·       Finish your jobs in time   “Being a web developer has its perks but it can be difficult as well. There never seems to be enough time for what we want to learn and master. Particularly at the beginning things can get overwhelming. I want to help you experience the positive side of switching to web development!” – Jana Bergant
View More...

Getting started with coding

By : Devansh Varshney

Lecture 27

$14

Superb Python Course - Become Certi...

By : Paul Carlo Tordecilla

Lecture 91

$18

Superb Advance Javascript - Become ...

By : Paul Carlo Tordecilla

Lecture 28

$14

Application development with IBM Wa...

By : Harshit Srivastava

Lecture 14

Free

Learn React 16 and Redux by buildin...

By : Haider Malik

Lecture 74

$14

Python for Beginners : A Python Meg...

By : Vijay Gadhave

Lecture 39

$14

Need any help with the platform? Contact us at: support@learnfly.com