Automate the testing and distribution of Flutter app with GitHub action

foreign thank you foreign you might have seen me in a different setting before but I'm in a different setting today so pardon me for that I am obviously your host take which I want you for the evening and uh today we are going to be talking about something uh that's extremely important especially in the app development world uh we do all develop apps but of course we need to put them on the store and uploading our apps on the store uh can be a hassle obviously you know sometimes a lot of restrictions uh that may come with it but today we're going to be talking about uh automating this entire process and make it making it apps very much simpler than it uh than it usually is and for that we have a special guest today who will be from the gay cans family would be talking about how you can you know automate uh the testing and the distribution of your apps and make it easier to upload them on the store uh before we officially begin uh obviously a big thank you to all of our viewers on YouTube who have joined us right now uh of course we hope that you will learn something new from this interaction and a couple of rules uh during the presentation and of course if you have any kind of questions uh make sure you leave them on the live chat and post the presentation we would obviously be getting them answered for you so keeping that in mind uh we hope that you learn a lot today and uh I think it's time I invite my guest on on the live stream uh please welcome hi how are you doing today I'm doing great how are you great thanks so much wonderful so I uh we are under the impression that Tamma you'd be making lives a lot easier today by telling us how we can automate uh testing and specially distribution of all the apps that we make on the various uh stores across devices which is great we are looking forward to listening to you uh of course it's important to mention that the major flutter Enthusiast and he loves to work with the technology and today whatever he's going to be talking about will be in context of flutter apps uh with a special twist so on that note I would like to give leave the stage to you and take it away all the best thank you hello everyone so today in this session we'll be talking about the Clutter automation using GitHub action so just give you a little context like what happened every so we have always been into this situation where we are working on a project and then we have to continuously give Bill to the QA team or the client so that they can check and validate so in this process we have to give much of a time in building the application and then sending it to the client or the QA team itself so to make that uh is we have integrated GitHub action with flutter so that it deploys the application it builds and deploys the application to the Firebase app distribution and also to the GitHub release for uh for safeguarding the uh assets so today we'll look into that it's a little introduction date of action makes it easy to automate testing bending and deployment of the application using CI CD directly from the GitHub repository so if you upload our project into GitHub we can easily implement the workflow using GitHub actual so in this session we will be looking forward to implementing GitHub workflow to our flutter project which will analyze test build and deploy the app to the Firebase console and also to the file the GitHub videos so this is the timeline so here what we will be doing is we'll create a simple application and integrate that with Firebase publish it to GitHub and then once it is done we will add GitHub workflow to make the APK file and build the file with the APK and upload it to the Firebase app distribution and then what we'll be doing is we'll be adding it to GitHub we will be creating an IPA file and then uploading it to the GitHub release so the first thing first we'll create a sample application using flutter create sample app and we will integrate the Firebase with our project so let's do that so to make our work easier I have already integrated Firebase with our project so you can see that we have created a repository or a project later and here we have project settings here you can see that I have added Android uh app as well as the iOS application to do this you can simply follow these steps given in this uh SDK integration process and you can do that so let's see if they're in our code so here you can see that in the iOS folder in the runner folder we have added the Google service Google service info Village and as well is in the Android folder we have added the Google service Json right so this is done successfully now we will be setting up the app distribution in Firebase so to do that you have to go to file this you have to select app distribution from the religion monitor and then we have to just start distribution using using file this so here we can either add manually by dragging and dropping the APK or the ABB file aav5 orders also if you want for iOS we can add the IPA file to the uh 5S so this is the issue with the uh GitHub action where we can only use Ubuntu to upload the API to APK 5 to 5x so it doesn't allow us to use macro so we'll not be uploading the ITA file here instead we'll be uploading the IPA file to the GitHub release okay and then we will publish the application to GitHub and we will start the process of uh GitHub action so here you can see that I have already uploaded this project to GitHub so this is the simple stuff yeah so let's go to it where we'll be adding the get direction so to do that first we have to see in our project whether we have a DOT GitHub folder already added while uploading it to the GitHub or not so if it is not there we will be adding a folder and the name of the folder will be dot data and in that folder we will create another folder which will be named as workflows inside the GitHub folder okay and then we will create a simple Yemen file we can name it anything for for my uh for my is I have created a main.yaml file inside the work folder so this is the structure I have the dot GitHub folder inside that I have workflows and inside that I have the main dot yeah okay now we will start the coding so the first is to Define when the action will start so I have conveyed that it is in such a way that every time we push some code to the developed Branch we are starting the GitHub action so the simple code structure is we will start with the on go on command and in that we will give the push thing so here you can see that I have added push as a trigger we can also add pull request we can add closed we can add issues also there are many things that we can add and for this for now we have added push and I have selected the branch so here the branch that I have selected is developed okay so this is a simple step to another action when to start the when to trigger the action okay so now we need to define the OS that will build the action and set up the environment of flutter in this we will be using predefined actions such as checkout V1 set of java V1 and flutter action V1 to set up Java in Florida so this are predefined so it is written by developers who which we can easily Import in our application and do the process easily so checkout will take all your code and add it to the instance of the machine in our case it will be Ubuntu and then we will do the setup of java so in this what we'll do is we will set up the version of java that will be using for our development and then flutter action will set up the flutter version so every time we run a new release or every time we run a new action it will create a fresh instance of the machine and it will again re-download and re-initiate the flutter and the jump so what we have done for that we are running jobs so we have to write job and they will write that so we have to give a name to the bill for us for this we have given build and release we will set which version of operating system will run out so for this we'll be running it on a Ubuntu latest version okay so now the first step is to check out the code into the machine so for that we'll be using action slash checkout V1 then we will set up the Java where we have to give a with property with which we will set up the Java version so here I have written 12.x it means that for uh the version will be 12 but the sub version can be anything that is the latest one otherwise if it is necessary you can also specify the particular version that you want to add right so then we'll be using so we'll see the flutter action which will add the flutter version to the instance of the machine here we have selected flutter version as 2.8.4 okay we are done with our setup okay so the next process is to write a command that will actually build our application so for that we'll be using the uh we will write simple simple functions so we'll say run flutter pocket it will get all the dependencies then we will analyze the process then we will run shutter test to test all the test cases that we have added then it will simply do a clutter build APK it will build the APK file for Android okay so our half of our stuff is done okay so now the step four is to we'll set up the action that will upload the general upload and generate the bill to get a raise so for this we are also uploading to the GitHub release as well as we are uploading it to the Firebase so for this we'll be using NC Polo release action where we will be signing we will tell the flutter uh sorry tell the GitHub action which files to upload here if you see I have written artifact and then I have given this build folder and inside the release folder build app output APK release inside the folder there will be multiple files you upload all those things to the GitHub access right so I have given us time if I want to specify a single version we will write a specific file name and it will upload accordingly now here I have to put a tag so for every artifact that will upload we have to give a specific type to identify from the rest so what we have done here is we have given V 1.0 and then we are taking the Run number and putting it to the end so this will make the tag number a unique number right and we have to give a token for a throttle uh sorry not for the Clutter for the GitHub action so GitHub profile so let's see how to do that so now we will see how to set up Firebase and GitHub all right 5 is with written we need to set up the app ID and Firebase token in GitHub secret as well as we have to get the token from our profile and then add it to the GitHub seconds so first what we'll do is we will go to Project settings and Secret okay so let's see we'll go to the project folder that we have created in GitHub we will go to settings then we will go to secrets and then we'll go to actions here you can see there is a V2 add new repository Secret what you can do what you will be doing is you will creating a new repository Secret we will go to this project settings and we have to take this app ID to upload it to the Firebase app distribution okay so you can see you have to put the name so for our convenience what we did is we are using the token as a name parameters then Firebase app ID and file which token okay so we will set Firebase app IO so here you can see that I have added Firebase app ID and the ID is this string similarly we will be adding Firebase token so now how to get a Firebase token it's very simple so what we have to do is we have to install Firebase CLM in order to do that you have to do in npm Firebase NPA install Firebase CLI that will install the Firebase CLI and then you have to just do Firebase login this will prompt you to add the account which you are using for the project and then it will generate a secret token and you can see that in the red areas so you'll get that from this red area okay so now we have to add token so how to get a token so it is a what is a token for GitHub it is a token that will help us to automate the process in the projects so to do that we have to go to our profile we have to go to settings and then we have to go to developer settings here you can see we have personal access token we'll be using that here we will generate a new token and then we have to select all the we have to select all the things that is required so here you write a name accordingly and then you have to select what are the access that it will have so for us we just have to give access to workflow and repository right so we will give that and then we'll create the token and then we will add that string to our project yeah so it's done we have added the token now simply we have to write it down here so let me close this Explorer and to show you this so here we have to write Secrets dot token because that is in the secret so it will take automatically when it will run the workflow right so this will upload the files to the GitHub action GitHub artisans okay so we have followed up with this setting up the key in GitHub we have followed this now we have to upload it to Firebase app distribution so to do that we are using this Firebase app distribution GitHub action and with there we have to add the app ID which you have already added to the secrets and the token and then we have to simplify the group The tester group that we want to add this is not mandated this is optional and what to add tester what we can do is simply we can go to our project we can go to app distribution yeah then we have to go to tester and groups here you can create a new group and then add any email that you want to send the application to okay so we will add this in the group and then we have to select the file that will be uploading to the Firebase app distribution so this is the application so what you can do to make it easier you first build the application locally then you get the you the part that you have received and this copy and paste it here so that there is no error and we are done with the first workflow okay so now the only thing that is remaining is to create a developed branch and publish it once you publish it it will start the workflow okay so we come to the second part of our session where we will be creating the IPA and uploading it to GitHub so this is very simple process we have already done the most of the stuff in the first okay so now what we'll do is we will just copy and paste the same thing and name it iOS dot Yahoo there is no changes as of now and we will see what will be doing here so the first chain that we'll add is to change the operating system from Ubuntu to Mac OS so as we know that IP file can only be built inside a Mac OS so we will only do that so we will change the run on to Mac OS latest most of the things Remains the Same now we will build the IPA instead of building the APK so to do that what you have to do so we will do the normal stuff which is flutter pumpkin flutter analyze flutter test now we will run the application so we will run some commands to create the to get on the Pod data and then update it and then what install will do what install so here we are changing the report uh the folder to CD iOS then we are removing the podlock file we are the integer the integrating the Pod and then doing pod repo update simple stuff that we do in uh vs code and then we'll do pod install now this is a tricky area so you see what we are doing here we are building the iOS we are doing flutter build iOS no code signing no core side then we are navigating to the iOS iPhone OS folder inside build iOS and then we are doing mkdir which will create a new directory which is payload then we are changing it to CD payload so we are going inside the payload folder then we are we will get all these files so we are exporting all the runner we are then we have to zip that into our app.ip and this will create the app.ipa file inside the plot folder so let's see what it does here if you if I can show you if I go inside build if I go inside iOS we go inside iOS iPhone OS and you can see I have a payload folder which contains all these things app icon framework race I proj and then I have a app dot IPA this is the main thing that we'll be uploading into GitHub action release and then you will simply push to release we are doing the same release action where we will be uploading it to the GitHub artifacts so this is the artifact and then we are tagging it using iOS store so we have changed the name slightly instead of giving it V1 0 and the same name we have just added iOS at the front and then give a doubt and then we have the same token simple stuff no no changes mean changes only a small part here yeah and then code yeah and the only thing that is remaining is to commit the code and push it to the GitHub yeah so once we do that what it will do is it will start the project uh GitHub action and here you can see we will get two workflows build and release for Android build and release for iOS let me just zoom that yeah build and release for Android and build a release for iOS then if we go to build and release for Android you can see all the things that we have done will be here so we have done this setup then we are getting the code into our file based distribution so this is just setting up the Firebase distribution in the uh container then we are doing a checkup we are getting all the data and simply following the stuff here we are doing object pop analyze slutter analyze flutter test and flutter build once it is complete we release push to release we upload it to the app distribution and the GitHub release section and then we are cleaning up the uh instance similarly for iOS we are uploading it to GitHub we are running all these uh important spot commands and then we are uploading it to the flutter sorry GitHub release so let's see how it is uploaded if we go to release we can see that here we have version 1.8 and here you can see we have the app release APK output method source code and this uh zip ties similarly for iOS we simply have the asset which is app.ipa source code and the source code ZIP and we are done so this is the way to do a non-code signing process but if you want to create the Bill using signing like you have to you want to sign in then you can go through this URL and this will show you how to sign in the code and then you have to upload it to GitHub action GitHub which is yeah and with that we conclude thank you for joining so you can follow me uh in LinkedIn you can connect with me in LinkedIn and yeah foreign hello that was a wonderful and a very concise presentation straight to the point just how we like it okay while the presentation was going on we were waiting for some questions from all of our viewers but we do not have any so I think everybody has clearly followed uh what you have been trying to tell people here and I think it's been extremely helpful and I think it will be extremely helpful for people who are trying to get their apps pushed to various stores and how they can automatically automate this entire thing so that they can focus more on more on the building part of it right uh well uh I think one question just came in uh although I am not too sure about what this question is so uh Raju if you could just type your question again uh okay got it so that is going to ask if you choose flutter build APK uh split per a b i or I think API what changes should be taken care of in the main Dot yml yeah so simply when we create a split Avi it will create three files so in order to upload it we don't have to change anything so that will create three files and we are already uploading all the files that are inside the pop folder to the file GitHub action so here we have new stuff so it will upload all the versions for the arm and for the uh x64 to the GitHub really so from there you can download and run it on your device all right I hope that answers your question Raju uh if you guys have any other questions that you would like to ask then my uh now is the time you can post them here I'm still waiting for some questions if you have to if you have any for that matter all right so we got raju's question answer so that's kudos for that great uh well okay in that case I think uh there may be since we do not have any more questions I think we'll conclude this live stream here thank you so much oh wait okay not yet not yet uh sujit wants to ask will there be any down time when 100 deployment is done will there be any downtime 100 deployment is done so can you explain like what you mean by the downtime a little more context is required for the question uh when you say downtime what exactly do you mean so it'll take him a minute to type his question so we'll just wait around yeah sure get this answer before we wrap things up anyways when like whenever you are deploying it um all changes are replaced by new ones and new changes so every time you create every time you run the object right you run the GitHub action so it creates a new instance so whenever whole app gets separated yeah so the whole app gets applied and every time you run the GitHub action it creates a new instance of the GitHub of the Ubuntu or the Mac OS that you are running and in that case if you are running concurrent well it will wait for the one to complete and clean all the data and then it will again start a new instance and do all the process so there is no old data that is remaining in the instance whenever you run a next so I think that will answer your question and I hope that answers your questions great all right so uh I think it's time we'll wrap up the live stream thank you so much for taking out the time and speaking to all of our viewers and uh taking uh a certain topic that could be of extreme uh extreme help to all the viewers who have been watching this and obviously a big thank you to all of our viewers who have been joined us who have joined us on YouTube today uh we will have more live streams such as this one coming up for you uh so do remember to follow us on Twitter at at the rate KTMs and Instagram and Linkedin and everywhere else you'll keep coming up thanks thanks for the confidence Raju we really appreciate it and we will be uh coming up with more topics similar topics similar important discussions that we will have once again thank you so much for joining me and enjoying all of us and uh you have a wonderful day ahead and to all of our viewers you guys have a wonderful evening ahead as well and take care [Music]

Channel: GeekyAnts

Views: 3,084

Keywords:

Id: BAXvzkgL15o

Length: 31min 35sec (1895 seconds)

Published: Wed Apr 27 2022