Flutter & Supabase (Open-Source Firebase Alternative) - Lets get started

hey everyone so today we're going to start making a flutter and super bass application so super bass is this cool new open source firebase alternative they have sort of everything hosted on their website so you can spin up a project that has the database authentication and storage pieces all working right now they're still sort of in beta because the functions are still not out and there's still a lot of uh def work um being done the git community is pretty active for this project as well so there's to be quite a bit of changes coming in i'm super excited to see uh where this ends up so this is actually my first time also using super bass i do have a little bit of experience with flutter but uh super bass is it's my first time so there'll be a little bit of learning for both of us um so the first thing you'll want to do is go to superbase.io create your account with your website and it'll prompt you to create your organization so i just put whatever or it's just an input field with a name then after that you can create your new project so i'm just gonna make whatever project name here and then the database password is probably important if you plan to keep this product around and use it or use it for something important because i'm guessing this is probably going to be your admin password for your database as well so um this password thing is actually kind of hard from when i was messing around with it earlier today so you may want to um kind of write it down and make sure it's complex but still something you can remember um for the region uh you can pick whatever you think would fit best to your audience or wherever you're at i'm just going to leave with the default uh east us and you can hit next um it will take a few minutes to spin up your database and your api and all that back-end stuff for you so well actually while all this uh database and back and stuff is building we can go ahead and get started creating our flutter project uh this is not a flutter introduction tutorial so i won't be explaining all of the details about clutter and kind of like the basics i'm no expert or pro by any means so if you see something wrong or that i'm doing something completely wrong please uh bring it up in the comments and let me know um i'm also not going for best practices here or anything this is just uh solely for fun and for exploring uh super bass i think the goal will be to create an application kind of driven by what you guys say in the comments i don't really care if it ends up being a frankenstein app with like just no theme going on whatsoever i'm i'm fine with using it sort of as our uh playground if you will um for super bass and flutter whatever you guys want to take this direction too i'm okay with if not i'll just kind of keep throwing ideas and kind of keep making videos and seeing where this ends up at i i will put this in an open um public repository and github as well so see the description down below for the link uh you're welcome to uh create a fork of it or just a branch whatever you guys want um i will probably create a new branch after every video so that kind of can mark our little checkpoints um so that way if you're watching the videos along you can always kind of jump into that branch or wherever the video is at if you want to skip certain things that are maybe just too easy or you're not interested you can always uh just switch between branches uh it looks like her uh api and database is finished uh building here so let's go ahead and create our flutter project uh we'll just call it whatever app well we'll call it cool app so we don't with our whatever stuff over here on superbase so we'll cd into that cool app directory and we'll open that instance of vs code into that directory so we can go ahead and jump into our main.dart and just clear out all this fluff all right and i typically just create a pages folder to begin with this is kind of like it's getting the project folder structure laid out pretty basic don't go too crazy so for the first page we can create a page and this will be a staple widget and we'll go ahead and import flutter widgets and we'll return the scaffold here and for our body we'll just return a column and that should be good for now now we'll want to go ahead and change the reference to the widget we created it does not take any parameters and we can go ahead and delete all these comments and i think we should be good um so now we can jump back to super bass and again i'm also extremely new with super bass here so i think we'll just create a table here um i saw some of the examples earlier going off of a table called movies so we'll just kind of follow that as well to keep things simple and follow their documentation and be able to copy and paste code much easier i'll show you guys here in a bit but a lot of their snippets are in javascript so they're they're not 100 copy and paste into dart but this index is extremely similar we'll add it add a name column and it will be a bar chart type and i suppose we can make this not empty although it doesn't matter because we're going to delete this table later it's just kind of going to be to get our integration uh working and making sure that you know we can oh i hit add row and accident um but this is just going to be to make sure that we can pull and save data okay we'll go ahead and save our table with a name and description columns of varchar and then we can go ahead and jump into the settings tab here we go into api and this url and this api key are what you'll need to set up your package so we can go ahead and jump to uh pub.dev packages forward slash super base and we can go into the installing tab here uh copy that dependency and go back to our project in our pub spec dot yamo we can go ahead and add the super base dependency and when you hit save assuming you got your extension set up correctly it'll run flutter puff get and we should have this dependency now installed we can go ahead and switch to the example tab and we can copy this snip it right here um again the super bass url and the super bass key are what we're gonna copy from our super bass api configs here i think again not 100 sure but we'll find out here pretty quickly um we can go ahead and probably not again not something we'll keep forever and not ideal at all but we'll just set it up here kind of at a high level we'll create this global final clients um variable we'll call it base client just in case you haven't some other client variable somewhere else it doesn't confuse us we'll copy the url and we'll copy this api key paste it right into there and this should probably be enough to get us going for the saving and reading data um maybe for the authentication we may need to do more setup later um but i'm not sure we'll find out when we get to that probably in the next video that's where we'll do that authentication so we won't worry about it too much for now let's go ahead and try to see if we can fetch some data so let's insert a row here in our table um well let's just do two um call it gladiator and let's google glad and we'll go ahead and just copy that description and we'll hit save movie by the way you guys should check it out if you haven't watched it that's one of my favorites growing up and i think that's why good enough um we can add another just basic test and then test description just you know to fully be 100 sure things are flowing correctly um we'll use a future builder here we can go ahead and right click column and do a refactor we can re wrap it with stream builder um since we're not doing the real time we'll just switch this to future builder and let's switch this to future and we'll create a movies function and that will return likely a list of movies so that'll be a type movie and this type doesn't exist yet so we'll create a class called movie we can go ahead and create a models folder and we'll create a movie.dart and let's take this over here okay and our movie is going to have a name and a description and we'll probably just go ahead and create the constructor that takes in the name and description and there's a lot of cool libraries that you can use for serializing and deserializing maps or json data or whatever other type of data formats into your class variables but we're not going to go into that for this at least for this video we made it later uh if somebody wants us to explore that but for now we'll just manually map that out pretty common with json the type will be a map of string and you can go with dynamic for the value type and then we can just go ahead and return a new instance of maybe from that map with the map movie uh i'm not 100 sure how super bass will return this map so it could be that we may have to make some changes here um once we get it hooked up but i'm assuming this should work so go ahead and jump back here we'll just need to import that class we created and now we are pretty much set to pull that data in so we can go ahead and copy this snippet right here just copy that whole snippet we'll make this async so and i will return a feature of a list with a list of type of movies so that means our snapshot here from the future builder is actually an async snapshot of type list with movies we can change that object to movie now all we have to do is make sure we return the right data type so we'll create another variable data list this will be response dot data oh okay sorry our client here still doesn't exist to remember we named it in main dot dart we've named it superbase client so we can go ahead and replace that with superbase client and auto import that in there okay so our response will be let's see i'm not super familiar with this library like i said so i think it'll help yeah so it does have that data variable and we'll just cast it to a list and then we can just return a map of this list straight into that movie type so we're going to turn data list map and we'll return a new movie for each item in the list and i am missing the from json right there so now we have this method here that returns a list of movies oh i have to replace that still and if you guys have any questions i ran into this earlier about the syntax of the tables but it uh super bass creates this under api here it creates this sort of auto-generated um pretty basic set of documentation for your tables that you create so that's pretty neat um this is kind of old boilerplate code you can copy like i said it's all in javascript but it it'll be pretty straightforward to change into dart so for example for insert here uh we can probably just copy this snippet later on and then just change it to dart syntax okay and now just to get back to this it looks like i need to change just a list movie type that was my bad and now that we have a snapchat here with our movies we can go ahead and map that into um i don't know maybe let's do a list view and we can just do list house here so we'll map snapshot data where data is our list of movies and then we're going to change e to be a movie and we'll return a list item for each movie or list file so we can do my autocorrect is just screwing me up right now title and we can just do movie.name and for the subtitle we can get the description so we'll be moving description and let's not forget to cast this to a list which i always almost do and i think we are good to give this a go i think right now i'm just running the web the chrome yup the chrome emulator here um for the next video i'll do android or ios um more likely android just because i'm on my windows right now but as soon as this chrome debugger starts up what's gonna happen is when i hit our main function here it's gonna create this home page widget and it should go ahead and run through this code and it looks like we have an issue let's see if we can identify it quickly so in homepage.dart we have a no on map so let's go back to our table it looks like our name description is all good we have a name we have a description sometimes the spelling can break these so let's just make sure oh see there we go so here it should have been name and these little mistakes are what get you so this is where a serialization and deserialization type of a library that automates these methods for you would come in pretty handy but if we go back to our emulator you guys can see that on the reload it pulled in the movies uh we'll do another reload here just to show it um it looks like we're probably going to know somewhere probably because of the snapshot we can go ahead and clear that up just so you don't get it on your screen but basically if the snapshot has no data we can just return a circular loading progress bar there we go circular progress indicator that's a mouthful but there we go so no more error um but this is a pretty basic uh way to get started um i think that's probably all we'll cover in this video today if you guys have any questions in terms of what you want me to dive into next please let me know otherwise i'll probably end up doing authentication or possibly um diving into the real-time aspect which is what we all love about firebase um i remember the first time i saw the firebase firestore uh in action i thought it was the coolest thing ever you know within a 20 minutes of developing in half you could pretty much create a really basic chat application um which we could also explore if that's something you guys want to do but uh right now we're just doing the basic api uh pulling data um the insert would be pretty much just as easy again you guys can always check out this api and this auto generated documentation but for the insert yeah so it'd basically be this except instead of the select we do an insert and then just passing the object um i think we can explore that once we do the real time and so just let me know in the comments uh if what you guys want to do after i just kind of show the basics of super bass and flutter and show you guys kind of in action what we can do i think this will be pretty cool application we can start doing maybe like a profile for user and then kind of move on to wherever you guys want to go um whether it can be exploring certain design patterns uh sitting how to set up your project in a multi-environment way dependency injection i mean any package you guys want me to try out um the key thing will be that we'll kind of want to stick with superbass because i know there's a ton of firebase and flutter videos but i really want to keep this focused with superbase because i think it's a really cool technology and i love that it's open source and i think um if you guys want to support them definitely you guys should go check them out on github and contribute or help in any other way you can because i think they're doing some really cool stuff um whenever the functions comes out i think that's when uh can be a lot more identical to the feature set in firebase and really you'll be able to do you know all the core functionality that you can do in firebase you'll be able to do superbase so thanks again for watching guys uh make sure to like and subscribe and let me know in the comments down below where you guys want to take this next

Channel: Alan Negrete

Views: 8,194

Keywords: Flutter, Firebase, Supabase, Flutter authentication, Supabase Storage

Id: vqfFrBH42gE

Length: 21min 14sec (1274 seconds)

Published: Sun Apr 04 2021