2016-02-15

dev

ionic hybrid app development

Video Show

Frontend

ionic

getting-started
usecreator
videos for creator
Many examples on codepen
courses on w3school.cc

install ionic

npm install -g cordova ionic
ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu

run or emulate your app

http://ionicframework.com/docs/cli/run.html

#安装cordova/ionic
npm install -g cordova ionic
#添加平台(ios相关操作请在mac机器下o(>﹏<)o)
ionic platform add android/ios
#更新项目中的ionic js类库
ionic lib update
#展示ionic项目结果 (同时显示iOS和android上的样式)
ionic serve --lab
#安装/删除crosswalk
ionic browser add/remove crosswalk

Icon and Splash Screen Image Generation

Guide below
http://ionicframework.com/docs/cli/icon-splashscreen.html

cp ~/Downloads/logo11/free_logo_11.ai ./resources/icon.ai
ionic resources --icon

splash screen

2208 x 2208 splash.png

search images on Google , set resolution to 2208 x 2208

Build android package

Follow this guide
http://ionicframework.com/docs/guide/publishing.html

安装android sdk

http://developer.android.com/sdk/installing/index.html
Download Stand-alone SDK Tools

wget 'http://dl.google.com/android/android-sdk_r24.4.1-macosx.zip'
unzip android-sdk_r24.4.1-macosx.zip
mv android-sdk-macosx /usr/local/
echo 'export ANDROID_HOME="/usr/local/android-sdk-macosx"' >> ~/.bash_profile
echo 'export PATH="$PATH:$ANDROID_HOME/tools"' >> ~/.bash_profile
echo 'http.proxyPort=8123' >> ~/.android/androidtool.cfg
echo 'http.proxyHost=127.0.0.1' >> ~/.android/androidtool.cfg
# android update sdk --no-ui
android update sdk --no-https --no-ui --filter platform,system-image,tool,platform-tool
cd $PROJECT_FOLDER
vim config.xml
#we should remove debug console plugin before generating the release builds
cordova plugin rm cordova-plugin-console
cordova build --release android
/bin/cp platforms/android/build/outputs/apk/android-release-unsigned.apk ./
# keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
keytool -genkey -v -keystore icinga-mobile-release-key.keystore -alias icinga_mobile -keyalg RSA -keysize 2048 -validity 10000
# jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android-release-unsigned.apk alias_name
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore icinga-mobile-release-key.keystore android-release-unsigned.apk icinga_mobile
# zipalign -v 4 android-release-unsigned.apk icinga-dash.apk
/usr/local/android-sdk-macosx/build-tools/23.0.2/zipalign -v 4 android-release-unsigned.apk icinga-dash.apk

issues

style is much mess on Android

// .config(function($stateProvider, $urlRouterProvider) {
.config(function($stateProvider, $urlRouterProvider , $ionicConfigProvider) {
  $ionicConfigProvider.platform.ios.tabs.style('standard');
  $ionicConfigProvider.platform.ios.tabs.position('bottom');
  $ionicConfigProvider.platform.android.tabs.style('standard');
  $ionicConfigProvider.platform.android.tabs.position('standard');
  $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
  $ionicConfigProvider.platform.android.navBar.alignTitle('left');
  $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
  $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
  $ionicConfigProvider.platform.ios.views.transition('ios');
  $ionicConfigProvider.platform.android.views.transition('android');
  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

Useful resources

vuejs

vuejs
awesome-vue

MaterializeCSS

Materialize

Backend

Flask-RESTful

SDK installation output

Running command: /Users/arkii/Workspace/Projects/icinga-dashboard-mobile/frontend/hooks/after_prepare/010_add_platform_class.js /Users/arkii/Workspace/Projects/icinga-dashboard-mobile/frontend
add to body class: platform-android
ERROR building one of the platforms: Please install Android target: "android-23".
Hint: Open the SDK manager by running: /usr/local/android-sdk-macosx/tools/android
You will require:
1. "SDK Platform" for android-23
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)
You may not have the required environment or OS to build this project
Error: Please install Android target: "android-23".
Hint: Open the SDK manager by running: /usr/local/android-sdk-macosx/tools/android
You will require:
1. "SDK Platform" for android-23
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)

Android build process output

Running command: /Users/arkii/Workspace/Projects/icinga-dashboard-mobile/frontend/hooks/after_prepare/010_add_platform_class.js /Users/arkii/Workspace/Projects/icinga-dashboard-mobile/frontend
add to body class: platform-android
ANDROID_HOME=/usr/local/android-sdk-macosx
JAVA_HOME=/Library/Java/Home
Downloading http://services.gradle.org/distributions/gradle-2.2.1-all.zip
.........................................................................
:compileReleaseNdk UP-TO-DATE
:compileReleaseSources
:lintVitalRelease
:transformClassesWithDexForRelease
:mergeReleaseJniLibFolders
:transformNative_libsWithMergeJniLibsForRelease
:processReleaseJavaRes UP-TO-DATE
:transformResourcesWithMergeJavaResForRelease
:packageRelease
:assembleRelease
:cdvBuildRelease
BUILD SUCCESSFUL
Total time: 5 mins 21.356 secs
Built the following apk(s): 
	/Users/arkii/Workspace/Projects/icinga-dashboard-mobile/frontend/platforms/android/build/outputs/apk/android-release-unsigned.apk