Create Chatbot for Website with React and Node.js
4.5 (380 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,724 students enrolled

Create Chatbot for Website with React and Node.js

Create a chatbot for webpage with React and Node.js. Teach chatbot to sell products, give recommendation, measure demand
4.5 (380 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,724 students enrolled
Created by Jana Bergant
Last updated 5/2020
English
English
Current price: $111.99 Original price: $159.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 11 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • have an intelligent chatbot build in a website
  • have a demo chatbot that they can tweak and suit to their needs
Course content
Expand all 108 lectures 10:10:50
+ Introduction / Course Overview
8 lectures 28:35
Behind the scenes – application architecture
03:37
Fulfillment Flow
04:00
How to get help
01:13
Additional resources
00:32
+ DialogFlow introduction
9 lectures 38:24
DialogFlow Introduction / Create an agent
03:10
Google project / service accounts / agent settings
05:49
DialogFLow Intents Basics - Fallback and Welcome intent
05:52
DialogFLow Intents Basics - Developer defined Intents
04:56
DialogFlow Entities
05:16
Intents with parameters
06:03
Prebuild agents
05:00
Smalltalk
02:00
DialogFlow tutorial FREE ebook
00:18
+ Server Side App
5 lectures 35:57
Install Express & Generate Express App
11:05
Heroku deployment configuration
08:33
Heroku deployment
05:18
Nodemon setup
04:30
+ Connect Server Side app & DialogFlow
12 lectures 56:01
Routes
06:32
DialogFlow module Authentication setup part 1
04:14
DialogFlow module Authentication setup part 2
08:52
Setting environment variables in Windows
00:07
Text query to DialogFlow with Async await
06:06
Chatbot module
06:19
Event query to DialogFlow
03:57
Config local & server / Heroku env variables
11:47
Deploy to Heroku / Test endpoints
03:11
Common errors when first deploying to Heroku
02:45
GRPC not working with node v12 WARNING!
00:30
+ FrontEnd - Client Side – React setup
15 lectures 01:37:41
FrontEnd - Client Side Introduction
02:12
React app Generation
08:31
Two servers for development
06:55
Proxy
03:55
Proxy upgrade
00:06
Components for the page - part 1
07:41
Components for the page - part 2
13:33
HTML & CSS with Materialize
05:45
Connect Server and Client
07:27
Add API calls to backend APP
10:24
Simple Message component
11:20
Welcome message
02:31
Enable text input from user
03:47
Scroll to last message rendered
04:18
Your assignment is to add an auto-focus to text input. Meaning the cursor should be in the input so that user can start talking to the bot.
Add auto-focus to text input
2 questions
Unique Session for visitors
09:16
+ Developing Frontend
19 lectures 01:52:52
Cards Message in DialogFlow
04:42
Cards response from DialogFlow in React App
03:50
Card component
07:07
Render card galleries part 1
10:40
Render card galleries part 2
04:49
QuickReplies Message in DialogFlow
05:06
Quick replies components
12:15
Quick replies components implementation
07:40
Follow up intents
05:09
DialogFlow contexts
03:55
Quick replies test
02:12
DialogFlow events
06:17
Slot filling
08:51
Person Entity
00:02
You assignment is to get information from the user that wants to apply for masterclass in the same maner as we do for those who want personal training. Be sure to use @sys.person entity instead of given-name
Create slot feeling for masterclass
3 questions
Show / hide bot
08:20
Welcome on Shop – DialogFlow setup
06:50
Welcome on Shop – listen to navigation history
08:53
Chatbot – a pause between messages
04:15
+ Save data from conversation to database
7 lectures 35:14
Mongo db setup
11:20
Mongoose Introduction
03:18
Add Mongoose to code
03:12
Where to catch and save registration
03:14
Mongoose model Classes
02:28
Saving registration
06:48
+ Fulfillment
5 lectures 27:28
Introduction to fulfillment
03:12
Ngrok for local fulfillment
07:07
Fulfilment setup
05:19
Fullfilment write to database
07:00
Fullfilment read from database
04:50
+ Deploying to Heroku
5 lectures 15:59
FrontEnd routing on Server
02:23
Build script for client - postbuild script
03:35
Code optimisation before deployment
03:50
Deploying on Heroku
03:30
+ JavaScript client
8 lectures 43:39
JavaScript client introduction
03:51
JavaScript token generation
06:36
Call DialogFlow from FrontEnd
07:29
Response format
03:11
Token and extra configuration to environment variables
05:02
Generate token in nodejs
11:05
Registration via fulfillment
03:49
Publish the code
02:36
Requirements
  • you need a basic knowledge of nodejs, react and GIT
  • IDE for writing code (Visual Studio code or Webstorm or Sublime or any editor you prefer and are used to)
Description

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 host it anywhere else where they support Node.js. We'll use DialogFlow to process natural language. DialogFlow will help us 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 in 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.

The 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 17000 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 the tech stack, which 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.


The second section will introduce you to DialogFlow, a 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 the Express library and generate an express app. After we are trough with configuration, we deploy it to Heroku. To speed up the development process, we'll set up a 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 set up React, configure local servers, create a proxy for communicating with the backend. And we'll develop 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 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 feelings. 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 to 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 to 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 your needs. And you'll have the knowledge to upgrade it.

See you on the course!

Jana


-------------------------------------------------------

The last update of the course was on 27th February 2020

I added DialogFlow mega agents

Who this course is for:
  • everyone who want's to build a chatbot for the page
  • has at least a basic programming skills (nodejs & react)
  • everyone who is interested in conversational commerce