Ionic 2 Issues on Windows 10

The last couple days I have been struggling with installing Ionic 2 on my Windows 10 laptop.

Here is my Ionic info:

C:\Dev\ionicProjects>ionic info

Your system information:

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v6.7.0

Here is the error I was getting when trying to start a project.  Really helpful, right?

C:\Dev\ionicProjects>ionic start –v2 myApp
Creating Ionic app in folder C:\Dev\ionicProjects\myApp based on tabs project
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic2-starter-tabs/archive/master.zip
[=============================] 100% 0.0s
Installing npm packages…
Error with start undefined
Error Initializing app: There was an error with the spawned command: npminstall
There was an error with the spawned command: npminstall
Caught exception:
undefined

Mind letting us know? https://github.com/driftyco/ionic-cli/issues

So I struggled trying many different things and finally figured out that I needed to install git which is needed for running ionic start.

SOLUTION:  Download and install git from here

https://git-for-windows.github.io/

Then restart your command prompt and hopefully it work just as it did for me…

 

Cordova Hook: Internationalizing your App Name for Android

On a recent app I worked on, we needed to internationalize the App Name.  Currently, Cordova does not allow you to easily handle this via configuration.  One alternative is to open the Android project and modify it to include the internationalization.  However, if a developer removes the platform, the process has to be repeated.  This article explains how to accomplish this in a repeatable process that works when the developer removes and adds the Android App.  I will be using the Ionic Framework to build this sample app; however, this should work for any Cordova project.

Why do I want this repeatable?  Great, question.  Maybe I have an App that is used by multiple clients so I need a configurable build process for each client where one client supports English but another supports English and Spanish.  If so, this builds the basic foundation necessary to create such a dynamic build environment.

Assumptions:  I am assuming you have some experience writing Mobile Hybrid Apps with Cordova and Ionic Framwork.

Please checkout the GitHub repository here:

Cordova Hooks

Cordova allows developers to create hooks that run to customize Cordova commans like adding/removing platforms, running a build, etc.  Hooks can be written in any language according to their documentation but I personally have only used Node.js for writing hooks.

This hook has a dependency for the the fs.extra NPM Package.  It can be found in the following location.  Dependencies

In your Cordova project, run the following command:

npm install --save fs.extra

For this project, our hook will run when the Android app is prepared.  Therefore, we will create a js file named 020_i18n_app_name.js in the “hooks/after_prepare” folder.

Unlike iOS, this is rather simple.  We just need to copy the necessary resources files into the Android project.  Therefore, this hook checks to see if the Cordova Project is configured for the Android platform and the copies predefined Android Resource files to the appropriate Android platform folder.

#!/usr/bin/env node

var fs = require("fs.extra");

var fsCallback = function (err) {
    if (err) {
        console.error("Failed to create directory or file.");
        throw err;
    }
}

var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []);

if (platforms.indexOf('android') > -1) {
    console.log("Adding I18N App Name for Android");

    // Copy over the English Resource Files
    fs.copy('resources/android/values/strings.xml', 'platforms/android/res/values/strings.xml', { replace: true }, fsCallback);

    // Copy over the French Resource Files
    fs.mkdirp('platforms/android/res/values-fr', fsCallback);
    fs.copy('resources/android/values-fr/strings.xml', 'platforms/android/res/values-fr/strings.xml', { replace: true }, fsCallback);

    // Copy over the Spanish Resource Files
    fs.mkdirp('platforms/android/res/values-es', fsCallback);
    fs.copy('resources/android/values-es/strings.xml', 'platforms/android/res/values-es/strings.xml', { replace: true }, fsCallback);

    console.log('Added I18N Resource Files for Android');
} else {
    console.warn('I18N Resource Files were NOT added for Android');
}

Resources Files

For each language that we want to support in the App, you will need to create an Android Resource file called strings.xml in a folder.  Here is a sample for English:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <string name="app_name">Good Morning</string>
    <string name="launcher_name">@string/app_name</string>
    <string name="activity_name">@string/launcher_name</string>
</resources>

You need to create a values folder for each language.  The default language will have a folder called values; while each other language will use the following syntax:  values-{{language code}}.  IE.  values-fr for French, values-es for Spanish, etc…

I placed these folders and files under a folder called resources/android in my root folder for my project.  The hook will then copy the files to the appropriate location in the Android project.

ResourcesFilesForAndroid

 

Check it out

Since I am using Ionic, I’ll run the following command:

ionic run android

That command is basically a wrapper for the Cordova command.  Notice the output and you will see the hook running and adding the files to the Android project before building and installing the app.

Running command: "C:\Program Files\nodejs\node.exe" C:\Dev\ionicProjects\ionic2SampleI18N\hooks\after_prepare\020_i18n_app_name.js C:\Dev\ionicProjects\ionic2SampleI18N
Adding I18N App Name for Android
Added I18N Resource Files for Android

Finally, the App Name internationalized running on Android:

MobileAppI18N.png

Conclusion

At this time, this process certainly meets my needs.  But this obviously could be considered immature and easily improved on by adding configuration to config.xml that contains the languages and resource locations.  Certainly a project for another day!

Other Resources:

Android: What is AAPT?

Android has a ton of tools.  This is a quick introduction to a couple commands I use in AAPT.

What is AAPT?

AAPT (Anroid Asset Packaging Tool) is a great tool to help you view, create and update your APKs (as well as zip and jar files).

Where is it?

On Windows, check you Android/tools folder.  For my Windows 8, it is located here:

C:\Program Files (x86)\Android\android-sdk\build-tools\23.0.2

Just add it to your path Environment Variable.

Getting your VersionCode, etc…

By running the following commands, you will see lots of important information from App Id, Version Code, Version Number, SDK Info, Permissions, etc…

aapt dump badging my.apk

This is really helpful when delivering the APK to a client.  If a client questions the VersionCode or other information, you can easily verify the app and also explain how the client can verify it.

When running this tool the output will look similar to this:

AAPTDumpBadging

Check your permissions:

It also helps verify what permissions are set in the app.  We recently failed a security audit for our App.  The customer said the Third Party failed our app for too many permissions.  This tool was very helpful in determining the exact permissions our App had and provided the information to our customer.  Turned out the Third Party was wrong and accidentally got the permissions of another app.  Opps!

aapt dump permissions my.apk

AAPTDumpPermissions

Other Resources