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.
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.
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
The Application I have decided to develop was to find nearby players for sports with the following features.
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
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
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.
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 npm start # to test npm run test
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.
Google Develover Expert — WebTechnologies and Angular | Principal Architect at Naukri.com | Entrepreneur | TechEnthusiast | Speaker