Parent | Child | Previous | Next
 

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.

    images/appfLow_intro1.png

  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.

    images/alpha_pgbuilder.png

  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.

    images/appflow_create_git_repo.png

  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

    images/github_publish_repo.png

Creating an App in Ionic Appflow

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

  2. Create a new app. Click Apps, select New, and choose Import existing app.

    images/appflow_create_new_app.png

  3. Enter your app name. It can be anything you want.

    images/appflow_add_new_app.png

  4. Select Cordova for your mobile architecture.

    images/appflow_add_new_app_architecture.png

  5. Select your app's git host. Click Connect for GitHub and connect Ionic Appflow to your GitHub account. When your GitHub account has been connected, click Continue to select your repo.

    images/appflow_add_new_app_host.png

  6. Select the GitHub repository for this app.

    images/appflow_connect_repo.png

  7. Once your repository is connected, you will be taken to the Commits screen. Click the Start build button to initiate an iOS or Android Build.

    images/appflow_build.png

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.

  • images/appflow_create_new_build.png

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

    images/appflow_add_security_profile.png

  • 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.

    images/appflow_edit_security_profile.png
  • images/appflow_show_security_profiles.png
    iOS Security Profile

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

    images/appflow_create_new_build_with_profile.png
  • images/appflow_build_progress.png

  • 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.

    images/appflow_show_builds.png

  • 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.

    images/diawi.png

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.

images/appflow_create_android_build.png

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.