接下來我們想要做到的是一個 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 執行的話
今天要來練習新的東西 - TableView
據同事說明，TableView 是最常用到的 View 之一
在我們的實戰開發中也會用到 TableView
因此今天就先簡單的來建立出單頁純顯示資料的 TableView
TableView 的概念大概是如下圖:
長得有點像 ListView 但是每一行又可以多切開，放一些東西
每一行都稱之為一個 TableViewCell
今天就來要簡單寫一個資料已經預先定義好，並且會顯示在 view 上面的 TableView
要進行下去之前當然就先開一個新的練習專案囉
開啟完專案後，首先第一件事情就是進 storyboard
選擇 TableView 拉進 storyboard 裏
接著再選擇 TableViewCell 拉進 TableView 中
透過此圖，我們了解到可以打開 storyboard 的 tree 來看看它們之間的關係
下面此步驟很重要，資料的連接就靠這條線:
先選取 TableView (可以使用階層樹或是點擊 storyboard)，然後選擇右方的 connection inspector (右上角的最右邊的那一個按鈕)
裡頭有個 dataSource 以及 delegate
我們先按住 dataSource 右邊的空心圓按鈕，拖曳拉到 storyboard 中的 ViewController，如上圖所示
這樣子等等在程式碼中產生的資料才會有和 storyboard 的 UI 做連結
最後一個和 storyboard 相關的操作是將 storyboard 的 TableView 和 程式碼做連結，好方便我們在程式碼中對 storyborad 的 TableView 做操作
這幾天會探討 javascript 的特性，由於比較少在寫 js ，因此有錯請指正
Scope 例子:
function hi() { var greetings = "hi"; console.log("Say: " + greetings); function sayYa(newInput) { greetings = newInput; console.log("Say: " + greetings); } function sayCool(newInput) { var cool = newInput; console.log("Say: " + cool); } sayYa("Yo"); sayCool("Cool"); console.log("Say: " + greetings); } hi(); 很簡單的概念
greetins 在 sayYa 方法中被覆寫掉了
如果要定義 local 變數必須在 function 裏用 var 定義
例如 sayCool function
Closure 例子:
function person(){ var name = 'default'; return { greetings: function() { console.
延續昨天的主題，今天我們要做的事情是：
爲新的 ViewController 實際加入程式碼 (ViewController2.swift) 加入一個 button 來控制是否前進下一頁或後退 我們先新增一個檔案:
接著選擇 CocoaTouch Class:
回到 storyboard, 選擇第二個 ViewController
並按照下圖，將 Class 指定給 View2Controller
這樣子 storyboard 的 View2 就會指定到 View2Controller 了
我們在 View2Controller 的 viewDidLoad 方法中加入一行程式碼
來驗證他是否有吃到 View2Controller
self.title = "View2 by me" Run 起來看的話就會是這樣:
的確是有吃到程式碼的
再來就是要加入按鈕了:
我們先拉一個 Button 進 View2Controller
並且將該 Button 拉進 View2Controller 的 code
設定該 button 爲 Action, 並且名稱是 ‘backToView’
意即我們要讓點下 View2Controller 的 Button 行為為回到上一個 View
另外對 View2 為他加入一個 storyboard ID, View2，等等會用到:
接下來幾天會探討 node.js 的特性，由於比較少在寫 js ，因此有錯請指正
在 node.js 裏，要讀取外部模組都是透過 require 和 exports 來做溝通
以下列出這次最簡單 module 的例子
//hello.js console.log('Hello World'); // app.js require('./hello.js'); Module 也是有 Pattern 的 第一種: Global (Not so good)
// foo.js foo = function() { console.log("foo!"); } // app.js require('./foo.js'); foo(); 第二種: export an anonymous function
// foo.js module.exports = function() { console.log("foo! YA"); }; // app.js var test = require("./foo.js"); test(); 第三種： export a named function
今天來試著拉拉看 Navigation View
什麼是 Navigation View?
就是類似下圖的東西:
用來控制 View 之間的流程
今天我們繼續使用 storyboard 來簡單拉拉 Navigation View
首先先開一個新 project 吧!
接著我們到 storyboard，選擇 ViewController
再來我們要嵌入 Navigation View
所以要選擇: Edit -> Embed in -> Navigation View
選擇後，就會發現 storyboard 的 layout 改變了
Navigation View 實際上是透過 NavigationController 來控制
原本程式的進入點是 ViewController
由於我們要使用 Navigation View
因此透過 Xcode 將 NavigationController 嵌進去
讓程式進入點變成 NavigationController
再透過 NavigationController 將程式導到 ViewController
接下來我們命名一下 ViewController:
然後我們從右下角的 Object library 選擇 Bar Button items 加入
並將該物件拉到 NavigationBar 的右方
今天要使用 Node.js 的 mongodb driver 來操作 DB
一樣先開啟虛擬機並且登入吧
會使用到的套件是:
mongodb -> mongodb native driver 或許有人有看過 mongoose -> 官網
算是 MongoDB 的 ORM，我們在這邊如果有時間的話再簡單了解一下，
現在先使用 native driver 來操作
我們在這邊就不裝全域套件了，裝在 API 專案裡面
並且使用 -save 來將相依性寫入 package.json 裏
$ cd /vagrant/API/ $ npm install mongodb -save 從虛擬機回到電腦的資料夾中，在虛擬機資料夾的 API 資料夾中，
今天我們先不和 express 搭配，因此就是純操作 node.js + mongodb module
新增一個 mongoTest.js
我們先來連線到 MongoDB，連線的方式有很多，下面是其中一種方式，
// 先宣告用的到的東西 var MongoClient = require('mongodb').MongoClient , Server = require('mongodb').Server , options = { auto_reconnection: true, poolSize: 10 }; // Server 設定 var mongoClient = new MongoClient(new Server('localhost', 27017, options)); // 開啟連線 mongoClient.
今天來放一些基本的元件:
放入一個文字輸入框、文字標簽、按鈕，
在文字框輸入一些字後，按下按鈕後，會在文字標簽顯示剛剛輸入的內容：
首先使用右下角的 Object library 中將上述三種元件拉到 storyborad 中
圖中依順序是文字標簽、文字輸入框、按鈕
接著我們要使用到的文件是文字標簽以及文字輸入框，另外要將按鈕加入事件
因此程式的流程是:
按下按鈕後-> 執行按鈕事件 -> 抓到文字輸入框的輸入內容 -> 將文字標簽的內容改變成文字輸入框的內容
因此先使用昨天的方式，將文字標簽及文字輸入框拉到 ViewController 中以便使用它們，在圖中的程式碼 12, 13 行：
這樣我們就可以控制文字標簽的文字以及拿到輸入框的文字了
再來就是最重要的按鈕事件了!
一樣使用 ctrl + 拖曳的方式將按鈕拉到程式碼中，但是這次是要選擇 「IBAction」，是事件的意思:
接著就會產生出一段 function:
名為 titleButton, 我們在方法中輸入一行程式碼:
titleLabel.text = titleField.text 意思就是將文字標簽的字改成文字輸入框的文字
接著我們就把程式跑起來吧!
在文字框中輸入文字，按下按鈕，標簽就可以變文字了!
