Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Node.js, Objective-C, Micro:bit, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected]

https://oranwind.org/author/archer/
【 Cloud 】將 Python Flask 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge

【 Cloud 】將 Python Flask 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 範例程式 建立 Azure Container Registry 建立 Python Flask 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 Python Flask 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 已存在可正常執行的
Archer • 6 min read
【 Cloud 】將 Node.js Express 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge

【 Cloud 】將 Node.js Express 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 範例程式 建立 Azure Container Registry 建立 Node.js Express 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 Node.js Express 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure
Archer • 6 min read
【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge

【 Cloud 】將 React 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 建立 Azure Container Registry 建立 React 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 React 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 已存在可正常執行的 React 專案 已於電腦端安裝
Archer • 6 min read
【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure App Service
AIoT & Cloud & Edge

【 Cloud 】將 Vue 透過 Azure Container Registry 部署到 Azure App Service

內容 學習目標 前置準備作業 建立 Azure Container Registry 建立 Vue 版 Docker Image 上傳 Docker Image 到 Azure Container Registry 透過 Azure Container Registry 部署 Docker Image 到 Azure App Service 測試與驗證 學習目標 如何將 Vue 透過 Azure Container Registry 部署到 Azure App Service 前置準備作業 已建立 Azure 帳號並能正常登入 已存在可正常執行的 Vue 專案 已於電腦端安裝
Archer • 6 min read
【 Tool 】透過 Docker 建立 React 開發環境
Tools & Solutions

【 Tool 】透過 Docker 建立 React 開發環境

內容 學習目標 前置準備作業 建置開發環境 測試與驗證 學習目標 如何透過 Docker 建立 React 開發環境 前置準備作業 本地端電腦已安裝 Docker 與 Docker Compose 建置開發環境 Step 1. 下載 Node.js 版的 Docker Image 請在終端機輸入下方指令 docker pull node:14.18-alpine3.15 請在終端機輸入下方指令以確認所下載的 Docker Image docker images Step 2. 建立 Dockerfile 與 app 資料夾 請在專案目錄建立名為 Dockerfile 的檔案並輸入下方資訊 在 Dockerfile
Archer • 3 min read
【 Tool 】透過 Docker 建立 Vue 開發環境
Tools & Solutions

【 Tool 】透過 Docker 建立 Vue 開發環境

內容 學習目標 前置準備作業 建置開發環境 測試與驗證 學習目標 如何在本地端電腦透過 Docker 建立 Vue 開發環境 前置準備作業 本地端電腦已安裝 Docker 建置開發環境 Step 1. 下載 Node.js 版的 Docker Image 請在終端機輸入下方指令 docker pull node:14.18.2-buster 請在終端機輸入下方指令以確認所下載的 Docker Image docker images Step 2. 建立 Dockerfile 與 src 資料夾 請在專案目錄建立名為 Dockerfile 的檔案並輸入下方資訊 在 Dockerfile 所有位置建立名為 src 的資料夾
Archer • 4 min read
【 Cloud 】新增使用者到 Azure 訂閱
AIoT & Cloud & Edge

【 Cloud 】新增使用者到 Azure 訂閱

內容 學習目標 前置準備作業 Azure Active Directory 新增帳號與設定 新增使用者到訂閱中 測試與驗證 學習目標 如何新增使用者到 Azure 訂閱 前置準備作業 已建立 Azure 帳號並能正常登入 Azure Active Directory 新增帳號與設定 Step 1. 開啟 Azure Active Directory 在上方搜尋框輸入 active direct 並點選下方 Azure Active Directory 的搜尋結果 Step 2. 點選左側 Users Step 3. 點選上方 + New user Step 4. 輸入相關資訊 點選 Invite user
Archer • 4 min read
【 Cloud 】透過 Logic App 定時啟動 Azure VM
AIoT & Cloud & Edge

【 Cloud 】透過 Logic App 定時啟動 Azure VM

內容 學習目標 前置準備作業 建立與設定 Logic App 設定 Azure VM 測試與驗證 學習目標 如何透過 Logic App 定時啟動 Azure VM 前置準備作業 已建立 Azure 帳號並能正常登入 已於 Azure 建立 Virtual machine 建立與設定 Logic App Step 1. 開啟 Logic App 在上方搜尋框輸入 logic 並點選下方 Logic Apps 的搜尋結果 Step 2. 建立 Logic Apps 點選左上角的 + Create Step 3. 輸入相關資訊
Archer • 5 min read
【 Cloud 】透過 ngrok 接收 Azure Blob Web Hook 觸發事件
AIoT & Cloud & Edge

【 Cloud 】透過 ngrok 接收 Azure Blob Web Hook 觸發事件

學習目標 如何在本地端電腦透過 ngrok 接收 Azure Blob Web Hook 觸發事件 前置準備作業 已建立 Azure 帳號並能正常登入與使用 已於電腦端安裝 Node.js 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 撰寫接收 Azure Blob 觸發事件程式 Step 1. 初始化專案 請在終端機輸入下方指令 npm init -y Step 2. 安裝套件 請在終端機輸入下方指令 npm i express body-parser Step 3. 撰寫程式 請建立名為 index.js 的檔案並輸入下方程式 Step 4.
Archer • 5 min read
【 Cloud 】將 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map ( Node.js 版 )
AIoT & Cloud & Edge

【 Cloud 】將 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map ( Node.js 版 )

學習目標 如何透過 Azure IoT Hub 所接收到的數據透過 Azure Function 存入 Azure Digital Twins 再透過 Azure Event Grid 將警示資訊顯示於 Azure Indoor Map 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 已於電腦端安裝 Node.js 流程 建立 Azure Maps Accounts Service 透過 Creator 建立 Azure Indoor Map 建立 Feature State 透過 Azure
Archer • 21 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Feature State REST API 列出與刪除 Stateset
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Feature State REST API 列出與刪除 Stateset

內容 學習目標 前置準備作業 透過 Web 與 Feature State REST API 列出與刪除 Stateset 學習目標 如何透過 Web 與 Feature State REST API 列出與刪除 Stateset 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Dataset ID，如未取得請參考 https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/ 透過
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Tileset REST API 列出與刪除 Tileset
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Tileset REST API 列出與刪除 Tileset

內容 學習目標 前置準備作業 透過 Web 與 Tileset REST API 列出與刪除 Tileset 學習目標 如何透過 Web 與 Tileset REST API 列出與刪除 Tileset 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Tileset ID，如未取得請參考 https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/ 透過 Web 與
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Dataset REST API 列出與刪除 Dataset
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Dataset REST API 列出與刪除 Dataset

內容 學習目標 前置準備作業 透過 Web 與 Dataset REST API 列出與刪除 Dataset 學習目標 如何透過 Web 與 Dataset REST API 列出與刪除 Dataset 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Dataset ID，如未取得請參考 https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/ 透過 Web 與
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Conversion REST API 列出與刪除 Conversion
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Conversion REST API 列出與刪除 Conversion

內容 學習目標 前置準備作業 透過 Web 與 Conversion REST API 列出與刪除 Conversion 學習目標 如何透過 Web 與 Conversion REST API 列出與刪除 Conversion 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Conversion ID，如未取得請參考 https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/ 透過 Web 與
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Azure Maps Indoor Maps module 顯示室內地圖與狀態
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Azure Maps Indoor Maps module 顯示室內地圖與狀態

內容 學習目標 前置準備作業 透過 Web 與 Azure Maps Indoor Maps module 顯示室內地圖與狀態 學習目標 如何透過 Web 與 Azure Maps Indoor Maps module 顯示室內地圖與狀態 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Tileset ID，如未取得請參考 https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/ 已取得
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Feature State REST API 更新 Stateset
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Feature State REST API 更新 Stateset

內容 學習目標 前置準備作業 透過 Web 與 Feature State REST API 更新 Stateset 學習目標 如何透過 Web 與 Feature State REST API 更新 Stateset 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Stateset ID，如未取得請參考 https://learningsky.io/use-web-ui-feature-stateset-rest-api-to-create-stateset-azure-indoor-map-tools/ 透過
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Feature State REST API 建立 Stateset
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Feature State REST API 建立 Stateset

內容 學習目標 前置準備作業 透過 Web 與 Feature State REST API 建立 Stateset 學習目標 如何透過 Web 與 Feature State REST API 建立 Stateset 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 已取得 Dataset ID，如未取得請參考 https://learningsky.io/use-web-ui-creator-rest-api-to-create-indoor-map-azure-indoor-map-tools/ 透過
Archer • 3 min read
【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Creator REST API 建立 Indoor Map
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Web 與 Creator REST API 建立 Indoor Map

內容 學習目標 前置準備作業 透過 Web 與 Creator 建立 Azure Indoor Map 學習目標 如何透過 Web 與 Creator REST API 建立 Azure Indoor Map 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US，並已建立 Creator。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 透過 Web 與 Creator 建立 Azure Indoor
Archer • 2 min read
【 Tool 】Azure Indoor Map Tools - 透過 Swagger 與 Creator REST API 建立 Indoor Map
AIoT & Cloud & Edge

【 Tool 】Azure Indoor Map Tools - 透過 Swagger 與 Creator REST API 建立 Indoor Map

內容 學習目標 前置準備作業 透過 Swagger 與 Azure Map Creator 建立 Indoor Map 透過 Web 顯示 Azure Indoor Map 學習目標 如何透過 Swagger 與 Creator REST API 建立 Azure Indoor Map 前置準備作業 已建立 Azure 帳號並能正常登入與使用。 已於 Azure 建立 Azure Maps Account，其 Location 為 East US。 已於電腦端安裝瀏覽器，本範例使用 Google Chrome。 透過 Swagger
Archer • 10 min read
【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure CLI 與 Portal
AIoT & Cloud & Edge

【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure CLI 與 Portal

內容 學習目標 前置準備作業 流程 建立與設定 Twin Hub 設定 Azure Digital Twin 的 Endpoint 與 Event route 建立與設定 TSI Hub 建立讀取 Twin Hub 資訊與傳送資訊到 TSI Hub 的 Azure Functions 設定身分識別 建立與設定 Time Series Insights 執行與驗證 學習目標 如何使用 Azure CLI 與 Portal 並透過 Azure Event Hub 與 Azure Function 將 Azure Digital
Archer • 13 min read
【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure Portal
AIoT & Cloud & Edge

【 Cloud 】透過 Azure Event Hub 與 Azure Function 將 Azure Digital Twins 更新資訊顯示於 Time Series Insights - 使用 Azure Portal

內容 學習目標 前置準備作業 流程 建立與設定 Twin Event Hub 設定 Azure Digital Twin 的 Endpoint 與 Event route 建立與設定 TSI Event Hub 建立讀取 Twin Hub 資訊與傳送資訊到 TSI Hub 的 Azure Functions 設定身分識別 建立與設定 Time Series Insights 執行與驗證 學習目標 如何使用 Azure Portal 並透過 Azure Event Hub 與 Azure Function 將 Azure Digital
Archer • 14 min read
【 Cloud 】使用 Node.js 透過 Azure Event Hub 傳送與接收訊息 - Consumer & Producer
AIoT & Cloud & Edge

【 Cloud 】使用 Node.js 透過 Azure Event Hub 傳送與接收訊息 - Consumer & Producer

內容 學習目標 前置準備作業 流程 建立與設定 Azure Event Hub 撰寫 Consumer Client 程式 撰寫 Producer Client 程式 測試驗證 學習目標 如何使用 Node.js 透過 Azure Event Hub 傳送與接收訊息 前置準備作業 已建立 Azure 帳號並能正常登入 已於電腦端安裝 Node.js 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 流程 建立與設定 Azure Event Hub 取得 Event Hub 名稱 取得 Consumer
Archer • 5 min read
【 Cloud 】將 Vue 部署到 GitHub Pages
AIoT & Cloud & Edge

【 Cloud 】將 Vue 部署到 GitHub Pages

內容 學習目標 前置準備作業 流程 部署 Vue App 到 GitHub 設定 GitHub Pages 驗證部署結果 學習目標 如何將 Vue 部署到 GitHub Pages 前置準備作業 已建立 GitHub 帳號並能正常登入 一個在本地端電腦可執行的 Vue App 已於電腦端安裝 IDE，本範例使用 Visual Studio Code 流程 在本地端電腦建立 hello-vue-app 的 Vue 專案並設定 Config 專案打包 將打包完的專案 Commit 到 GitHub 上所建立名為 hello-vue-app 的 Repository 設定 GitHub
Archer • 3 min read
【 Cloud 】透過 Postman 操作 Azure Digital Twins - Query API
AIoT & Cloud & Edge

【 Cloud 】透過 Postman 操作 Azure Digital Twins - Query API

內容 學習目標 前置準備作業 Twin Graph 上傳 Device DTDL 與建立 Twin 查詢所有 Twin 查詢 Temperature 大於 35 度的 Twin 學習目標 如何透過 Postman 操作 Azure Digital Twins - Query API 前置準備作業 已建立 Azure 帳號並能正常登入與使用 已完成建立與設定 Azure Digital Twins、Azure Active Directory ( Azure AD ) Ref https://learningsky.io/azure-digital-twins-authenticates-using-azure-ad-security-tokens-based-on-oauth/ 已於電腦端安裝 Postman 下載網址 https:
Archer • 3 min read