Github link
首先在開始寫這隻 app 前，
我們要先定義好程式大致上的流程
基本上接下來的程式碼都不會用到 storyboard
只會用到程式 + xib
程式的流程大致上是使用 Navigation controller 來控制 view 的轉換
第一頁 - tableView 顯示 todo items list
點進子項目可以觀看內容，進到子頁後可以編輯，
編輯後就即可存檔
新增項目則在主頁的右上角 “Add” 可以新增
我們會先從建立假的資料開始，也就是我會先刻出程式的流程
先不接 API
實際寫出運作流程後，再加上 API 操作的部分
因此今天的進度就先開一個新專案，將基本的 Navigation + tableView 建立起來吧:
首先建立一個新專案
再來到 project settings
將 Main Interface 及 Launch Screen file 拿掉
並將 deploy target 設成 7.1 (反正用到的程式碼都一樣~ 沒有特別使用 8.0 的 lib)
設定 device orientation - 只限定直的
接著就來編輯 AppDelegate.swift
建立一個 NavigationController + ViewController
Github 參考
接著我們要根據我們開之前寫好的 文件 來開發:
要有下列 routes
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} 這樣的需求其實可以用 namespace 實作，不過我們偷懶一點，直接指向 /user 就好
所以在 app.js 加入
var users = require('./routes/users'); app.use('/user', users); 所以會變這樣:
var express = require('express'); var app = express(); // Set routers var index = require('./routes/index'); var users = require('./routes/users'); app.use('/', index); app.use('/user', users); module.exports = app; 不過看起來我們缺少 routes/users.js，所以我們也來新增一個
routes/users.js 內容如下
'use strict'; var express = require('express'); var router = express.
今天專案的 Github link
其實哦
寫 Swift 也有幾個禮拜了
我一直覺得使用 Interface Builder 的確很方便
但是在程式面與視覺面之間的溝通常常會漏東漏西的
比方說如果要設定 reusable identifier 時
除了程式裡面的字串要設定以外，還要再到 storyboard 裡設定同樣的字串
一個簡單的小程式可能不超過 20 個 View 的情況下
還可以這樣做，當程式長得非常大的時候，好像就很難注意到這件事，
而且 View 太多 storyboard 就會開始變慢….
因此今天要來試著在 Swift 中
如何不用 Storyboard，來打造我們的程式
(當然 xib/nib 還是會用到，只是我們單純捨棄 storyboard，用程式來控制流程)
首先，一樣先建立一個測試專案
接著我們要動到的程式碼是 AppDelegate.swift:
編輯它:
@UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? var viewController: ViewController? func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { // Override point for customization after application launch.
請大家先看看下面的小短片，注意一下過場動畫的流暢度
一開始是沒有加過場動畫，後來改程式碼變成有過場動畫
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.
