Skip to content

update with the added CLI interactions category #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mlabieniec merged 3 commits into from
Oct 14, 2018
Merged

update with the added CLI interactions category #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f651226
add instruction to setup chatbot automatically using the amplify CLI …
UnleashedMind Oct 11, 2018
7f7caca
changes per Richards request
UnleashedMind Oct 11, 2018
3486ba5
change url per Michael request
UnleashedMind Oct 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cli/concept.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Click [here](https://github.com/aws-amplify/docs/blob/master/cli/new-plugin.md)

# Architecture
![](https://github.com/UnleashedMind/docs/blob/master/cli/images/AmplifyCliConcept.jpg)
## Cli core and plugins
## CLI core and plugins
The Amplify CLI uses [gluegun](https://github.com/infinitered/gluegun#readme). It is highly modularized. <br/>
The CLI core provides the pluggable platform, and most of the CLI category functions are implemented as plugins. <br/>
The CLI core searches for plugins in the global `node_modules` directory, and its own `node_modules` directory. <br/>
Expand Down Expand Up @@ -122,7 +122,7 @@ Each plugin stores contents in its own subfolder inside this folder.

## amplfy files

### <a name="meta"></a>amplify-meta.json file
###<a name="meta"></a>amplify-meta.json file
Both the `backend` and `#current-cloud-backend` directories contain an amplify-meta.json file.<br/>
The amplify-meta.json in the `backend` directory serves as the white board for the CLI core and the plugins to log infomration for themsevles, and to communicate with each other. <br/><br/>
The CLI core provides read and write access to the file for the lugins.<br/>
Expand Down
103 changes: 58 additions & 45 deletions js/interactions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,59 @@

AWS Amplify Interactions category enables AI-powered chatbots in your web or mobile apps. You can use *Interactions* to configure your backend chatbot provider and to integrate a chatbot UI into your app with just a single line of code.

Ensure you have [installed and configured the Amplify CLI and library]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/quick_start).
Ensure you have [installed and configured the Amplify CLI and library]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/start).
{: .callout .callout--info}

**Amazon Lex**

AWS Amplify implements [Amazon Lex](https://aws.amazon.com/lex) as the default chatbots service. Amazon Lex supports creating conversational bots with the by the same deep learning technologies that power Amazon Alexa.
AWS Amplify implements [Amazon Lex](https://aws.amazon.com/lex) as the default chatbots service. Amazon Lex supports creating conversational bots with the same deep learning technologies that power Amazon Alexa.

## Create your Chatbot
#### Automated Setup

Run the following command in your project's root folder:

```bash
$ amplify add interactions
```

The CLI will lead you through the steps to specify the chatbot to be created.

You can choose to start from a sample chatbot or start from scratch. If you choose to start from scratch, the CLI will prompt you with a series of questions to set the intents and slots for the chatbot.

You are allowed to run the `amplify add interactions` command multiple times to add multiple chatbots into your project.

{The Interactions category utilizes the Authentication category behind the scenes to authorize your app to send analytics events.}
Copy link
Contributor

@undefobj undefobj Oct 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something is buggy here - "{The Interactions category utilizes the Authentication category behind the scenes to authorize your app to send analytics events.} {: .callout .callout--info}"

{: .callout .callout--info}

The `add` command automatically creates a backend configuration locally. To update your backend in the cloud, run:

```bash
$ amplify push
```

Upon successful execution of the push command, a configuration file called `aws-exports.js` will be copied to your configured source directory, for example `./src`.

##### Configure Your App

Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example `App.js` in React or `main.ts` in Angular.

```js
import Amplify, { Interactions } from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);
```

Copy link
Contributor

@undefobj undefobj Oct 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a link to jump straight to the "Working with the Interactions API" section? Like "Click HERE for usage in your app"

Click [HERE](#WorkingWithAPI) for usage in your app

### Manual Setup

#### Create your Chatbot

You can create Amazon Lex chatbox in Amazon Lex console. To create your bot, follow the steps shown in [Amazon Lex Developer Guide](https://docs.aws.amazon.com/lex/latest/dg/getting-started.html).

![Interactions]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/images/interactions_lex_console_edit_bot.jpg){: class="screencap" style="max-height:600px;"}
![Interactions]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/images/interactions_lex_console_edit_bot.jpg){: class="screencap" style="max-height:600px;"}

### Manual Setup

With manual setup, you need to provide your auth credentials and bot details to configure your app:

Expand All @@ -42,7 +81,7 @@ Amplify.configure({
});
```

## Working with the API
##<a name="WorkingWithAPI"></a> Working with the Interactions API

You can import *Interactions* module from 'aws-amplify' package to work with the API.

Expand All @@ -60,7 +99,7 @@ import { Interactions } from 'aws-amplify';
let userInput = "I want to reserve a hotel for tonight";

// Provide a bot name and user input
const response = await Interactions.send("BookTripMOBILEHUB", userInput);
const response = await Interactions.send("BookTrip", userInput);

// Log chatbot response
console.log (response.message);
Expand Down Expand Up @@ -99,19 +138,22 @@ When using React, you can use *ChatBot* with following properties;
<ChatBot
title="My Bot"
theme={myTheme}
botName="BookTripMOBILEHUB"
botName="BookTrip"
welcomeMessage="Welcome, how can I help you today?"
onComplete={this.handleComplete.bind(this)}
clearOnComplete={true}
/>
```

Following simple app shows how to use **ChatBot** component in a React app;
Following simple app shows how to use **ChatBot** component in a React app, with the automatic setup outlined above;

```js
import React, { Component } from 'react';
import Amplify, { Interactions } from 'aws-amplify';
import { ChatBot, AmplifyTheme } from 'aws-amplify-react';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

// Imported default theme can be customized by overloading attributes
const myTheme = {
Expand All @@ -122,23 +164,6 @@ const myTheme = {
}
};

Amplify.configure({
Auth: {
// Use your Amazon Cognito Identity Pool Id
identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx',
region: 'us-east-1'
},
Interactions: {
bots: {
"BookTripMOBILEHUB": {
"name": "BookTripMOBILEHUB",
"alias": "$LATEST",
"region": "us-east-1",
},
}
}
});

class App extends Component {

handleComplete(err, confirmation) {
Expand All @@ -160,7 +185,7 @@ class App extends Component {
<ChatBot
title="My Bot"
theme={myTheme}
botName="BookTripMOBILEHUB"
botName="BookTrip"
welcomeMessage="Welcome, how can I help you today?"
onComplete={this.handleComplete.bind(this)}
clearOnComplete={true}
Expand Down Expand Up @@ -199,21 +224,9 @@ import { StyleSheet, Text, SafeAreaView, Alert, StatusBar } from 'react-native';
import Amplify from 'aws-amplify';
import { ChatBot } from 'aws-amplify-react-native';

Amplify.configure({
Auth: {
identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx',
region: 'us-east-1'
},
Interactions: {
bots: {
"BookTripMOBILEHUB": {
"name": "BookTripMOBILEHUB",
"alias": "$LATEST",
"region": "us-east-1",
},
}
}
});
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

const styles = StyleSheet.create({
container: {
Expand All @@ -228,7 +241,7 @@ const styles = StyleSheet.create({
export default class App extends React.Component {

state = {
botName: 'BookTripMOBILEHUB',
botName: 'BookTrip',
welcomeMessage: 'Welcome, what would you like to do today?',
};

Expand All @@ -246,7 +259,7 @@ export default class App extends React.Component {
Alert.alert('Done', JSON.stringify(confirmation, null, 2), [{ text: 'OK' }]);

this.setState({
botName: 'BookTripMOBILEHUB',
botName: 'BookTrip',
});

return 'Trip booked. Thank you! what would you like to do next?';
Expand Down Expand Up @@ -277,7 +290,7 @@ export default class App extends React.Component {

### Using with Angular and Ionic

Please see [Angular]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/angular_guide#interactions) and [Ionic]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/ionic_guide#interactions) documentation for Interactions UI components.
Please see [Angular]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/angular#interactions) and [Ionic]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/ionic#interactions) documentation for Interactions UI components.

### API Reference

Expand Down