Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Chatbot

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
Rating: 4.5 out of 54.5 (455 ratings)
3,361 students
Created by Jana Bergant
Last updated 1/2021
English
English
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

15 sections • 109 lectures • 10h 10m total length

  • Preview05:14
  • Preview03:20
  • Preview06:49
  • Behind the scenes – application architecture
    03:37
  • Fulfillment Flow
    04:00
  • Preview03:50
  • How to get help
    01:13
  • Additional resources
    00:32

  • 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

  • Preview06:31
  • Install Express & Generate Express App
    11:05
  • Heroku deployment configuration
    08:33
  • Heroku deployment
    05:18
  • Nodemon setup
    04:30

  • Preview01:41
  • 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
  • Encoding parameters
    00:06
  • 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 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
  • Add auto-focus to text input
    2 questions
  • Unique Session for visitors
    09:16

  • Preview01:59
  • 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
  • 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

  • Preview04:54
  • 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

  • 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

  • Dev vs Prod environment
    Preview02:41
  • 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 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

Featured review

Mayank Pundir
Mayank Pundir
129 courses
36 reviews
Rating: 5.0 out of 5a year ago
Excellent!!! I'm very happy with this tutorial. Jana is very Intelligent instructor. I loved her tutorial of chat bot. I found all knowledge what we need to create a chat bot on website as well as dialogflow. In this tutorial she explained everything in a good way. It is good for all. She is attentive and knowledgable. Thanks :)

Instructor

Jana Bergant
Web developer, IT instructor
Jana Bergant
  • 4.3 Instructor Rating
  • 4,544 Reviews
  • 24,568 Students
  • 7 Courses

Jana Bergant has traveled the path of self-taught web development for 20 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 web 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

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.