Menginstal ionic di server cloud

Ionic adalah open source front-end framework untuk developing hybrid mobile apps menggunakan HTML5. Kali ini saya akan coba menulis bagaimana cara Menginstal ionic di server cloudnine www.c9.io

  1. Buat “new workspace” (Node.js)
  2. Buka Terminal, atau gunakan terminal yang ada di bawah layar
  3. ketikan perintah berikut pada terminal
$ npm install -g cordova ionic 
$ ionic start myApp sidemenu 
$ cd myApp 
$ ionic serve -p $PORT --nolivereload

 

referensi:
https://community.c9.io/t/getting-started-with-ionic/1795

How to change StatusBar color in ionic 2

There seems to be a problem on Ionic 2 . It doesn’t seem to be possible to change the StatusBar color, in some custom ROM like MIUI , the statusbar always appears black with white text. How to force ionic to change statusbar color?

Here the answer from my brother, tommy pradana

constructor(public platform: Platform) {
        if ( this.platform.is('android') ) {
            this.platform.ready().then(() => {
                // Okay, so the platform is ready and our plugins are available.
                // Here you can do any higher level native things you might need.
                Splashscreen.hide();
                StatusBar.overlaysWebView(false);
                StatusBar.backgroundColorByHexString('#00FFFF');
            });
        }
    }

or you could use this code below


if (cordova.platformId == 'android') {
    StatusBar.backgroundColorByHexString("#333");
}

And dang…. it will force statusbar color to change based on your code. So, let’s coding again
ref

Build android apk with ionic and publishing to Google Play Store

Before we deploy, we should take care to adjust plugins needed during development that should not be in production mode. For example, we probably don’t want the debug console plugin enabled, so we should remove it before generating the release builds:

cordova plugin rm cordova-plugin-console

To generate a release build for Android, we can use the following cordova cli command:

cordova build --release android

This will generate a release build based on the settings in your config.xml. Your Ionic app will have preset default values in this file, but if you need to customize how your app is built, you can edit this file to fit your preferences.

Next, we can find our unsigned APK file in platforms/android/build/outputs/apk

For example:
In android platforms => /android/build/outputs/apk/android-debug-unaligned.apk

Now, we need to sign the unsigned APK and run an alignment utility on it to optimize it and prepare it for the app store. If you already have a signing key, skip these steps and use that one instead.

Let’s create keystore file using this command
Syntax:


keytool -genkey -v -keystore .keystore -alias  -keyalg  -keysize  -validity 

For Example :


Step 1 : set path   cd C:\Program Files\Java\jre7\bin     in command line
Step 2 : keytool -genkey -v -keystore Helloworld.keystore -alias Helloworld -keyalg RSA -keysize 2048 -validity 10000

Follows the belows steps to generate Signed APK


Step 1: set path C:\Program Files (x86)\Java\jdk1.8.0_20\bin in command line

Step 2: jarsigner -verbose -keystore /path_to_keystore/keystoreFileName  /path_to_apk_file/application_name.apk keystoreFileName_alias

For example: 
jarsigner -verbose -keystore C:\Users\admin22\Ionic_project\First\Helloworld.keystore  C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk Helloworld

-keystoreFileName_alias. You have to provide your alias name of your keystore file name.

Step 3: Enter password of your keystore file

Step 4: Completed. It will displays warning messages like certifaction validity etc..

Step 5: Verify your apk file jarsigner -verify /path_to_apk_file/application_name.apk

For example :
jarsigner -verify C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk

jarsigner -verify -verbose -certs C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk

Zip align:

Step 6: set path C:\Program Files (x86)\Android\sdk\build-tools\android-4.4W in command line

Step 7: zipalign -v 4 /path_to_apk_file/application_name.apk /path_to_destination_apk_locaion/zipped_application_name.apk

For example :
zipalign -v 4 C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\final.apk

Google Play Store

Now that we have our release APK ready for the Google Play Store, we can create a Play Store listing and upload our APK.

To start, you’ll need to visit the Google Play Store Developer Console and create a new developer account. Unfortunately, this is not free. However, the cost is only $25 compared to Apple’s $99.

Once you have a developer account, you can go ahead and click “Publish an Android App on Google Play” as in the screenshot below:

New google play app

Then, you can go ahead and click the button to edit the store listing (We will upload an APK later). You’ll want to fill out the description for the app. Here is a little preview from when we filled out the application with the Ionic Todo app:

Ionic Todo

When you are ready, upload the APK for the release build and publish the listing. Be patient and your hard work should be live in the wild!

Updating your App

As you develop your app, you’ll want to update it periodically.

In order for the Google Play Store to accept updated APKs, you’ll need to edit the config.xml file to increment the version value, then rebuild the app for release.

src

How to place ionic tabs at the bottom of the screen?

Q: I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?

A: To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

src: http://stackoverflow.com/questions/27874855/how-to-place-ionic-tabs-at-the-bottom-of-the-screen