Talk With Angel Garcia!

Talk With Angel Garcia!

a blog about software and beers

Redesigning & Rebuilding CabañasRD in Xamarin Forms [4/4].

Hi folks! in this post we will continue and finish with the series of blogs about migrating and redesigning an existing and popular app: CabañasRD.

The plan is to divide all the process in 4 parts:

  1. From Adobe XD to XAML: Design and structure.
  2. Implementing the command for opening native map, app icons, splash screens, info tab and also the search functionality over the map.
  3. Moving the data to the cloud: Let’s make our backend with Azure Functions and CosmosDB and consume it from the app.
  4. Implementing continuous integration and continuous delivery with App Center (this post).

Implementing continuous integration and continuous delivery with App Center.

I have wrote about setting up your app the continuous integration and continuous delivery to beta testers in my first blog post “Mobile DevOps made easy with Visual Studio App Center“, go there and follow my tutorial and come back here to continue the customization for our pipeline.

If you trigger a build with the current code you will get the following error:

“Framework/DataSources/MotelsSource.cs(27,67): error CS0103: The name ‘Helpers’ does not exist in the current context [/Users/runner/work/1/s/src/App/CabanasRD/CabanasRD.csproj]”

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/94df18fa-5c66-4150-ba07-9a68fe180f2f/Screen_Shot_2020-08-20_at_10.55.57_PM.png

This is because we are using Mobile.BuildTools to generate our Helpers class for managing the app secrets, to resolve this we need to tell App Center to create the secrets.json file needed to generate the missing class (as we mentioned in the third post of this serie).

It is super easy to add the secrets using the Environment Variables with the same name used in the secrets.json file with the “Secret_” prefix, go to your build definition in App Center (for both apps) and define a new variable:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e24157f3-1428-429a-84f1-9001f62a2c7c/Screen_Shot_2020-08-20_at_11.11.59_PM.png

Click Save and Build, wait until the build finishes and that’s it!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b1d469d0-e54f-46e0-9654-299511b8585c/Screen_Shot_2020-08-20_at_11.21.39_PM.png

Another thing we can do is modify the app config values, right now there is only one (ApiUrl) in App/CabanasRD/Configs/AppSettingsConstants.cs, to accomplish this task we are going to use another feature in App Center called “Build Scripts“, from the Microsoft Docs:

You can add custom build scripts that run at pre-defined stages during build time: post-clone, pre-build, post-build. Place the scripts with the format specified below next to the project-level (.xcodeproj, .csproj, .sln, or package.json) file or module-level (build.gradle) file that you’ve selected in the build configuration and we’ll run them as custom build steps. For iOS and Android apps, we support Bash scripts, for UWP apps we support PowerShell scripts. If one of your scripts is failing, the whole build will fail.

Let’s add a pre-build script in the Android and iOS projects, place in the root of both projects a file called “appcenter-pre-build.sh” with the following content:

In the comments of the previous file is explained in details what is going on with the script’s function.

After we have the script in the correct folders, we need to define a new Environment Variable in our build configuration called “API_URL” in case we want to change the hard-coded Url in the AppSettingsConstants file, something like this:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3d89c6e7-4c07-48f9-91ee-bc41afabc60f/Screen_Shot_2020-08-20_at_11.56.16_PM.png

Cool 😎, now we know how to manage our config values and secrets from App Center, it’s time to add the SDK for collecting Crashes and Analytics from our end users, you could go either to the Microsoft Documentation or to my blog post and see how to do the initial setup, remember you could save the App Center secrets in the same way we have done it before.

Let’s add some events to track the behaviour of our users in the app, we are going to collect info when a motel is selected.

To track a motel selection we need to add the following at the end of the OnNavigatedTo method for the view model located in App/CabanasRD/UI/Map/ViewModels/MotelDetailsPageViewModel.cs:

We are almost ready to release our app, before publishing we need to:

  • Add a the release certificate fingerprint for the Android project in the Google Developer Console with the keystore for production.
  • In the iOS project we need to remove the UIWebView API references to avoid App Store rejection [See Microsoft’s documentation ]. Go to your iOS project, open the project properties and add this flag in the additional mtouch arguments field: –optimize=experimental-xforms-product-type, this flag works together with the Linker Behavior set to SDK Only or All.
  • Modify our builds to use the correct certificates, provisioning profiles and keystores.
  • Ensure you have the correct version and code numbers for the apps, and also the app id & label.

And that’s all, we are ready to publish our apps to the markets… so, this is the end of this serie 😭, I hope you have learned something.

See you in my next post! 🚀

See the code on Github

DROP A COMMENT

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.