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
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.
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
- Uses CSS to style the element :)
- Clear and concise documentation
- Built-in components and native modules
- Fully supports Angular with Angular CLI
- Fully integrated and well documented CLI
- A wide range of native modules using Cordova
- Large community, pretty active on slack and everywhere else
The Application I have decided to develop was to find nearby players for sports with the following features.
- Facebook login.
- Discover nearby players.
- Challenge them for a match.
- Publish the match result and review.
- Send and Recieve messages.
Setting up the Ionic4 with Angular7
Prerequisite for Ionic4
- Android SDK (Android) / Xcode (for iOS)
- Editor (VSCode)
Install the required dependencies
Follow the below links to download and install the required dependencies
- npm | get npm
- Install Android Studio | Android Developers
- Xcode - Apple Developer
- Download Visual Studio Code - Mac, Linux, Windows
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
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.
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.
Directory to put your unit test cases written in Jasmine and run by Karma
The directory contains your resources like app icon, splash screen for Android and iOS.
The main working directory contains Angular 7.x code.
The directory to store generated code which will be empty by default.
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 allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the Angular framework
Apollo Link is the interface for creating new links in your application
Easily set a context on your operation, which is used by other links further down the chain.
Handle and inspect errors in your GraphQL network stack.
Get GraphQL results over a network using HTTP fetch.
Send GraphQL operations over a WebSocket. Works with GraphQL Subscriptions.
Helpful utilities for parsing GraphQL queries.
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
# 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
Let me know in the comments what was your first mobile application and what technology you have used to build it.
Don’t forget to share with your friends and claps.