DEV Community

Cover image for From Manual to Automatic: The Magic of CI/CD Pipelines! 🤯
Rowan Ibrahem
Rowan Ibrahem

Posted on

From Manual to Automatic: The Magic of CI/CD Pipelines! 🤯

🔴Introduction
Imagine deploying new features without breaking a sweat no more late nights or frantic bug fixes. That's the magic of CI/CD! Ready to learn how this powerful process can turn chaos into seamless, stress-free releases?

Today we will talk about an important and interesting topic every developer should know, Let’s Discover CI/CD World!

🟢Table of contents

  • What is CI/CD?
  • What is a pipeline?
  • Benefits of CI/CD
  • CI/CD Tools
  • Firebase App Distribution
  • Fastlane
  • Upload the first APK
  • Conclusion

CI/CD stands for Continuous Integration and Continuous Delivery. But what does all that mean? Let's break it down:

📌 CI (Continuous Integration): This process starts with building your code and pushing it to a platform like GitHub. From there, automated tests and deployments are triggered to ensure everything is working smoothly.

📌 CD (Continuous Delivery): The DevOps engineer takes over here. They handle deploying the tested code to the server, making it accessible to the client. They also monitor the deployment closely, so if any issues pop up, they can quickly notify the developers to address them.

Image description

📌Let's see the flow that used to happen without CI/CD
The developer finishes the code and informs the tester that the code has been pushed to GitHub. The tester then checks it and performs tests. After that, the tester reports any issues to the developer or informs the DevOps (responsible for deploying the project to the server) that the code is fine. The DevOps then takes the code for deployment. This happens manually, increasing the time and effort required as each person waits for the other to complete their task.
CI/CD transformed the integration and deployment process into an automatic one by building a pipeline containing all the required commands. These commands are automatically executed upon being triggered.

So, What is a pipeline?👀

Image description

As the name suggests, a pipeline is like a tube through which code flows in a specific sequence that we define. The flow goes as follows: After creating the project, we push it to GitHub. As soon as this push happens, a tool takes the code and builds it. Then it moves to another tool for testing. If the code passes the tests, it continues to the deployment stage and gets deployed to the server or Google Play. If there is an issue, the pipeline stops, and the developer is informed about the issue that must be fixed before continuing the deployment and build process.

To create this pipeline, we have several tools like Jenkins, GitHub Actions, GitLab, Fastlane, and Circle CI. These are tools where you write a file in your project specifying the commands you want to be executed when a push occurs.
These tools then automatically execute the pipeline and the commands written in it. The following image illustrates different tools used at each stage.

Image description

🟢Benefits of using CI/CD tools
When I want to add a new feature, I won’t have to build and upload it manually every time. If I make any changes, it will automatically run tests, and if it fails, it won’t be deployed at all. Instead, it’ll notify the developer about the issue so they can fix it—rather than discovering the problem later with the client. This process improves the product's quality in the long run and reduces the time and effort needed for building, testing, and deployment.

Image description

So, all of this mostly involves DevOps work. How does it benefit me as a mobile developer?📍
When we build our application, we need to send an APK to the tester to test the features built, show a demo to the client, or even upload to Google Play and update the existing version. All of this is done manually, but we can do it automatically with a single command line without needing to build the APK every time or even upload it ourselves. Let’s explore how we can do this.

For Flutter, the tools that help us with this are:

  • Firebase Distribution
  • Fastlane
  • GitHub Actions
  • Code Magic We will learn about them in detail and see how to integrate them into our project.

📌 So, imagine we're working on our project, and it's time to send the APK to the tester. Of course, we won’t be sending it over WhatsApp or uploading it to Google Drive every time, right? We’ve got a much better solution! We’ll put the APK in a dedicated space, and this place will automatically send an email to the tester with a direct download link for the new version of the app. It’s like having your own private distribution channel where you store all the releases, and the system takes care of the rest. But what is this magical place? Let’s find out!

Now we will know what is Firebase App Distribution 🤔
It’s a service in Firebase that allows you to send the APK to testers, making the testing process easier before the release stage. Plus, it’s cross-platform, so you can use it on both Android and iOS.
On Google Play, you have tracks, and on the App Store, there’s TestFlight both are services designed to simplify the testing process before release and to manage different versions smoothly.

📌 The first step to use this service is, as the name suggests, it’s part of Firebase services, so you need to link your project to Firebase. Here’s the documentation to guide you through connecting your project to Firebase in just a few simple steps: Firebase Documentation.

After that, head over to your project in Firebase, and go to App Distribution.

Image description

This is the UI :

Image description

📌 First, we'll generate the APK manually. Navigate to your project and enter this command in the Terminal:

Image description

And if you're using flavors (which we’ll cover in another article), use this command:

Image description

📌 Once the APK is ready, locate it in your project folder and drag and drop it into App Distribution (as shown in image #1 above). That’s it the APK is now uploaded!

📌 To add testers, go to the Testers and Groups tab (marked as #2). Here, you can add multiple testers by entering their emails and even organizing them into groups. An email will then be sent to each tester, prompting them to download the App Tester application, where they can access the uploaded APK.

📌 You can also add Release Notes, and testers can send you their feedback or comments directly through the app.

📌 In case there's an issue with the email, you can use Invite Links in tab #3 to share a direct link with testers.

📌 One of the advantages of Firebase App Distribution is that it can easily integrate with other tools, offers a user-friendly interface, and ensures security for your application.
However, each time you make changes or add a new feature, you’ll still need to manually generate and upload the APK, which means we haven't fully embraced automation yet.

To automate this process, we’ll integrate it with a tool called Fastlane.

What is FastLane?🔎
Fastlane is an open-source tool that automates the process of building, testing, and deploying apps. Instead of manually creating an APK each time, you can run a single command in the command line, and Fastlane takes care of the rest! Plus, it can automatically upload your app to Google Play or the App Store.

For example, you can use the scan action to run tests on your app before uploading it to Google Play or the App Store, and it even connects directly with these platforms. You can explore more actions in the documentation here:
https://docs.fastlane.tools/

📌 While Fastlane is easy to use, the installation can be a bit tricky at first. But after that, it’s smooth sailing, and you can use it for both Android & iOS.

📌 Fastlane is built on Ruby, so the first step is to install Ruby on your machine, along with Bundler, which is a package manager for Ruby. We’ll start by installing rbenv, which allows you to use different Ruby versions for each project.

You can follow the setup instructions here based on your OS (macOS or Windows):
https://www.ruby-lang.org/en/documentation/installation/#manager

📌 To confirm Ruby is installed, open the terminal and run:

Image description

If you see the version number, you're good to go. If you get a "command not found" error, there might be an issue with your path variables that needs adjusting. If you encounter this problem, feel free to ask for help.

📌 Since I faced some challenges with this method, I downloaded Ruby directly from the official site: https://rubyinstaller.org/
Install it as you would any other software, and to verify, run:

Image description

If the version number appears, Ruby is installed, and you can skip using rbenv.

📌 Next, install Bundler with this command:

Image description

📌 The gem command helps install any Ruby-related packages. Go to your Android project and create a Gemfile where you define the dependencies, like Fastlane. Add this to the Gemfile:

Image description

Then, run in the terminal:

Image description

This will generate a Gemfile.lock file and complete the installation.

📌 To install Fastlane, use:

Image description

📌** It will ask for the package name, which you can find in:**

Image description

📌 *You’ll get a series of prompts choose *"no" and press enter for the rest until it finishes. This will generate two files: Appfile and Fastfile.
The Appfile contains configurations, while the Fastfile is where we define actions, like generating an APK, deploying to Google Play, or even printing something. It’s like defining functions.

To execute the commands in the Fastfile, use:

Image description

If you see "Fastlane worked successfully," then it’s all setup! Now, we have Firebase App Distribution and Fastlane installed separately, but we need to link them to automate the process.

📌 To integrate Firebase App Distribution with Fastlane, go to the "Beta Deployment" section in the Fastlane documentation and search for Firebase App Distribution. Then, run:

Image description

Next, Fastlane needs to know which project to work on. Make sure you’ve set up Firebase authentication and installed the Firebase CLI by running:

Image description

This will open a browser for you to log in to Firebase. Once successful, you’ll receive a token in the terminal to keep it safe for later.
Now, you’re ready to write the actions you want directly in the Fastfile! 🥳

Now, Let’s see the Syntaxs :
📌** What is a lane?**
Lanes in Fastlane are similar to functions, each serving a specific purpose, such as building an APK, deploying an app to Firebase, and other development-related tasks.

Let’s take a look at an example for clarification:

Image description

📌 Do:
This indicates that the specified lane should be executed.
📌 Desc:
This is a description of what the lane does, written to explain its functionality.

Here’s how it works:
The first part after the "lane" keyword is the name of the lane, which you can name as you like. Then, I instruct it to execute the tasks written under "do."

Next, the section related to Firebase App Distribution is taken directly from the documentation, along with some required data.

Important Note: Make sure to check the documentation for both Firebase App Distribution and Fastlane together, as there may be missing information in one or more documents, including additional attributes and detailed explanations.

App ID: This is retrieved from your Firebase project, and I will provide a screenshot from the site.

Firebase CLI Token:
This token is used to refresh the authorization periodically to avoid errors like "unauthorized" or not being able to access the server. When it refreshes automatically, it works fine. This is the token we saved earlier in our notes.

Next, we have:
android_artifact_type:
This indicates whether you are uploading an APK or an app. You need to specify the path where the file will be located.

Go to:
Build -> app -> outputs -> flutter-apk -> app-release.apk
Take the path of the file and place it. It should look like this in the end:
../build/app/outputs/flutter-apk/app-release.apk

Testers: Add the email address of the tester to whom you want to send the email or the client.

Release Notes: If you want to add notes for the testers.
Now, Fastlane is supposed to take the APK that I generate manually, find the file at the specified path, and upload it to Firebase App Distribution, sending it to the testers.

What if I don't want to manually generate the APK and want Fastlane to do it for me?

We can add two lines at the beginning of the Fastfile, right after the do keyword:

Image description

Here, sh indicates that these commands should be executed in the terminal. Every time I upload the APK, I will change the version number to ensure each new release is distinct from the previous one.

To run this and execute the workflow, I will write in the terminal:

Image description

This will start the build process with the steps I specified until it indicates a successful build! 🎊
It’s common to encounter issues during this setup; it's generally the most challenging part, but once done, the building process becomes easy every time.
This applies to Android.

📌 If you want to connect with Google Play, you can check this article:
Automating the Flutter App Play Store Release Process Using Fastlane
Next time, we will learn how to create a workflow using GitHub Actions! 🌟

Conclusion
The concept of Continuous Integration and Continuous Deployment (CI/CD) plays a pivotal role in modern software development, making the process faster and more efficient. It begins with writing code, followed by automated testing, and culminates in seamless deployment. Tools like Jenkins, GitHub Actions, and SonarQube facilitate this process, ensuring that the code is thoroughly tested, properly integrated, and secure during deployment.
By implementing CI/CD practices, developers can significantly reduce potential issues in the code, enhance the user experience, and bolster security measures. This streamlined approach not only minimizes the time spent on deployment but also mitigates the risks associated with software releases.

That's it! Start to write your first pipeline! Connect with me on LinkedIn and GitHub for more articles and insights. If you have questions, contact me.
https://linktr.ee/rowan_ibrahim

Happy coding and happy deploying!🌟

Image description

Top comments (0)