Category Archives: Ionic Framework

Ionic Icon front Free – 免費的 Ionic Icon font ionicons.com

今天為自己寫了一個筆記..
方便自己在開發用Ionic Framework寫的 Mobile Applications
時加 icon / button icon

像我這一類的沒有藝術感/美感的 developer..
找到些Bootstrap / icon / graphic pack 或容易用的framework來解決手機程式介面設計十分重要
很多時候我的程式開發停滯完成不了..主要是因為想不到怎樣完成UI/UX

今天和大家介紹的這個一網頁..他有很多的Icon Font
Ionicons
http://ionicons.com/
Ionicons.com

當大家開始寫Ionic時..這些Icon font已經包含在你的Project上
但是怎樣知道怎樣可以apply 這些Icon font

使用方法十分簡單
我們只需要在 HTML/Ionic tag上加上相對的CSS Class 便可以
E.G.
如果我想在我程式上的 Button 加上一個 volume的 icon 我可以 用以下的Mark up

  <button class="button button-balanced icon ion-volume-high"></button>

怎樣知道那個Icon Font的CSS Class是什麼?
http://ionicons.com/
當大家進入了網頁之後..
只需要選擇想使用的Icon之後他便會顯示相對的CSS Class 名稱..
Font Icon for Ionic Framework Application

Hope you find it useful

Ionic Uncaught ReferenceError: $rootScope is not defined

今天在ionic application 上需要使用到 $rootScope
當我執行這個app時出現了以下的錯誤信息

Uncaught ReferenceError: $rootScope is not defined
解決方法十分簡單
我們只需要在 function上加上 $rootScope 這個dependency 便可以了

E.G.

.run(function ($ionicPlatform, <strong> $rootScope</strong>) {
    $rootScope.$on("", function(){});
  
  }

Hope you find it useful

Ionic Error: EXDEV, cross-device link not permitted

今天當我嘗試在我的 Ionic Framework Project 安裝 cordova plugin 時出現了以下的錯誤信息..

<code class="language-text" data-lang="text"><a href="https://github.com/phonegap-build/PushPlugin.git" target="_blank">cordova plugin add https://github.com/phonegap-build/PushPlugin.git</a></code>

Error: EXDEV, cross-device link not permitted
Ionic Error: EXDEV, cross-device link not permitted
做了一會research 之後發現..
應該是 電腦上安裝了的 Corodova 版本有問題..
所以只需要 安裝舊一些的版本便可以解決這個問題

解決方法
command prompt 上執行以下指令去安裝 指定版本的 cordova

npm install -g cordova@5.0.0

npm install -g cordova@ version
安裝完了再次嘗試安裝 這個cordova plugin..
e.g. Ionic / Cordova Push Notification plugin

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

Able to install Cordova plugin

成功安裝

Hope you find it useful

Ionic Publish Android application – 在Ionic 上如何發佈 Android 程式

回到英國之後.. 開始專注使用Ionic Framework來開發程式

因為常常想到新的功能..所以便常常要再發佈更新到 Google PlayStore

為了方便自己.還是寫一個筆記方便自己將來發佈 Android 程式

我相信大家還是在你的 Ionic Project Directory
你可以使用以下指令 去建立 一個”Release Build

cordova build --release android

Ionic Release Build
之後我們便需要去到輸出 apk 檔的 資料夾 以方便之前的動作
通常在Ionic Project上的 platforms\android\ant-build 資料夾上
Ionic Build directory

e.g.

cd platforms\android\ant-build

之後我們便會看到 ionic generateunsigned release apk檔案
CordovaApp-release-unsigned.apk on Ionic Build Folder

之後我們便可以 Sign 這個 unsigned releaseapk
Ionic defaultunsigned release apk名是這樣的 “CordovaApp-release-unsigned.apk

我們可以用以下指令到簽署unsigned apk

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [Full filename and path.keystore / 你的keystore的 路徑和檔案名] CordovaApp-release-unsigned.apk [alias name / 別名] 

e.g.

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore D:\Ionic\SampleProject\keystores\SharechiwaiDemoReleaseKey.keystore CordovaApp-release-unsigned.apk ShareChiWaiDemoReleaseKey 

之後他們叫你輸入之前在這個keystore上設定的 密碼
use jarsinger to sign unsigned apk
* keystore 是在之前的網誌上有介紹給大家如何建立自己的sign key

詳情可以參考以下網誌

Useful command for Android Development 1 – 一些有用的在開發Android程式時幾有用的指令筆記

Ionic Android Signed Apk
完成後便可以使用 “zipalign” 功具來 優化 Android 程式.. 主要用來壓縮apk內的 圖/資料檔等等..
以便減輕記憶體/RAM 的使用量

zipalign -v 4 CordovaApp-release-unsigned.apk [Your APK name / 你想出現的檔案名].apk

e.g.

zipalign -v 4 CordovaApp-release-unsigned.apk sharechiwai_demo.apk

zipalign - compress apk
可以準備 Upload 你的 APK 了
Signed APK with zipalign

Hope you find it useful

‘keytool’ is not recognized as an internal or external command, operable program or batch file

嘗試跟著Ionic FrameworkOfficial Document
http://ionicframework.com/docs/guide/publishing.html
Keytool instructions from Ionic Publishing page

使用 keytoolsign我的 Ionic Android APK時出現以下的錯誤信息

‘keytool’ is not recognized as an internal or external command, operable program or batch file
'keytool' is not recognized as an internal or external command, operable program or batch file

應該是Environment Variable上的 Path 有些問題而造成的

解決方法

在電腦上找出安裝在電腦上的 Java Bin 資料夾
Java Bin Folder Path

E.G.
C:\[Program Files 或 Program Files (x86)]\Java\[jdk version]\bin
我的bin folder是在這裡的
C:\Program Files\Java\jdk1.8.0_25\bin

之後加進 電腦的 Environment Variable的 “path” 屬性上
Environment Variable - Path property

之後重新啟動 command prompt便可以了
Keytool command works

Hope you find it useful



How to list added cordova plugin on ionic – 如何找出在ionic framework上找出 已經安裝的 cordova 插件

終於可以發佈我第一個使用 Ionic Framework來寫的Hybrid App
official document上建議先移除沒有用的 cordova 的 Plugin 再發佈
那麼如何知道現有的Ionic Project上已經安裝的cordova Plugin 呢?

解決方法十分簡單

我們可以在Projectroot directory上使用以下的指令便可以列出 已安裝的 cordova plugins

cordova plugin list

List Cordova Plugins - cordova plugin list
Hope you find it useful