章節撰寫範例

RN-basic-01-network/RN-basic-01-01-lab-rest-api/note.md

@@ -0,0 +1,54 @@
+## 章節資料夾命名
+
+### 章
+
+資料夾命名： `主題`-`level`-`章`
+
+### 節
+
+練習章節：`主題`-`level`-`節`-lab-`short-name`
+
+內容章節：`主題`-`level`-`節`-article-`short-name`
+
+
+練習章節 範例： `RN`-`basic`-`01`-lab-`rest-api`
+
+內容章節 範例： `RN`-`basic`-`01`-article-`rest`
+
+
+
+## 資料夾結構
+
+```
+RN-basic-01-network
+├── 01-lab-rest-api-A
+│   ├── assets 章節所需附檔資料夾
+│   ├── readme.md 章節主要內容
+│   └── note.md 章節進行注意事項說明
+├── 02-lab-rest-api-B
+│   ├── assets 章節所需附檔資料夾
+│   ├── readme.md 章節主要內容
+│   └── note.md 章節進行注意事項說明
+├── assets 此章所需附檔資料夾
+└── readme.md 此章說明
+```
+
+針對練習章節相關規範如下：
+
+## 章節內容組成
+
+`# 章節名稱`
+
+難度： 基礎 or 進階
+
+目標： 練習或章節目的
+
+專案： 範例使用的 repo
+
+練習： 練習步驟說明
+
+`## 練習前設置`
+
+`## 參考資料`
+
+附上在章節或練習進行中所需用到的資料或是指令

RN-basic-01-network/RN-basic-01-01-lab-rest-api/readme.md

@@ -0,0 +1,100 @@
+# ToDoList 練習串接 RESTful API
+
+難度： 基礎
+
+目標： 在 React Native 透過 fetch 使用呼叫後端 API
+
+專案： 
+
+* app: https://github.com/agileworks-tw/RN_Todo_Sample 分支 `practice/005002_answer`
+* server: https://github.com/agileworks-tw/express-example 分支 `practice/005002_answer`
+
+練習： 
+
+新增、刪除與取得 ToDo 列表功能，後端在上述專案連結皆已實作完成，步驟如下
+
+1.  串接取得 ToDo 列表，綁定到 FlatList 資料來源
+2.  串接 create API，當發送成功時，將新的 ToDo 加入到 state 物件中
+3.  串接 delete API，當發送成功時，將欲刪除的 ToDo 從 state 物件中移除
+
+使用 `參考資料` 所提供的 API，完成此練習步驟，讓 App 可以透過 fetch 與後端互動
+
+## 練習前設置
+
+### 下載專案
+
+- ToDoList RESTful API server
+
+```bash
+cd ~/workspace
+git clone https://github.com/agileworks-tw/express-example
+cd express-example
+git checkout practice/005002_answer
+yarn
+```
+
+- ToDoList React Native Sample
+
+```bash
+cd ~/workspace
+git clone https://github.com/kyoyadmoon/RN_Todo_Sample
+cd RN_Todo_Sample
+yarn
+```
+
+### 執行專案 （依照順序執行)
+
+Run API server
+
+```bash
+cd ~/workspace/express-example
+npm start
+```
+
+Run React Native ToDoList
+
+```bash
+cd ~/workspace/RN_Todo_Sample
+# 確認在 feature/add-todo-list branch
+
+# 這會執行 packager server
+react-native start
+
+# 需要另外開一個 terminal
+react-native run-android
+
+# 模擬器連接 3000 port
+adb reverse tcp:3000 tcp:3000
+```
+
+完成後應該可以在 android 看到成功畫面
+
+![todo-list-sample-ready](assets/todo-list-sample-ready.png)
+
+## 參考資料
+
+### API 規格
+
+- get `/api/users/ReactNative/tasks`
+
+```text
+method: 'get'
+```
+
+- create `/api/users/ReactNative/tasks/create`
+
+```text
+method 'post'
+```
+
+- delete `/api/task/${id}`
+
+```text
+method: 'delete'
+```
+
+### 練習解答
+
+下面連結，提供完成練習需要調整的程式內容
+
+解答連結　[https://github.com/agileworks-tw/RN_Todo_Sample/pull/1](https://github.com/agileworks-tw/RN_Todo_Sample/pull/1)

RN-basic-01-network/readme.md

@@ -0,0 +1,11 @@
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+# 網路與 HTTP Request

SUMMARY.md

@@ -33,6 +33,7 @@
   - [網路環境設定](Network/setup.md)
   - [fetch HTTP request](Network/fetch.md)
   - [ToDo List RESTful API 練習](ToDoList/restful-api.md)
+  - [*** ToDo List RESTful API 練習](RN-basic-01-network/RN-basic-01-01-lab-rest-api/readme.md)
 - [第三方套件管理](third-party/index.md)
   - [JavaScript 套件管理方式](third-party/js-module.md)
   - [原生模組整合設定](third-party/native-module.md)