請大家先看看下面的小短片，注意一下過場動畫的流暢度
一開始是沒有加過場動畫，後來改程式碼變成有過場動畫
direct link
後來發現給一個預設的 backgroundColor 後就不會發生殘影的問題了
是因為 push 的 view 沒有 backgroundColor
和同事討論後發現:
Apple Developer Reference
UIView 的 backgroundColor 的 default 值是 null!
Discussion Changes to this property can be animated. The default value is nil, which results in a transparent background color.
所以是這個原因導致在轉場的時候有殘影
不過切換 View 時 target view 沒有 backgroundColor 的情況應該比較少吧…(?)
剛好在寫鐵人賽的 app 想先把流程弄出來時遇到了這個雷 XD
Github 參考
昨天先把專案目錄初始化，裝完該裝的套件後
在 routes 中加入一個 index.js 檔案
'use strict'; var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.status(200).json({ greetings: "hello world!"}); }); module.exports = router; 建立一個 app.js 在專案根目錄中:
app.js
var express = require('express'); var app = express(); var index = require('./routes/index'); // Set routers app.use('/', index); module.exports = app; 然後在 bin 資料夾建立一個 server.js:
bin/server.js:
'use strict'; var debug = require('debug')('TODOAPI'); var app = require('.
本日專案的 Github link
由於 Swift 剛推出不到一年
有許多的 third-party library 一定還沒轉換成 Swift
或者是作者沒心力轉會成 Swift
但是有些套件非常方便，那在 Swift 要怎麼使用 Objective-C 的套件呢?
Xcode 有提供橋接的方式，非常好用
接下來就介紹一下如何使用吧!
以下的例子是一個叫做 Reachability 的套件
它可以簡單地幫我們判斷是否有網路連線 3g or wifi 之類的
所以我們先下載這個套件吧!
https://github.com/tonymillion/Reachability
下載解壓縮後
將 .h 和 .m 檔拖曳進 Xcode 專案中
接下來 Xcode 就會問一個非常重要的問題!:
是否要建立橋接的 .h 檔案!
當然是選擇建立囉~
此時的專案結構就會變成這樣:
再來編輯 bridge-header.h 檔
將想要橋接的 objc 套件 import 進去
#import "Reachability.h" 這樣我們就可以在 Swift 中直接使用該套件的類別與方法了!
接下來就讓我們試試看!
在 ViewController 中加入以下程式碼:
// // ViewController.swift // BridgeObjcDemo // // Created by Jerry Huang on 2014/10/18.
會使用到的套件: 主體: express - web framework body-parser - parse request body 測試相關: mocha - test framework mocha-mongoose - 用來和 mocha 和 mongoose 中間做介接的套件 superagent - 拿它來丟 http request validator - 用來驗證某個物件是否為某個型別 expect.js - 類似 BDD 的語法，用來寫測試的 debug - debug package DB 相關: mongoose - mongodb orm mongodb - mongodb native driver 開發相關: nodemon - detect file change and restart server 生產環境相關: log4js - 記錄 request log 這是我的 package.json, 可以複製到專案目錄，然後下 npm install
今天的主題延續昨天的 Navigation + TableView
我們要來客製化 TableViewCell
通常 TableView 可以被拿來做很多事情，不僅只是像是 ListView 而已
而 TableViewCell 可以做更深度的切版，排列元素
因此自定 TableViewCell 是一件算是還蠻重要的事情
下面的 Code 是延續昨天的專案
我先把已更改過的程式碼貼上來:
import UIKit class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { @IBOutlet var tableView: UITableView! var arr = ["A", "B", "C"] override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated.
首先我們就在虛擬機的資料夾底下，建立一個專案資料夾吧!
今天會來簡單切割一下我們的專案目錄
建立新專案目錄: $ cd /vagrant/ $ mkdir TODOAPI $ cd TODOAPI $ npm init // 輸入專案資訊 $ 建立專案結構 / | - bin/ | - routes/ | - model/ | - node_modules/ | - logs/ | - config/ | - test/ | - app.js | - package.json 分別講解一下各個 folder 的工作:
bin 筆者會在 bin 資料夾底下放一個 server.js
這個 server.js 就是會專門用來啟動一個 app.js instance
routes 基本上如果了解 MVC 架構的話，routes 就是 controller 的意思，其實如果讀者本身夠了解的話，這個資料夾也可以改成 controller 也 ok，應該說，其實資料夾怎麼放都是看個人隨意即可，只是若是要模組化的話，筆者會這樣來處理一個專案結構。
今天要把 Navigation View 和 Table View 結合起來!
把 NavigationController 拉進 Storyboard
將程式進入點指向 NavigationController
把原本程式自動產生的 UIViewController 刪除
把自動產生的 TableViewController 刪除!
拉一個新的 UIViewController
將 NavigationController 的 RootViewController 指向新的 ViewController
把 TableView 拉進 ViewController
再將 TableViewCell 拉進 TableView
再點選 ViewController, 到右上角中找尋 Custom Class
將 ViewController.swift 指定給該 ViewController
接著把 UITableView 引進程式碼裡做關聯
再來就是實作 Table 的 data 了
class ViewController: UIViewController, UITableViewDataSource { class ViewController: UIViewController, UITableViewDataSource { @IBOutlet var tableView: UITableView! var arr = ["A", "B", "C"] override func viewDidLoad() { super.
接下來我們想要做到的是一個 TODO list 的 RESTful API
並且會先使用 apiary.io 做規劃
實際看看感覺如何
進入網站後，註冊登入後
左上角的 dropdown list 選擇 create new API
產生後下方就會跑出範例文擋
這個網站會透過特定格式的編排自己希望的 API endpoint 及範例回傳值後，產生出一份漂亮的文件
網站中間是模式的選擇
Documentation 是實際讓其他人看的，Editor 則是編輯模式
我們就稍微簡單規劃一下 TODO List 的 RESTful API 吧!
這是我自己規劃的 文件
基本上 route 會長這個樣子:
TODOs GET /user/{user_id}/todos/ POST /user/{user_id}/todos/ GET /user/{user_id}/todos/{id} PUT /user/{user_id}/todos/{id} DELETE /user/{user_id}/todos/{id} 資料格式也都在該文件整理好了
/user/{user_id}/ 只是用來辨識是哪個 user 的 todo task data
在這個小 API 不會琢磨在使用者系統的建立，只會專注在操作 todo task data
我們可以直接透過 PostMan 來丟丟看
我們設定必須要使用 API-key 才能存取 API，比較進階的做法就是使用 Oauth 的方式取得 token 來存取 API
昨天我們實際操作了 tableView 的實作，今天要加入換頁
意思就是假設我點了名為 “99” 的 cell，點擊後會跳轉到另外一頁，同樣顯示 “99”
所以除了跳頁外，還要加入值的傳遞
首先打開昨天的專案，我們要繼續下去
回到 storyboard 中，昨天我們加入了 dataSource，今天要加入 delegate:
回到程式碼中 ViewController.swift
在 class 的宣告再加上 UITableViewDataSource
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { 再來就要設計換頁的流程了
回到 storyboard
拉一個新的 ViewController 到空白處
接著點擊左邊的 TableViewCell, 按住 ctrl + 拖曳，拉到剛剛建立的 ViewController 上
選擇 show detail
就會長這樣:
再來新增一個 ViewController
接著讓新的 storyboard viewcontroller 連接到剛剛新增的 DetailViewController 程式碼
記得先點選 ViewController
在 storyboard 的 DetailViewController 中拉一個 label
並且將該 label 連接到 DetailViewController 的程式碼中
因此 DetailViewController 就會變這樣:
這幾天會探討 javascript 的特性，由於比較少在寫 js ，因此有錯請指正
javascript 有個特性：event
意思就是說，javascript 中，所有的事情都是由事件驅動的
如果說有寫過 web 前端的話，
其實呼叫 button.click function 時
並不會馬上執行 click 裡面的動作
而是加了一個 click 的 listener
等到 button 被 click 後，才會執行 click 裡面的程式碼
所以寫習慣一般 procedure 的程式會有點不太習慣
舉個 procedure 的例子，下面有五件事想要做：
煮飯(); // 10 分鐘 接電話(); // 1 分鐘 吃麵(); // 5 分鐘 丟垃圾(); // 7 分鐘 一般的程式會是照順序執行
也就是 煮飯完 -> 接電話 -> 吃麵 -> 丟垃圾
總執行時間 = 23 分鐘
但是如果把這段 code 丟給 javascript 執行的話
