Cordova / Ionic Appflow

Description

Alpha Anywhere now includes an Ionic Appflow build option in the Cordova App Builder Genie. Support is provided for Android and iOS builds using Ionic Appflow.

Discussion

Ionic Appflow is a cloud based service that allows an Alpha mobile app developer to build Cordova apps for iOS or Android in the cloud.

As described on the Ionic Appflow welcome page, "Appflow is a continuous integration (CI) and continuous deployment (CD) platform for Ionic development teams. Appflow helps development teams continuously build and ship their Cordova and Capacitor apps faster than ever."

If you want to build your Cordova apps with a cloud based service, Ionic Appflow is a good solution.

Ionic Appflow Subscription and Setup 

  1. Setup an Ionic Appflow paid Account 

    Go to https://ionicframework.com/pricing/compare and purchase an account. Compiling native iOS or Android apps requires a paid Ionic Appflow account. At a minimum, you must purchase a Launch plan.

  2. Setup a GitHub Account 

    Go to https://github.com/ and create a GitHub account if you do not already have one.

  3. Install GitHub Desktop 

    Download and install GitHub Desktop.

  4. Build your Cordova Project 

    From within Alpha Anywhere, open the Cordova App Builder Genie and select Ionic Appflow as the App Build Target.

    Use the Cordova App Builder to configure your application. When you are finished configuring the properties for your app, click Save and Build For Ionic Appflow.

    Next, Alpha Anywhere will ask where you want to save the generated files. The files will be saved in a folder named ProjectName within the selected directory. The location where the files are saved will be passed to GitHub Desktop, which will be used to create the git repository.

  5. Create a git Repository 

    Once all of the files are transferred and created, GitHub Desktop will launch. Click create a repository to create a git repository.

  6. Publish the Repository to GitHub 

    After the repo is created, click Publish repository to publish the repository to your GitHub account. You are now ready to create a new app in Ionic Appflow

Creating an App in Ionic Appflow 

  1. Go to https://dashboard.ionicframework.com/ and login.

  2. Create a new app. Click Apps and select Add App.

  3. Enter your app name. It can be anything you want. This app will be linked to the project GitHub repo in a later step.

  4. Once the app is created, click Commits. You will notice that no commits are listed. The next step is to connect this app to your project GitHub repo.

  5. Click Settings to link the app to your GitHub repo.

  6. Next, click Git and select GitHub from the top menu. If it isn't already connected, connect Ionic Appflow to your GitHub account. Once you connect to your GitHub account, all of your repositories will be shown.

  7. Select the GitHub repository for this app.

  8. You will now need to make a new commit to the linked GitHub repo in order for Appflow to pick up the commit. To do that, go to your Alpha Anywhere project, make a simple change to the component to make it dirty and save. Then, open the Cordova Builder and click Save and Build For Ionic Appflow.

    To initiate an iOS or Android build, click on the isometric grey box on the right side of the screen.

Creating an iOS Build 

Select iOS Xcode 11 as the build Target Platform. Select the development Build Type for testing.

When you first create an iOS build, you will need to create a Security Profile that will contain your Apple development credentials which are required to sign and run the app on a device. This step is repeated for every iOS project you create to make sure to keep your signing certificate P12 and provisioning profile in a directory that is easy to remember and access.

  • Click the security profile link, give the profile and name and select a Production or Development type as appropriate. Then, click Create

  • Next, click the iOS tab. Upload your Apple Development/Store Certificate P12 file, Provisioning Profile file, and enter your Certificate Password.

    When you are done, click Save to save the profile.

  • iOS Security Profile
  • The security profile will be added to the project, and you can now click Build to start the iOS build process.

  • For iOS builds, Ionic Appflow will fire up a Mac OS Virtual Machine and progress will be displayed as the build progresses. Once the process is completed, a link to the .ipa file is displayed to the right of the console screen. The .ipa file is also listed in the App Builds list.

  • iOS .ipa files cannot be loaded directly onto an iOS device. The easiest way to load the app .ipa file onto a device is using a third-party service like Diawi.com. .ipa files can be uploaded to Diawi.com and then installed on your iOS device. See https://www.diawi.com/ for more information.

Creating an Android Build 

The process of creating an Android .apk file on Appflow is very similar to the process of creating an iOS app. The only difference is specifying Android as the target platform.

The generated .apk file can be loaded directly on an Android device.

Videos 

Video Overview: Using Ionic Appflow with Alpha Anywhere To Build Cordova Apps

Ionic AppFlow is a service offered by Ionic for building iOS and Android applications. It is tightly integrated in the Alpha Anywhere Cordova Genie.

In this video, we'll walk you through the process of building Alpha Anywhere applications with Ionic Appflow.