:::

讓系統整合ORCID註冊、登入與信任託管授權:布丁式ORCID整合方案 / Integrate your system with ORCID’s registration, login and trusted parties: Pudding style solution

讓系統整合ORCID註冊、登入與信任託管授權:布丁式ORCID整合方案 / Integrate your system with ORCID’s registration, login and trusted parties: Pudding style solution

2015-07-25_012234

這篇是給想要整合ORCID的系統採用的方案。除了以ORCID建議的方式來設計OAuth登入功能,我還用bookmarklet來製作信任託管授權功能


功能簡介 / Introduction

現在很多系統都想要整合ORCID,但是大部分系統的整合方式都只是提供一個輸入框,要作者自行註冊再自己複製ORCID編號。可是現在已經是OAuth的時代,我們可以採用ORCID建議的三方登入來建置登入按鈕。

2015-07-25_003703

有注意到上面這張圖裡面顯示的「布丁布丁吃什麼?」要求取得登入訊息的資訊嗎?這個方法很簡單,不必動到任何伺服器端的程式碼,只要用JavaScript在前端執行就能夠搞定。

操作說明 / Usage Instruction

以下介紹如果在尚未登入ORCID,也沒有註冊ORCID的情況下使用此方案的過程。

登入與註冊 / Login or registration

image

這個方案是為了整合既有的系統。系統通常會有Email的輸入框,也會有ORCID ID的輸入框。

image

如果有加入布丁式ORCID整合方案,就會變成上面的樣子。

2015-07-25_003703

按下「建立或連接ORCID ID」會跳出要求ORCID登入畫面。你也可以在該畫面的「Don't have an ORCID iD? Register.」切換成註冊畫面。

2015-07-25_005901 - Copy

登入成功之後,該視窗會關閉,然後原本的視窗中會抓到登入之後的ORCID ID。

授權 / Add trusted party

接下來我們要加入信任託管的授權。

2015-07-25_005901 - Copy (2)

請照著下面的指示,把「授權政大」(這個按鈕的字可以自訂)拖曳到書籤列。

image

書籤多了一個「授權政大」了。

2015-07-25_005901 - Copy (3)

然後按下「開啟設定頁面」按鈕。

2015-07-25_010457

開啟了ORCID的帳號管理頁面。

orcid2

點下書籤列上的「授權政大」按鈕。

orcid3

接下來會跳出一個對話框,因為授權需要密碼,請輸入您ORCID的密碼。

2015-07-25_010704

授權成功,會跳出即將關閉視窗的訊息。

image

這樣就授權完成了。擁有授權的一方就可以用信任託管的方式幫忙建置ORCID的資料,做法請看我之前寫的「以機構身份管理其他研究者的著作:ORCID的信任託管功能」。


功能展示 / Demonstration


安裝教學 / Installation Instruction

接下來我要來說明如何安裝布丁式ORCID整合方案。這是給網頁工程師看得部分,如果你看不懂,那也別在意。

首先,我們會有一個系統表單網頁的網址,此例中的網址為「http://your-server/form.html」(會在後面用到),以及該網頁的原始HTML碼。例如:

<input type="text" name="email" value="" />
<input type="text" name="orcid_id" />

然後我們要底下加入以下程式碼:

<script type="text/javascript" src="https://googledrive.com/host/0B3_qgRmbvvZ1RmhGYmVFeTExblU"></script>
<script type="text/javascript">
ORCID_puli_utils.init({
    inputs: {
        email: "[name='email']",
        orcid_id: "[name='orcid_id']"
    },
    app: {
        client_id: "APP-xxxxxxxxxxxxxxxx",
        client_secret: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        redirect_uri: "http://your-server/form.html",
    },
    employment: {
        orcid: "0000-0002-5496-8565",
        disambiguated_id: 32787,
        source_id: 34913,
        keyword: "National Chengchi University",
    },
    message: {
        connect_button: "建立或連接ORCID ID",
        bookmarklet: "授權政大",
        bookmarklet_usage: "請拖曳上面授權按鈕到書籤列<br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9IFr0Z9Qu-JIR3vi2UFkfW5mZdy9WgzKo1FIl7qU6nuoze36JOmBxutZ0eiOcjnzrSUduGXpWoAXiU5qoJvkDd56Abts2y91UFFcOjw5apmyUy4GwFskZ-LF4LY5oZPgu3npi_Q/' style='border:1px gray solid' />",
        open_account: "開啟設定頁面",
        open_bookmarket: "請點選授權按鈕。<br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbMa53HgWhdm1Lq4mOD-SRzkMmF55D6SwTOiBKR3MPqq2L0pgxK9T6jtuiZgJxwas2tXY3Sj52HIXcxw5qvA5O58JhwBZ2gwzatVJ18iETssbgtYrvty7bZ6GlHAP9jFbS93wJg/' style='border:1px gray solid' />",
        input_password: "請輸入您的密碼 <br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNZ37lCN_qWYT5TUjW8ul6VsiDJx5_cxv4yY7CNOqc_OLboP_TsSNiDgXbNR7EHYnq7QmtLlxOYLpW7no-JNQjfcHyfPz8UBmac1A_MWVFoUK-e511ryaXnd5uP_2lIDy5KtUww/' style='border:1px gray solid' />",
        prompt_hint: "請輸入您的密碼",
        prompt_error: "密碼錯誤,請再次輸入您的密碼",
        alert_success: "授權成功,視窗即將關閉。",
        delegated: "已經授權"
    }
});
</script>

這邊總共有3處參數需要設定,我用顏色標示,各別是綠色的信任託管對象藍色的Public API設定紅色的機構資訊紫色的授權按鈕。這些資料取得的方式不一,以下一一說明:

綠色的信任託管對象設定

2015-07-25_013934

首先,我們先要有一個代表機構的公用ORCID帳號。這個帳號就算不是ORCID的機構會員也無所謂,用一般的方式免費註冊一個ORCID的帳號就可以了。

2015-07-25_014533

註冊之後,你就會獲得一個ORCID ID。我註冊了一個測試用的ORCID帳號,ORCID ID就是「0000-0002-5496-8565」。

藍色的Public API設定

image

接下來我們要設定供網站登入用的Public API。這邊要設定三個參數: 1. client_id、2. client_secret、3. redirect_uri。這三個參數都必須在ORCID網站上的開發者工具裡面設定。

2015-07-25_015048

點下開發者工具頁面中間的「Register for the free ORCID public API」。

image

確認接受條款。

image

然後設定你的網站資訊,包括網站名稱(Name of your application)、網站網址(Your website URL)、網站介紹(Description of your application)、返回網址(Redirect URIs)。比較需要說明的是返回網址,請設定系統表單網頁的網址,此例就是「http://your-server/form.html」。然後按下右下角的磁片按鈕來儲存。

image

儲存之後會回到原本的開發者工具頁面,按下「Show Details」來顯示詳細訊息。

image

這邊可以找到Public API所需要的三項參數。在Redirect URIs裡面找到返回網址redirect_uri參數;在Client ID找到client_id參數,開頭會是「APP-」;在Client secret可以找到client_secret參數。(一般是不能公開這個參數)

這樣子Public API所需要的參數就設定完了。

紅色的機構資訊

image

接下來是機構資訊的設定。這邊有三個參數要設定,以政大為例:

1. disambiguated_id: 32787

2. source_id: 34913

3. keyword: “National Chengchi University”,這一項可以自行設定。

機構的disambiguated_id跟source_id是比較難以取得的參數,以下說明如何使用Google Chrome瀏覽器來取得機構的這兩種參數。

image

首先我們要進入到你自己的ORCID頁面,然後在Employment裡面進入「+ Add employment」裡面的「+ Add manually」。

image

同時開啟Google Chrome的偵錯面板,切換到Network分頁。

image

在Institution/employer中輸入資訊時,就會自動帶出機構的資料。找到我們目標的機構,例如國立政治大學就是「National Chengchi University」。

image

點下「National Chengchi University」的時候,注意Network分頁讀取資料的網址,有個「32787?_=1437762980098」,其中32787就是disambiguated_id

image

新增機構之後,Network分頁中會讀取一個叫做「affiliation.json」的檔案。點進去看該檔案的細節。

image

在Request Payload裡面找到disambiguatedAffiliationSourceId: “34913”,其中34913就是 source_id

雖然過程有點麻煩,但這樣子就設定完機構的參數了。

紫色的授權按鈕

image

最後是「授權政大」的按鈕。這個按鈕可以任意修改文字訊息。事實上,message裡面的資料都可以任意修改,不會影響布丁式ORCID整合方案的運作。但是修改時必須遵照JSON的格式就是了。


結論:暫時的方案 / Conclusion: A Temporary solution

布丁式ORCID整合方案終歸來說只是一種暫時使用的權宜之計,特別適合不想要花錢買一個系統來管理ORCID(因為ORCID網頁本身就很好操作了,實際上不太需要額外買一個系統來管理)、也不想要花錢加入機構會員(因為機構會員的Member API一樣要額外的系統才能運作)的機構。

ORCID是一個稱職的OAuth系統,可說是學術界的Google Account一樣。可是它作為著作目錄權威檔的角色來說,本身有很多問題在,詳細可以看我之前寫的「令人意外!ORCID目前並沒有自動跟資料庫同步」。對於ORCID,除了註冊帳號之外,目前似乎並沒有深入建置資料的必要性就是了。

(more...)

如何在PhoneGap Build上建制可發佈的Android APK: 建立簽署檔案 / How to build releasable Android APK in PhoneGap: Create a keystore file

如何在PhoneGap Build上建制可發佈的Android APK: 建立簽署檔案 / How to build releasable Android APK in PhoneGap: Create a keystore file

image

在「從網頁開發到Android APP行動應用程式開發」演講中,我講到如何用PhoneGap Build開發可以發佈到Google Play的APP的內容。由於演講時間限制的關係,當天我沒有細講到這裡。這一篇則是介紹如何建制可發佈的APP的做法。


有簽署的APK跟簽署檔案 / Signed APK and keystore

用PhoneGap Build製作可以安裝在Android上的應用程式套件檔案:APK,是一件很簡單的事情。但這樣只能作出偵錯用的APK (debug version),而不是發佈版本的APK (release version),只有可發佈版本的APK才能上架到Google Play

要讓APK從偵錯版本變成發佈版本,也就是讓它變成有簽署的APK,則必須加入簽署檔案(keystore)。這個簽署檔案可以在自己的電腦上產生,只需要安裝JDK環境即可。

以下內容我分成二個階段來介紹:先在本機段製作簽署檔案,然後再到PhoneGap Build中上傳簽署檔案並解密。


Phase 1. 製作簽署檔案 / Create keystore

1-1. 下載與安裝JDK / Download and install JDK

要製作簽署檔案必須要有JDK的環境。Java Development Kit下載位置是http://www.java.com/en/download/index.jsp 。至於安裝與配置方式就跟一般的Java安裝一樣,可以參考這篇「JDK 在 MS-Winsdows 的安裝、設定」來進行設定。

1-2. 下載並執行keytool_generator.bat  / Download and excute keytool_generator.bat

簽署檔案的製作工具是keytool,詳細做法可以看「[教學]簽署應用程式 sign APK 發佈 Android App」這篇,但我覺得這樣的程序太過繁雜,所以把做法包裝成成一個bat檔案以方便執行:

1-3. 輸入專案名稱 / Alias name

image

開啟keytool_generator.bat之後,會跳出命令提示資源。請輸入您的專案名稱(alias name),例如「phonegap_build_camera」,然後按下enter鍵。

1-4. 輸入簽署檔案的密碼 / Password of keystore

image

接著要輸入兩次簽署檔案的密碼。

1-5. 輸入其他資訊 / Contact information

image

全部都可以直接按enter略過,但是最後的「Is CN=…[no]: 」的問題則要輸入「Yes」確認。

1-6. 輸入金鑰的密碼 / Password of key

image

剛剛是設定簽署檔案的密碼,現在則要設定金鑰的密碼。這時候請直接按enter鍵即可設定等同於簽署檔案的密碼。

結果的簽署檔案 / Result

image

最後就可以看到keytool_generator.bat旁邊多了一個簽署檔案,副檔名為「keystore」,例如「phonegap_build_camera.keystore」。


Phase 2. PhoneGap Build使用簽署檔案 / Use keystore in PhoneGap

2-1. 進入PhoneGap的Edit account / Enter edit account page

圖片1

接著你要在Adobe PhoneGap Build註冊一個免費帳號,然後登入之後到Edit account頁面。網址是:https://build.phonegap.com/people/edit

2-2. 上傳簽署檔案 / Upload keystore

image

接著在Android底下點選「add a key」按鈕,在title跟Alias的地方都輸入剛剛輸入的專案名稱(Alias name),例如「phonegap_build_camera」,然後選擇簽署檔案(keystore),按下「submit key」上傳。

2-3. 解鎖簽署檔案 / Unlock key

image

簽署檔案預訂是鎖起來的,要使用簽署檔案之前必須先解鎖。注意到該簽署檔案右邊有個黃色的鎖,點下去之後輸入剛剛設定的簽署檔案密碼,按下「submit key」解鎖。

image

這是已經解鎖的樣子。

2-4. 建置APK時設定簽署檔案 / Select key to build apk

image

在使用PhoneGap Build建制APK的時候,可以從「No key selected」下拉式選單中選擇剛剛上傳的簽署檔案。選擇之後apk會自動重新建置(Rebuild)。

image

有選擇簽署檔案的話,才能夠建制發佈版本的APK。你可以點選「apk」下載按鈕下載apk,然後就可以到Google play Developer Console上架了。

(more...)

中華電信學院微課程演講:「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”

中華電信學院微課程演講:「從網頁開發到Android APP行動應用程式開發」 / Speech at CHT School: “From Web to APP: Developing Android APP”

image

這個月受邀到中華電信學院演講一門微課程「從網頁開發到Android APP行動應用程式開發」。這是給有HTML5基礎的前端網頁設計師開發Android APP的教學,講述AppsGeyserPhoneGap (Apache Cordova)的開發方法。


課程簡介 / Introduction

本次微課程將介紹如何從前端網頁開發技術進入到行動應用程式(APP)開發的領域,特別適合具備前端網頁開發能力的工程師來聆聽。演講內容將概述各種行動應用程式開發的技術,再聚焦到以網頁技術來開發行動應用程式的兩種方法:AppsGeyser 與 PhoneGap。只要會製作行動版網頁,聽完這個演講,您就能夠製作可以上架的行動應用程式!

大綱 / Outline

  • 前言:我是前端網頁設計師
  • 概論:要如何製作行動應用程式APP?
  • 樣板型APP開發:AppsGeyser教學
  • 網頁型APP開發:PhoneGap簡介
  • 實作:PhoneGap開發

投影片 / Slide

投影片下載:Google DriveOneDriveBox.netSlideShare

備註:由於當天演講時間太短,所以投影片有所刪減,這一份則是完整的版本。


演講的重點 / Points of this speech

這次的演講跟以往大家講述APP開發的內容相比,有幾個比較值得一提的地方。

關於APP開發的分類 / About APP development classification

以往大家對APP開發方法的分類只有三種:「原生型APP」、「網頁型APP」、「混合型APP」。但其實這是從PhoneGap的觀點來看APP開發方式,並不能夠含括所有的APP開發方法。

imageimage

Wikipedia的Mobile Application development給我們一個比較完整的分類:前端型、後端型以及系統型。而前述的三種分類則是隸屬於前端型開發中。而我又進一步將前端型開發方式分類成四種開發方法:

  1. 原生型APP:以該平臺開發方式開發,例如Android用Java搭配Android Studio開發。
  2. 網頁型APP:以製作網頁的思維建立APP,例如PhoneGap
  3. 其他型APP:以獨特的程式語言與IDE來進行開發,強調跨平臺或能夠支援複雜應用的開發方式。我將NativeScript歸類於其他型APP而不是網頁型APP,儘管它使用的是JavaScript,但建制的思維並不是寫網頁,而是一種獨立的開發方式。
  4. 樣板型APP:強調超簡單工具就能製作APP,像是APP Inventor。但是限制也很多。

我試著用這個分類來讓學員瞭解自己適合的開發方式,讓大家知道原來除了原生型開發方法之外,還有很多其他的途徑可以開發APP。

以PhoneGap Build的封裝方式 / Create APP by PhoneGap Build

image

市面上已經有很多書籍在講PhoneGap開發了,那我講這個PhoneGap開發豈不是再次老調重彈?實際上我這次講得內容並不是單純的PhoneGap開發,而是使用Adobe PhoneGap Build來封裝APP。

如果你仔細比較一下PhoneGap的開發方式,會發現他要做的前置作業就跟開發原生型APP一樣複雜。實際上也是如此,因為PhoneGap就是基於原生型APP之上在添加的功能。如果要開發Android的APP,就要先佈置Android的開發環境;如果要開發iOS (iPhone或iPad)的APP,就要先佈置iOS的開發環境。教過MIT APP Inventor之後,我覺得這種要花很多時間才能進行開發的方式並不利於教學。

而這個Adobe PhoneGap Build則是一種雲端服務的開發環境。我們只要把PhoneGap專案準備好、上傳,就能夠封裝成各種平臺的APP。這大幅度地降低了開發環境的配置需求,只要瀏覽器、能夠撰寫HTML的工具(像是ATOM),我們就能夠開始開發了。

然而,PhoneGap專案跟上傳到PhoneGap Build的專案內容其實有很多的差異,但是卻很少人在介紹如何製作PhoneGap Build的專案。尤其是加入簽署檔案(.keystore)讓APP可以上架的這些細節更是很少人提及,這也是我這份演講比較獨特的地方。

行動網頁框架的佈景主題 / Mobile web framework’s theme

image

這篇演講介紹了jQuery MobileDojo MobileSencha Touch這三種行動網頁框架。但我想要強調的是「佈景主題」(theme)的問題,也就是如何能在該平臺上呈現該平臺的使用介面的能力。我讚賞Sencha Touch對於佈景主題的自動偵測與切換,在Android上他是Holo Dark的風格,在iOS上則能夠維持iOS的風格。

這種能夠相應於該系統而自動切換佈景主題的功能,對於使用者體驗(User Experience, UX)來說至關重要。這表示使用者可以在自己的系統上操作熟悉的UI,而不是APP特立獨行的佈景主題。

Dojo Mobile跟Sencha Touch都有不同的主題可以套用。雖然jQuery Mobile也可以找到一些第三方主題使用,但比較麻煩。至於其他的BootstrapSemantic UIIonicAngular Mobile等行動網頁框架就更是如此。

不過實際開發時,應該還要考慮到這些框架跟後端資料庫做交換的方式、是否能夠整合其他JavaScript函式庫、或是語法是否容易理解等問題才是。也許隨著經驗越多,這個看法也會隨之改變吧。


結論:更專業的教學內容 / Conclusion: An advanced speech

在準備這個演講的同時,我也一併在進行MIT APP Inventor的家教。我本來以為這兩件事情可以合併在一起做,但仔細想想之後還是放棄這個念頭。APP Inventor是給不會寫程式的人來學習的,做完的成果難以到實際應用的層次。這次的演講是給擁有網頁基礎的人來聽的,主要要講網頁技術跟APP之間的關聯。所以最後我是分開來做這兩件事情。

image

這個微課程只是一個先導性的簡介,之後會在安排一整天的工作坊,讓學員能夠一步一步地製作行動版網頁、以PhoneGap Build封裝,然後到Google Play上架。

儘管這次的教學跟我的專業有很密切的關係,而學員的程度也都很高,講的內容也可以深入不少。但我自己也擔心起實務經驗上是否有所不足,畢竟我跟專門開發APP的工程師相比,還是有很大的差距(這就是學界與業界的差別啦)。雖然是這樣說,懂得如何做一個非常複雜APP的知識,跟如何讓學員瞭解製作APP的教學方法,這兩件事情仍然是不太一樣。

接下來要努力準備工作坊的內容,加油!

(more...)

以MIT APP Inventor教程式的感想 / Thoughts about teaching APP

以MIT APP Inventor教程式的感想 / Thoughts about teaching APP

圖片1

最近因為因緣際會,我接了一個教國中生寫程式的任務,而我選擇的教學內容是以MIT App Inventor 2來教APP。雖然因為時間的關係,這門家教課程只有上短短三次就結束了。不過這次的教學卻讓我有不少值得反思的地方。


選擇以APP來教學的理由 / Why I select to teach make APP as programing

C++或Java是程式語言課程的基本教學內容,但老實說,我覺得學習程式的過程是乏味的。先別說光是佈置環境、編譯、執行等枯燥的動作會讓人覺得疲憊(實際上現在寫程式也一樣會盡力縮短這種編譯與執行的時間,而想辦法讓整個過程自動化),以傳統語言寫出來的入門內容也只有在命令列中單純的訊息輸入與輸出。相較於命令列,我還是覺得能夠看到具體的介面、能夠互動,才讓人有種「創造」程式的感覺。

minecraft-xboxoneedition

(Minecraft Will Be Used To Teach Kids To Code, http://www.ubergizmo.com/2015/06/minecraft-teach-kids-coding/)

「創造」是寫程式最大也是最終的樂趣。不管是寫一個能夠協助日常事務繁複工作的程式,還是寫一個能夠刺激感官的遊戲,它們都是程式。

而且更重要的是,相較於一般被認為是「創造」的藝術技藝來說,以程式來進行創造的成本極低:我們不用買畫具,不用擔心耗材,只需要一台普通的電腦,就能夠開始寫程式。
(備註:其實寫程式不用買很昂貴的電腦。就算電腦上插了一張萬把塊的顯示卡,對小程式來說也沒有什麼差別,所以買便宜電腦就好,貴的電腦很多時候是玩遊戲要用的而已。)

4659468857_7e06dc4fdb

但是傳統的程式語言課程很難讓人體會到「創造」的實體感,入門課程的內容也很難讓人有實用的感覺。舉例來說,能夠迴圈印出各種形狀的「*」,其實是表示程式邏輯有一定基礎的成果。但對很多學生來說,這很難被視為是平常會有用的技能。這跟目標用程式來解決各種問題的思維其實有很大的偏差。

因此,面對上面交待要教程式的任務,我不是教傳統的C++或Java,也不是教網頁(那也很不錯,可是要做到互動性很難),而是教APP。而且不是按照官方規定的原生型APP,是MIT麻省理工學院為了程式教學開發的MIT APP Inventor 2。

教材的選擇 / Select Teaching Material

學習寫程式或是學習APP,他們都是一種應用型的技能。比起了解程式所有的功能,我認為了解如何「做出目標程式」所需要的功能還來的重要。這不僅是我們教課的時間並不多,也是遵循了我之前的說法,能創造出結果才是最令人興奮的事情。

getImage

因此我在選擇教科書的時候也是用這個想法在挑選。最後選擇的是蔡宜坦老師在2014年撰寫的「超圖解! App Inventor 2手機程式設計教本」。

值得一提的是,隨著MIT APP Inventor 推出中文介面,這本書也有中文版的教學。但是我認為學程式本身也是一種英文學習(甚至可能是程式設計師唯一會的英文),這也當作課堂內容之一來教比較好。

這本書的組成包括了17個章節,除了序言之外,大部分章節都會實際作一個APP出來,這部分的確是我想要的。然而開始教了之後,才發現各章節內容都是先講解功能、再來說明APP的製作,這就跟我想要的有點落差。所以雖然最後我還是拿這本來教,但是教學內容則是再做調整就是。

課程與成果 / Lesson and result

由於教課的時間並不長。原本預定四堂課,因為種種原因最後只剩下三堂課。我原本就不覺得能夠教完所有章節,實際上也沒那個必要,因為我的重點在於教程式的相關概念,像是變數、迴圈、事件,至於GPS、相機等只會用在手機上的功能就不是很重要。

Lesson 1. 貓叫 / Cat meows

第一堂課教的是事件與聲音播放的應用。

image

第一個範例就是貓叫聲啦,點下畫面的貓就會叫一聲「喵」。這個簡單的程式是APP Inventor的範例,在Google Play上也可以下載。

unnamed

基於對停車場的守護神:薑黃喵的敬仰,我也做了另一個薑黃喵的變體版本:換一張薑黃喵的照片上去。

image

之後我們做了小鋼琴的APP,點下指定的琴鍵發出聲音,而琴鍵在點下去時會更換圖片,這也是課本的教學內容。

Lesson 2-1. 溫度轉換 / Temperature Convert

這堂課是要教基本的運算式與邏輯判斷的應用。

image

這是一個攝氏轉華氏的應用,最後我們還加入了Slider (拉條)來輸入攝氏溫度。

Lesson 2-2. 畫圖 / Drawing

這堂課則是教Drawing and Animation中的Canvas應用。

image

可以選擇顏色、擦拭、繪畫的種類、清除版面,並將畫圖存檔後利用Share的功能傳到其他APP上,例如在Facebook上發言。

Lesson 3. 擲骰子 / Dice

這次的課程是教陣列與從陣列中取出隨機變數。

image

我們先做一個陣列,決定晚餐要吃什麼,然後隨機取出結果來抽籤。抽籤時用到了加速感應器(AccelerometerSensor),讓抽籤感覺比較有趣。

image

這個則是用骰子來抽籤,再應用之前教的邏輯判斷數字大小,搭配聲音播放結果。因為是最後一堂課,所以我加入了之前教的功能,可惜實際上沒能教到這裡就下課了。


APP Inventor的優點與侷限 / Advantages and Limitation of APP Inventor

在這幾堂課的教下來,第一個感覺是驚訝於APP Inventor的容易上手。

image

這並不只是在講APP Inventor是用拖拉元件跟拼圖就能組成一個APP的製作方法,而他的環境部屬也一樣地簡單。

要開始使用APP Inventor,我們要做的事情只有:

  1. 開啟Google Chome瀏覽器,用Google帳號登入APP Inventor:http://ai2.appinventor.mit.edu/
  2. 手機上安裝MIT AI2 Compainon:https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3
  3. 開始製作APP,並用Connect中的AI Companion跟手機上的AI2 Companion配對,就可以看到成果。

照正規製作Android的方法,大概要下載超過2GB的檔案,然後要花上1個小時左右來安裝、設定,非常麻煩。APP Inventor將這些繁雜的環境部屬工作降到最低,實在是令人讚歎。

功能限制 / Limitation of Functions

image

但是APP Inventor的限制也很明顯,就是我們除了APP Inventor提供的功能之外,幾乎很難使用其他的功能。

舉例來說,本來我想要用APP Inventor來開發複雜的網路應用程式。一般而言我們都會需要用關聯式資料庫在背後儲存複雜的資料,但是APP Inventor的網路資料庫TinyWebDB只能做到儲存值、取出值兩種動作,而不能像執行SQL一樣的複雜指令。這就會讓實際應用有很多限制。

11753290_10204702104220221_219577884213920244_n

另一個限制就是APP Inventor的解析度是固定的。就算是在尺寸比較大的平板電腦上,他的解析度也會拉大到跟手機一樣。這就很難做到類似RWD的設計。

雖然APP Inventor很容易上手,但是要拿來開發正式的APP,還是要先三思啊。


結論:教程式果然很難 / Conclusion: It is difficult to teach programming

我在這短短的三次課程中以MIT APP Inventor教了程式的概念。但實際上我覺得成果並不是很理想。這最大的原因在於我仍然沒有把握程式教學的精髓,因此很難有效率地把程式的概念教給學生。

我們在寫程式時,大部分的概念都已經是固定成熟了,就像是騎腳踏車、游泳一樣地自然,通常不會去深入思考自己到底怎麼去理解這件事情的。

image

以「迴圈」為例,for的概念在限定條件下重複固定的步驟,對懂得人來說很簡單,但是對不懂的人來說,這種非線性的敘述是很難理解的事情。我一時間也沒能好好地把這個概念講得很清楚。

儘管很多細節沒能帶好,但是APP Inventor透過簡單的步驟就有成果展現,符合我對程式學習的目標。看到學生玩著自己做的APP,然後再加上我教的功能,讓APP變得更多功能,而從中找到寫程式的樂趣,這就是我覺得寫程式最令人開心的地方。

未來如果又要教寫程式,我想我會繼續使用MIT APP Inventor,然後再把概念的部分講得更清楚吧。

(more...)

不拆書的自烹PDF電子書:免費軟體Scan Tailor的方案 / How to convert scanned pages into PDF with Scan Tailor and freewares

不拆書的自烹PDF電子書:免費軟體Scan Tailor的方案 / How to convert scanned pages into PDF with Scan Tailor and freewares

image

將書本掃描圖檔做成電子書的時候,左右頁面的切割、角度的轉正等問題總是令人難以處理,而如何做成PDF也是一個問題。我找了許多方法之後,歸納出1. 掃描書本、2. 以Scan Tailor裁切與轉正、3. 以XnView MP修正圖片、4. 以Bullzip PDF Printer製作PDF、5. 以PDF-XChange Editor為PDF加入OCR、6. 以ORPALIS PDF Reducer縮減PDF檔案大小,透過共6個步驟與免費軟體來製作電子書的做法。

(more...)

使用電信預付卡的日子:我們真的需要吃到飽的流量嗎?

布丁布丁吃布丁

使用電信預付卡的日子:我們真的需要吃到飽的流量嗎?

pablo (2)

最近用手機的電信預付卡(prepaid SIM card)的時候有感而發,跟大家聊聊我的一些日常的想法。


手機使用的需求

最近因為之前手機的租約到期,我得想想之後下一個方案是什麼。手機的方案雖然會大家的業務跟習慣而有所不同,但是行動上網卻幾乎已經是現在智慧型手機必須具備的基本要求。

我自己也是一樣,扣去熱線優惠不算,每個月基本上都很難打電話打超過月租費折抵的上限。這主要是因為自己還是學生,跟外界的聯絡方式大多透過網路,因此電話就真的不是這麼少打。而行動上網的部分呢?由於大部分時間都是在學校或有Wi-Fi的地方(特別是校園無線網路漫遊服務),之前使用學生方案的每月上限5GB流量也幾乎沒有用完過。就算是走在外面時是用網路收音機聽串流音樂,大概能用到3GB都很難得了。

方案的選擇:預付卡的考量

對於這樣的我來說,顯然現在各家電信業者主打的學生方案對我而言都多到形同浪費。然而一般人選用的月租型方案,要嘛就是偏重於行動語言通話與簡訊的優惠費率,對行動上網較貴;要嘛就是用量為1GB或2GB的行動網路,可是語音通話完全要另外付。至於有行動網路又有行動語音折抵的這種方案大多都在七百元以上,窮學生如我暫時不納入考量範圍。

在幾經研究之後,最後我選擇的是一個被大家排除在外的方案:預付卡,也就是中華電信的如意卡

學生打卡省錢包專案

預付卡的意思就是先付費,然後付多少就打多少。由於語音跟網路的費用都比月租型來得昂貴許多,一般都不被大家列入考量。但是這個學生方案卻隱藏著月租型沒有的優惠:預付1200,4個月之內有699元的行動通話,以及20GB的3G行動網路。換句話說,大概就是每個月400元可以用175元的行動通話跟5GB行動網路,而且用不完的量直接挪到下一個月,不會造成浪費。

學生打卡省錢包方案的概要如下:

  • 資費類型:學生打卡省錢包
  • 費用:$1,399
  • 內含語音通話費:$699
  • 內含數據傳輸量:20GB
  • 使用效期:120天 (連續2,880小時或申租傳輸量用罄)
  • 適用對象:3G預付(如意)卡、4G行動預付卡(我申請時還沒有4G行動預付卡)

另外預付卡專案沒有提及,但很重要的如意卡資費方案費率資訊如下:(3G為例,4G較為便宜)

  • 網內:0.09元/秒
  • 網外&市話:0.1036元/秒
  • 簡訊:1.4803元/封

受惠於成熟的電信業務,手機從月租型更換成預付卡,只需要臨櫃更換SIM卡,門號依然可以保留。但是預付卡若半年為儲值,則門號會被撤銷,這是使用上特別需要注意的一點。

昂貴的行動語音

比較要注意的是,預付卡的行動語言費率比一般月租型高很多,網內一秒費用是0.09元。以一個月175元的用量來說,大概只能打32.4分鍾。若是以3G相近費率的月租383元方案來看,行動語音的費率是0.07元,因此175元可以打41.7分鐘,相差了快9分鐘。

Screenshot_2015-06-29-11-29-56

一般月租型的使用者應該跟我很像,雖然每次都笑說自己電話也沒打幾通,但是要說自己到底打了多少,應給是沒有人會去細算。可是用預付卡的時候,每次打完電話都會收到一封簡訊,告知我現在通話費用跟剩餘金額。雖然可以明確知道自己用量多少,可是看著額度越來越少,其實還是倍感壓力。

以行動網路取代行動語音

xone_home_left_logo

既然行動網路的流量大大多於我的需求,所以我想這時我應該多多利用網路電話來連絡人。一般的LINE或是FB等即時通訊工具大多要求對方也要同時上線才能聯絡,我覺得這是變相要求大家都必須上網的不禮貌行為。所以我選擇使用Xone,這是用行動網路打一般語音電話的好工具,而且免費版本每通可以免費打三分鐘,每個月最多可以打一百分鐘。

但是XONE聲音小、容易斷線的問題也是相當明顯的。而且打給未安裝XONE的人的時候,來電一律顯示為070開頭。雖然也不至於真的變成詐騙集團,但是這跟來電號碼未顯示也是差不多的意思。電腦玩物在很久以前就比較過XONE跟Google Hangout,後者則是較為便宜的網路電話,但是使用時還是要收費,因此沒有列我的考量。

如果是在網路良好的環境,要打市話做業務詢問或預約的電話,我還真的蠻推薦XONE。因為一般手機打市話其實比打網內手機貴。不過用行動網路的時候打XONE效果就很差,不盡人意。

兩個月之後的使用心得

就這樣子,我辦了預付卡,行動網路照平常一樣開啟,網路收音機繼續聽、YouTube也繼續看,沒特別的事情就打網路電話XONE跟LINE,重要的朋友聯絡則是打語音通訊。

Screenshot_2015-06-29-11-19-52

跟電話每一通就有一封簡訊統計不同,網路流量在手機上會每個月重新計算。光看手機並無法明確得知自己到底用了多少流量,必須打0928-000-539如意卡客服去詢問。

結果這兩個月以來,我的行動網路只用了不到3GB,而行動語音從簡訊可以得知,甚至只用了不到40元。

 

我赫然意識到,我太高估了我自己的用量!

 

所以這次我安心地開啟行動網路分享熱點,在搭車的期間一邊查詢各種資訊、一邊撰寫這篇blog的草稿。我撰寫blog的時候總是很需要網路查詢,就跟寫報告一樣。另外也多虧手機電池夠力,我才能安心地這樣開啟熱點。

要說用到現在最大的問題嘛……大概是沒有熱線吧。預付卡也不能使用加50元多一門熱線的我的熱線方案,常常有固定業務聯絡時,這樣花費挺高的。

我會需要行動網路流量吃到飽嗎?

聊完我用預付卡的經驗,現在我們再回到網路流量吃到飽的議題上。

我的用量能夠如此之省,學校網路的支持絕對是一大因素,也就是平常使用的是不計流量的有線網路 (搞不懂為什麼連無線基地台卻依然被我算成有線網路的同學,下學期來修我開的電腦網路……啊,沒開了orz )。

以家庭來看,除了中華電信ADSL之外,也有老式的Cable Modem,或是台灣大哥大最近在推的4G家速上網熱點分享(兒童版唐伯虎點秋香廣告真是可愛)等眾多方案可以選擇。

雖然我家裡的Cable Modem雖然連遠端桌面都十分不給力,但是開開網頁什麼的的確是堪用。而且我通常都選擇跑去7-11使用速度更快的7-Wifi中華電信的Cht Wifi,還可以吹吹冷氣也不錯。(在此數落一下全家便利商店的Fami Wifi,我去過好幾家,連線狀況都很差,我猜可能是無限基地台AP選得太差吧)

總之現階段使用預付卡學生方案應該是還好,未來有需要的話,反正四個月之後更換也沒有解約金的顧慮。對於主要使用網路的學生來說,這不失為一個平衡的選擇。

最重要的其實只是告訴大家一件事情而已:我現在打電話很貴orz

(more...)