Intelligent Mobile Apps with Ionic and API.AI (DialogFlow)

Name: Intelligent Mobile Apps with Ionic and API.AI (DialogFlow)
Rating: 4.5 (164 reviews)

Build an intelligent app that understands what you say and talks back using Ionic Framework and API.AI (now DialogFlow).

Highest Rated

Created bySamarth Agarwal

Last updated 10/2017

English

What you'll learn

Build mobile apps for Android, iOS and Windows
Build apps that can understand natural language
Build apps that can respond back with answers
Build apps that can think and make decisions
Build apps that can talk/converse
Build truly cross platform hybrid mobile apps with Ionic Framework

Course content

8 sections • 39 lectures • 2h 24m total length

Course Introduction1:49
In this lecture, you will learn about the course itself. You will learn about everything that we are going to learn and build together in this course.
Introduction to Ionic2:01
In this lecture, you will be introduced to the Ionic Framework. You will learn what Ionic is and how we use Ionic to build amazing apps for Android, iOS and Windows.
Introduction to API.AI1:35
In this lecture, you will be introduced to API.AI (DialogFlow). API.AI is recently renamed to DialogFlow. API.AI will be the whole mind behind our intelligent app.

Getting Started with Ionic4:05
Creating an App2:23
In this lecture, you will learn how to use the Ionic CLI to create a new Ionic application.
Running the App in the Browser4:56
In this lecture, you will learn how to run an Ionic App in the browser and debug it. You will learn how you can look at the app in the browser as it would look on Android, iOS and Windows devices.
Running the App in the Emulator4:30
In this lecture, you will learn about running Ionic apps on emulators and real devices.

Creating an Account1:03
Agents in API.AI2:29
Intents and Entities7:29
Learn how intents and entities in API.AI (DialogFlow) map user input to actions, using default welcome and fallback intents, prompts, and a system age entity to extract age information.
Fulfillment and Webhooks1:52
Learn how fulfillment sends user input as JSON to a webhook, enabling a server POST with the resolved query and parameters for each intent.
Pre-built Agents and Small Talk2:53
Explore pre-built agents in api.ai (DialogFlow) and implement small talk to handle common phrases, while balancing flow with proper fulfillment and training.

Installing the Cordova Plugin2:38
Initializing the API.AI Plugin6:35
Initialize the ApiAiPlugin in an Ionic Angular app by calling init with a client access token and language, handling success and error callbacks, via the window object.
Sending the First Message to API.AI5:09
Wire a sendText function to the home button in an Ionic app to send a hello message to API.AI and display the JSON response with the detected welcome intent.
Sending and Displaying Messages3:56
Modify an Ionic app to send typed messages via NgModel, push user messages and API.AI (DialogFlow) responses into a messages array, and display the AI reply in the UI.
Displaying Received Messages4:20
Using Voice to Send Messages4:03
Using Text to Speech5:34
Learn to implement text-to-speech in an Ionic app using the Cordova text-to-speech plugin and Ionic native wrapper, including setup, module imports, and speaking API responses.
Minor Improvements in the App4:49
Fixes three issues in the ionic app with API.AI integration: keep keyboard focus after sending, auto-scroll on new messages, and prevent truncation with text-wrap, using ViewChild content and scrollToBottom.

Introduction to Cloud92:19
Explore building a webhook-powered server on Cloud9 to fulfill API.AI intents like AskAge using NodeJS and JavaScript, enabling the Ionic app to tell users if they can vote.
Creating C9 Project and Installing Modules3:41
Writing the Server Code6:04
Sending Responses to API.AI5:07
Extract information from the API.AI webhook JSON, evaluate age.amount against 18, and return a speech and displayText response to API.AI.
IonicAI So Far1:40
Test the API AI functionality in an Ionic app by sending text and voice queries, receiving responses. The app automatically supports new capabilities via the API console without extra coding.
Using Now to Host Server Code3:38
Learn to deploy your ionic and api ai server code using now, install npm -g now, and publish online for free, obtaining a URL to access your web server.
Using ngrok to Run Server Code2:38

Creating Calculator - Add Intent4:49
Create a calculator feature in an Ionic app by adding an add intent in API.AI (Dialogflow), defining two numeric parameters and a webhook to perform addition.
Creating Calculator - Add Server Code4:01
Develop a server-side calculator webhook for Ionic and API.AI by implementing an add operation that retrieves two numbers from the request, computes their sum, and returns a formatted response.
Creating Calculator - Subtraction Intent and Server Code3:24
Creating Calculator - Multiplication and Division1:44
Build a calculator in an intelligent mobile app with ionic and api.ai, creating multiply and divide intents with webhook fulfillment and numeric parameters.
Creating Calculator - Testing Everything So Far2:15
Test the ionic calculator by text and voice commands, validating results. The module guides using the API.AI intelligence engine and API console to extend features.

Requirements

Basic of Ionic Framework and Angular
Basic Knowledge of HTML, CSS and JavaScript
Knowledge of OOP Concepts would be an added advantage
Basic Knowledge of TypeScript
Basic Knowledge of APIs and HTTP Verbs

Description

This course will teach you all about creating intelligent mobile apps that can understand your natural language and can take actions based on that. You can program your apps to do a number of tasks. From doing simple calculations to performing complex operations, your apps can d it all.

Your apps will work on Android, iOS and Windows, thanks to the amazing Ionic Framework.

So, you will be writing code once and you can generate different projects for Android, iOS and Windows.

You will learn to use API.AI (now known as DialogFlow) and will use the amazing intelligence engine of API.AI to power your app. You app will depend on API.AI for processing the users' natural language (speech and text) and will respond back to the user in the way you want.

Your app will be capable of understanding voice as well as text inputs. So a simple phrase like, "Hey, can you add 1265 and 6567?" will make your app do this calculation for you and it will come back with an answer. Not only that, your app will be capable enough to have conversations with you.

It will respond to messages like, "How are you?" and "Where have you been?". By the end, your app will inform your of the weather for your city if you ask for it like, "How is the weather in New York City?". All thanks to API.AI.

To proceed with this course you are recommended to have basic knowledge of building apps with Ionic and Angular. We will be using TypeScript all along to build the app, so knowledge of TypeScript is also advised. Even if you are complete beginner, you can take the course but you might feel the rush in the beginning. A basics course on Ionic Framework is advised for complete beginners.

Here is an overview of the whole course.

We will start by understanding a few basics of Ionic and then API.AI.
We will then proceed to building the App UI and then integrate the App with API.AI. This will open doors to a whole new world of possibilities.
We will learn how to add a feature to our API.AI Agent and use it in the app.
We will implement voice recognition and text-to-speech in the app so the app can actually talk to the user.
Then, we will add functionalities of a calculator to the app.
Finally, we will conclude the app by hooking it up to a weather API so the app can provide the weather details for any city in the world.

Sound exciting? Let's get started!

Who this course is for:

Students and Professionals willing to build intelligent Apps/Bots
Web Devs who are willing to expand their skills
Professionals who have web skills and want to build mobile apps
Students, Individuals, Devs who want to learn to build Artificially Intelligent Apps
Devs who wish to save time by building Hybrid Apps
Anyone who wants to learn APIAI (DialogFlow)
Tech Architects who want to learn to use APIAI

Intelligent Mobile Apps with Ionic and API.AI (DialogFlow)

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 5min

Ionic Framework Basics4 lectures • 16min

API.AI (DialogFlow) Basics5 lectures • 16min

Building the App User Interface3 lectures • 14min

Integration with API.AI8 lectures • 37min

Fulfillment with Webhooks7 lectures • 25min

The Intelligent Calculator5 lectures • 16min

Weather Information Bot4 lectures • 15min

Requirements

Description

Who this course is for: