SOON_ Native App Demo

An example iOS and Android app built with Angular and NativeScript. This repo also includes example build and publishing workflow using CircleCI to the Google Play Store and the Apple App Store.

Getting Started

This guide has been mainly influenced by nativescript docs on how to publish apps to app stores. This article here in particular is a good guide. This video is also useful for iOS certificates and how they work.

Clone the repository

To get you started you can simply clone the repository using git and install the dependencies

cd path/to/parent/directory
git clone git@github.com:thisissoon/nativescript-app-demo.git --depth 1
cd nativescript-app-demo

Installation

There are three main dependancies you will need to install on your machine first to run and build this project:

Node.js - Required to run the NativeScript CLI and to build the Angular bundle.
Android SDK - Required to build the native Android app. You can get this by installing Android Studio
Xcode (OSX only) - Required to run and build iOS apps.

Once you have these dependancies installed you can install the NativeScript CLI globally using npm by running:

npm install -g nativescript@latest

Then install local dependancies by running:

npm install

Development

Run iOS app (OSX only)

npm run start:ios

Under the hood this simply runs tns run android. Nativescript will then:

Compile and build the iOS app
Start the iOS simulator
Install the app on the simulator and launch it
Watch for changes and relaunch the app

Run Android app

npm run start:android

Under the hood this simply runs tns run android. Nativescript will then:

Compile and build the Android app
Start the Android simulator
Install the app on the simulator and launch it
Watch for changes and relaunch the app

Deployment

Deployment to Apple AppStore

TODO

Deployment to Google Play Store

Create a private key for your app

Use the keytool tool to create a private key to sign your application with. This key basically is used to prove that you or your company are one's building the app . Note: This key must be used to sign all future versions of your app and is not replacable so keep it safe and secure.

Create your key by running the below and follow the prompts:

keytool -genkey -v -keystore {my-key.jks} -keyalg RSA -keysize 2048 -validity 10000 -alias {my-alias} -keypass {my-secret-password} -storepass {my-secret-password}

Build first version of your app and sign it

First replace all references of com.thisissoon.demo in this project with your own app id. Then build the app and sign it too ready to be published to the play store.

npm run build:android -- --release --key-store-path <my-key.jks>  --key-store-password <my-secret-password> --key-store-alias <my-alias> --key-store-alias-password <my-secret-password> --copy-to <my-app.apk>

Create your app in the Play Store

For the first release you'll have to upload your app to the Store manually. After that this can be automated.

Create an account and application in the Google Play Console. Then go to Release_management > App_releases. There you will see some tracks for production, open and closed. For the first release I would recommend choosing a closed track as you can specify excatly who see's your app.

Click the Manage > Create release and where it says Android App Bundles and APKs to add upload your .apk file. Fill in the rest of the information and click Review and submit your app. This may take a few hours to appear in the app store. Make sure your also fill in the Store presence section as that must be done before your app can be published.

Publish app through CircleCI

Once your app has been published you can then publish updates using CircleCI using git tags. CircleCI has been configured to build and publish the app when new tags are pushed to GitHub.

The CircleCI build uses the Google API Node.js library to create a new edit and upload and commit the edit to any track you'd like. You'll need to create a Google developer account first and create a project for your Play Store apps. Then create a service account to use to authenticate api requests in CircleCI.

To create a service account click on burger menu > IAM & Admin > Service accounts > Create Service Account. Fill in the fields making sure to check Furish a new private key and download the key. Note: Keep this private key secure as this will allow anyone to make requests from your Google developer account.

You'll also need to link your Play Store account and Google developer account by going to the Google Play console then click on Developer account > API access and link the service account.

In CircleCI select your project and click Start building. In the project settings you'll need to put in your key-store-alias as KEY_STORE_ALIAS, key-store-alias-password as KEY_STORE_ALIAS_PASSWORD and key-store-password as KEY_STORE_PASSWORD from the private key you used to sign your app in environment variables.

You'll also need to enter your private key from the Google service account as PLAY_STORE_JWT. Finally run in terminal run cat {my-key.jks} | base64 to base64 encode your app's key and enter this into environment variables in CircleCI as ANDROID_KEY_BASE64.

Making Releases

Run npm run release to create a new release. This will use Standard Version to create a new release. Standard Version will generate / update the changelog based on commits generated using Commitizen CLI, update the version number following semantic versioning rules and then commit and tag the commit for the release. Simply run git push --follow-tags origin master to trigger a new build in CircleCI and publish a new version of your app.

Making Commits

This repo uses Commitizen CLI and Conventional Changelog to create commits and generate changelogs. Instead of running git commit run git cz and follow the prompts. Changelogs will then be generated when creating new releases by running npm run release.

thisissoon / nativescript-app-demo