發表文章

目前顯示的是 一月, 2016的文章

誤刪 npmrc 解決方法之一

今天腦殘,把 npmrc 的內容全砍光,因為我發現有個 private registry 還是連到前公司,但是 server 是掛掉的狀態,所以就...,因為每次 npm i  都有 error log,一定得把那個 private registry 移出我的 rpmrc,一個快速,dd指令立刻存檔,就掰了...

so,搶救 npmrc 的內容,主要是有個 //registry.npmjs.org/:_authToken=XX 這個 token 要補回來。(我都不知道幾百年沒登入 npm 了,就算到登入後到 https://www.npmjs.com/settings/tokens 頁面,也是看不到 token)

其實 token 只要下 npm login,重新利用 cli 登入 npm 就行,他會自己幫你把 npmrc 的  token 補回來。

npm login 需要補登帳號, 密碼, 以及 email,所以要記得你當初註冊 npm 的資訊,忘記的話就要找回密碼了。

Android 的 SharedPreferences 學習筆記

圖片
Android 的 SharedPreferences 是一種提供 App 儲存少量資料的物件。要使用 SharedPreferences 需要 import android.content.SharedPreferences;

SharedPreferences 是用 Key, Value 的方式組成,就像我們在使用 NoSQL 一樣,key 就是鍵名,value 就是值,下面介紹增修刪讀一個 SharedPreferences 的方式 (其實就只是參考官方文件)。

建立 SharedPreferences 物件

在一個 APP 使用 SharedPreferences 儲存資料,首先要先建立起 SharedPreferences 的物件:

getSharedPreferences 變數名稱  = getSharedPreferences(String name, int MODE);
// Example 建立名為 pref 的 SharedPreferences 物件 SharedPreferences pref = getSharedPreferences("dialogAppFile", MODE_PRIVATE);
getSharedPreferences 有兩個參數,getSharedPreferences(String name, int MODE);

第一個參數  name 型別為 String,表示檔名,SharedPreferences 會去找符合檔名的 ShredPreferences,假如檔名不存在,那麼他會當你在使用 editor (SharedPreferences.edit()) 而且 commit (意思就是送出更新或是建立 key 值) 的時候建立。

因為 SharedPreferences 是 XML 檔的格式,所以只需要帶入檔名,副檔名就不需要了。

附帶一提,這裏的 Editor 是指 SharedPreferences 的 Editor 物件,要先拿到這個物件,才能寫入資料到 ShredPreferences,下面在 "寫入資料到SharedPreferences" 地方會再提到,只要先知道如果檔案不存在,它也會在操作 commit 時建立。

第二個參數雖然是 int 型別,但是值是預…

[筆記] 手機 APP 畫面的分類

圖片
今天大概翻了一下一本跟 app ui/ux 有關的書,筆記一些東西,因為在 google 的過程中發現有些東西我蠻想記錄下來的 :P 不過 UI 元件我沒有特別紀錄,因為 ios 跟 android 還是有點差別,要寫的話就要分開紀錄了。


手機 APP 畫面簡略來分,可分為 :
(1) 起始畫面
(2) 主畫面
(3) 列表頁
(4) 詳細頁面
(5) 其他,像是登入畫面, input 畫面, 管理畫面...

(1) 起始畫面,以使用場景來看有
Splash
App 準備啟動時的畫面 (但其實有時候 app 載入很快的話,你可能看不到,我曾經有朋友跟我分享過他接過一個 app,對方不管怎樣都希望載入 app 時出現 splash... XD)

想看一些 splash 畫面: http://www.mobile-patterns.com/splash-screens
-Walk-Through 逐一介紹畫面:
walk through 漫步的意思,通常這個畫面出現在你第一次開啟該 app 時才會看到,主要是導覽你關於該 app 的一些介紹。有點類似 web 的 slideshow,一張一張的刷掉,然後就會退出,讓你正式的開始用該 APP。

想看一些 walk through 的設計: Walkthrough UI Design 
- Coach Mark 教練標記
教練標記我覺得跟 walk throught 很類似,只是他把你的視覺帶到更實際的界面上引導你,什麼地方或是什麼按鈕可以發生什麼樣的事情。

想看一些 Coach Mark 的畫面: http://www.mobile-patterns.com/coach-marks
- Empty Data Set 空資料狀態
沒有資料時的畫面樣式。


想看一些 Empty Data Set: http://www.mobile-patterns.com/empty-data-sets

(2) 主畫面
嚴格來說主畫面才是整個 app 的重頭戲,而起始畫面可能不一定是必要,看情況,有些時候有,也許對使用者體驗會蠻好的。主畫面是 App 的門面,也會擺放其他操作的 UI 元件,像 navigation...。

(3) 列表畫面
列表畫面是最常看到的畫面,大部份的資料都會比列表作為呈現,只是 UI 設計不同。列表畫面最常見的例子有:  …

我最近看的一本書: Android App 程式設計教本之無痛起步

圖片
這本書的詳細資訊 (博客來)。

* 閱讀天數: 約 13 天吧!,一天不超過6小時。
* 購買時間: 1月初。
* 學習 Android 最麻煩的地方: 建置環境! (<- 如果連 JDK, android studio 都弄不起來就不用玩了...)
* 學習建議: 就算有 android 模擬器還是不夠,建議還是要有 android 的手機在身邊用。

其實我離職的這段時間真的是很盡情地看書,看了一點 Java 的皮毛就來看這本書。不過,這本書真的非常基本,但它的書名已經很童叟無欺了 :),真的是很無痛,也很好上手 (跟著步驟做,你不太有機會走丟,但是有些 typo 的地方,你可能要自己認的出來比較好...),只是說如果要再更精深一點,只看一本絕對不夠。另外前面幾章節的重點複習跟練習能做就做瞜。

適合沒有學過 Android,但是你有其他程式語言的基礎,我覺得這本書是不錯的入門,書本的教學方式比較小單元為主,一個功能或是主要的大方向都會稍微帶過。

後面章節簡短複習 Java 的附錄我覺得蠻實用的,另外 Android Stiduo 的介紹寫得不錯。

模擬器的話,在 window 上好像要多安裝一些東西,但是因為我是 Mac... 所以我沒感覺...

大概是這樣。我還有買另外一本書,用來增加對 Android 的深度跟廣度用 XD... 應該說學到基礎的 android 對我的好處在於了解一些 android app 元件的專有名詞(因為我覺得這個很重要),就好比 PM 要出去談 case,看到 UI 總是要能夠想像一下怎麼用一些 app 開發的名詞跟工程師溝通一樣。另外我只是很想感受一下刻 Android App 的 UI 的感覺 (只是目前還沒有嘗試到而已... 有點可惜XD 但也沒這麼強)。


這本書對我影響的地方...:
* android studio 的 auto complete 以及一些自動 import 的功能,都好方便,突然覺得 sublime... 好像少了什麼 XD 但是有時候 render XML 的時候卡卡的...
* 加強我對 Java 的一些觀念,像是 overloading, constructor的定義以及原來 @Override 是有意義的 :P。
*  申請 Android Developer (嚴格來說應該是『Googl…

Samsung Galaxy S6 edge 使用三個月的心得

圖片
這支手機我用了快三個月才寫文,用過才寫得出東西啊.. XD

文章故意寫個開箱圖,因爲我不太會寫文 XD 只好放放照片過過癮。iphone5 我用了兩年多,碰上續約可以剛好換支手機,被店員慫恿後,決定換個 Android 系統玩玩看。定價大約要 26000 其實不比 iphone 便宜,當初買的時候也被身邊朋友噓了好久...

[Android] 筆記 手機上測試自己的 APP

圖片
本篇撰寫時的 Android Studio 為 1.5.1 版。

在開發 Android 時,測試 APP 的方式有兩種 (1) 在 android studio 時透過 AVD 執行/模擬 APP(AVD, Android Virtual Device  android 模擬器) (2) 在手機上測試自己的 APP
此篇文章暫不討論 (1) AVD 的方式。在手機上測試自己的 APP,有兩個方式:

(一) 手機 USB 接上電腦

(二) 是透過 apk 檔直接在手機上安裝應用程式並執行(透過 email 寄信)

不論 1, 2 都請你先把你手機上的『開發人員選項』打開,並且要勾選 USB 偵錯的項目。(至於怎麼開你可能要去 google 一下,以我來說是找到手機的設定的地方,在 Android 版本號的地方按七下。)

這張圖是已經開啟開發人員選項選單畫面,模式狀態請為『開』。


並且授權 USB 偵錯。





(一) 手機 USB 接上電腦
用 USB 測試的話,如果是 window 作業系統還要另外安裝手機 USB 的驅動程式 (Mac 我忘記要不要裝了 sorry ... ),如果你接上去 USB 然後 run APP 的時候沒有抓到你的 device,那可能真的要裝一下了...

安裝 USB 驅動的話請參考這篇 OEM USB Drivers
假如你裝好了,就把你的手機以及 usb 接上電腦,在 Android Studio 的地方,執行 `run APP`。


這時候 Android Studio 會先問候你的手機是否允許偵錯:

像我的手機是三星的,在透過允許偵錯之後,你才能在 Device Chooser 找到三星的手機,假如你按取消,或是沒有回應,則選不到這個選項 (state 會變成 offline):


選擇我的手機之後,按下 OK 就能在手機上模擬 app 了。


(二) 是透過 apk 檔直接在手機上安裝應用程式並執行(透過 email 寄信)
假如你的 usb 偵錯一直有失敗,那另一種方式就是把整個 app 的 apk 檔寄給自己,透過手機收 emai 的方式把 apk 下載下來。

至於 apk 檔在哪裡呢,尋找目錄底下,他在 app/build/outputs/apk/app-debug.apk

你可以把這個 apk 複製出來,換個檔名。另外如果你有修改 a…

[Android 筆記] 設定 ImageView 的圖檔來源

圖片
在 Android 顯示圖片,如果是用自己客製的圖片,檔案要放在 app/res/drawable/ (以 Anrdoid 的目錄來說) 底下。(檔名切記不能用中文字)

新增 ImageView 的方式從 Widget 拖到畫面你要擺置的地方: (在此使用 AndroidStudio)

接著選擇圖片的來源,src 怎麼填呢?
(1) 如果是你是用自己提供的圖片,那就是 @drawable/圖檔名稱不含副檔名
(2) 如果你是用系統預設的圖片,那就是 @android:drawable/XXXX  (ex: @android:drawable/sym_action_email)

通常如果是選擇系統預設圖片不會自己手 key src 的屬性,你可以用介面選取。

你可以點擊剛剛新增的 ImageView 打開編輯視窗,在 src 的地方選取 "..." 打開資源介面去找你的檔案:


選擇你的圖檔: (基本上選取自己新增的圖片,路徑從 Project 的 Tab 開始找; 反之如果是要系統預設的圖片,用 System 的 Tab 開始找)




以我這張圖片來說,我的檔名是 test.jpg,這個 ImageView 的 src 屬性是 @drawable/test (@drawable/檔案名稱不含副檔名)。

另外也能透過 coding 的方式設定 ImageView 的顯示圖片 (資源),Example:

// 宣告 ImageView
ImageView img1 = (ImageView) findViewById(R.id.XXXX);

// 範例: 如果是要設定內建的圖片
img.setImageResource(android.R.drawable.顯示內建圖片的名稱);

// 範例: 如果是專案自己的圖片
img.setImageResource(R.drawable.圖檔名稱不含副檔名);

假如是要讀取手機的相簿,請另外參考 setImageBitmap()。


圖片的 Visibility 屬性
ImageView 可透過 visibility 設定圖片的可視程度:
* visible 可視 (預設情況)。
* gone 看不到,也不會佔空間。
* invisible 看不到,但是會佔住原本擁有的寬高屬性。

程式設定 visibility 則是 s…

元旦三天連假讀的三本書

圖片

[CSS] 用 transform scale 針對 input checkbox 放大

圖片
左一: safari / 中間:  Chrome / 後: Firefox

今天在製作一個 checkbox 時,為了在手機版上方便點擊,刻意想要把它放大。

就以放大三倍來說,就是 scale(3):


這段都沒問題,我只是想說, transform 的表現在 safari 沒有用,如上圖你可以看到,還是一樣小顆,甚至他只有在 :active 時才會放大,也是一個很詭異的行為。
在 Stackoverflow 也有人跟我有一樣的問題,原因是在 webkit 下要用 3d transform 去處理這個放大的效果。

後來我就把 webkit 那一段改成 scale3d:

文章中也有參考的link,可以去詳讀看看
http://stackoverflow.com/questions/31843647/webkit-css-transforms-scaling-doesnt-work-on-retina-mac-if-the-scale-factor-is
有更好的方式也可以留言跟大家分享一下,感謝! :D

[讀書心得] SCM 軟體配置管理

圖片
書名: SCM 軟體配置管理  作者: 董越

這三天把這本書看完了,我大概 brief 一下每章的一點筆記就好,其實主要是書已經在身上,寫太多出來也沒有太大的必要 XD 大家有興趣再去看看書吧 :D (新年新希望難道沒有一年要看幾本書的目標嗎?! :P)

SCM 是 Software Configuration Management 的縮寫,書中翻為軟體設定管理,簡單的說就是對一個不斷演化的軟體資產做管理,主要有兩個方向,一是針對資產做管理以及儲存,二是適當的控制軟體的品質,像是關注於軟體的整合。

比較精確的定義要參考 IEEE-STD-610,或是你可以參考本書本書的ch01。

Ch02 基本的版本控制
* 即使只有一個人,也要做 SCM
* 防止版本覆蓋: 如果你仔細去細想,在多人開發軟體的時候,同一隻檔案被同時修改的機率非常高,因此防止檔案被別人覆蓋,是很重要的議題。
當然,不同的版本控制工具各有不同的處理方式,第一種是串列的方法,類似我們寫程式處理的 quene 啦,就是當有人要拿檔案去修改,該檔案就會被 lock 住,但是這雖然是一種方法,可是對開發效率來說是偏低的,因為如果檔案一直 lock 住,表示其它的開發人員只能乾等。這種防止覆蓋的方法的版本控制工具的一個例子是 Visual SourceSafe (縮寫 VSS,微軟出的古老版版本控制工具)。

第二種方法是平行,平行的處理手法解決了串列的問題,就是允許多人同時修改同一個地方,在做合併時,工具會判斷什麼時候需要合併,合併哪些東西,大部份情況是可以自動合併的 (像 git 的 auto-merge),不能的時候就會叫你人工合併 (類似 conflict)。這類的版控工具,像是耳熟的 Subversion(SVN), GIT, ClearCase(CC, 同時支援串列跟平行的方法,是 IBM Rational 出品的商用軟體設定管理工具)。

書本有列一些市面上的版控系統,很多我也沒聽過 XD,但是後面幾個章節主要都是拿 svn, git, ClearCase 來比較,有 ClearCase 的原因我想大概是因為書中有提到他的市佔率蠻高的,老實說我不知道台灣有哪些公司有用到..?! 知道的朋友可以幫忙舉例一下 XD

不同的工具做類似事情的行話不太相同,像是:
* SVN 用 check out, com…