CI / CD in Flutter - GitHub Actions vs. Codemagic

hello my friends and welcome back to another episode of flutter explained today I will explain see I see D in flutter and for that I want to compare two important tools for that one is github actions and the other one is code magic and before italic no too much let's get right into it first I want to begin with what is a CI CD pipeline CI stands for continuous integration and CD for continuous delivery both of them are just two puzzles that are working together mostly and I want to explain you by that little example how usually a CI CD pipeline comes into process so usually we start with code right we develop our application then we commit these changes onto our github repository for example and now we can set up our webhooks CI CD part line in that way that it takes the branch that we like and as soon as we have that branch we generate out of that the next steps so for example we build our application and see if there are build errors the next step would be to run our tests to see if the tests are running fine and everything is smoothly in our application the next step would be to release the app to something so for example we can release our app to Google Play Store and then to operate the app sometimes continuous delivery and continuous deployment works really close together so a parade is also a part of that and last but not least two money tour the app and where do we find now CI CI also continuous integration we will find in build and test so it surrounds that part and then CD is usually mentioned for releases operations and monitoring so what is the benefit of that because we don't have to build everything anymore on our machine we have clean instances of a machine that tries to get all the dependency that it's need to create this application so we take away all the side effects that could happen on a dirty environment like our system usually is so we don't have specific tools installed we don't have additionally dependencies installed and that helps us a lot to test our application to make it stable and also to get fast feedback something is wrong github actions what is github actions well github actions is one option that we have for such a CIS CD platform and this has and offers the best possible integration in github and we will see there later when I will make a demonstration how we can setup a CI CD engine evictions then for open source projects we have an unlimited number of builds but for private repositories we have two thousand minutes at the moment the benefit here is that we have community-based actions so that means for every programming language that exists there is a community member who created an action that creates you the build at the end so for c-sharp it is very good for Java and of course there are also some packages for flutter that I want to show you later and of course you can also create your own packages or you can help in the open-source community to help them to create better actions and the parallelism network works with the metrics builds what does means is a bit more complex but in general we can say if you have multiple platforms you can just run them in parallel and also different tasks can run in parallel additionally I have to say there documentation so far is amazing so if you want to check it out do it the next point is code magic and why is code metrics are still important for flutter development because it is very easy it is so much aligned to flutter that is amazing it has still a good github integration so it is still possible to create for example releases in github it provides you with 500 build minutes per month for free so for every one and every additional buy out is $19 the pricing model is perfectly under your control and you don't have any additional feeds here additionally it is UI based most of the time at the moment there is a beta phase for Yama files so you have also the opportunity to bring the build pipeline into your code which a lot of developers prefer and we have the SSH and VC VNC access to build machines and this is very unique for code magic that means if something is going wrong and we need a stack trace for that and the locks maybe don't help us with it we have the possibility to access the build machine of code magic for 20 minutes with SSH and B's see to check what is the error message exactly is something completely fuzzy there where is even the environment dirty or have something problems with the environment so that helps us a lot with debugging and the last thing is the documentation is amazing so now I explained to two tools that that I usually use for my CI CD I want to show you also how you can integrate that into your project so before I talk too much let's see how it's done so let's begin by going into actions in your github repository project here you can see that we have different github actions in the market store these all creates u/f workflow that I would create here for dart now that we have that created we can see we it's generated as a file called danto llaman inside of our github repository and on the right side you see the marketplace for different packages that we can use to import improve our CI GCD pipeline in the next step we go into flutter actions which is an action for our pipeline and here we can see for example the usages and all the documentation that that open-source community gave us in that place also we have a very big green button on the top right use latest version which provides us the information how we can implement that into our own pipeline I copy that here and bring that into our own project I can add to our own Yama's file I paste this usage example and now I make the indentation correctly because in a llaman file there are always a very specific indentation that has to be set because the version is slightly outdated here I increase the version 2 to the highest current every Havel version before we now commit our actions workflow we can take a look on the right side where the documentation lives and here we have the documentation how we can set up our own workflow and now we commit the changes I committed now here directly inside of github but of course you can do that in every code editor of your choice after that we can see and github actions our dashboard for all the workflows that exists as you can see we created under top github workflows da-jung our eundel file and that will our build whenever we push something onto the branch master so after we pushed a new version to our master system I speak that here up we come into an error and that is one of the benefits of github of course that if the github community has a problem we can find everything in an issue somewhere else so after a quick research I found the error here which I liked of course and implemented that one into our code what that means is we have to remove from our Yama file the two lines of code where we have the container from Google Dart latest this shows us very good and that it has a benefit to have a open-source community because everything is there for free but sometimes the quality legs because here the error message what was not really helpful and now with that slight modification we finally got our successful build where all the gates and everything worked well but one of my tests is failing but thanks to the live logs the debugging of this error is very easy to find we get the run flutter test error and here we find directly and immediately our stack trace what happened wrong one additional thing that I wanted to show you is how to create a status patch out of that you see here on the right to create status patch which directly shows us how to CI of this process worked and we can copy that markdown language into our readme file to give our customers better overview so with that slight modification we managed now to bring our build to success and that's it for github actions and as you can see I concentrated myself most of the time here in the CI platform and I will do the same thing for code magic and why I don't do a see deep part here is that the plug-ins for flutter in github actions are currently is still a bit weak so there needs to be have improvement so if you feel ready please join the open-source community and help them out so now let's try to compare that with code magic here you create an account on code magic dot IO and then you go inside of the dashboard and you can see here your builds your teams and I want to start with the user settings and different integrations so one of them is for example github it is connected at the moment so I can see all the repositories from here but it is also possible to have repositories that are not github or bitbucket right as it's just the integrations additionally important is for example the Apple developer portal which allows you to assign iOS code immediately inside of our applications we can add apps from custom source code that we see on the right top do you enter your repository URL and it automatically starts to create you a build pipeline that you need also you can see that I have different accounts here that I can show or hide different repositories after a quick search I was able to find my github repository for the safe recipes and now I want to configure my first very first build the first thing that we normally do is to configure our build triggers so if we add our master branch here and press trigger and push whenever we push something on that branch it will automatically trigger our build pipeline and so the integration between github and code magic is already done the next thing our environment variables that we can access with the dollar sign and this could be your database settings or something like that then there is a possibility of data dependency caching you will find more to that in the documentation of code magic it is a very useful tool whenever you have build ones that you save the dependencies and can use them later again drink to reduce your bill time even further the next part is this plus icon that you can see between off the different steps it allows you to add post and pre scripts so things that will be added after and before that additionally if we go to tests now we can see here select which tests you want to run we want to run flutter analyzer in our case and flutter tests and if the test is failing we want to stop the build immediately now we can say where we want to run the tests on we want to run them on an iOS simulator an Android emulator or even on an AWS device form the next step would be the build option in the build option we can select our flutter version the Xcode version and Kokua pod version additionally we can choose which platforms we want to build on android iOS web Mac or Linux and then we can choose if we want to create our Android bundle as an artifact in the end we can select the mode in which we want to release and the last part is the publishing tab in the publishing tab we can set up everything that we want to do for the publishing part under email we can set up send of emails with the artifacts that the build is creating to different recipients on slack we can send it to a slack channel that we can select and publishing I currently don't have a channel selected and of course we can also send it to code magic static pages but for that we need to set up the web project last but not least we have of course Google Play releases but we need to set up the code sign-in and App Store if we're going on back to the very top we find you to start build button you can select the branch we'd select the workflow we can enable us the remote access with SSH and B and C so now we first-time execute our build and as you see on the left side we do that with a MacBook Mini you can see here the tests running the build Android all what we see setting in before and the build pipeline one very good feature that I want to highlight here a bit is the testing tab you have your depart result and log the view watch exactly in the results you can see all your tests run so now we know exactly how we can use github actions and a code magic word but in the last slide I just want to make a short comparison once more so is it flat already yes github actions is flat already but the CI support is very good but the deployment action is currently missing or in a version that I wouldn't use in production version 0.1 I think I've seen some packages in code measuring you see a strong alignment to flutter and it is absolutely code ready and production ready debugging and github actions it runs with life logging and encode magic with life logging and the excess of SSH and VNC free build time well in github actions as I mentioned the build time is for free for open source projects and two thousand three minutes per month for every private repository and then you have on the code metric side 503 billed minutes per month the pricing well is combined in github plans that means in github actions you are part of the github community so you paid pro pro plan and become three thousand in the three minutes if you be a enterprise income ten thousand minutes and so on so I added viewed the link here and I would put it down in the video description so that you find all the necessary info for the pricing for code magic that is very simple $19 filled minutes easy sight notes that are maybe important kidnap actions is a community-based action so you have all the benefits of the community so you have a lot of people there that have very smart ideas but you have on the other side the problem that sometimes it is not production-ready or if you don't find something that you want to use you have to create it yourself the parallelism is built with metrics builds which is amazing and choosable hosts runners so you have like Linux you can choose between Windows you can choose which host runner you want to have in code magic that is usually a MacBook Mini or MacBook Pro you can choose that you have free build runs for MacBook Pro a month which is amazing you have the beautiful visualization which helps you a lot to create your build pipeline and of course you can also download it to have to build pipeline as code so you should really check that out and now it's time for you guys I want really to know which see ICD pipeline you use what are you interested in maybe you also use just Travis is CIO or another edit pipeline that I'm not even aware so please let me know down in the comments below on the top of me you'll find two videos that you are maybe interested in on the right side you'll find a subscribe button it would be awesome if you click it like that video share that video thank you for joining me as always and see you the next time have a great week [Music]

Channel: Flutter Explained

Views: 20,257

Keywords: CI, CD, Continouse Integration, Continouse Delivery, flutter, google flutter, ci / cd flutter, codemagic, github actions, codemagic flutter, github actions flutter, flutter github actions, flutter tutorial, flutter cd ci, flutter ci cd, flutter codemagic, github, flutter app, flutter developers, flutter ci, flutter cd, flutter with github, testing flutter apps, github tutorial, flutter cicd, flutter automation, flutter course, github workflow, flutter project, flutterexplained

Id: kR0N_Ecv_b0

Length: 14min 52sec (892 seconds)

Published: Fri Apr 24 2020