Creating a Flutter App with a Google Sheets Database

in this video I'll be showing you how to create a database using Google Sheets turning that database into an API and then using that API in our flutter apps we've got a lot to do so let's get started to get started I created a new folder in my Google Drive and then I created a spreadsheet inside that folder and I've gone ahead and named it SMB data because we're going to be building an app based on Super Mario Brothers and listing out all the characters now the database that you make could be whatever you want depending on if it's simple for like a simple app like this or even more complicated you can still use Google Sheets to do your database for you as long as you're not saving any you know privacy data right you don't want to do that but other than that simple data for your app to work you can do that right here and have the flexibility by changing it with Google Sheets which is really easy so we could manually write this by name purpose and then we also can put if it's an enemy or not but we're going to take it a step further because I don't like writing data and if someone else can do it for me then I might as well have them do it for me and we can do that by using chat gbt so we're going to jump into chat gbt and we're going to ask it to do the database for us we can do this by writing I need a list of all the characters in Super Mario Brothers uh for the NES I need it written in a table and then what we want to do is we want to tell it our table essentially it's a name a purpose and then is it an enemy and then we can go ahead and make sure no spelling mistakes you couldn't send it with spelling mistakes but just in case now what we want to do is this doesn't really tell chat gbt exactly what we want so what we can do is give it a little bit more information I need the purpose to be detailed so now I need a detailed purpose and the enemy um and enemy we'll call just an enemy to say true if enemy or false if not and that kind of gives it a you know that's what we want we want enemy to be true or false we need a detailed purpose of our character and then of course we need the name of the character which is pretty self-explanatory so now chat TBT is going to go through and give us that information in a table so make sure you tell it you want a table and then make sure explain anything if it doesn't make sense enemy might make sense to chat gbt so we just kind of explain what we want there and then it's going to go through and list out all of the characters now I don't know if all of these characters are in the normal uh NES um I've done this test a few times and it doesn't give me this long of a list but sure we'll take it and then of course you could go through and update the data exactly how you want it to look but we'll just use what it gives us and we'll go from there so now what we can do is we can go ahead and paste it if we do paste it just Ctrl V it's going to mess up and look not that great so we can hit to control shift V and it'll give us just the data itself and then there we go we now have our database with a name a purpose and if it's an enemy or not now what we need to do is we need to take this database that we just made and turn it into an actual API and the easiest way to do this is we can go up to extensions and go to apps script now with Apps scripts open we can go ahead and rename it we'll just call it SMB data to match our file name of our database and then what we want to do here is we want to add in the scripting that we need to grab the data from our database and turn it into Json data and it's not too complicated for you to do it yourself but why do something yourself if someone else will do it for you so we can go back to chat gbt and we can tell it exactly what we need great I'd like to be nice to chat TBT I've added that data to my Google Sheets make sure you tell it you've added it to Google Sheets can you write me the code using apps script make sure you tell it apps script or else it's going to give you like polython or something or JavaScript so tell it you wanted an apps script and then turn my sheet and you want to make sure that you want to tell it to turn your sheet into the API into an API if you don't tell it you want the sheet I've noticed it just gives us the data again so I want to tell it to use my sheet to turn it into an API now depending on your response you might not get the best response I always look for the VAR headers values.shift what that means is it's just going to shift down one and not include the headers I wish you can kind of see here so sometimes it doesn't do that sometimes it does I think this is the right way to write it if you want it to but just play around with it but this kind of gives you the idea uh here we have the varsheet and we can open it by ID and then we're going to get the sheet name and then the sheet name is going to be sheet1 so if you're going to use a different sheet you would actually put a different name here like let's say we added characters or we added items and we had multiple Pages which we could multiple sheets then you'd want to rename this to whatever this sheet name is down right here now this does not actually help me because it says spreadsheet.app open by ID I don't have the ID so what we can do is we can um can you make it where I don't have to include the uh sheet ID and then this could rewrite it for you so that you don't have to include the sheet ID and it's going to grab just the get active sheet now again this is a good way if you're going to have this with a bunch of different cheats and stuff um but really we only need the main sheet so we're gonna just get get active sheet because we only have one and it makes the code a little bit easier that we don't have to change it great so now we can go back to our app script and then we can just select everything and paste it in and just make sure it says do get sometimes it doesn't um so always make sure it says do get and then that's it we now have the database done we have the scripting needed to turn that database into Json data now all we have to do is deploy our web app so that we can access it and to do that you just click deploy new deployment and then when this page pops up you click the little um settings icon and go to web app here we can give it a new description we can execute it as me and then who has access we want anyone anyone that has this link can have access just be careful you don't share the link if you're going to be using stuff like that because then they could post to it if you add those functionalities and yeah you don't want that so keep it uh secret but that's how you do it and then we do need to authorize the access to the app so click the button log in with your account it's going to tell you that it hasn't been verified and it's not safe you should not give permission until the developer is actually verified it with Google but that's us so we're just going to hit Advanced and then go to uh it on safely and then we'll just allow it because again we're the developer we can do that but don't do that unless you're the developer great now we're going to wait for this to update that and then when it's done it should give us a URL all right so here it's gone ahead and given us the URL so we can just hit copy and then hit done if you ever need to go back to your website and go to manage deployments and then the URL will be right here which you can copy great now we can go back to chat TBT and tell them that we're done and that we need to start coding our app great I have a API URL I will give it the URL and then we need to say um can you code for me using flutter a class because we want to make a class for our API um for my data using my API and then this should hopefully do what we want now I have done this video a few times I tested it to make sure that it works consistently and sometimes it does and sometimes it doesn't so just be careful if you are using chat gbt to code everything for you sometimes it'll be perfect sometimes you're going to get a lot of Errors so just keep that in mind obviously you should be coding yourself or at least know how to code it yourself in case you get some errors but I've done this many times and I get different results every time so so just keep that in mind but here we go it's gone ahead and given us the data essentially it's importing convert because we're going to switch from Json data and then also the HTTP and it's created a class for address so this class is very simple it's just going to grab a name purpose and is it an enemy it's going to require all of that information every time we use the class and then it's created a factory Force which is nice so what it can do is we can just call from Mario character Dot from Json and then from here it's going to do the name is the Json name the purpose is the Json purpose the is enemy is Json enemy which is equal to true so it's going to go through that data and then just essentially turn it into an object with our class and then we also have it here where it's going to fetch our data so we can just call fetch all and then that's going to grab our data as long as it gets a response it's going to code our response into decode it from Json into an actual data and then it's just going to map that data using our Factory so it's going to go through the database of everything we gave it and then just turn it into the data exactly how we need it as a Mario character which again it's weird that I call it a Mario character because there's other characters but a character and then it has a name a purpose and it is enemy so we're going to copy this and jump over to our code and then what we can do is because this is a model we can go to our lib folder type in models and then we can make a new file inside of there and call it character underscore model dot Dart and we're going to paste this in now right away we're going to get an error because we need to install the HTTP so we can do that by Ctrl tilde and then flutter Pub add http there we go so we've now installed HTTP everything works great there so we can save now what we need to do is go back to chat TBT and we need to grab out the second piece of code that it gave us essentially it's returning a list view Builder and then this is not a full app let's just ask us to can you code the full can you code the full State full widgets called characters and return my data also for the is enemy can you make it a green thumbs up if not an enemy and a red thumbs down thumbs down if an enemy and the cool thing about chat TBT is you can tell it to change the code for you and the reason why I told it that is one of the tests that I did it gave me that information it gave me a green thumbs up if it's not an enemy and a red thumbs down but sometimes it does sometimes it doesn't so it's very weird how sometimes you'll get exactly what you think you want and other times you won't but again you can just go back to chat gbt and say Hey I want it this way can you do it for me that way and if you look right here it actually gave us the class again which we could copy but we already have it so we're just going to copy the um the stateful widget that I gave so copy that and now what we can do is can go to Pages new file and call this characters underscore page dot dark there we go and then we will do this now of course we're getting a few errors one error that we're getting is the Mario character we're gonna have to click the light bulb and import our model but the other area that we're getting is going to be on characters um for some reason chat gbt does not add Constructors by default you can actually tell it to but by default it won't and then it always messes up the state and I don't know why again we could tell it to fix it but it's easier for us to just fix it so just keep that in mind it's going to mess up your state every single time and I don't know why and then here it didn't add a const here we can add the const for it just because I don't like squiggles and then if we hit save we should be good to go we don't actually need these two because they're imported in our model but if we hit save and then what we need to do is go back to our main instead of returning our home page we just need to turn our characters stateful widget and hope that it didn't use that name anywhere all right there's another issue I had it used in the same name more than once and uh let's go ahead here yeah so here we're getting an issue with the characters let's see if we can grab it this way there we go and it's not working why is it not working because it might be overlapping another name so what we have to do here is just switch it out from characters uh to we'll do all of this uh hit Ctrl D to do that do my characters there we go and now we should be able to call my characters sometimes chat DBT doesn't realize that it's using the same information and there we go we hit save and we have a list of Mario uh purpose and is it good or is it bad and these are all green which is not good we actually want them to not turn it to true there we go and if we refresh this should hopefully give us a data where some are green and some are bad there you go so Mario is the enemy are they flipped they might be flipped all right so it looks like our data is kind of backwards which I didn't even realize chat gbt said Mario Luigi are the enemy but Princess Toadstool is not okay and then uh the Bullet Bill is not an enemy and uh some of these are not enemies so interesting it doesn't know if Mario or not is not an enemy well what we can do then is we know that Mario is not an enemy right uh we know that Luigi is not an enemy so we can actually turn them uh into false Bowser is definitely an enemy Goomba Cooper piranha bullet that's so funny that it did that but here's the best part we changed our data and now we can just refresh our app and that's going to change the data for us there we go and that's the beauty of an API if you need to update something that was wrong or something that's changed over time you don't have to edit the code that we've already written you can just jump right back into Google Sheets and change the data and there you go it's now green for Mario Luigi red for all of the other enemies and then I guess Bullet Bill Cannon is not an enemy so yeah I hope you guys enjoyed this video let me know what you have plans of doing with the Google Sheets it makes it very easy very edible and can expand a lot you can have different sheets for different data and you can do your entire apps data for this I just wanted to show you a quick little uh you know snippet of how you could use it and the best part is I didn't have to code that much chat TBT did all the code for us and then we could just tweak the code exactly how we want it so I hope you enjoyed this video check out the one on the screen and I'll see you in the next one

Channel: Spellthorn

Views: 7,494

Keywords: Spellthorn, Flutter, Google Sheets API, Custom API, App Development, Database, Google Apps Script, HTTP Requests, CRUD operations, Mobile App Development, Google Drive API, flutter google sheets, google sheets api, google sheets, flutter gsheets, flutter app tutorial, mobile app development, flutter google sheets api, google sheets flutter, google sheet database flutter, google sheets database, flutter excel sheet, mobile app design

Id: iZPICyh05wU

Length: 16min 33sec (993 seconds)

Published: Thu Apr 13 2023