Using Github to Quickly Test your #FlutterFlow Projects on your Mac!

so in one of my previous videos we looked at how to set up your local environment ready for you to spin up your flutterflow project on your local machine fired up into the iOS simulator just to test it just to make sure that everything is working as you expect before you submit it to the App Store now in this particular video I'm going to show you how to very simply connect your flutterflow project up to GitHub which you can then make the changes in flutterflow you keep pushing them to GitHub and you can keep pulling them down to your local machine and keep testing them until you're absolutely happy so there's a number of steps involved it's really quite straightforward let's get into the video [Music] so the first step is a really really simple one if you haven't done it already please head over to github.com and create yourself account just go up to the right hand side here click sign up and then just follow the wizard and then you'll get yourself a GitHub account and then that will then allow you to then store your flutterflow projects up with inside GitHub and of course you can have multiple projects if you would like and then of course we're then going to then carry a number of steps in order to pull our project down to our local machine from GitHub so go ahead and do that and then we'll move on to the next step so I'm now back in Florida flow and I've got my project loaded of course your project could be any project you would like I'm going to use my trusty QR code project here for this particular demonstration so one of the habits you need to get into of course is making sure that um for me your GitHub repository name so this is the name that where you are going to push your code to on GitHub kind of matches the name of your flutterfly project so the habit that I like to get into is up a lot of top left here you can see here at mine's projects called Q underscore r underscore code underscore custom underscore widget so that is the name of the repository that I'm now going to create over at GitHub so if I'm not going to be over to GitHub now I'm just going to click here and what you need to do is also sign into GitHub you should end up at the dashboard here and um to the top left here you can see we've got a starting new repository so what I'm going to do is I'm going to create a private repository so this is just private to myself it's not public it's not in the public domain and I'm just going to go in here and I'm just going to paste my project name in here you can see here this matches now the fireflow project and I'm going to say create new Repository so it's as simple as that simply created that's it but we're not done yet we're going to need to now go back over to flutterflow and just follow a few extra steps let's go and do that now so with inside flutter flow I'm now going to move over to the top right developer menu here this option here just choose that and you can see we've got this option here called connect a GitHub repo if you just connect that once you click on it and then say uh and then what we're going to do now is we're now going to want to associate our repo so one of the steps that we also need to do is we need to install this flutterflow GitHub app this is just going to allow us to provide extended functionality to flutter flow in order to actually work with inside your actual GitHub repository so what I'm going to do is I'm just going to click this little GitHub option here I'm just going to choose that it's going to take me to a new page and now I need to actually install this so just hit the install and now it's come up with this option here I can actually choose the repositories that I would like to associate this app with now I'm going to associate it to the one that we just created so here I'm going to choose only select repositories drop down the list here and I'm going to choose the one that I've just created here let me just scroll down this QR code custom widget just choose that and hit the install option and that's it that's all I need to do so what I can now do is I can now go back to this particular repository so if I go back to the repository itself so let's go here back to the digital Pro personal account here and I'll go to my repositories and we've got this one at the top here just choose that one there and then what I'm going to do is I'm going to now copy this particular option this particular URL this is what I need I need to copy this now so just click on the little copy option here go back over to flutterflow and let's just now paste that actually into here so just paste that in and then say associate repo now of course this step is going to be important if you didn't do that then of course it will come up with a particular error and in very very short it will come up with a success message to say that it's actually now connected the actual repo there we go it's got a little success there at the bottom so we are now all good so now what we can do is we can now push our project code to GitHub so I'm just going to hit this little push to repository option just choose that and I'm from the very first commit I'm just going to say initial commit like that and just say push just gonna let that do its thing it's going to take a few moments to push that code up there and then we can then go and have a look at GitHub and actually see it there in fact it's just done it there so let's now move back over to GitHub itself let's just hit refresh and you can see that all of our code that is now being pushed in this particular location and we are now good to go so once that's now up there we can now follow a number of steps now to actually pull that code down to our local machine so let's go and do that now [Music] if you've been watching a number of videos on my channel you know I always like to get ourselves up and running really really quickly of course if you are a power user and you know what you're doing in terms of git there's other ways of doing this but we're going to use GitHub desktop it's going to allow us to get us where we need to really really fast I'm going to head you over to desktop.hitter.github.com you're going to land on this particular page and please download a version of GitHub desktop to your machine now you've got some choices here you've kind of got the Apple silicon version so if you're using an apple silicon workstation please choose the apple cider conversion or of course if you are running or you would like to use an Intel base then please do click on the download for Mac OS you'll get you'll get like a universal Edition that you can download as well so hit that download and then let's get this installed so I've already done the actual download itself so I'm just going to bring over a directory here and you can see here this is It's in my downloads folder it's called GitHub desktop arm64 which is for silicon Max which is what I'm running so I'm just going to double click on this it's going to expand the tool and here it is now we don't want to run it from here we want to probably drag and drop this for actually with inside our applications on the left hand side here you can just see I've got applications I'm just going to drag that into applications and just replace that I've got a another copy there and then now that is now nicely up and running so now I'm going to fire that up and let's move on to the next step okay so I've fired up GitHub desktop on my machine and this is what I'm presented with I now need to log into this particular tool using my GitHub credentials so what we need to do is click on the first option here where it says clone a repository from the internet just select that and of course it's going to come up here with an option here for me to actually sign in you should see something very very similar to this hit sign in and then I'm going to continue to my browser because I know that's what I've actually got actually Associated so so what it's done is it's now actually connected up to my browser it's authenticated me and now I'm presented with my actual repositories now if you look down here in the repositories you should see the one here that we've created this QR code custom widget now what I need to do is I need to actually select that and I'm going to need to then associate a folder on my workstation in order for me to be able to pull down that code now if you remember back to my previous video where we were talking about setting up our local environment for running our projects I created a folder called git with inside the documents folder so what we're going to do is we're going to place the actual code of this repository in there okay so I'm just going to make sure I've got that selected and then here you can see that I've got my location to where my git folder is and you can see here that it's actually called the directory name the same as my repository I'm just going to hit the Clone option now off it goes so that's now going to bring down all of my details here and what's really fantastic about this again if you've been following my previous video where we installed a visual studio code it makes it super easy because all I've got to do is hit on this open in Visual Studio code option here on the right hand side just to just choose that and then here we are with Visual Studio code up and running now of course this is a brand new deployment with inside um the git folder here so we are going to have to run this pub again option so this obviously will require you to have all of the setups from my previous video up and running and then if you've got that then you're in a perfect position so now what we could actually do is as per my previous video we could now run up the iOS simulator which we'll do and then of course we can see this application working so let's do that now let's go up to the search option here let's do a angle bracket and then let's do launch emulator I'm going to choose the iOS simulator so that's now going to fire up here on the right hand side if I just move that over here so in just a moment that should pop up there it is okay so the simulator is now running now of course we can now actually you can see down here we've got this connected our our actual simulator is connected down the bottom which is really really important we can now go up to the top here we can just actually say run without debugging so let's just choose a dart flutter there and then now what's going to happen is our application just as flutter flow would do is now going build our project and of course it will now fire up very very shortly in the iOS simulator so let's just leave that to happen I'll come right back once that's done okay so there's the application that's all nicely followed um it's all nicely loaded up there with inside the actual simulator so we are in a fantastic position so we've now got all that hooked up let's now look at actually how to then make the changes back in Florida flow and let's just follow the process back to here where we can quickly keep testing this so let's go and do that now so back in flutterflow then let's make a change to our project so where it says to Texas has the grand show let's just change this and say the digital Pro live maybe we'll do that one day and let's just uh change maybe the date to say the first actually the first of August like that there we go just a very very simple change now let's now push this up to GitHub let's move over to the developer menu again let's say a push to repository I'm now just going to put a message in here and I'm going to just going to call this one uh label changes like this always be very mindful about your commit messages because it's good for tracking history when you make these particular changes so try to is something that is a bit more meaningful in there to the changes that you make hit the push option now that's just going to go and do its thing if I go to the developer menu you can see here that it's pushing to repository now once that is completed then we will be able to see the success measures at the bottom which we've got and then we'll be able to head over to the actual um the actual repository let's just hit F5 here and you can see now you can see now we've got this label changes message now so you can see here that nothing here has actually changed but something with inside that particular folder has changed if I just click on lib you can see here now if I go to the actual uh the actual Pages itself you can see here has been made there as I click on the right one there it goes so you'll see here this is the code that's the flutter flow is actually generated and the label change has been applied in there so that's great so that's all there how do we now then pull that down into actual uh to to from from GitHub to our local machine so let's go over and do that now okay so this is probably the most simplest step of the whole video actually so I've just got the GitHub desktop in view here here it is here let's just click on this little option up here fetch origin just choose that that's now just going to quickly pop up to GitHub and it's going to pull in the change and then with inside our application here I can just do a hot reload and there we go I've just done hot reloading you can see here now those changes have now been applied to my application so of course we can now keep doing this now and we can just keep using this to keep checking okay so just an important point just to put to you and that is that obviously it's a one-way trip so you can't actually make changes on your local development environment and then push those up to GitHub to then see those reflected with inside a flutter flow itself now um that's okay for to the most part of course it depends on obviously how you are using a flutter flow as a tool it could be that you're actually doing a kind of 90 of the development of your fluoroflow application with inside the platform itself and then bringing it down to your local machine to do the final 10 where you might be putting some additional functionality in or some maybe some customizations that you can't actually do with inside flutterflow itself or you might just be using purely your local desktop just to test your application just to make sure that it runs okay with inside the simulator and that's fine so just make sure that that's only a one-way trip that when you're actually doing those type of checks so um that's it for this particular video I hope you found that really really useful of course flutterflow is developing as a very very powerful uh powerful tool of course by the time you're watching this particular video the flood flow version 4 will probably be released where there's even more functionality with inside flutter flow when it comes to actually doing branching and merging and all that kind of stuff so uh watch out for a video I want that um but please do like the video please do subscribe to the channel as well because there's so much for the flow content on there as it is and of course there'll be so much more coming in the future and um I also appreciate your likes as well that really does help the YouTube algorithm and a plus also gets these videos out to The Wider Community as well so until the next video I'll see you soon [Music]

Channel: The Digital Pro's NoCode Academy

Views: 2,226

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, flutter, setup flutter, setup flutter on mac, github

Id: F5FPS4d0Glw

Length: 13min 11sec (791 seconds)

Published: Sun Sep 17 2023