diff --git a/RN-basic-01-network/RN-basic-01-01-lab-rest-api/assets/todo-list-sample-ready.png b/RN-basic-01-network/RN-basic-01-01-lab-rest-api/assets/todo-list-sample-ready.png new file mode 100644 index 0000000..7fc862e Binary files /dev/null and b/RN-basic-01-network/RN-basic-01-01-lab-rest-api/assets/todo-list-sample-ready.png differ diff --git a/RN-basic-01-network/RN-basic-01-01-lab-rest-api/note.md b/RN-basic-01-network/RN-basic-01-01-lab-rest-api/note.md new file mode 100644 index 0000000..1e7086a --- /dev/null +++ b/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 + +練習： 練習步驟說明 + +`## 練習前設置` + +`## 參考資料` + +附上在章節或練習進行中所需用到的資料或是指令 diff --git a/RN-basic-01-network/RN-basic-01-01-lab-rest-api/readme.md b/RN-basic-01-network/RN-basic-01-01-lab-rest-api/readme.md new file mode 100644 index 0000000..a29b54e --- /dev/null +++ b/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) diff --git a/RN-basic-01-network/readme.md b/RN-basic-01-network/readme.md new file mode 100644 index 0000000..f97fda1 --- /dev/null +++ b/RN-basic-01-network/readme.md @@ -0,0 +1,11 @@ +
+
+
+
+
+
+
+
+
+
+# 網路與 HTTP Request \ No newline at end of file diff --git a/SUMMARY.md b/SUMMARY.md index a0da9a7..0c5128f 100644 --- a/SUMMARY.md +++ b/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)