Published on Oct 14, 2017 Swift Girls aims to give tools for girls and women to build their ideas. https://www.facebook.com/groups/1260405513988915/?fref=ts 專為女生成立的討論社群 ，不定期辦免費講座(基礎課程)，以及一起來 free coding討論等聚會，希望不斷推廣而有更多女生一同透過交流學習，一起了解ios開發並能互相切磋，歡迎對Swift語言有興趣的一起加入！ 發問解答工具 1. Github(程式碼儲存庫), stackOverFlow 2. google 大神 3. 社群發問

1. S W I F T G I R L S ( I O S)
PA R T 9
2 0 1 7 . 1 0 . 1 6
by 雅⽅方
⾃ ⼰ 開 A P I ⾃ ⼰ 串
4

2. S W I F T G I R L S ( I O S)
Swift Girls aims to give tools for girls and women to
build their ideas.
希望不斷推廣⽽而有更更多女⽣生⼀一同透過交流學習，⼀一起
了了解ios開發並能互相切磋，歡迎對Swift語⾔言有興趣的
⼀一起加入！
專為Swift新⼿手展開的第⼀一次”探勘“⾏行行動
雅⽅方比女⼈人更更了了解女⼈人的雅⽅方
也是雅⽅方冰淇淋淋的雅⽅方
雅⽅方⽺羊⾁肉爐的雅⽅方
by 雅⽅方
2 0 1 7 . 1 0 . 1 6

3. S W I F T G I R L S ( I O S)
學習資源 線上網上各式各樣影片⽂文件無所不有！！！
在這裡 可以有老師教練們給你來來問問題
可以有夥伴跟你⼀一起討論 (給你問⽩白癡的問題!?XD)
網上線上 都比不上實際⾯面對⾯面操作實作與立即性的討論
by 雅⽅方
看⼤大⼤大們debug 回家後你們也可以互相討論 ⾃自⼰己debug :)
重點是 能有⼀一起學習的夥伴 ⼀一起成長 :)
2 0 1 7 . 1 0 . 1 6

4. S W I F T G I R L S ( I O S)
深深感受到...
以前看別⼈人寫程式會學到三成功⼒力力,
經過⾃自⼰己下⾺馬打程式可學到七成功⼒力力,
教別⼈人寫程式,
by 雅⽅方
你會學到比你想像的功⼒力力還要多⼗十成！ :)
2 0 1 7 . 1 0 . 1 6

5. S W I F T G I R L S ( I O S)
就是那些年年...
三個師兄師弟輕功⽔水上飄的感⼈人故事...
by 雅⽅方圖片來來源：http://kanema.pixnet.net/blog/post/33866276-150905-葉師⽗父練功之無徒⼀一⾝身輕
2 0 1 7 . 1 0 . 1 6

6. S W I F T G I R L S ( I O S) - PA R T 9
by 雅⽅方
發問解答⼯工具
1. Github(程式碼儲存庫), stackOverFlow
2. google ⼤大神
3. 社群發問
這次範例例Github:
https://github.com/Avonee/swift-girls-meetig_teachin
2 0 1 7 . 1 0 . 1 6

7. S W I F T G I R L S ( I O S) - PA R T 9
by 雅⽅方
A. 環境建置
安裝node
B. 開API
API實作
2 0 1 7 . 1 0 . 1 6

8. A P I ? ? ?
by 雅⽅方
2 0 1 7 . 1 0 . 1 6

9. A P I ? ? ? … 就 是 ⼀ 串 網 址
by 雅⽅方
2 0 1 7 . 1 0 . 1 6
— > 我 的 第 ⼀ 次 接 案 經 驗 ...OZ

10. A P I
by 雅⽅方
2 0 1 7 . 1 0 . 1 6
A P P L I C AT I O N P RO G R A M M I N G I N T E R FA C E
應⽤用程式之間溝通的窗⼝口，藉由此窗⼝口取得/提供對⽅方的服務

11. A P I
by 雅⽅方
2 0 1 7 . 1 0 . 1 6
基本三要素
• URLs(API 位置)
• methods(通常指HTML request ⽅法, POST, GET)
• form-data(API要求的資料輸入)
當使⽤用者提供API所需要的資訊時就能得到所需要的服務或資料
參參考：http://leeboy19890101-blog.logdown.com/posts/578758

12. R E S T F U L A P I
by 雅⽅方
2 0 1 7 . 1 0 . 1 6
POST v.s. GET ???
什什麼時候⽤用POST？？？
什什麼時候⽤用GET？？？

13. 改 變 世 界
by 雅⽅方
2 0 1 7 . 1 0 . 1 6

14. S TA R T ! ! !
by 雅⽅方
2 0 1 7 . 1 0 . 1 6

15. ⽬ 標 1 :
環 境 建 置
by 雅⽅方
2 0 1 7 . 1 0 . 1 6

16. by 雅⽅方
安裝node
2 0 1 7 . 1 0 . 1 6

17. by 雅⽅方
⾃自⼰己上網查！！！
2 0 1 7 . 0 2 . 0 6

18. by 雅⽅方
npm.init
終端機 …
(放套件)
npm install express
(express 最pop的框架)
2 0 1 7 . 1 0 . 1 6

19. by 雅⽅方
2 0 1 7 . 1 0 . 1 6

20. by 雅⽅方
除了了post man以外
JSON Formatter
看起來來比較帥
2 0 1 7 . 1 0 . 1 6

21. ⽬ 標 2 :
開 A P I
by 雅⽅方
2 0 1 7 . 1 0 . 1 6

22. by 雅⽅方
開index.js
node index.js (執⾏行行)
2 0 1 7 . 1 0 . 1 6

23. by 雅⽅方
var express = require('express'); // call express
var app = express();
var port = 3000;
//監聽端⼝口
app.listen(port);
console.log('Magic happens on port ' + port);
2 0 1 7 . 1 0 . 1 6

24. by 雅⽅方
• 實作json範例例1
app.get('/member',function(req,res){
res.json([{name:'kevin',phone:0911111111},
{name:'kiki',phone:0922222222},{name:'vinvin',phone:
0933333333}])
})
2 0 1 7 . 1 0 . 1 6

25. by 雅⽅方
app.get('/account',function(req,res){
res.json([{ id: 'avon333456',task:'fight'},{ id:
'asfasdada12',task:'fight2'},{ id:
'asfasda23da',task:'fight3'},{ id:
'asfas123dada',task:'fight4'}])
})
2 0 1 7 . 1 0 . 1 6
• 實作json範例例2

26. by 雅⽅方
三種獲取參參數⽅方式
N O D E E X P R E S S
• req.body (post)
• req.params (/zzz/xxx)
• req.query (?xxx=…)
2 0 1 7 . 1 0 . 1 6

27. by 雅⽅方
• req.query (?xxx=…)
app.get('/member',function(req,res){
res.json({ message: 'hello! '+ req.query.name,
time:req.query.time
});
})
2 0 1 7 . 1 0 . 1 6

28. by 雅⽅方
• req.params (/zzz/xxx) 範例例1-1
app.get('/account/:id',function(req,res){
res.json({ id: req.params.id,task:'take a
shower',message:req.query.message})
})
那message?
2 0 1 7 . 1 0 . 1 6

29. by 雅⽅方
• req.params (/zzz/xxx) 範例例1-2
app.get('/account/:id',function(req,res){
res.json({ id: req.params.id,task:'take a
shower',message:req.query.message})
})
2 0 1 7 . 1 0 . 1 6

30. by 雅⽅方
完整範例例
var express = require('express'); // call express
var app = express();
var port = 3000;
//express獲得GET請求
app.get('/member',function(req,res){
res.json({ message: 'hello! '+ req.query.name,
time:req.query.time
});
// res.json([{name:'kevin',phone:0911111111},{name:'kiki',phone:0922222222},
{name:'vinvin',phone:0933333333}])
})
app.get('/account',function(req,res){
res.json([{ id: 'avon333456',task:'fight'},{ id: 'asfasdada12',task:'fight2'},
{ id: 'asfasda23da',task:'fight3'},{ id: 'asfas123dada',task:'fight4'}])
})
app.get('/account/:id',function(req,res){
res.json({ id: req.params.id,task:'take a shower',message:req.query.message})
})
//監聽端⼝口
app.listen(port);
console.log('Magic happens on port ' + port);
2 0 1 7 . 1 0 . 1 6

31. by 雅⽅方
參參考
https://scotch.io/tutorials/build-a-restful-api-using-node-and-express-4
http://xuyuan923.github.io/2014/10/10/node-tutorial-req/
2 0 1 7 . 1 0 . 1 6

32. Q & A
by 雅⽅方
2 0 1 7 . 1 0 . 1 6