Chat Bots, React, and a Cucumber - Nir Kaufman @ ReactNYC

so now we've got a lot of time so it's going to be a fun talk hopefully yeah let's do it let's do react relax chat BOTS and cucumbers we're going to use just a simple CSS framework nothing special and diode flow and hopefully we deploy it to firebase so all of these tools are free firebase dialog flow you can use it you've got a free tire you can build a production app with this alright let's get started let's do it together oh yeah yeah I looked for a for a good picture of cucumber that won't hurt no one alright let's start let's go to my desktop and let's do a real life coding create react app chat bot conflict yes of course HM what to and got here a walking version of the chat bot so let's see what's going to be the end results of this really really really live coding so let's check if this chat bot is working hey hey there friend are you smart do my best alright so best framework ever yeah we've got a bug and we need to fix it so let's just build it from scratch so we've got reactive let's open web some idea that we can trust yeah sad but true yep my desktop chat bot - let's try presentation mode right and then start good let's start by cleaning up this this project the initial project because we don't need the abscissas right now we are not going to talk about tests so the indexes can go away as well the logo SVG the serviceworker let's keep it simple and useful like I said let's do it together help me to make it work I promise yeah all right so we got there in the CSS we that needed the serviceworker we doesn't need it yes we can get rid of the local CSS let's take all this out and just do h1 hello but all right cool let's start now now come on come on that's an ID that you can trust let's start with bringing some dependencies to our project so NPM so let's take Redux Redux reacts Redux AI API JavaScript API hi API I they will change its into dialogue flow and we soon see what is this tag so all about a bi AI JavaScript this is the SDK for the for the bot service we talked about CSS so let's choose a minimal I like this one milligram IO if you're trying to do something really simple so it's got absolutely nothing no really nothing you just use a simple HTML tags and give you app a little bit of style without any effort no no sophisticated grids nothing but it works so let's do an NPM where is it right npm install milligram and i think that's enough let's explore this dialogue flow so Dalek flow it's a platformer from Google they just build them they use the previous name was Apia I whatever I don't remember but now it's Google and it's very simple to use and as I said they've got a free tired so you can actually work with it before you start to pay and you can build real stuff before you need to pay so I'm already logged in if I go to the to the console let's do something really from scratch let's delete this one this bot alright let's create a new edge agent alright it's all start with an agent let's do a zoom in let's call it react both create already exist so what we going to do let's do a react both didn't I what are you gonna do editor what are you gonna do reduce release all right so it takes some time but now we you've got a platform for for creating a very sophisticated machine learning based chat bot and the nice thing about this service that it the output of your chat bot will be adjacent so you don't tie to a certain interface you don't you can do whatever you like with this Jason you just get a Jason back we sit in a second alright so you can create entities you can train your model you can use the neurotics of course we've got a lot of integrations that you can do but let's try to keep it simple let's write to be something useful we'll really fast so I'm going to go to this feature small talk and with small talk you can teach your bot will really fast how to be human being so let's explore it about the agent who are you and you can answer I'm just a boat I think you can do answer variants and stuff how old are you you're annoying so are you alright so now I can save it I can try right here I can even use voice recognition let's strike hey and the bot cell user said hey response greeting so it's improvised already alright which is with really nice I'm pressing the show JSON and this is the results that you're going to get back if you use this API so as you can see you've got a standard JSON and you can do whatever you want with us all right but we don't want our board just to have a small talk with us we want to fix the bug we want to ask you what the best framework front and framework in the world and we want him to lie I'm sorry so I want to create a text indent oh here it is alright trying user expression what is the best framework we want to build to answer with a text here is the response text response all right then then the name will be I don't know Jas whatever save now let's try it the best framework I did something wrong I did something very wrong save Jess what is the user framework yeah I have a response right here we have to cross text response now I think I'm okay you don't save we will move forward don't worry yeah yeah now it was so now it's working best friend won't react we've got our chess board all right now you can talk for hours it's a great platform you can play with it and you can build real stuff with it it's not it's not a toy again it's built on Google machine learning platform and it's a it's a real thing so I'm encourage you to take a look at this all right now we won't use it in our app all we need to grab from here is let's go to the react boat - and I'm looking for this all right just this token client access token or developer access token this all we need to communicate with the service all right back to the code like I said before we're going to use we're going to use Redux now Redux it's a complete overhead for just a simple demo but the reason I want to use Redux just to enjoy a live demo with with the best you know of production tools out there to do something that can actually be a platform that can scale something that close to a we'll walk back so let's start with wit as I'm going to create a new file let's call this file just chat guess it's not the component jjs if you're going to use with us we need to start with an action some events that happen in our app how choose a name for an event it can happen in a chat border what disgusting no one speak after me yeah it's just me today the microphone is all mine alright let's go for something more generic let's say we've got an event on message it's a typo now yep so you got a generic amount on message can happen from from the client side from the user side and from the bot side next let's create an action creator let's export we don't need to explore their sexual we're going to write everything on the same file so let's create an action creator I want to export the section creator send message and you'll give me the test and I return an object the type will be on message the text will be the text and maybe we can add something like sender so we know who sent it if it's the user or the bot then we can use it to style our robot the default will be user Center this is my work for when I walked with redux it's actually start with I'm thinking about the messages and that sometimes I'm writing a small PLC you can called pure same on the same file before it split it to multiply reducers and action creators and all this stuff just to see everything on one side all right we've got an own method we've got a sandwich this action creator now we need her ring this is what you want to do reduce let's create a shared or message reducer all right it's going to be a very very simple reducer our state or initial state will be an empty array and right now we're dealing just with one action so I can write a switch case but it could be a complete overhead but if you want like doing Redux by the book without without any extra libraries like react actions and x2 obstructions let's create a switch anyway so we switch on the action type the default we just return our state and if we get this on message we want to return a new way with action we've got their attacks now yeah are you with me yeah all right let's take the text no one no let's put the entire object on this right let's take the action payload oh excuse me yeah the action yeah I think I'm going to split the text in the center maybe I put it on on just on our on an object yeah on the payload no I can do it like this I can I can construct the object right here it doesn't really matter but let's do it like this it's greater payload and here we can put the text in the center and then can just action action payload and can put this object here and the rest of our state excuse me I don't want to override nothing I want to spray the entire terrain just so you see if it's going to be like before or after yeah I can switch it doesn't really matter I mean it is matter if we want to the sequence to be okay all right now let's do the evil middle world because we're going to do something a sink so let's create a simple middle world and yes I said a simple middle world let's call it the message middle and I don't care about the state right now I can leave it empty and we need our next call back we need our action remember the API AI SDK it's very very simple to use - simple to use you don't actually need any extra library to preform an API call its built-in inside inside SDK so I can just import the API JavaScript I can take the API AI client the access token I'm taking from here [Music] let's create the client will be much simpler all right let's do a new new API ai client and let's pass in the access token and now I know how to spell it right all right so this is actually all you need from API AI to communicate with the service I think it's wonderful you don't need any extra Axios or whatever or some HTTP or doing fetch or doing stuff it will return just a standard promise so now inside our message middle we care about the own message so if action type equals the on message we start by moving the action forward if the action type is on message I can take this client and use this method text request that's it and all you need to pass to the text quest is simple string so we can take it from the action from the action they load we have a test can just that's it as I said it's just returning a simple promise so we can do it then and do something with it and what we actually want to do is dispatch a connection so we want to let's build a success on success he will get a response and now I'm heading back here let's do a Hale and explore the JSON so we care about the result and inside the result with goddess fulfillment and inside of it we've got a speech this is what we're looking for so let's take the result the result inside the result with God fulfillment inside fulfillment we can find the speech it's too much it's too much I don't like this multi nesting alright and now we can call our action creator our send message we can take next sent message [Music] inside fulfillment we've got the speech and the sender will be the but are we okay with nice code won't your but also trigger one other person we just trigger another request to the bar because you haven't checked that the sender is the user I don't care about the sender actually right now I know I mean I got you if I got you right I'm using next son and it's unfolded to the to the reducer if I use dispatch instead of max I will trigger the middle world again alright so this is actually something that something sometimes we want to do we won't use this patch or next depending what you're trying to achieve sometimes inside the middle world I will dispatch an action because I wanted to start over and pass all of my middle words again on this case the next forward this action right to the reducers though it won't create any loop all right so if we just summarize the the readings part so as we all know Redux is a lot of boilerplate a lot of code but it makes sense once you once you once you try to scale those kind of stuff if you put it on the same file you can actually see how simple for my opinion it is and you can see the flow sometimes when when new bys start to learn Redux we split our code across different files of course we've got action creators and we do season middles and sometimes it's hard to see the entire flow so right here we've got the message the constant the action creator which returning an object we've got the middleware right in the middle we've got our reducer and now we can build a store start all right so let's create a start export Const store we use the create store from redux we need to pass a reducer we've got a reducer our message we do sir we've got a middleware so I'm going to use the climate aware and put our message middle I will thinking something went wrong with the import so let's import from redux the applying interval the create store alright it seems like we've gotten everything done again this is the most complicated code this is all of our logic this is redux but now it keeps our components that we claim so let's start by going to our index import from Rihanna three ducks the provider read our all app with a provider passing the store right directory blah blah blah what is looking for normal ocean experience a penniless [Music] where is it react the Ducks API JavaScript index seems to be okay yeah hardcore stuff Iwan p.m. start 1 start fun fun fun yeah but this is really like coding no let's see what happen we are skewed command not found M p.m. so probably something went wrong with our dependencies meantime we've got a provider we provide the store to our entire app we can jump to all add component we can import from react Redux we can import the connect man state to pros our steak is very very simple so I want to call it field and I want to feed to point to my state don't win this I don't like to use this and I've got only one argument expect instead of export default app we can export the Kinect we can map state of crops and we can map our action creator send some text now send message thank you sand no autocomplete today why right send message interesting all my tools are against me today excuse me I don't have to actually if you doing like this you can just map your action traitors you know who has this alright you can create a function if you like but I don't use any selectors nothing special special just just the plain objects with my action crater and that's it alright let's hope that whatever went wrong fixed itself HTML web back plugin haven't seen this error for a long time right yeah everything seems to works fine maybe set a protein correct must return a plain object and the reason is I'm using an error function if you want to return an object when you need to wrap it like this right and I don't need this so if there is if there is anyone here who knew to react Redux hopefully by this stage you can see that actually if you take it easy and you understand it you'll be something small it's not that complicated hopefully all right all right so we've got we let's connect react connected to the store and all we've got to do now is just build something just just let's do something we've got to be better props let's take the feed we call it you fear let's take the feed out of our props let's take our feed use a map and for each entry on this field we can just return whatever let's create now and let's return and a lie right here we can put our entry text and fix all the rest of the problems repetitive right nothing to show yet let's try to initialize our stages if something actually happening so go back to the store and right here instead of empty array let's create an init state let's put an object right here with text hey all right this error is about who want to answer while I'm chewing a cucumber come on I'll win a prize key because I'm iterating I said you the last bit of this police and cucumber believe me to offer it cost me like almost five dollars yeah you get a dollar alright let's ignore this for now because we don't actually bring in an array from service with God we don't have any unique ID just get things very complicated let's create an input and on change or maybe on key down we can write some plain JavaScript we can take the event now there is a hundred ways to do it but let's just do good old JavaScript if they event.keycode all right we can take send message from the pros and just call send message together with our event target value alright seems okay hopefully alright so maybe maybe to walk let's try to do a hey and hey there friend so we've got like hey and haters and yeah you're right about the sequence cool best framework now maybe before the best friend book let's put some CSS inside now I want to show you why I like milligram so much when you build something small maybe not something small but you don't need all the overhead of the CSS frameworks I'm just going to import a milligram alright and it's beautiful it's it actually it's not it's not that it they just took the the plain HTML tags and put some styling them and that's it and you've got like 2k something that looks much nicer than than nothing right good so let's see if we've got it right best framework yeah we act of course yeah let's try to ask him something stupid machine learning no why not all right why not angular alright so we've got a checkbox in the next few minutes we're going to try to actually deploy to the server alright again with with those nice services from from Google but let's summarize real quick it was a really nice and fun and easy live demo within something from scratch but don't be mistake those services those best practices those tools it's not supposed to be complicated but can build real things with us and this is this is the message from this talk because we are all working you know in large companies in big companies we are all thinking about architectures and tools and what they can react in angular and whatever and sometimes we forget that the tours are actually very simple and sometimes you don't need all this overhead to build something real like a chatbot and a chatbot is something will since I moved to America chatbots taking my money every day when it cooking with the insurance whatever with the bank so it's working delivery all I've got is this cucumber and this coffee for dinner oh sorry all right let's deploy it and go home or drink something or eat a cucumber all right firebase now how many of you heard about five ways cool now firebase is well known of its capabilities then you've got tons of cloud functions and databases and whatever but today I want to show you that sometimes you don't need all of this if you just want to deploy deploy your app because firebase got a really nice feature you create a project for free of course all right let's create a project because we promise a real real live coding let's call this project my butt too of course we've got a project ID which I don't like so my bot to take and of course they can't man yeah - final graphic designers jokes Justin to do all right reacts boat let's make our seat yeah all right yeah United States create project one of the services of for in firebase is just a storage and you've got for free 5 GB of storage on top of Google infrastructures and see the ends which is really nice and this is exactly what I want to show you because if you don't need firebase but you're looking for I think the simplest way to deploy your front-end app you should consider this continue we've got an app and all I care about is just this hosting that's it alright so I'll go to hosting I've got nothing here get started you asked me to install the firebase tools I've already installed it alright let's go back to our app open the terminal and do this firebase in it do you need database now I don't care about database I care about hosting can you see it I care about hosting alright that's it which app do I want to use we've got the react boot RC - alright enter what do you want to use as your public directory now when you build your react app with a gradual tap it generates a public library alright so let's just say public which is fine enter do you want to configure it it's a single page app we write all URLs yeah I don't know I don't care alright the file index.html already exists oh right no of course no that's it I think so let's do this firebase deploy ready and boom boom kaboom what happen hosting preparing publicly to upload you are like like using a version of alright I've got some problem I think so with something that come with note and they're mean compatible with this version it's nothing it's something local on my laptop probably buy and encourage you I will push this project to get up right now and everything is initialized and I'm encourage you to try and do this firebase deploy after you open a free firebase account and give it a try this is the firebase JSON very simple everything is right here firebase deploy why aren't you working not fun alright maybe an npn store let's summarize this talk so as I said you can build great stuff wait for free with great tools you can we all know how to use react sometimes you can use Redux very very in a very constrained manner you don't need all the overhead hopefully you enjoy this I will finish my cucumber after this stop the viewer did you enjoy it it's someone learn something new today all right cool so supply with this direct flow it's actually a great great tool alright react is easy mom come on yeah you you

Channel: React NYC

Views: 5,406

Keywords: React NYC, React.js, Redux, React Chat Bot, Diagflow, Firebase, create-react-app, milligram.io

Id: VFW8HYDwjxw

Length: 41min 22sec (2482 seconds)

Published: Wed Mar 14 2018