java 扑克

Hello, Flutter developers. It’s been a long time since I’ve posted another piece on mobile app development. This is a new piece on Continous Integration and Continous Deployment (or Delivery)(CI/CD) in Flutter. As we all know, Flutter is an emerging technology for building mobile apps for both Android and iOS. You can look at the Flutter website for more about Flutter for web apps.

您好，Flutter开发人员。 自从我发布了另一篇有关移动应用程序开发的文章以来已经有很长时间了。 这是Flutter中有关“持续集成和持续部署(或交付)(CI / CD)”的新内容。 众所周知， Flutter是一种新兴技术，可为Android和iOS构建移动应用程序。 您可以在Flutter网站上查找有关Flutter Web应用程序的更多信息。

When did I come across CI/CD? The answer is when I did advanced software development in my uni. We had a major project (ServiceGo) where we had to set up the whole DevOps pipeline. When I set up the DevOps pipeline, I always was notified in Slack, which I found very interesting. After the complete DevOps setup, I loved the DevOps practice in the software development industry.

我什么时候遇到CI / CD的？ 答案是当我在大学里进行高级软件开发时。 我们有一个大型项目(ServiceGo)，必须建立整个DevOps管道。 设置DevOps管道时，总是在Slack中收到通知，我发现这很有趣。 完成完整的DevOps设置后，我喜欢软件开发行业中的DevOps实践。

Fig. 2. How DevOps work (Image source: Author) 图2. DevOps的工作方式(图片来源：作者)

Now, let’s talk about the CI/CD for Flutter. As I searched the internet for information about CI/CD for Flutter, I couldn’t get enough resources to start configuring. I found Fledge for Flutter, but I didn’t like the documentation. (Please correct me if I am wrong.) Then I found Codemagic, which is especially designed for Flutter. It really has good documentation and less configuration for Flutter projects.

现在，让我们谈谈Flutter的CI / CD。 在Internet上搜索有关Flutter的CI / CD的信息时，我没有足够的资源来开始配置。 我找到Fledge for Flutter ，但我不喜欢该文档。 (如果我错了，请指正。)然后我找到了Codemagic ，它是专门为Flutter设计的。 对于Flutter项目，它确实具有良好的文档编制和较少的配置。

“The most powerful tool we have as developers is automation .”— Scott Hanselman

“开发人员拥有的最强大的工具是自动化。”- Scott Hanselman

如何使用Codemagic设置DevOps管道 (How to Set Up a DevOps Pipeline Using Codemagic)

步骤1.在本地计算机上安装Flutter (Step 1. Install Flutter on your local machine)

If you have already installed Flutter on your local machine, then you can skip this step and jump into the second step for creating the Flutter project. To install Flutter on your local machine, please head over to the Flutter official website, select the preferred operating system, and follow the installation steps. The steps are pretty straightforward.

如果您已经在本地计算机上安装了Flutter，则可以跳过此步骤，然后跳到创建Flutter项目的第二步。 要在本地计算机上安装Flutter，请访问Flutter官方网站 ，选择首选的操作系统，然后按照安装步骤进行操作。 这些步骤非常简单。

Next is creating the Flutter project.

接下来是创建Flutter项目。

https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw) https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw )

步骤2.在本地计算机上创建Flutter项目 (Step 2. Create the Flutter project on your local machine)

If you have already installed Flutter on your local machine, then on the terminal, navigate to your desired folder to create the new project and type flutter create fluttercicd. You can name your project with other names. It will take a couple of minutes to complete the process. After a couple of minutes, our project is ready to start. Note that in Step 1., you have to install the iOS simulator or Android Emulator and also configure the preferred text editor with Flutter. When the process is completed, open the project in your preferred text editor and start running the app on any virtual device (iOS simulator or Android Emulator).

如果您已经在本地计算机上安装了Flutter，则在终端上，导航到所需的文件夹以创建新项目，然后键入flutter create fluttercicd 。 您可以使用其他名称来命名您的项目。 将需要几分钟来完成该过程。 几分钟后，我们的项目就可以开始了。 请注意，在步骤1中，您必须安装iOS模拟器或Android模拟器，还必须使用Flutter配置首选的文本编辑器。 该过程完成后，在首选的文本编辑器中打开项目，然后在任何虚拟设备(iOS模拟器或Android模拟器)上开始运行该应用程序。

步骤3.在Github中创建新的仓库 (Step 3. Create the new repo in Github)

Navigate to GitHub’s official page and create a new repo for this project. We’ll also set up the newly created GitHub repo on our local machine. Creating a new repo is pretty easy, so I’ll show you how to set up the repo on our local machine. The following code would be beneficial to set up the repo.

导航到GitHub的官方页面，并为此项目创建一个新的仓库。 我们还将在本地计算机上设置新创建的GitHub存储库。 创建新的存储库非常容易，因此，我将向您展示如何在我们的本地计算机上设置存储库。 以下代码对于设置存储库将是有益的。

git init git add .git commit -m "write your first commit messages"git remote add origin 'remote url'git push -u origin master

By doing this, you can see your latest code in your GitHub repo.

这样，您可以在GitHub存储库中查看最新代码。

Step 4. is optional. If you don’t want to write some Flutter code, then you can jump into Step 5.

步骤4.是可选的。 如果您不想编写一些Flutter代码，则可以跳到步骤5。

步骤4.编写一些Flutter代码以构建UI (Step 4. Write some Flutter code for building the UI)

Although configuring the CI/CD pipelines does not require that you build the UI, I prefer building some UI and pushing it to GitHub. The code for our simple UI goes like this:

尽管配置CI / CD管道不需要您构建UI，但我更喜欢构建一些UI并将其推送到GitHub。 我们简单的UI的代码如下所示：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter CI/CD Demo'),),body: Center(child: Text('Hello World'),),),);}}

If you want to learn about Dart then, please see the Dart dev site. There is an article that teaches you the easiest way to understand the Dart language, which Flutter uses.

如果您想了解Dart，请访问Dart开发者网站 。 有一篇文章教您如何理解Flutter使用的Dart语言。

步骤5.在Codemagic中设置帐户 (Step 5. Set up the account in Codemagic)

For building the pipeline for our Flutter project, we’re using Codemagic, whose name suggests magic and does show us magic after we push some code to GitHub. We can sign in to Codemagic using GitHub, GitLab, or BitBucket. I am going to use GitHub.

为了构建Flutter项目的管道，我们使用Codemagic，它的名字暗示了魔术，并且在将一些代码推送到GitHub后确实向我们展示了魔术。 我们可以使用GitHub，GitLab或BitBucket登录Codemagic。 我将使用GitHub。

https://codemagic.io/signup) https://codemagic.io/signup )

Upon clicking on ‘Join using GitHub’, you’ll be prompted to sign in to your GitHub account. Enter the credentials and you will be redirected to the home page of Codemagic, which looks like this.

单击“使用GitHub加入”后，系统会提示您登录GitHub帐户。 输入凭据，您将被重定向到Codemagic的主页，如下所示。

https://codemagic.io/apps) https://codemagic.io/apps )

You have to select or search the preferred git repo for configuring the CI/CD pipeline and select the beautiful ‘Start new build’ button.

您必须选择或搜索首选的git repo来配置CI / CD管道，然后选择漂亮的“开始新构建”按钮。

You’ll see the beautiful dialog box to specify the branch and the virtual machine. Point the branch to Master as the master branch is ready for deployment. Leave the workflow as it is and select ‘Start new Build’ to start building the Flutter app.

您会看到一个漂亮的对话框，用于指定分支和虚拟机。 将分支指向Master因为可以准备部署master分支。 保持工作流程不变，然后选择“开始新构建”以开始构建Flutter应用。

You’ll see another window where you can see the build processes are running.

您将看到另一个窗口，您可以在其中看到构建过程正在运行。

https://codemagic.io/app/5e4342e878accc4ce55ff639). https://codemagic.io/app/5e4342e878accc4ce55ff639 )。

We want this build to run automatically. To build the Flutter app upon pushing code to the master, you have to make some changes to your code and push it to the master branch. As soon as you push your code, Codemagic triggers the build settings and starts building the project. The next step is to make some changes to our main.dart file.

我们希望此构建自动运行。 要在将代码推送到master时构建Flutter应用，您必须对代码进行一些更改，然后将其推送到master分支。 按下代码后，Codemagic就会触发构建设置并开始构建项目。 下一步是对我们的main.dart文件进行一些更改。

步骤6.对我们的main.dart文件进行一些更改 (Step 6. Make some changes to our main.dart file)

Let’s start making some changes to our code. I have added a RaisedButton widget.

让我们开始对代码进行一些更改。 我添加了一个RaisedButton小部件。

Delete the Center widget and add the RaisedButton widget:

删除Center小部件并添加RaisedButton小部件：

RaisedButton(padding: EdgeInsets.all(20),onPressed: () {print("Raised Button is pressed");},child: Text("Press Me!!"),

The complete code looks like this:

完整的代码如下所示：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter CI/CD Demo'),),body: RaisedButton(padding: EdgeInsets.all(20),onPressed: () {print("Raised Button is pressed");},child: Text("Press Me!!"),),),);}}

Open up the terminal and navigate to the project workspace, and the code is ready to push it to the master branch.

打开terminal并导航到项目工作区，代码已准备就绪，可以将其推送到master分支。

The code for pushing to the GitHub repo is:

推送到GitHub存储库的代码是：

git add . //This adds all the changed files and folders to the staging area.git commit -m "add a raised button widget." //Specifying the git commit message before pushing.git push //this will directly push your changes to your master branch.

After pushing your code into the GitHub repo, it’s time to see the magic on the Codemagic website.

将您的代码推送到GitHub存储库后，该是在Codemagic网站上看到魔术的时候了。

步骤7.开始查看Codemagic网站中发生的魔术 (Step 7. Start viewing the magic happening in the Codemagic website)

As soon as we push our code into GitHub, Codemagic triggers the build and start building the Flutter project. It will take some time to build the project.

一旦我们将代码推送到GitHub，Codemagic就会触发构建并开始构建Flutter项目。 构建项目将需要一些时间。

https://codemagic.io/app/5e4342e878accc4ce55ff639/build/5e444949000fe000097a6637) https://codemagic.io/app/5e4342e878accc4ce55ff639/build/5e444949000fe000097a6637 )

When the process is complete, you will get an email saying that the newest version has been released into your registered GitHub email account. This is an awesome feature and I loved it.

完成该过程后，您将收到一封电子邮件，指出最新版本已发布到您注册的GitHub电子邮件帐户中。 这是一个很棒的功能，我喜欢它。

Fig. 8. Email notification sent by Codemagic in my email 图8. Codemagic在我的电子邮件中发送的电子邮件通知

Hurrah! We’ve set up the CI/CD pipeline for our Flutter project. This is just the beginning of setting up the CI/CD pipeline.

欢呼！ 我们已经为Flutter项目建立了CI / CD管道。 这仅仅是建立CI / CD管道的开始。

In the next piece, I’ll show how we write our first tests in Flutter, pass the test in Code Magic, and be ready to deploy from the master branch. Stay tuned.

在下一部分中，我将展示如何在Flutter中编写我们的第一个测试，如何在Code Magic中通过测试，以及如何准备从master分支进行部署。 敬请关注。

The link to the GitHub project is: Flutter CI/CD Pipeline.

GitHub项目的链接是： Flutter CI / CD Pipeline 。

Never forget: Never stop learning because this will help you in many fields.

永远不会忘记：永远都不要停止学习，因为这将在很多领域为您提供帮助。

Thanks for reading! Have a nice day.

谢谢阅读！ 祝你今天愉快。

翻译自: https://medium.com/better-programming/devops-in-flutter-734cb268d7db

java 扑克

相关资源：大话数据结构三个版本