KevinChen note(未整理)

<br/>

exam_online2

修改:

不填選答案會顯示 正確答案:D 你的答案:1 得分:0.0 => 改成顯示 正確答案:D 你的答案:none 得分:0.0

複選題只能選一個答案就全對? 複選題的答案比對與分數計算條件設定

新增:

帳號取得 : 註冊、內建(ex:繳費後給予序號ID等等)

密碼修改功能

倒數計時器:置於考試頁面右上方以倒數方式呈現

個人建議:

只show出答錯的題目解答與該生作答答案即可

不用標示每小題分數,直接以每大題得幾分方式放在得分後面(ex:得分:80分(選擇題得分:60分,閱讀測驗得分:20分))

介面建議

選項部份的點選太小,建議可以做出圈選效果

隨手筆記

git clone下來後要使用資料庫內的其他branch分支進行開發,要先創一個本地端的分支並引入:

git checkout -b experimental origin/experimental

Note

git checkout -b 這裡是本地端的branch名稱 這是資料庫端的追蹤參照位置

mongodb

在使用mongoDB的時候有時會因為不當的離開(直接ctrl+c關閉服務程序)導致mongoDB有lock並且下一次啟動時會拋出下面的錯誤狀況

Error: couldn’t connect to server 127.0.0.1:27017 at src/mongo/shell/mongo.js:L112 exception: connect failed

這邊可以透過

mongod -f /etc/mongod.conf

or

mongod --config /etc/mongodb.conf

的方式來讓他正常啟動

之後請記得重新啟動系統

建議如果真的要關閉的話要透過shutdownServer()的方式來執行,如果是只要離開console畫面的話只要打exi或ctrl+ct就可以離開了(shutdownServer()反而下次又會拋出一樣的問題)這邊在使用上要注意一下

資料來源:http://www.dotblogs.com.tw/blackie1019/archive/2013/07/25/112457.aspx

安裝時遇到下面的訊息(注意*號那行):

$ sudo apt-get install mongodb-10gen=2.4.5
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following packages were automatically installed and are no longer required:
  libboost-dev libboost-filesystem1.49.0 libboost-program-options1.49.0
  libboost-system1.49.0 libboost-thread1.49.0 libboost1.49-dev
  libgoogle-perftools4 libpcrecpp0 libsnappy1 libtcmalloc-minimal4
  linux-headers-3.8.0-19 linux-headers-3.8.0-19-generic
  linux-image-3.8.0-19-generic linux-image-extra-3.8.0-19-generic
  mongodb-clients mongodb-dev mongodb-server
Use 'apt-get autoremove' to remove them.
The following NEW packages will be installed:
  mongodb-10gen
0 upgraded, 1 newly installed, 0 to remove and 134 not upgraded.
Need to get 0 B/86.9 MB of archives.
After this operation, 221 MB of additional disk space will be used.
(Reading database ... 230416 files and directories currently installed.)
Unpacking mongodb-10gen (from .../mongodb-10gen_2.4.5_i386.deb) ...
dpkg: error processing /var/cache/apt/archives/mongodb-10gen_2.4.5_i386.deb (--unpack):
 trying to overwrite '/usr/bin/mongo', which is also in package mongodb-clients 1:2.2.4-0ubuntu1
*No apport report written because MaxReports is reached already
                                                              dpkg-deb: error: subprocess paste was killed by signal (Broken pipe)
Errors were encountered while processing:
 /var/cache/apt/archives/mongodb-10gen_2.4.5_i386.deb
E: Sub-process /usr/bin/dpkg returned an error code (1)

要先移除mongodb的clients端:

$sudo apt-get remove mongodb-clients

python學習

tuple? list? dict? str? int? float?

查找dict的值:

a.b 與 a[‘b’]的不同?

uuid?

Note

維基百科:http://zh.wikipedia.org/zh-hant/UUID

通用唯一識別碼(英語:Universally Unique Identifier,簡稱UUID)

定義:

一組UUID,是由一串16位元組(亦稱128位元)的16進位數字所構成,是故UUID理論上的總數為2^(16 x 8)=2128, 約等於3.4 x 10^38。也就是說若每納秒產生1兆個UUID,要花100億年才會將所有UUID用完。

UUID的標準型式包含32個16進位數字,以連字號分為五段,形式為8-4-4-4-12的36個字元。範例:

550e8400-e29b-41d4-a716-446655440000

UUID亦可刻意重複以表示同類。例如說微軟的COM中,所有元件皆必須實作出IUnknown介面,方法是產生一個代表IUnknown的UUID。無論是程序試圖存取元件中的IUnknown介面,或是實作IUnknown介面的元件,只要IUnknown一被使用,皆會被參考至同一個ID:00000000-0000-0000-C000-000000000046。

nodejs安裝

  1. 安裝nvm
curl https://raw.githubusercontent.com/creationix/nvm/v0.17.3/install.sh | bash

確認最新版本的話請至 https://github.com/creationix/nvm

  1. 設定bash
source ~/.nvm/nvm.sh

I always add this line to my ~/.bashrc, ~/.profile, or ~/.zshrc file to have it automatically sourced upon login. Often I also put in a line to use a specific version of node.

  1. 安裝nodejs
nvm install 0.10

指定使用版本

nvm use 0.10

https://github.com/creationix/nvm 上有更詳細的其他指令可以參考,這邊僅列我會用到的。

預設使用node的版本

nvm alias default stable

stable可以替換成你要預設使用的node版本

更新npm至最新版本:

npm install --global npm@latest

Note

一般來說,開發時 不要 使用到系統根目錄的資料夾來開發,所以上述安裝會把nvm及npm都放在自己的家目錄中, 如果非要使用到系統根目錄如:/opt,請更改該專案資料夾的權限至755。

一般再跟目錄下執行npm會要求要使用系統管理者權限sudo,但是上述安裝方法執行sudo npm -v 後會出現找不到指令, 是因為sudo 會去尋找系統指令/bin內的執行檔,但是我們為了維持開發環境的乾淨,所以不會安裝在系統根目錄下, 網路上有一個解法:

sudo ln -s /usr/local/bin/node /usr/bin/node
sudo ln -s /usr/local/lib/node /usr/lib/node
sudo ln -s /usr/local/bin/npm /usr/bin/npm
sudo ln -s /usr/local/bin/node-waf /usr/bin/node-waf

Note

依照link指令的用法將前面的``/usr/local/bin/node`` 等換成家目錄下的nvm/npm/node位置就可以用sudo來執行了, 不過這個作法並不推薦,建議還是使用資料夾權限更改來處理這個問題。

Warning

12/24註:更改資料夾權限後還是無法執行專案,目前只能依照建立link的方式來執行。

LAMP開發環境設定

1.安裝 Apache2

$sudo apt-get install apache2

2.安裝PHP5與設定

安裝php、php Extension與Application Repository:

$sudo apt-get install php5 php-pear

如果需要同時支援mysql:

$sudo apt-get install php5-mysql

安裝完成後,可以修改位於 /etc/php5/apache2/php.ini 文件,以期得到更好多的錯誤描述、日誌紀錄與更好的執行效能, 下面提供了基本的修改範例:

error_reporting = E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR
error_log = /var/log/php/error.log
max_input_time = 30

下方命令為建立php的日誌紀錄檔案與給Apache使用者使用權限:

sudo mkdir /var/log/php
sudo chown www-data /var/log/php

重啟Apache2

$service apache2 restart

3.安裝mysql DB

$sudo apt-get install mysql-server

執行 mysql_secure_installation ,這是一個幫助你更安全使用mysql的program,你將可以修改root的密碼, 刪除匿名帳號,禁止除本機以外的root用戶登入,並且刪除測試DB。

mysql_secure_installation

登入mysql:

mysql -u root -p

phpmysqladmin錯誤訊息 The json extension is missing. Please check your PHP configuration. 打開:

$ sudo vi /etc/php5/mods-available/json.ini

修改將 priority=20 的註解取消

spicec install

$ sudo apt-get install spice-client

連線

spicec -h <server hostname> -p <port number>

YEOMAN Tutorial(codelab)

資料來源:http://yeoman.io

使用目的:寫一個mobile web

基本具備:Javascript

教學目的:build will be a todolist app

最終完成檔案:https://github.com/addyosmani/yeoman-examples/tree/master/angular-localStorage-todos

STEP1-Set up your dev environment

Install prerequisites

安裝yeoman,要先處理安裝所需的套件或工具。

  • Node.js v0.10.x+
  • npm (which comes bundled with Node) v2.1.0+
  • git

..Note:

這邊在安裝上有問題,官方的文件明顯沒有更新
使用0.10.x的node版本會安裝失敗,要安裝0.12的最新版本才會成功

檢查node有無安裝:

node --version && npm --version

已有安裝node,但npm不是最新版的,可以使用以下指令將npm更新到最新版本:

$ npm install --global npm@latest

確認你的git 安裝了沒:

$git --version

ubuntu使用者可以直接輸入:

$sudo apt-get install git

或是去 http://git-scm.com/

Note

務必確保已經設定完成github的ssh-key,安裝架構時會直接啟動連結github來clone相關的libraries(如jquery)

Install the Yeoman toolset

處理好前置需求,進行安裝Yeoman:

$ npm install --global yo bower grunt-cli

Warning

如果看到 EPERMEACCESS 錯誤,請不要使用sudo 進行安裝, 參考 這裡 解決。

Confirm installation

執行以下指令確認安裝是否完成:

$yo --version && bower --version && grunt --version

安裝正確會出現 yo bower Grunt 的版本號

Note

本教學版本為Yeoman 1.4.6, Bower 1.4.1, and grunt-cli v0.1.13. 如有新版的版本衝突問題請至 提交issue

STEP2- Install a Yeoman generator

過去的web開發工作中,常要花費許多時間setting up boilerplate code,downloading dependencies, 並且手動creating整個專案資料夾結構。使用Yeoman可以拯救這些情況,讓我們來安裝generator以使用 AngularJS projects吧!

Install an AngularJS generator

$npm install --global generator-angular@0.11.1

這行指令會安裝你所需要的Node相依套件包,加上 @0.11.1 generator會鎖定這個特定的版本號

Warning

如果看到 EPERMEACCESS 錯誤,請不要使用sudo 進行安裝, 參考 這裡 解決。

Note

node的版本目前測試如果在安裝時選用nvm install 0.10 會導致yo的install失敗。 建議安裝最新的nvm install stable。

Note

Along with using npm install directly, you can search for generators via the Yeoman interactive menu. Run yo and select Install a generator to search for published generators.

Step 3: Use a generator to scaffold out your app

scaffold 是指根據你的具體配置請求生成一個基礎的 web app骨架, 再這個步驟中可以清楚的看到Yeoman如何生成專門的Angular apps, 並且毫不費力的使用外部的libraries,如 SASS and Twitter Bootstrap。

Create a project folder

建立一個專案資料夾並且移動進入:

$mkdir mytodo && cd mytodo

Note

作為 bonus,Angular generator 將動態的使用你的專案資料夾名稱使用為你app的namespace。

例如 :mytodo will become angular.module(‘mytodoApp’, []). 所以務必確認你了解這點,才能保證你到下一個步驟不會打錯字。

Access generators via the Yeoman menu

(通過Yeoman menu進入generators)

Run yo again to see your generators:

$yo

如果你已經安裝了幾個generators,你可以從這個選單裡選擇你要使用的, 高亮顯示正在執行Angular generator,敲擊enter鍵執行選擇的generator。

Note

當你夠熟悉這些使用,你可以直接執行generators,而不用使用選單,如下方指令:

$yo angular [appname]

Configure your generator

設定你的開發選項,再這個教學中使用的 AngularJS generator可以讓你選擇是否使用Sass進行開發, 另外還包含Twitter Bootstrap,在這個codelab中,我們不會使用到Sass,但會使用到Bootstrap, 針對這些選項進行選擇與安裝

下方關於angular的相依套件要使用空白鍵進行選則與取消,我們使用的是預設的設定,直接enter執行即可。 看到這個圖就表示成功建立scaffold了

    _-----_
   |       |    .-----------------------.
   |--(o)--|    |      Bye from us!     |
  `---------´   |       Chat soon.      |
   ( _´U`_ )    |      Yeoman team      |
   /___A___\    |    http://yeoman.io   |
    |  ~  |     '-----------------------'
  __'.___.'__
´   `  |° ´ Y `

Step 4: Review the Yeoman-generated app

確認一下生成的資料夾架構:

$ tree app/
app/
├── 404.html
├── favicon.ico
├── images
│   └── yeoman.png
├── index.html
├── robots.txt
├── scripts
│   ├── app.js
│   └── controllers
│       ├── about.js
│       └── main.js
├── styles
│   └── main.css
└── views
    ├── about.html
    └── main.html

5 directories, 11 files
  • index.html => Angular app的HTML文件(首頁)

  • 404.html => 網頁報錯頁面,貼心的幫你產出了。

  • scripts => Js文件放在這

    • app.js => Angular的程式進入點在這(main Angular application code)
    • controllers => our Angular controllers
  • styles =>樣式文件放這

  • views => Angular的view templates

  • bower_components, bower.json: JavaScript/web dependencies,由Bower管理安裝

  • Gruntfile.js, package.json, and node_modules:設定配置與相依的套件列表

  • test: testing這個scaffolded,包含test runner and the unit tests,包含boilerplate tests for our controllers.

Step 5: Preview your app in the browser

預覽我們的web app,不需要作什麼特別的設定,這些已經包含在Yeoman內了。

Start the server

預設是放在 localhost:9000 ,執行以下指令:

$ grunt serve

你會在你的瀏覽器看到預設的畫面。

停止這個server只要使用 CTRL+C 即可。

Note

執行此pj的port不能有其他的http服務使用(預設是9000)。

Watch your files “”“”“”“”“”“”“”“”“”“”’

打開文字編輯器開始進行編輯,你會發現你進行的每個儲存,畫面會同步進行更新(這讓很多前端工程師的F5鍵的壽命會延長很多XD), 這就是 live reloading,這可以讓你的app在開發時可以real-time view。

live reloading是透過一個在 Gruntfile.js設定的application,偵測你的文件發生修改,即重新載入頁面。

下面你可以試著修改 <h1></h1> 標籤的內容

Step 6: Start writing our AngularJS application

開始寫這個AngularJS application(終於....)

如果真的搞不清楚某步驟的code是否有放錯或打錯,請參考 ` final source code <http://yeoman.io/codelab.html#source-files>`_

Create a new template to show a todo list “”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“’

編輯檔案: views/main.html

把裡面的content全砍了,內容改成以下:

<div class="container">
</div>

編輯檔案:scripts/controllers/main.js

修改成我們需要的 todolist 的內容以取代原先的 awesomeThings :

'use strict';

angular.module('mytodoApp')
  .controller('MainCtrl', function ($scope) {
    $scope.todos = ['hello 1', 'world 2', 'yeoman 3'];
  });

關於scope可以參考 官方文件 的說明。

之後回頭來修改main.html,要輸入資料肯定要加上input標籤的,修改如下:

<div class="container">
    <h2>My todos</h2>
    <p class="form-group" ng-repeat="todo in todos">
        <input type="text" ng-model="todo" class="form-control">
    </p>
</div>

<p>標籤內的屬性 ng-repeat 是angular的指令,為for迴圈的功能。

在這個例子中,想像這些內容通過ng-repeat 屬性,將會成為一個虛擬rubber stamp(?), 成為todolist中的一項。

ng-model 屬性是Angular的令一個指令,工作於input, select, textarea, and custom directives,等來創造雙向的數據綁定 ( two-way data binding )。

完成後的網頁應該會長的如下圖:

_images/image_15.8de6.png

手動更新 main.js的內容,將 $scope.todos 內容新增一個 Item 4

$scope.todos = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

儲存後你會發現列表多了一格,內容寫著 Item 4 。

接下來請手動移除剛剛新增的部份,看看會發生什麼事情。

Add a todo

列表有了,接下來創一個新增按鈕吧!

在上 main.html 中的 <h2><p> 之間新增一個表單(from)元素。

現在的 main.html 應該長這樣:

<div class="container">
    <h2>My todos</h2>

    <!-- Todos input -->
    <form role="form" ng-submit="addTodo()">
        <div class="row">
            <div class="input-group">
                <input type="text" ng-model="todo" placeholder="What needs to be done?" class="form-control">
                <span class="input-group-btn">
                    <input type="submit" class="btn btn-primary" value="Add">
                </span>
            </div>
        </div>
    </form>

    <!-- Todos list -->
    <p class="form-group" ng-repeat="todo in todos">
        <input type="text" ng-model="todo" class="form-control">
    </p>
</div>

你在頁面上方新增了一個HTML表單與submit按鈕,這裡利用到了令一個Angular指令ng-submit。

現在你的頁面應該長下面這樣:

_images/image_16.7ee2.png

點擊Add的按鈕還不會有動作,讓我們來給予新增的動作。

ng-submit 是榜定一個Angular的 onsubmit event ,如果不指定 action 屬性,

修改訂防紀錄頁籤問題

Ionic framework

官方網站

官方DEMO

Getting Started with Ionic

Build mobile apps faster with the web technologies you know and love.

Install Android SDK

參考文章

在ubuntu14.04上安裝Android SDK:

$ sudo add-apt-repository ppa:didrocks/ubuntu-developer-tools-center
$ sudo apt-get update
$ sudo apt-get install ubuntu-developer-tools-center

安裝玩後執行:

$ udtc android

Install Ionic

首先安裝 Node.js. 再來安裝最新版本的 Cordova and Ionic command-line 工具. 按照 Android and iOS 的安裝指南安裝所需要的相依

Note

Note: iOS 開發需要有 Mac OS X.

iOS 模擬器 through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim .

Note

我在安裝玩後要build android時有錯誤訊息:

Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.

網路上搜尋到的解決方法:http://superuser.com/questions/816369/cordova-android-install-on-linux

export ANDROID_HOME=~/adt-bundle-linux-x86_64-20140702/sdk

export PATH=${PATH}:~/adt-bundle-linux-x86_64-20140702/sdk/tools

export PATH=${PATH}:~/adt-bundle-linux-x86_64-20140702/sdk/platform-tools

中間的 ~/adt-bundle-linux-x86_64-20140702/ 為安裝android SDK的資料夾位置,後面的tools等資料夾如果android SDK有正確安裝會存在。

build完後使用模擬器:

$ionic run android

Note

如果出現如: No platforms added to this project. Please use ‘cordova platform add <platform>’. 的錯誤訊息。

請使用以下指令新增模擬器:

cordova -d platform add android

資料來源:http://stackoverflow.com/questions/18652164/error-in-installation-building-of-phonegap

Appcelerator Alloy Controllers

type:技術文件翻譯

source:http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Controllers

官方:https://web.appcelerator.com/tools

Overview

這篇主要介紹如何寫controller部份與其他js文件的code,但不包含models的code撰寫。

由於 Alloy controllers會直接調用Titanium SDK API來處理UI(UI objects)與訪問非UI(access non-UI APIs)的對象, 會使用到一些舊有的Titanium development。

可以參閱 Titanium API Guides

Controllers

在Alloy中,controllers 的工作包含了控制UI與溝通model的程式邏輯。

下面有一個簡單的範例, index.xml 與其相關連的controllers index.js

app/controllers/index.js

app/controllers/index.js
function doClick(e) {
    alert($.label.text);
}
$.index.open();

app/views/index.xml

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>

所有的view 中的id屬性都會自動被定義成可以使用 $ 符號進行呼叫, $ 是一個controllers的參照指標( reference to the controller.) 。

在上方的例子中,可以使用 $.label 來訪問 Ti.UI.Label

這個方法可以直接訪問該對象元素的屬性(properties)或方法(methods),

例如,可以使用$.label.hide()來隱藏元素,或使用$.label.text更改元素標籤的文字內容。

要訪問外部的controllers與view文件,可以使用 Alloy.createControllerController.getView, 參考 Alloy API documentation 取得使用細節。