My first mobile application using Ionic-4, Angular-7 and Apollo Client

Every programmer has at least thought once to build his/her very first mobile application either on Android or iOS. I was no different and planned to build my very first mobile application.

Native or Hybrid

The debate about hybrid or native can never settle, both have their own pros and cons but when I had to decide, trust me the confusion was the same.

After carefully exploring all my options in both segment, I figured that Native is more on the performance and experience side where Hybrid is more on the faster and cheaper development. But my scenario was completely different and I was more concerned about the knowledge curve and understanding, for my performance and development speed was the last thing to worry. So I have taken a different approach and chosen React Native to get started with.

React Native is not Native

First of all, let me clear one thing React Native is not fully native. Just that you get native UI instead of a web-view, the business logic of the application runs in JavaScript only.

Similar to NativeScript, Cordova, Xamrin and etc. React Native uses the JavaScript bridge to communicate with Native modules which typically are Java or Objective-C classes running on the native environment.

You can divide Hybrid into two further categories, Native UI and Mobile Web. Native UI which means your application UI will be in Native and application logic will still be in JavaScript where the Mobile Web is purely on the web view.

Why Ionic 4?

I wanted my application to look beautiful and all I knew was CSS to style anything, so when I have started with React Native I felt cheated as React Native was not using CSS for styling. It was similar to CSS syntaxes but most of the properties were not supported and I was not able to design my application’s UI properly.

After I got stuck to design a beautiful UI for my application using React Native, I have started looking to an alternative. Ionic was one of them with only one difference, the UI in Ionic is not Native its a web-view rendering HTML, CSS and JavaScript which supports Angular out of the box. Having CSS to style the element enabled me to build a beautiful UI for my application.

For native module support in Ionic, it uses Cordova as a dependency to support native modules. I have used plenty of them in my application like Facebook, Firebase, Splash screen, Storage and etc.

Follow the below link to check out the full Ionic Native modules and their uses.

The other things I liked about Ionic

1. Uses CSS to style the element :)
2. Clear and concise documentation
3. Built-in components and native modules
4. Fully supports Angular with Angular CLI
5. Fully integrated and well documented CLI
6. A wide range of native modules using Cordova
7. Large community, pretty active on slack and everywhere else

The App

The Application I have decided to develop was to find nearby players for sports with the following features.

1. Facebook login.
2. Discover nearby players.
3. Challenge them for a match.
4. Publish the match result and review.
5. Send and Recieve messages.

Setting up the Ionic4 with Angular7

Prerequisite for Ionic4

1. NPM
2. Android SDK (Android) / Xcode (for iOS)
3. Editor (VSCode)

Install the required dependencies

Follow the below links to download and install the required dependencies

After you finish downloading and installing above dependencies, please install Ionic through NPM using below command.

npm install -g ionic // use sudo if permission issue

Create Ionic4 and Angular 7 application

Ionic CLI has a command to start the project with the basic setup and source code, use the below command to start your Ionic project.

ionic start <app_name> <template> --type=angular

Check the below link to know more about the Ionic start command

Adding Android/iOS support

To add/remove Android and iOS support in Ionic run below commands

# add android
ionic cordova platform add android

# remove android
ionic cordova platform rm android

# add iOS (only for macOS)
ionic cordova platform add ios

# remove iOS (only for macOS)
ionic cordova platform rm ios

Visit below link to know more about Cordova platform command

Generating resources

Follow the below steps to generate splash screen, app icons, and other resources.

Add a high-resolution icon and splash image in the /resource folder, icon.png for the app icon and splash.png for the splash screen.

Run the below command to generate resources for each platform

# icons and splash for all the platforms
ionic cordova resources

# icons only
ionic cordova resources -i

# splash only
ionic cordova resources -s

# for android only
ionic cordova resources android

# for ios only
ionic cordova resources ios

Visit below link to know more about Cordova resource command.

Directory Structure

After setting up the project, you should have the following directory structure. Where all you have to care about the below-mentioned directories and files.

/e2e

Directory to put your unit test cases written in Jasmine and run by Karma

/resources

The directory contains your resources like app icon, splash screen for Android and iOS.

/src

The main working directory contains Angular 7.x code.

/www

The directory to store generated code which will be empty by default.

/config.xml

Ionic app configuration for Android and iOS. Contains the information of resources and Cordova plugins used in the app.

Setting up the Apollo client

Run the following command to install the dependencies for Apollo client.

npm install --save apollo-angular apollo-link apollo-link-context apollo-link-error apollo-link-http apollo-link-ws graphql graphql-tag

apollo-angular

Apollo Angular allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the Angular framework

apollo-link

Apollo Link is the interface for creating new links in your application

apollo-link-context

Easily set a context on your operation, which is used by other links further down the chain.

apollo-link-error

Handle and inspect errors in your GraphQL network stack.

apollo-link-http

Get GraphQL results over a network using HTTP fetch.

apollo-link-ws

Send GraphQL operations over a WebSocket. Works with GraphQL Subscriptions.

graphql

The JavaScript reference implementation for GraphQL, a query language for APIs created by Facebook.

graphql-tag

Helpful utilities for parsing GraphQL queries.

Application development

After setting up all the required dependencies the application can be developed as similar to any Angular 7.x application.

To start the local Android/iOS simulator with hot reload use below command

# for Android
ionic cordova run android -lc

# for iOS
ionic cordova run ios -lc

# for PWA
npm start

# to test
npm run test

Build and Deployment

To build the Ionic application run below command which generates the Unsigned Release APK.

# for Android
ionic cordova build android --prod --release

# The above command will generate the app-release-unsigned.apk into
# /platforms/android/app/build/outputs/apk/release directory.

Once you have the release build ready you need RSA key to sign your build. To generate the RSA key run below command which will generate a keystore file with the name provided.

keytool -genkey -v -keystore <app_name>.keystore -alias <app_name> -keyalg RSA -keysize 2048 -validity 10000

# Generates the <app_name>.keystore file into the same directory 
# where the above command runs.

To sign the Release APK by the generated keystore file, use below command

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <app_name>.keystore app-release-unsigned.apk <app_name>

After signing the release APK use zipalign to package your APK use below command, which can be deployed directly to Google Play Store

zipalign -v 4 /path/app-release-unsigned.apk <app_name>-1.0.0.apk

# If you don't have zipalign in your PATH you can find it in your 
# Android SDK build-tools 
# /path/to/android/sdk/build-tools/24.0.2/zipalign

Let me know in the comments what was your first mobile application and what technology you have used to build it.