/ Azure

【 Node.js 】透過 Azure Functions 探索 Azure Cosmos DB - 使用 Windows OS & Web UI

內容

  • 學習目標
  • 前置準備作業
  • 程式與軟體
  • 設定 Azure Cosmos DB
  • 設定 Azure Functions
  • 透過 Postman 測試

學習目標

  • Integrating Serverless Architecture - 透過 Azure FunctionsNode.js 操作 Azure Cosmos DB
  • 示意圖
    -----2019-09-09---3.07.36

前置準備作業


程式與軟體

  • Node.js
  • Postman

設定 Azure Cosmos DB

Step 1. 登入到 Azure

  • 網址為 https://portal.azure.com

-----2019-09-09---3.12.35


Step 2. 建立 Azure Cosmos DB

  • 點選左邊 Azure Cosmos DB

    -----2019-09-09---3.12.35---

  • 點選下方 Create Azure Cosmos DB account

    -----2019-09-09---3.16.22

  • 設定 Account 資訊

    • Resource Group 欄位請輸入唯一識別的名稱,可使用已存在的或新建一個資源群組

    • Account Name 欄位請輸入唯一識別的名稱

    • API 欄位請選擇 Core(SQL)

    • Location 欄位請選擇所要使用服務的所在地

      -----2019-09-09---3.18.06

    • 輸入完上方的資訊請點選下方的 Review + create

      -----2019-09-09---3.25.24

    • 點選下方的 Create

      -----2019-09-09---3.26.59

    • 建置過程

      -----2019-09-09---3.28.16

    • 建置完成

      -----2019-09-09---3.33.54

    • 點選下方 Go to resource

      -----2019-09-09---3.33.54---


Step 3. 建立測試資料

  • 點選左側 Data Explorer

    -----2019-09-09---3.37.31

  • 點選上方 New Container

    -----2019-09-09---3.43.26

  • 輸入 Container 資訊

    • Database id 欄位請輸入 Company

    • Container id 欄位請輸入 Users

    • Partition key 欄位請輸入 /id

      -----2019-09-09---3.51.17

    • 點選右下角 OK

      -----2019-09-09---3.55.11

    • 點選 UsersItemsNew Item

      -----2019-09-09---3.56.50

    • 分別建立 3 筆紀錄於下圖紅色框

      每輸入完 1 筆資訊後請點選上方的 Save 儲存資料

      -----2019-09-09---4.00.10

      • 第 1 筆

        {
          "id": "1",
          "name": "Archer",
          "isEmployee": true
        }
        
      • 第 2 筆

        {
          "id": "2",
          "name": "Mosconi",
          "isEmployee": false
        }
        
      • 第 3 筆

        {
          "id": "3",
          "name": "Eason",
          "isEmployee": true
        }
        
    • 建立完成後的畫面

      • 3 筆資料會出現於紅色框

        -----2019-09-09---4.12.45


設定 Azure Functions

Step 1. 開啟 Azure Functions 服務

  • 在上方輸入框輸入 function app

    -----2019-09-09---4.15.04

  • 點選 Function App

    -----2019-09-09---4.16.53


Step 2. 相關 Function 程式說明

  • 所要建立的 Function 說明
Function Name Method Route Comment
GetAllUser Get /users 取得所有使用者
PostUser Post /user 新增 1 位使用者
UpdateUser Put /user/{id} 透過 id 來更新使用者
GetOneUser Get /user/{id} 透過 id 來取得使用者

Step 3. 建立 Function Apps 程式

  • 點選下方 Create Function App

    -----2019-09-09---4.18.34

  • 輸入 Function App 相關資訊

    • App name 欄位請輸入 cosmosdb-operate

    • Resource Group 欄位可以一個新的資源群組或使用存在的

    • OS 欄位請選擇 Windows,以使用 Web UI 進行編輯動作

    • Location 欄位請選擇所要使用何處的服務

    • Runtime Stack 欄位請選擇 Node.js

      -----2019-09-09---4.35.09

    • 當上方的資訊輸入完成後請點選下方的 Create

      -----2019-09-09---4.46.23

    • 建立完成畫面

      -----2019-09-09---4.56.28

    • 點選 cosmosdb-operate

      -----2019-09-09---4.56.28---


Step 4. 建立 GetAllUser Function 程式

  • 說明

    Function Name Method Route Comment
    GetAllUser Get /users 取得所有使用者
  • 點選右方 New function

    -----2019-09-10---8.06.19

  • 點選 In-portal

    -----2019-09-10---8.07.46

  • 點選下方 Continue

    -----2019-09-10---8.09.14

  • 點選 More templates...

    -----2019-09-10---8.10.40

  • 點選 Finish and view templates

    -----2019-09-10---8.43.53

  • 點選 HTTP trigger

    -----2019-09-10---8.48.58

  • 輸入 Function 資訊

    • Name 欄位請輸入 GetAllUser

    • Authorization level 欄位選擇 Anonymous

      -----2019-09-10---8.50.11

    • 點選 Create

      -----2019-09-10---8.56.28---

    • Create 完成畫面

      -----2019-09-10---9.05.26

    • 修改設定

      • 點選 Integrate

        -----2019-09-10---9.14.07

      • Trigger 部份

        • 選擇右上角 Advanced editor
          • methods 中只保留 get

          • 新增 , "route": "users"

            -----2019-09-10---11.10.33

          • 點選 Save

            存檔完成後請再次確認上步驟中的修改有成功

            -----2019-09-10---11.11.36

      • Inputs 部份

        • 點選 New Input

          -----2019-09-10---9.24.18

        • 點選 Azure Cosmos DB ➙ 點選 Select

          -----2019-09-10---9.26.23

        • 安裝 Cosmos Extension
          -----2019-09-10---9.29.00

          -----2019-09-10---9.29.58

        • 輸入 Cosmos 相關資訊

          • Database name 欄位輸入 Company

          • Collection Name 欄位輸入 Users

          • Azure Cosmos DB account connection 欄位點選 New ➙ 點選 Azure Cosmos DB account ➙ 點選 Select

            -----2019-09-10---9.32.44

        • 點選 Save

          -----2019-09-10---9.39.32

        • 設定完成畫面

          -----2019-09-10---9.41.07

    • 輸入 GetAllUser 程式碼

      • 點選左側 GetAllUser

        -----2019-09-10---9.42.45

      • 在紅色框處輸入下方程式

        -----2019-09-10---9.44.26

      • 點選 ► Save and run

        -----2019-09-10---9.54.20

      • 點選 </> Get function URL 取得連結

        -----2019-09-10---9.56.57

        -----2019-09-10---11.16.48

      • 線上測試

        • 點選右側 Test

          -----2019-09-10---9.58.56

        • 輸入相關資訊

          • HTTP method 欄位選擇 Get

          • 再點選 ► Run

            -----2019-09-10---10.00.40

          • 取得所有使用者資訊

            -----2019-09-10---10.03.07


Step 5. 建立 PostUser Function 程式

  • 說明

    Function Name Method Route Comment
    PostUser Post /user 新增 1 位使用者
  • 點選 Functions 右方的 +

    -----2019-09-10---1.05.53

  • 點選 HTTP trigger

    -----2019-09-10---1.13.57

  • 輸入 Function 資訊

    • Name 欄位請輸入 PostUser

    • Authorization level 欄位選擇 Anonymous

      -----2019-09-10---1.16.53

    • 點選 Create

      -----2019-09-10---1.17.52

    • Create 完成畫面

      -----2019-09-10---1.19.50

    • 修改設定

      • 點選 Integrate

        -----2019-09-10---1.19.50---

      • Trigger 部份

        • 選擇右上角 Advanced editor
          • methods 中只保留 post

          • 新增 , "route": "user"

            -----2019-09-10---1.22.05

            -----2019-09-10---1.25.08

          • 點選 Save

            存檔完成後請再次確認上步驟中的修改有成功

            -----2019-09-10---1.26.19

            -----2019-09-10---1.27.40

      • Outputs 部份

        • 點選 + New Output

          -----2019-09-10---1.29.07

        • 點選 Azure Cosmos DB ➙ 點選 Select

          -----2019-09-10---1.30.56

        • 輸入 Cosmos 相關資訊

          • Database name 欄位輸入 Company

          • Collection Name 欄位輸入 Users

          • If true, creates the Azure Cosmos DB database and collection 欄位請勾選

            -----2019-09-10---1.31.41

        • 點選 Save

          -----2019-09-10---1.33.53

        • 設定完成畫面

          -----2019-09-10---1.34.55

    • 輸入 PostUser 程式碼

      • 點選左側 PostUser

        -----2019-09-10---1.35.29

      • 在紅色框處輸入下方程式

        -----2019-09-10---1.36.57

        -----2019-09-10---3.05.41

      • 點選 ► Save and run

        -----2019-09-10---3.05.41---

      • 點選 </> Get function URL 取得連結

        -----2019-09-10---3.07.40

        -----2019-09-10---2.57.59

      • 線上測試

        • 點選右側 Test

          -----2019-09-10---3.08.27

        • 輸入相關資訊

          • HTTP method 欄位選擇 POST

          • Request body 欄位請輸入下方使用者資訊

            {
                "id": "6",
                "name": "test",
                "isEmployee": false
            }
            

            -----2019-09-10---3.09.29

          • 再點選 ► Run

            -----2019-09-10---3.10.38

          • 寫入使用者資訊

            • 點選左側 Azure Cosmos DB

              -----2019-09-10---3.11.32

            • 點選所建立的名稱

              -----2019-09-10---2.51.30

            • 點選 Data Explorer

              -----2019-09-10---2.52.16

            • 點選 Users ➙ 點選 Items6

              -----2019-09-10---3.12.39


Step 6. 建立 UpdateUser Function 程式

  • 說明

    Function Name Method Route Comment
    UpdateUser Put /user/{id} 透過 id 來更新使用者
  • 點選 Functions 右方的 +

    -----2019-09-10---3.27.23

  • 點選 HTTP trigger

    -----2019-09-10---3.29.17

  • 輸入 Function 資訊

    • Name 欄位請輸入 UpdateUser

    • Authorization level 欄位選擇 Anonymous

      -----2019-09-10---3.30.13

    • 點選 Create

      -----2019-09-10---3.31.10

    • Create 完成畫面

      -----2019-09-10---3.32.17

    • 修改設定

      • 點選 Integrate

        -----2019-09-10---3.32.17---

      • Trigger 部份

        • 選擇右上角 Advanced editor
          • methods 中只保留 put

          • 新增 , "route": "user/{id}"

            -----2019-09-10---3.33.28

            -----2019-09-10---3.35.00

          • 點選 Save

            存檔完成後請再次確認上步驟中的修改有成功

            -----2019-09-10---3.36.25

            -----2019-09-10---3.37.36

      • Outputs 部份

        • 點選 + New Output

          -----2019-09-10---3.37.59

        • 點選 Azure Cosmos DB ➙ 點選 Select

          -----2019-09-10---3.38.53

        • 輸入 Cosmos DB 相關資訊

          • Database name 欄位輸入 Company

          • Collection Name 欄位輸入 Users

          • If true, creates the Azure Cosmos DB database and collection 欄位請勾選

            -----2019-09-10---3.40.00

        • 點選 Save

          存檔完成後請再次確認上步驟中的修改有成功

          -----2019-09-10---3.41.09

        • 設定完成畫面

          -----2019-09-10---3.42.05

      • Inputs 部份

        • 點選 + New Input

          -----2019-09-10---5.00.12

        • 點選 Azure Cosmos DB ➙ 點選 Select

          -----2019-09-10---5.01.42

        • 輸入 Cosmos DB 相關資訊

          • Database name 欄位輸入 Company

          • Collection Name 欄位輸入 Users

            -----2019-09-10---5.03.00

        • 點選 Save

          存檔完成後請再次確認上步驟中的修改有成功

          -----2019-09-10---5.04.05

        • 設定完成畫面

          -----2019-09-10---5.05.43

    • 輸入 UpdateUser 程式碼

      • 點選左側 UpdateUser

        -----2019-09-10---3.42.05---

      • 在紅色框處輸入下方程式

        -----2019-09-10---3.43.16

        -----2019-09-10---5.06.35

      • 點選 ► Save and run

        -----2019-09-10---5.06.35---

      • 點選 </> Get function URL 取得連結

        -----2019-09-10---5.08.01

        -----2019-09-10---5.09.10

      • 線上測試

        • 點選右側 Test

          -----2019-09-10---4.04.14

        • 輸入相關資訊

          • HTTP method 欄位選擇 PUT

          • id 欄位輸入 6

          • Request body 欄位請輸入下方使用者資訊

            {
                "name": "test-from-azure-ui",
                "isEmployee": true
            }
            

            -----2019-09-10---5.09.40

            -----2019-09-10---5.11.24

          • 再點選 ► Run

            -----2019-09-10---5.11.24---

          • 寫入使用者資訊

            • 點選左側 Azure Cosmos DB

              -----2019-09-10---5.13.15

            • 點選所建立的名稱

              -----2019-09-10---2.51.30

            • 點選 Data Explorer

              -----2019-09-10---2.52.16

            • 點選 Users ➙ 點選 Items6

              -----2019-09-10---5.15.16


Step 7. 建立 GetOneUser Function 程式

  • 說明

    Function Name Method Route Comment
    GetOneUser Get /user/{id} 透過 id 來取得使用者
  • 點選 Functions 右方的 +

    -----2019-09-10---6.08.31

  • 點選 HTTP trigger

    -----2019-09-10---6.13.43

  • 輸入 Function 資訊

    • Name 欄位請輸入 GetOneUser

    • Authorization level 欄位選擇 Anonymous

      -----2019-09-10---6.15.01

    • 點選 Create

      -----2019-09-10---6.16.04

    • Create 完成畫面

      -----2019-09-10---6.17.37

    • 修改設定

      • 點選 Integrate

        -----2019-09-10---6.17.37---

      • Trigger 部份

        • 選擇右上角 Advanced editor
          • methods 中只保留 get

          • 新增 , "route": "user/{id}"

            -----2019-09-10---6.20.22

            -----2019-09-10---6.21.42

          • 點選 Save

            存檔完成後請再次確認上步驟中的修改有成功

            -----2019-09-10---6.22.49

            -----2019-09-10---6.23.48

      • Inputs 部份

        • 點選 New Input

          -----2019-09-10---6.24.28

        • 點選 Azure Cosmos DB ➙ 點選 Select

          -----2019-09-10---6.25.42

        • 輸入 Cosmos DB 相關資訊

          • Database name 欄位輸入 Company

          • Collection Name 欄位輸入 Users

            -----2019-09-10---6.26.30

            -----2019-09-10---6.28.07

        • 點選 Save

          -----2019-09-10---6.28.07---

        • 設定完成畫面

          -----2019-09-10---6.29.21

    • 輸入 GetOneUser 程式碼

      • 點選左側 GetOneUser

        -----2019-09-10---6.30.11

      • 在紅色框處輸入下方程式

        -----2019-09-10---6.33.39

        -----2019-09-10---6.42.00

      • 點選 ► Save and run

        -----2019-09-10---6.42.00---

      • 點選 </> Get function URL 取得連結

        -----2019-09-10---6.43.11

        -----2019-09-10---6.44.06

      • 線上測試

        • 點選右側 Test

          -----2019-09-10---6.44.31

        • 輸入相關資訊

          • HTTP method 欄位選擇 Get

          • id 欄位請輸入 6

            -----2019-09-10---6.38.47

          • 再點選 ► Run

            -----2019-09-10---6.40.16

          • 取得特定使用者資訊

            -----2019-09-10---6.45.41


透過 Postman 測試

Step 1. 在 Chrome 安裝 Postman


Step 2. 啟動 Postman

  • 點選 Chrome 左上角 應用程式

    _____2019_04_18___5_21_38-1555579346705

  • 點選 Postman

    -----2019-09-10---10.10.24

  • Postman 開啟畫面

    _____2019_04_18___5_29_19-1555579789696


Step 3. 測試 GetAllUser

  • API 資訊
Function Name Method Route Comment
GetAllUser Get /users 取得所有使用者
  • 使用 Postman 進行測試
    • Method 選擇 GET

    • Enter request URL 欄位為 Step 4. 建立 GetAllUser Function 程式 中的 </> Get function URL 取得連結

      -----2019-09-10---11.28.38

    • 點選 Send

      -----2019-09-10---11.27.32

    • 取得使用者資訊成功

      -----2019-09-10---11.30.01


Step 4. 測試 PostUser

  • API 資訊
Function Name Method Route Comment
PostUser Post /user 新增 1 位使用者
  • 使用 Postman 進行測試
    • Method 選擇 POST

    • Enter request URL 欄位為 Step 5. 建立 PostUser Function 程式 中的 </> Get function URL 取得連結

      -----2019-09-10---11.28.38

      -----2019-09-10---3.17.17

    • 點選 Body ➙ 點選 raw 再輸入下方資訊

      {
        "id": "7",
        "name": "test-Postman",
        "isEmployee": true
      }
      

      -----2019-09-10---3.18.43

      -----2019-09-10---3.20.31

    • 點選 Send

      -----2019-09-10---3.20.31---

      -----2019-09-10---3.21.53

    • 新增使用者資訊成功

      -----2019-09-10---3.22.20


Step 5. 測試 UpdateUser

  • API 資訊
Function Name Method Route Comment
UpdateUser Put /user/{id} 透過 id 來更新使用者
  • 使用 Postman 進行測試
    • Method 選擇 PUT

    • Enter request URL 欄位為 Step 6. 建立 GetAllUser Function 程式 中的 </> Get function URL 取得連結

      • URL 在加上 6,以代表修改 ID 為 6 的使用者

      -----2019-09-10---11.28.38

      -----2019-09-10---5.18.25

    • 點選 Body ➙ 點選 raw 再輸入下方資訊

      {
         "name": "test-from-Postman",
         "isEmployee": true
      }
      

      -----2019-09-10---5.21.10

      -----2019-09-10---5.19.15

    • 點選 Send

      -----2019-09-10---5.22.23

      -----2019-09-10---5.23.27

    • 修改使用者資訊成功

      -----2019-09-10---5.23.56


Step 6. 測試 GetOneUser

  • API 資訊
Function Name Method Route Comment
GetOneUser Get /user/{id} 透過 id 來取得使用者
  • 使用 Postman 進行測試
    • Method 選擇 GET

    • Enter request URL 欄位為 Step 7. 建立 GetAllUser Function 程式 中的 </> Get function URL 取得連結

      • URL 在加上 6,以代表取得 ID 為 6 的使用者

      -----2019-09-10---11.28.38

      -----2019-09-10---6.49.21

    • 點選 Send

      -----2019-09-10---6.49.21---

    • 取得特定使用者資訊成功

      -----2019-09-10---6.51.49


GitHub
List of blogs
Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Objective-C, Micro:bit, LinkIt 7697, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected] https://oranwind.org/author/archer/

Read More