BuildShip + FlutterFlow + ChatGPT API - HOW TO BUILD AN AI TEACHING ASSISTANT

[Music] build ship build ship build ship that's all I've been hearing from y'all lately and now we're going to dive in and start our tutorial on how to use build chip to create apis for your application but before I jump in I want to cover apis fundamentally so that you understand what an API is how an API works so that when you're using an API Builder like build chip you know what's going on under the hood and you're not treating it like magic that's why myself and my team have been so successful successful using no code tools like flutter flow and build chip is because we've come from over 30 years of combined experience building full stack software by hand and that's why I think we have an advantage in using these tools so before we go on I'm going to give you that Advantage by jumping in just for two minutes and giving you an insight into what an API is at the fundamental level so let's jump in and explore what is an API all right so apis are the building blocks of the internet they're responsible for handling the underlying business logic of an application and in layman terms what that means is when you click a button on an application you are triggering an API request to a server so your front end is talking to another server via an API request think of an API request as a waiter at a restaurant your waiter uh comes to your table and the table is your front end the front end tells the waiter what they want to order in this case it's a piece of data the waiter goes to the backend which is a uh the back of the restaurant The Cook tells the cook what to make and then brings that food back to the front end so an API is the waiter it's the vehicle between a front end and the server which is handling the data okay so the server is responsible for accepting the request such as the order processing the data and then returning the data back to the front end as mentioned in my previous video about build chip your API normally is responsible for getting that data but but nowadays with no code tools like flutter flow we're integrating um Firebase fire store or superbase directly into our front end so our front end is be becoming coupled with the data however traditionally we would be using apis to manipulate that data and now with a tool called build chip we're able to actually manipulate that data using a back-end decoupled service um so that we can tap into triggers and we'll get into that more later but what you need to know for the purpose of this lesson is that your server is responsible for accepting the request processing the data and returning the data back to the front end cool now let's talk about the various types of API requests so there are a handful of API request types out there like get post put patch or delete the two most common types of requests are get and post okay get requests are used to read data from a service post requests are used to input and manipulate data or change data from a service so think of it this way if you just need to get data to show on your front end like say you're building a store in eCommerce store and you want to get a list of all the products that are supposed to uh render on your front end you would likely be creating a get request and your get request would be like get products okay but say you wanted to order a product that would likely be a post request because you're passing an input you're changing something on the back end and then rendering that data back out to the front end that would be post request and that would likely be something like post order right because you're ordering a product and the order API would accept a product as input so that your backend knows what product is being purchased and then it would manipulate the data and return it back to your front end right so when you're using apis apis are handling the data and then returning that data back to the front end but how does the front end know uh what type of data to show well that's because apis return normally three types of data Json HTML and then the old school one is called XML and honestly nobody really uses XML anymore so you probably won't even see it I haven't I've been a developer for 10 years and I've never really seen XML used so uh Let's ignore that so when a front makes an API request it can receive the data as HTML and HTML as y'all may know is used to render websites so if the front end receives HTML browsers are smart enough to know to render the HTML as a web page okay and then if the browser receives Json then it's the application's job to pick apart that Json object and place the data on the front end so the next concept we need to understand is an API endpoint so an API endpoint or a request endpoint is the URL that identifies the API that you want to interact with okay so think of an API endpoint as like an address to a store like just like you need to know the store's address to find it and buy what you need you need need to know an API endpoint address so that you can access the data or the resource that you want to interact with for example I have an API endpoint here and you may recognize it looks just like a URL because API endpoints are URLs if you know anything about the internet you know that the Internet is just a distributed network of a bunch of computers and each computer or server has its own address or URL so this URL is the address of a server somewhere and the server could be on aw us it could even be on build ship it could be on you know Heroku or Firebase Cloud functions there's so many places that you can have servers so this URL is called https dad jokes. p.p ai.com random joke so we can tell this is probably an API to get some dad jokes and then this slash random is kind of the action or the noun that we are uh you know dealing with so we can kind of put it together this is probably an a API to get random jokes and typically when you write your own apis you want to write them in a convention that makes sense so if somebody just reads your API endpoint they could probably piece together uh what the API is okay so now I'm at Google Chrome and what I'm going to do is open up my developer tools by hitting F12 on my keyboard I'm going to navigate to my network Tab and this tab is where you debug all API requests uh that your application is making so I'm going to open up my network Tab and then I'm going to hit all just to show all the requests that this application is making to external servers and you can do this too I'm going to go to google.com and just hit google.com and hit enter now watch my network tab here my network tab is just populated because it's making a bunch of requests to external Services most of these are apis so google.com is talking to a bunch of apis so I'm going to just tap on this one to see what it's doing the first one right here google.com notice here we have a request URL which is your EMP point right so https google.com is an endpoint and notice the request method is get so we're actually making a get request to an endpoint and the status code is 200 however this one is saying it's moved permanently which probably means it's just redirecting me to uh www.google.com so I'm just going to follow this next one here notice the status code is 200 and Status codes are part of API requests that tells you the output status of an API like was it a good API call was it a bad API call was there an error and we'll get into status codes a little bit more we have an entire module on it in our dreams into Apps course but um status codes are a great way of understanding what's going on underneath the hood uh as you know the output of an API but okay let's move forward so we have status code here and now if we go to response we're going to see what the API actually returned us and what do you know this looks like an HTML document if you scroll all the way down you're going to notice there's some CSS and and pretty much looks like there's everything we need uh to render this exact HTML page that you're seeing here so this um HTML that was returned by google.com is simply just to render a web page here so awesome now you know that you've been making get requests like your entire life every time you go on an application and you render data you're making a get request let me show you another version of this let's head over to mba.com okay and I'm going to refresh this page and clear all of the data in my network Tab and I'm going to refresh nba.com players okay and now we're making a bunch of API requests I'll let it SLE for a second and then I'm going to grab this API right here and I'm just guessing you can probably click through each one of these and see exactly what's going on but I'm just going to guess that because it says player Index this is probably an API that's important uh that's potentially rendering all these players so cool so how is the front end rendering this data that's coming back from the API well let's take a look at what the API actually sent us back so if we click on response you'll notice that we actually have a response type of Json and you can actually see that sometimes by scrolling down in your um preview and notice that this is actually a Json object we have keys and values so we go over Json objects as well in the course and there's actually another um it's actually part of the free course that we have um at ambitious lab so when you go to the website and log into our lab Dash you're actually going to see a free course in there called um uh intro to no coding and there's a whole lesson on there of of what Json objects are so this Json object is simply just a bunch of key value pairs right and so if I go to this result set and I drop this down you'll notice that there's a bunch of data here and if I drop down this row set looks like there's a bunch of data about players and what do you know I found a bunch of players here right Karim Abdul Jabar um and a bunch of others so if I drop one of these down notice that these are actually uh representations of individual players what this API returned me is an array and in computer science an array is a data type used to organize a list and of course in this use case we would want a list right because this is a list of all players so what this API has returned me is a list of all players in the NBA and what the front end is doing is it's using Loops or um map data from list if you're using flutter flow and it's mapping each one of these list objects onto the front end okay so that's how applications work you make request to a backend the backend gets you the data sends you either HTML or Json to the front end and then your job as the front end developer is just to take the Json and map it to the front end it's not so bad as long as you understand how to design business logic where to get the data from it's not so bad so this is why build Chip is going to come in handy because now that you know these fundamentals we can head over to build chip and start constructing an API call right so here's me at build chip and this is pretty much a blank editor of how an API call is constructed so let's kind of start from scratch here and let's pretend that we are building an API for an AI teacher okay so how would we do that well first on a blank build chip project we'll tap on ADD trigger and we have a few different triggers here the one I want to focus on today is a rest API call because we are learning how to make an API call from a front end to build chip so build chip can process the data and return it back to the front end okay so let's click on rest API call and tap add trigger we're going to build an AI teacher okay an AI teacher is going to take in you know maybe a topic for a lesson and it's going to return to the front end some data about the lesson okay so let's create an API call that says you know slash generate lesson and since we're going to take in data from the front end and we're going to um make some updates via an API call to chat gbt and for this exercise for our AI teacher we're going to have two apis because I want to demonstrate to you get and I want to demonstrate to you post the first API is going to be a get request that will render to the front end a list of topics for lessons so if we want to just render data to the front end what type of API do we need a get API right so let's change this method to get and then let's say slash toopics okay and then what we're going to do is add another uh node here and we are going to use this node to organize some data and send that data to the front end cool so we've created that get request and now we just need to return some data to the front end so in this return node we have status code 200 which means the API was successful and then we're going to manually set some values here okay so I'm going to open up this editor and I'm going to send back a Json object because as you know front ends require Json to parse and show on the front end so I'm going to open up a Json object here and then I'm going to say topics with a colon and I'm going to set this to an array and I'm going to say math you know English and we'll say physics and that's it okay so that's going to be the Json response that this API is going to send back to my front end so let's go ahead and test this out shall we Tap Play and notice a couple familiar things we have an endpoint URL which is the location of our API so this endpoint URL is what our front end is going to call upon to render data back to the front end and notice you have query body and headers and we go into this a little bit more um in another lesson but query is essentially the same thing that you saw back over at um the mba.com example the headers that we had here inside of our you know mpoint URL where we had College country draft pick draft year these are called query parameters query parameters are a fancy word for inputs like think of the word query query means question and parameters is a um a way to describe like boundaries for uh input right so these are known as query parameters and Bill chip even has a way to uh input quy parameters I'm just going to give you a quick example like since we have college equals we could actually say college and then we could say like Stanford right and that's how we would actually send data to a um a get API and use that input to maybe use it as filters I'm not going to do that for now what I want to just do is I want to test to see that this um API call works I'll hit test workflow and let's see where we get nothing maybe it's because I didn't hit ship let's give it a shot now awesome so I hit ship and my workflow successfully deployed now all I got to do is copy this endpoint URL and let's just try to make a get request directly from our browser and that's something cool to know too anytime you want to make a get request your browser supports get requests just off the bat you can put any API call or any request endpoint here and hit go and you're essentially making a get request you can't make post requests this way you have to use another API client like Postman um or uh there's others like Swagger I've been using post man most my life but for this case since we're making a get request I'm just going to run the API in my browser and look at what we got here we actually got the API look how easy it was to build my own API server that returns like a fixed set of Json this is fantastic because now imagine this I can consume this from a flutter flow application map it to the app and then take that data and then send it back up to another API which I'm about to build here so let's do that okay I've created created a really sample basic application in flutter flow just to show you guys how this is going to work so if we go to flutter flow and uh create a new API call I'll hit add create API call and I'll say get topics we'll set the method type as get we'll head back to build ship to copy that mpoint URL bring it over here and add call then let's test that call hit test API call and boom we got the data right here in floter flow so quickly I'm just going to go over here bring in in a uh list view drop it and then at the page level I'm going to do a backend query my backend query is going to be an API call we're going to say get topics confirm boom now we have a list view what I'm going to do is I'm going to have a bunch of buttons on this page and each button will map to um one of the elements in our uh list so one button for math one button for English one button for physics and since these topics are sitting inside of inter array I can use the list View and use the render uh data from list um function inside a flutter flow to render one button for each item so watch me do that I'll head over to the ACT excuse me the widget tree tap on my list View and my list view will have generate children from variable I'm going to tap on the uh value and I'm going to set that value to the get topics response the path name we'll just set for custom and I'll say it's dot topics because that is the key that I've set the array to so head over here hit do topics confirm and then we'll say topic is my variable name hit confirm okay and now boom I have a bunch of buttons here then I'm going to set my button text to topic item no further changes and hit good now let's go ahead and test this out all right so my simulator finished and look we got three buttons that say math English physics from an API call so now this is beautiful right if you go back to my previous video where I talked about being too tightly coupled we're not tightly coupled at all now I could ship this app to the store and then all I would need to change is my build ship API and the data would change on the front end I don't need to go ship another version to the App Store now because my application is fully decoupled and this is the power of building your own apis and build chip and having that decoupled um application and this is why I'm super excited about the future of no code and we're just getting started within minutes we went literally uh stack to stack and we've uh designed some data we've built a front end we built an API and this used to be stuff that literally took hundreds of lines of code to set up a API server send it to Heroku then connect it to the front end do with Coors errors it used to be terrible I'm telling you like I've built apps for 10 years and this is actually mindboggling now anybody can become a full stack developer literally just by dragging and dropping and putting these things together but it's not easy you need to have this problem solving mindset and you need to be able to um problem solve and think like a scientist it's not as easy as Squarespace in Wix but if you're able to sit down put your mind to it you can absolutely do this all right let's build one more API right let's actually round this off let's build an API that takes in the topic and then uses the chat GPT API to return like lesson plan ideas for teachers okay so now let's build the second API call that's going to take in a topic and return an AI generated lesson plan so here in build chip we're going to add a new workflow tap on ADD trigger and of course we're going to use another rest API call except this time our API is going to be called SL generate and the method is going to be post okay now let's add another node and for sake of just getting this API set up the first thing I want to do is just make sure that this API actually works so I'm going to hit status code okay 200 and then I'm just going to ship it and all I want to do right now is get the bare bone set up this is a process that I like to use called incremental building which is the idea of adding small features one at a time and of course testing it along the way so cool we have our workflow deployed now I'm going to copy that endpoint URL and head back to flutter flow I'm going to hit add new API call and this this time I'm going to call it generate lesson I'm going to change the method type to post to match what we have in build chip and then I'm going to paste the endpoint here head over to the test API call Tab and I just want to make sure that we have a secure connection between flutter flow and build trip boom we do because now we have a status code 200 and we're good to keep working the next step here is to create the connection to open AI to generate the ai ai generated lesson so open AI we're going to use the open AI chat uh module so we'll hit add then I'll head over to open Ai and I'm going to create a new key I'm going to say build ship November 11 and my second one I'm going to hit generate key I'm going to copy this key and I don't really care if I show it to you all right now because I'm going to delete it right after this my system prompt the system prompt if y'all don't know it's a prompt engineering technique uh where you can set kind of the context of the system so I can say you are a lesson plan writer you are a good you are a um you know High School teacher okay my session key uh I'm going to leave that blank and then the user request is what's actually going to be sent to the AI so imagine you're talking the chat gbt that's what goes inside of user request I'm going to say um hello teacher you are a um lesson plan writer write me a lesson plan for the topic of and for now I'm just going to say science I'm going to hard code that because I just want to make sure this is all working temperature we'll keep to 7 and for the mo and for the model we're going to choose gbt 4 for the return value let's just hit the edit we'll go to open AI chat we're just going to send this entire open AI chat object and we'll go ahead and hit ship beautiful once that's done we'll head back to flutter flow just to make sure this is working we'll go ahead and test the API call and hopefully we should get a response from open AI boom and we got the response awesome so the status is 200 and then we have a Json object here that says output and then there's a lesson plan with some data yes let's go keep moving all right the next step now is to map this data to our front end and be able to take that input from the front end send it to build ship and then respond back with the dynamic output beautiful so let's go to our um front end and and what we'll do is We'll add an action so what's going to happen is uh we will add an action we'll say API call we'll make an API call as soon as this is working we'll set the call name to generate lesson we'll make sure that we can actually send some data so we'll add body we'll go to Json we'll make sure that we can actually send uh a key called topic with a colon and then what we'll do is we'll make sure that we have a variable that can accept that topic the variable type will be string we can hit save and then now inside of our body we'll be able to drag and drop the topic into our API call gorgeous beautiful so now we can go to the front end and actually wire those things up we'll go back to action flow editor now we have the variables available to us we'll hit topic and then the value will be uh the actual button that we clicked on so we'll hit topic item no further changes because that top topic item was the same uh item that we were mapping from the generate children from list and now the topic is going to get sent to the API uh when we tap on it from the front end so what I'll do now is I need to set up my API to accept that input so we don't have the ability to do that yet so what I'm going to do is click on this I uh excuse me I'm going to click on edit here sorry click here edit beautiful and we actually don't have any configuration set up for pram so I'm going to hit a new PRM go new input here we're going to say topic oops prams oops new pm here we're going to say the key is topic and we're just going to say the label is topic type is string and we definitely need to make this a required field because we don't want to send any API requests without the topic I'm going to hit save and now notice that we have the ability to send in a topic now I'm going to type in the word physics and just to a test to make sure that we can take this topic and inject it inside the user request I'm going to edit this here I'm going to surround it in back ticks um well here I'm going to let Bill chip handle that now I'm going to go topic of colon I'm going to remove science and variables I'm going to say request um and then we should be able to say body okay we could say body. topic boom and now that will accept topic and inject it and at this point we should be good to go let's hit ship awesome so looks like that's working and now I can go back to phlow and now let's test to see if this API is actually accepting some input so we'll go to the API call and now we should actually be able to test uh variables too because we had set up our variables for the uh generate lesson API cool so we'll hit response and test and now you see here that in our test we have the variable of topic available now let's try like history hit test API call and hopefully if this all goes well we should be able to see that our AI is now taking in input from our front end and we should be able to generate Dynamic output that way let's see how it goes okay so it's still saying scientific method which means it's considering science let's find out why okay so we sent in um variables boom let's see the body is now topic history let's make sure that our um API is actually accepting the body right so if we go to user request hit edit ah so it doesn't look like we had actually injected that maybe build chip messed up so what we'll do is we will go variable topic of colon variables request body and we'll say body dot because dot notation is how you access uh key values so we'll say body. topic okay boom it looks like it like that and then we'll say ship and let's see how this goes I'm super excited because we're moving so fast okay test API call back at flutter flow and we should see a history based lesson plan [Music] boom and we did we got a history lesson plan awesome the next step is to actually trigger this from the front end so what's going to happen is uh when you click on this button we're sending the topic and now if the API succeeds we can add a action for alert dialogue hit informational dialogue and let's just say output and the message will be get topics not get topics response but we're going to have the API response so we'll say action outputs API results we'll say Json body and Json path and then our Json path is actually do output and boom let's hit confirm and now let's make sure we can run our app I think we have an issue here uh API ah topic value is not set so we'll hit topic item confirm boom so that should subside there now let's test our flutter application and if this all goes well we would have just built a very basic AI lesson plan generator for teachers using flutter flow and build chip fully decoupled within literally 20 minutes so let's do this awesome so our app is done running and now it's the moment of truth let's tap math and let's see if we get a lesson plan back for math let's go we did it we built a full stack app in literally 20 minutes using flutter flow and build chip fully decoupled I'm stoked honestly you don't know how stoked I am I get so lit off this because I've spent years writing code by hand trying to build these API Integrations myself and now we've integrated full AI integrated application because now we've integrated AI without to write a single line of code and so that's the beauty of build chip now we can just keep adding nodes and keep adding more business logic without having to do anything to our flutter flow application and for those of youall who have been building with flutter flow before you know that sometimes it can be a pain to have to debug and figure out where things are falling apart in your apis and your action chain but now we don't have to do that anymore this is absolutely awesome I hope if you followed along that you also got the same output and from here you can progressively build on more functionality and the sky is the limit I hope you enjoyed and if you want to build your app idea with me come hang out at ambitious Labs we have a free Discord Community head over to our um website at ambitious labs and you'll tap on our free resources at the top of the page and you'll notice that we have a free no Cod training a Discord community and of course please subscribe to our YouTube channel we're going to have a lot more content on flutter flow and build chip because the world of startups is quickly changing and the future is no code and the future is now so I'll see you soon join the Discord community and I hope to see you in our next lesson take care

Channel: Ambitious Alim

Views: 8,668

Keywords:

Id: 8CoU_PzFyPQ

Length: 30min 33sec (1833 seconds)

Published: Fri Nov 17 2023