今天要來練習新的東西 - 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 意思就是將文字標簽的字改成文字輸入框的文字
接著我們就把程式跑起來吧!
在文字框中輸入文字，按下按鈕，標簽就可以變文字了!
今天先講在 Server 中如何操作 MongoDB
一樣開啟虛擬機，
我們在先前已經有先安裝過 MongoDB 了，因此，在 Ubuntu Server 中預設是開機啟動的
登入虛擬機吧~
登入虛擬機後，我們要進入 MongoDB，必須使用 mongo 這個 MongoDB Shell
$ mongo MongoDB shell version: 2.6.4 connecting to: test Welcome to the MongoDB shell. For interactive help, type "help". For more comprehensive documentation, see http://docs.mongodb.org/ Questions? Try the support group http://groups.google.com/group/mongodb-user > 此時會發現輸入指令的地方變成了 > 表示我們已經在 mongodb 裡面了
為什麼不需要帳號密碼即可進入 MongoDB 呢，因為 MongoDB 預設是不需要做登入的
並且加上預設只能由本機存取，也就是說，外部連入的 IP 是進不了 MongoDB 的
這部分後面會再作說明。
傳統的 Table 在 MongoDB 中，稱之為 Collection
今天就要來建立一個 Hello World swift app 啦 XD
首先就是開 Xcode 然後開專案囉~~
就看你要存去哪裡啦～
再來就會進到專案本身:
我們就看右下角有個地方可以找到 Label 這個選項:
把他拉到 Storyboard 的任意位置就可以了~
然後更改 label 的屬性:
先點一下 label 選取後，看右上角
有個地方可以更改它的顯示文字，我們將它改成 HelloWorld!
改完之後，按左上角的 Run! ，我們也可以選擇後面的 target 看是要跑在 i6 或是 i5 上，
按下 Run 後程式就會 deploy 到模擬器上面了！
這就是第一個 Hello World 啦!
完全不用寫程式哦 XDDDDD
不過還是要稍微了解一下運作原理啦~
如果剛剛在編輯 storyboard 的時候，有發現那個 View 的左邊有一個奇怪的箭頭指向 View，那個箭頭的意思其實就是程式進入點的意思，
storyboard 就是在描述程式的走向，像在說故事一樣，從某一頁按了什麼東西跳到哪一頁
其實我一直都沒有很習慣 storyboard 的拉法，還是比較習慣用程式建立物件，將想要的物件用程式擺(憑空想像XD)，但是前面幾個比較屬於練習的小東西都還是會用拉的，比較好懂~
我們剛剛建立的那一頁 Hello world
基本上就是在左邊的 ViewController
那我們試著使用程式來改變 HelloWorld 這個 label 的值吧!
我們首先使用分割視窗的模式
選擇左邊數來第二個按鈕
Express - Hello World! 今天就要來安裝主角之一的 Express 了!
一樣開啟虛擬機器我應該是可以不用多說了 XD
先確認自己的 node 是不是 NVM 的 node 喲
建立專案 $ cd /vagrant/ $ mkdir API $ cd API/ $ npm init 自己輸入專案的相關內容吧，不知道的就直接按 enter 空白丟給他~
就會產生 package.json 了!
安裝 Express // 在專案目錄底下 (/vagrant/API/) $ npm install express -save 下 -save 的原因是要將 express 加入 package.json 中
離開虛擬機，其實我們也可以在虛擬機資料夾看到剛剛建立的專案了，
現在開始就可以使用自己喜歡的編輯器來開啟這個專案資料夾，我個人偏好使用 Sublime Text
要執行專案時再回終端機即可
Express Hello World! 在 API 資料夾中建立一個 app.js
內容是:
javascript var express = require('express'); var app = express(); app.
