Native Mobile

Why go mobile?

Mobile development is becoming more and more important, it is catching up with the web development. Most of the people want everything to be instantly available to them when they use their smartphones.

If people want to know what is around them they might use Yelp app, if people want to share something with friends they might use Facebook or Twitter app, if people want to book a flight they might use Kayak app, if people want to listen to music they might use Spotify or Pandora apps, etc. Nobody waits until they get back home from wherever they are and turn on their computers to do all of the above. As well as nobody thinks to use just a responsive version of those applications on their mobile. People want efficient and beautiful native mobile applications that would instantly connect them to the world.

From a developer point of view, web development is quite different with the native mobile development. It is very important to follow best practices in both areas because they seem to be becoming equally important. To share our experience with the native mobile development we decided to include this chapter in our documentation.

Cordova Local vs PhoneGapBuild

There are a lot of conversations and confusion around words Cordova, PhoneGap, PhoneGap Build. Also often there it is blend in with front-end SDKs like Ionic, Angular Material and so on. It doesn't help to put the borders on what is what, often it just adds more confusion. It is important to not confuse their purposes.

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap. So, there is no really such a question as 'Do you use PhoneGap or Cordova?'.

Ionic and PhoneGap. I pick this example because perhaps it is the most common one. They serve very different purposes. When I hear a question on whether I use Cordova or Ionic it is difficult to reply because it is not one or the other, they are mutually independent. When we talk about a compilation and deployment we talk about PhoneGap. Ionic doesn't do any of this for you. Ionic is a front-end SDK. There are many of them. It is your choice which one to use. But there is a very limited amount of tools that let us to build, compile and deploy mobile apps.

Cordova Local and PhoneGap Build. First, both share the same purpose - compilation of the application. Cordova Local requires to maintain native SDKs for the platforms of your choice. You need to use Cordova to develop in your local environment (i.e Cordova Local) vs using PhoneGap Build where you use a cloud service. PhoneGap Build offers app-store ready apps without maintaining native SDKs. It does the compilation and packaging for you. It is important to be familiar with pluses and minuses of both. 1. Native SDK for iOS is xCode. It requires Mac. 2. For both you have to obtain, set up and maintain a developer account with Apple to develop for iOS. 3. PhoneGap Build makes debugging very hard. It is like a black box. If a build fails it is hard to know why. 4. If you use Cordova Local, the debugging for Android can be done in Chrome and debugging for iOS either in xCode or Safari. It is convenient. 5. Cordova Local doesn't cost you anything which is not the case for the PhoneGap Build.

PhoneGap Build is powered by Adobe and you need to create an account on their platform, free for one public app, non free for more than one app or any number of private apps. If you would like to learn more about PhoneGap Build follow this link.

The set up and to understand how to use Cordova Local might take more time than using PhoneGap Build but it offers more control as well as a better understanding of the process. In our opinion, it makes it worth it to obtain this knowledge in the long run.

Setting up your dev env

Here we will provide you with a guidance on how to start working with iOS native SDK - xCode and Android native SDK - Android Studio. As well as how to set up Apple developer account to enable iOS development.

As a general requirement for both, please install cordova globally.

sudo npm install –g cordova

iOS specific 1. Obtain Apple Developer account or join an account of your team. To set up it for the first time follow the steps below:

  • Open a dev account here

  • Go to Certificates, IDs and Profiles

  • Click AppIDs, click on a plus sign, create new and fill it out with the appropriate description

  • Click All devices. You can either select an existing one or add a new one. If you have to add a new one it will ask for a UDID. Connect your device to iTunes, when opens, click on the device. There will be a Serial Number as well as UDID.

  • From Certificates, IDs and Profiles go to Development under Certificates.

  • If needed to create a new one click a plus sign and follow Apple instructions to obtain a CRS file. Then download it, save it and include it when requested.

  • Obtain the certificate and download it.

  • Go to Provisioning Profile and Add Development (later when it is ready to be shipped to production to the Apple store the Provisioning Profile will be changed to Distribution.

  • Follow the instructions. Add certificate and then download and install your Provisioning Profile.

  1. Install the latest version of xCode from the Apple store.

We can create a new project in xCode as well as compile and install on the device an existing project. We also can use a variety of simulators in the xCode.

To be able to open our project in xCode it has to be cordova based project as well as we have to add ios platform. We would recommend to use Cordova CLI tool. If you installed Cordova globally you already have it. To add ios platform you can run:

cordova platform add ios

Open an existing app in the xCode. It can be done from the Menu bar or you can navigate to:

you_directory/platforms/ios

and double click on the file .xcodeproj

In the central part of the window in xCode make sure you are connected to the appropriate team. It makes a connection to your Apple dev account and validates the certificates. On the left upper corner there is a Play button and next to it there is a device selection for the simulation. When Play is clicked that will trigger the build process as well as the compilation. If successful it will install the app on the chosen device.

If you would like to connect your device, to install the app use a USB (make sure this device is added as an allowed device to your Apple Dev account).

Some plugins require certain configurations to be added for them to work. We have to provide a reasoning to use certain plugins. For example, camera, geolocation and some others. This reasoning can be provided through your terminal or also you can access it in your xCode configurations. Here is a good article on how to do it.

Android specific

  1. Download the android studio SDK here

  2. Add Command Line Tools - put this code in your .bash_profile(with your own paths)

    export ANDROID_HOME=/Users/YOUR_COMPUTER_NAME/Library/Android/sdk/
    export PATH=${PATH}:/Users/YOUR_COMPUTER_NAME/Library/Android/sdk/platform-tools:/Users/YOUR_COMPUTER_NAME/Library/Android/sdk/tools

  3. Install Java on your machine. Refer here. If necessary add JAVA_HOME global variable to your .bash_profile pointing to the java location on your machine.

    To check if all paths were set up correctly type in your terminal:

    android

    If you see ‘command not found’ the paths were not set up correctly. Try to find more information on your specific case. It is necessary to complete this step.

  4. Create Test Emulator Tools --> Android --> AVD Manager On the bottom, click Create Virtual Device. Choose Device you would like to test on then press Next.

    Choose latest SDK- if you don't have it you can click Download, Review your Device and then click Finish.

  5. Run the Emulator.

    In the terminal, go to the folder of your project and then run:

    cordova run android

  6. Chrome Debugging.

    Once the app is running, open up chrome and use this url. Click Inspect and it should open up the chrome debugging

Cordova Build for Android for release to the store 1. Install phoneGap globally

npm install -g phonegap

  1. Run: 

    cordova build --release android

  2. Now we need to sign the apk (don’t need it just for running on android device):

    Generate Private Key

    Keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

    Sign APK

    Jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

    Optimize APK

    Zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

  3. Phone configuration

    To access these settings, open the Developer options in the system Settings.

    On Android 4.2 and higher, the Developer options screen is hidden by default. To make it visible, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options at the bottom.

    Enable USB debugging on your device by going to Settings > Developer options

Codesoju and Native Mobile

In Codesoju as a part of our Application Scaffolding tool - Yeoman based generators, we offer Cordova Mobile Application option out-of-the box.

You can generate a scaffold of a Codesoju Native Mobile Application, add platforms of your choice and follow the instructions on how to set up native SDKs. Once done you can install your Codesoju app to your device within a few min.

As a front-end SDK we use Angular Material. It is consistent with the Codesoju Web application and it is a stable wideused front-end SDK.

PreviousChartsNextAuth0

Last updated