Editing Flutter Packages in Codemagic

There are times when we may have to edit packages downloaded by flutter, maybe to add a new functionality or customize the style etc. In this article we will take a look at how to use a package that we have edited manually, in codemagic.

Tools Required

• VNC viewer, which can be downloaded from here 

Setup Codemagic

While configuring the codemagic build steps. Under “Dependency caching”, check “Enable dependency caching” option and add the following path “$HOME/programs/flutter/.pub-cache/” you may add the the entire pubcache folder if you wish ( ie., $HOME/programs/flutter/.pub-cache). But this is not the $HOME/.pub-cache mentioned in the documentation. And now specify the build and publish options as usual. when you click on "Start new build" make sure you check on the "Enable remote access" checkbox and start the build process.

Connecting to the Machine

After the process starts in a few seconds codemagic will display the SSH command as well as the details required to connect via VNC. Open up the VNC Viewer program we downloaded earlier and in the field where it asks for "VNC server address" enter the ip address of the machine followed by the port number (for example, 192.xxx.xxx.xxx:10000, note the colon separating the ip and the port).And then click "connect to the host name option". It will show an insecure connection warning just click continue. Enter the username and password and click ok. And you will be able to see the desktop of the build machine.

Making the changes

Once you have access to the mac. Click on the finder app and click on “Go” and “go to folder” enter “/Users/builder/programs/flutter” and open that folder. Now click Left Alt+Shift+dot to show hidden folders. Then open the .pub-cache folder and move to the folder containing your package. You can right click the dart files and open them with Android Studio. Make your changes and save them (save changes often). I couldn’t find a way to send the files from local to remote machine but you should be able to upload it on some file-sharing site and download it there.

Note: In case the current build got finished before you made the changes. The changes won’t be reflected in the build. But since the folder will be cached for the next build. You can just build it again.

Limitation

• The connection will be terminated 20 minutes after the build completes. So we should complete everything before the 20 minute window runs out.

Running the IOS Simulator on a codemagic build machine

In this article we will take a look at how to do a preliminary check on our apps by running them in an IOS simulator via codemagic. Codemagic allows us to connect to the build machine through SSH and VNC. Here we will take a look at connecting to codemagic's build machine using a VNC program

Tools Required

• VNC viewer, which can be downloaded from here

Setup Codemagic

Complete the initial setup in codemagic (like specifying build and publish options) as usual. when you click on "Start new build" make sure you check on the "Enable remote access" checkbox and start the build process.

Connect to the Machine

After the process starts in a few seconds codemagic will display the SSH command as well as the details required to connect via VNC. Open up the VNC Viewer program downloaded earlier and in the field where it asks for "VNC server address" enter the ip address of the machine followed by the port number (for example, 192.xxx.xxx.xxx:18360, note the colon separating the ip and the port). And then click "connect to the host name option". It will show an insecure connection warning just click continue. Enter the username and password and click ok. And you will be able to see the desktop of the build machine.

Run the app in the simulator through Xcode

Use the Launchpad app to open Xcode (There will be multiple versions available, choose the one you used to build). Click on "open another project" and browse to the following location "/Users/builder/clone/ios" . Select the iPhone version for the simulator and click on the run button.

Limitation

• The connection will be terminated 20 minutes after the build completes. So we should complete everything before the 20 minute window runs out. 

Build a flutter app for IOS using codemagic - Part 2

In this article we will see how to build a flutter app for IOS using codemagic if we had already generated a key using a mac. Except for the first step all other steps are similar to my previous article

Step 1: Get the certificates from mac

In your mac open Keychain Access. Locate the key that you had used to sign the app previously. Select that along with the private key and right click “Export” select file format as .p12 and save. Enter a password and verification for the file and click ok. Enter your mac password and click ok and save your file. Once you have the p12 file file you can use it from other computers with different os.

Step 2: Add the identifiers

On the apple developer page. Click on "Identifiers" and then click the Plus sign near the heading that says Identifiers, select “App IDs” and continue. Enter the name of your app in Description and your apps Bundle ID in the respective field. Click Continue. Make sure the bundle Id match with your apps bundle ID in "\ ios\ Runner.xcodeproj\ project.pbxproj".

Step 3: Add test Devices (optional) 

On the apple developer page. Click on "Devices" and then click the Plus sign near the heading that says Devices, Give a name to the device so that you can identify it. And enter the UDID of the device. Click Continue and register. Repeat for all devices you may want to distribute the app. 

Step 4: Add distribution profiles

On the apple developer page. Click on "Profiles" and then click the Plus sign near the heading that says Profiles, Since we generated the sign key for Distribution. Select an option under “Distribution”,  I will be using "Ad Hoc" so choose it and click continue.

• Under App ID select the name you created for Step2 and click continue.
• In the next step select the key you created previously in Step1 and click continue
• In the Select Devices step select all the devices you want to install the app on. (Probably the ones created in Step3). Click continue
• Enter a name for your profile under Provisioning Profile Name. Click Generate and Download the mobileprovision file

Note: You can generate multiple provisions for the same app. Maybe an 'App Store' provision in addition to the 'Ad Hoc' provision

 Step 5: Configuring codemagic

I have assumed that you have already linked your git repo with codemagic and the project you want to build is open

• Expand Build, Set the necessary version for Flutter and Xcode. Under 'Build for platforms' uncheck the platforms you don’t need and change the Mode to release. Click save
• Expand Publish,

1. Under 'iOS code signing' choose Manual.
2. Under 'Code signing certificate' click choose a file and browse and select the .p12 file we created in Step1
3. Enter the password you had given to the file in the 'Certificate password' field
4.  Under 'Provisioning profiles' upload the Profiles you generated in Step4. Save it

Click on 'Start new build'

Step 6: Distributing the app

Once the build finishes you will get an email with the .ipa file and a .app file. You can upload the .ipa file to sites like diawi and share the link with users whose mobile numbers are registered in the app.

Limitations

• By moving away from mac. We lose the ability to use the Xcode simulator. So we can only test the app after a user/test-user installs it in a real device. A workaround can be found here
• Since we are building on codemagic. We can't use custom edited packages. ie., in case we had manually edited a package in our local environment those changes can't be expected in the codemagic build since it will fetch from the original package repository. A workaround can be found here

Build a flutter app for IOS using codemagic without a mac - Part 1

In this article, we will see how to build a flutter app for IOS using codemagic without a mac

Step 1: Generating the codesign signatures using OpenSSL

Download the binaries for OpenSSL. I got them from here .Extract it to say C:/OpenSSL, you can find the openssl.exe inside the bin folder. To make life easier, you can add this path (;C:/OpenSSL/bin) to the "path" environment variable, this allows you to call openssl command from anywhere. You should also create a new Environment variable called “OPENSSL_CONF” and set its value to the configuration file (in my case it is, C:\OpenSSL\bin\openssl.cnf).

Now that the initial setup is taken care of, open powershell or a command prompt window. CD to the folder where you will be storing your keys. First we need a private key using which we will generate a certificate sign request file. To generate the private key, run the following command

openssl genrsa -out iosKey.key 2048

The 2048 bit long key will be saved to a file iosKey.key. Now to generate the csr

openssl req -new -key iosKey.key  -out CertificateSigningRequest.certSigningRequest -subj "/emailAddress=email@domain.com, CN=spr, C=IN"

Now the CertificateSigningRequest.certSigningRequest will be generated with the request. Make sure that you change the email address, company name and country code to your needs. You may also set default values in the openssl.cnf file.

Next go to, https://developer.apple.com/ login and click "Certificates, Ids and Profiles". Click certificates and then click the Plus sign near the heading that says Certificates.

• select iOS Distribution (App Store and Ad Hoc) or Apple Distribution as per your need. Click continue
• click on choose file and select the CertificateSigningRequest.certSigningRequest file we created earlier and click continue
• The signing certificate would be generated and click Download and save to the folder containing the iosKey.key file

Next step would be to create a pem file. Run the following command

openssl x509 -in distribution.cer -inform DER -out ios_distribution.pem -outform PEM

Where distribution.cer is the name of the certificate you downloaded from the apple developer site. Next we will generate the p12 file (which is required by codemagic)

openssl pkcs12 -export -inkey iosKey.key -in ios_distribution.pem -out ios_distribution.p12

It will ask for a password, enter a password and note it down in case you forget.

Step 2: Add the identifiers

On the apple developer page. Click on "Identifiers" and then click the Plus sign near the heading that says Identifiers, select “App IDs” and continue. Enter the name of your app in Description and your apps Bundle ID in the respective field. Click Continue. Make sure the bundle Id match with your apps bundle ID in "\ ios\ Runner.xcodeproj\ project.pbxproj".

Step 3: Add test Devices (optional) 

On the apple developer page. Click on "Devices" and then click the Plus sign near the heading that says Devices, Give a name to the device so that you can identify it. And enter the UDID of the device. Click Continue and register. Repeat for all devices you may want to distribute the app. 

Step 4: Add distribution profiles

On the apple developer page. Click on "Profiles" and then click the Plus sign near the heading that says Profiles, Since we generated the sign key for Distribution. Select an option under “Distribution”,  I will be using "Ad Hoc" so choose it and click continue.

• Under App ID select the name you created for Step2 and click continue.
• In the next step select the key you created previously in Step1 and click continue
• In the Select Devices step select all the devices you want to install the app on. (Probably the ones created in Step3). Click continue
• Enter a name for your profile under Provisioning Profile Name. Click Generate and Download the mobileprovision file

Note: You can generate multiple provisions for the same app. Maybe an 'App Store' provision in addition to the 'Ad Hoc' provision

 Step 5: Configuring codemagic

I have assumed that you have already linked your git repo with codemagic and the project you want to build is open

• Expand Build, Set the necessary version for Flutter and Xcode. Under 'Build for platforms' uncheck the platforms you don’t need and change the Mode to release. Click save
• Expand Publish,

1. Under 'iOS code signing' choose Manual.
2. Under 'Code signing certificate' click choose a file and browse and select the .p12 file we created in Step1
3. Enter the password you had given to the file in the 'Certificate password' field
4.  Under 'Provisioning profiles' upload the Profiles you generated in Step4. Save it

Click on 'Start new build'

Step 6: Distributing the app

Once the build finishes you will get an email with the .ipa file and a .app file. You can upload the .ipa file to sites like diawi and share the link with users whose mobile numbers are registered in the app.

Limitations

• By moving away from mac. We lose the ability to use the Xcode simulator. So we can only test the app after a user/test-user installs it in a real device. A workaround can be seen here
• Since we are building on codemagic. We can't use custom edited packages. ie., in case we had manually edited a package in our local environment those changes can't be expected in the codemagic build since it will fetch from the original package repository. A workaround can be seen here

In the next article we will see how to build an app for ios using codemagic, if a key was already generated in mac.