IoT for Beginners 测验应用实战从本地开发到 Azure Static Web Apps 一键部署【免费下载链接】IoT-For-Beginners12 Weeks, 24 Lessons, IoT for All!项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners本篇技术指南围绕开源课程仓库GitHub_Trending/io/IoT-For-Beginners中的测验应用quiz-app展开系统讲解该应用在 IoT for Beginners 课程中的定位、本地开发环境的搭建、核心代码结构以及如何通过 Azure Static Web Apps 与 GitHub Actions 实现从提交代码到线上发布的完整 CI/CD 流程。读完本文你将掌握一套 Vue 测验应用的本地运行命令、构建产物说明、Azure 门户配置要点以及可直接复用的静态站点部署工作流。应用定位课程配套的课前与课后测验在 quiz-app/README.md 中明确说明这套测验应用承载的是IoT for Beginners 课程的课前pre-lecture与课后post-lecture测验是整个 12 周、24 课课程学习闭环的重要组成部分。学习者可以在每节课开始前测试已有认知在课程结束后检验学习成果形成测验—学习—再测验的反馈路径。从源码看测验题目以 JSON 形式集中存放在 quiz-app/src/assets/translations/ 目录下。以 en.json 为例每道测验固定包含 3 个问题如物联网中的 I 代表什么到 2020 年底在用的物联网设备估计数量是多少智能手机是物联网设备吗每题提供若干答案选项并通过isCorrect字段标记正确答案。题目数据通过vue-i18n的语言包机制加载实现了内容与逻辑的完全解耦——新增或修改题目只需编辑 JSON无需改动组件代码。项目技术栈与代码结构先看仓库中的工程配置文件 quiz-app/package.json可以确认该应用基于Vue CLI 5 Vue 3构建并集成了以下关键依赖vue^3.5.18核心框架vue-router^3.4.9前端路由负责测验页面的 URL 分发vue-i18n^8.22.2国际化支撑多语言测验内容vue/cli-service~5.0.8提供serve/build/lint三条核心脚本命令。主要源码文件及其职责如下文件路径职责src/main.js应用入口初始化 Vue 实例、路由与 vue-i18n默认语言设为enfallback 语言同为ensrc/router/index.js路由表定义/首页、/quiz/:id测验页、兜底 404 页采用 history 模式src/views/Home.vue首页遍历quizzes数据生成测验入口链接列表src/components/Quiz.vue核心测验组件逐题渲染题干与选项按钮处理答题逻辑src/assets/translations/多语言题目与文案ar、bn、en、zh-cn 等通过 index.js 汇总注册public/routes.jsonAzure Static Web App 的 SPA 路由回退规则babel.config.jsBabel 预设配置vue/cli-plugin-babel/preset答题逻辑的源码级解析在 Quiz.vue 的handleAnswerClick方法中可以看到完整的答题判定逻辑点击任意选项按钮时把该选项的isCorrect值传入方法若回答正确isCorrect truecurrentQuestion自增进入下一题每个测验固定 3 题当nextQuestion 3时继续否则将complete置为true显示完成提示若回答错误将error置为true渲染Sorry, try again提示并停留在当前题目等待学习者重新作答。这一答错不跳题、必须全对才能完成的设计与课程测验巩固理解的定位高度一致保证学习者真正掌握每个知识点后才算过关。测验页通过路由参数:id定位具体测验并支持?loc查询参数指定语言多语言适配能力一目了然。本地开发四步跑通测验应用按 quiz-app/README.md 的Project setup一节在仓库根目录的quiz-app目录下依次执行即可完成本地开发闭环。1. 安装依赖npm install该命令依据package-lock.json锁定版本安装全部依赖core-js、vue、vue-i18n、vue-router以及 Vue CLI 系列开发依赖是后续所有命令的前置条件。2. 开发模式编译与热重载npm run serve对应vue-cli-service serve启动本地开发服务器并开启热模块替换HMR。修改src/下的组件、路由或 JSON 语言包后页面会自动刷新方便快速迭代题目内容与界面交互。默认监听http://localhost:8080浏览器打开后即可看到首页列出全部测验链接。3. 生产环境编译与压缩npm run build对应vue-cli-service build对应用进行生产构建与代码压缩默认输出到dist/目录。该目录即后续部署到 Azure Static Web Apps 时的Output Location。构建产物为纯静态文件HTML、JS、CSS可直接托管在任何静态站点服务上。4. 代码检查与自动修复npm run lint对应vue-cli-service lint依据 package.json 中的eslintConfig继承plugin:vue/essential与eslint:recommended使用babel-eslint解析对源码进行风格与规范检查并自动修复可修复的问题。browserslist配置 1%、last 2 versions、not dead则决定了构建时 Babel 的转译目标浏览器范围。注README 中提到的 Vue CLI Configuration Reference 为官方外部文档如需自定义构建配置可直接修改仓库内的 [vue.config.js 相关配置]当前仓库未内置该文件采用 Vue CLI 默认配置或查看vue/cli-service的默认行为。部署到 Azure Static Web Apps逐步指南README 的后半部分给出了从 GitHub 仓库到 Azure 静态站点上线的完整流程其本质是GitHub 源码 Azure Static Web Apps 托管 GitHub Actions 自动构建部署三者联动。下面按步骤展开并补充源码层面的对应关系。第 1 步Fork GitHub 仓库将整个IoT-For-Beginners仓库 Fork 到自己的 GitHub 账号下。Azure Static Web Apps 需要从 GitHub 拉取源码并自动注入部署工作流因此静态站点代码必须托管在你的 GitHub 仓库中。测验应用的源码位于仓库的quiz-app/目录后续所有位置配置均以该目录为基准。第 2 步创建 Azure Static Web App 资源注册/登录 Azure 账号进入 Azure 门户点击Create a resource搜索Static Web App点击Create进入资源配置向导。第 3 步配置 Static Web App 各项参数Basics基础信息Subscription选择你的 Azure 订阅Resource Group新建或复用现有资源组Name为静态 Web 应用命名该名称会体现在最终的访问 URL 中Region选择离目标用户最近的区域以降低访问延迟。Deployment Details部署信息Source选择 GitHubGitHub Account授权 Azure 访问你的 GitHub 账号Organization选择 Fork 后的仓库所属组织Repository选择包含静态 Web 应用代码的仓库即 Fork 后的IoT-For-BeginnersBranch选择要部署的分支仓库主分支为main。Build Details构建信息——与仓库源码严格对应配置项推荐值说明Build PresetsVue本应用由 Vue 构建选择该预设后 Azure 会使用相应的 Node 构建流程App Locationquiz-app应用代码所在目录即 package.json 所在位置API Location留空本应用无后端 API此项可选Output Locationdistnpm run build的产物目录与 Vue CLI 默认输出一致第 4 步Review 并创建核对上述设置后点击Create。Azure 会自动创建所需的托管资源并在你的 GitHub 仓库中生成一个名为.github/workflows/azure-static-web-apps-name.yml的 Actions 工作流文件。该文件是后续每次提交自动构建、自动发布的调度中枢。第 5 步理解自动生成的 GitHub Actions 工作流README 给出了该工作流文件的典型示例完整内容如下name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: upload app_location: quiz-app #App source code path api_location: API source code path optional output_location: dist #Built app content directory - optional对关键字段的说明on.push.branches: [main]每次向main分支推送代码都会触发构建与部署on.pull_requestPR 的打开、同步、重开、关闭等事件也会触发工作流便于在合并前预览站点Azure/static-web-apps-deployv1官方部署 Action负责执行构建并上传产物azure_static_web_apps_api_token部署令牌由 Azure 创建资源时自动注入到仓库 Secrets 中repo_token: ${{ secrets.GITHUB_TOKEN }}GitHub 自动生成的仓库级令牌供工作流访问仓库action: upload上传模式PR 关闭时工作流会自动执行清理动作app_location: quiz-app与门户中的 App Location 一致指向源码目录output_location: dist构建产物目录对应 package.json 中npm run build的输出。值得留意的是仓库内已为 SPA 路由准备了 public/routes.json其中定义了一条/*→/index.html的兜底路由规则。这意味着即便用户直接访问/quiz/1这类深层路径Azure Static Web Apps 也会回退到index.html交由前端路由history 模式接管渲染避免刷新页面出现 404。该文件会被原样复制到dist/产物中是静态站点正常工作的重要一环。第 6 步监控部署状态回到 GitHub 仓库的Actions标签页可以看到刚触发的工作流正在运行其执行内容即第 5 步中的构建与部署 Job工作流运行成功后访问 Azure 提供的 URL 即可看到线上版本的测验应用若配置了 PR 预览每次 PR 也会生成独立的临时预览地址。多语言支持测验内容的一处配置、多语言呈现虽然 README 本身未展开多语言细节但源码充分体现了应用的多语言设计vue-i18n在 main.js 中初始化语言包由 src/assets/translations/index.js 统一汇总目前已内置阿拉伯语ar、孟加拉语bn、英语en与简体中文zh-cn四种语言这与仓库translations/与translated_images/目录下数十种语言的课程内容翻译体系相呼应。测验题目、完成提示Congratulations, you completed the quiz!与错误提示Sorry, try again均以语言包键值形式组织在 Quiz.vue 中通过$t()函数取用天然支持按需扩展更多语言。常见问题与排错思路本地npm run serve后页面空白优先检查是否已执行npm install并确认 Node 版本与 Vue CLI 5 兼容部署后刷新深层路径如/quiz/1出现 404确认dist/产物中包含routes.json该文件是 SPA 回退规则生效的前提推送代码后 Actions 工作流未触发检查工作流文件是否位于分支根目录的.github/workflows/下以及触发分支名是否与on.push.branches一致构建产物与本地不一致确保门户/工作流中的app_location指向quiz-app、output_location为dist两者缺一不可。总结本文完整覆盖了 IoT for Beginners 课程测验应用的开发与上线链路从 quiz-app/README.md 的本地四步命令到 Vue 3 vue-i18n vue-router 的源码结构再到 Azure Static Web Apps 门户配置与 GitHub Actions 工作流的三段式部署。核心要点可归纳为本地以npm run serve开发、npm run build产出dist/云端以app_locationquiz-app、output_locationdist完成构建对齐线上通过routes.json保证 SPA 路由回退。掌握了这套流程你既能快速在本地体验与定制测验内容也能在每次提交代码后自动获得可公开访问的线上版本为课程学习或社区复刻提供开箱即用的测验基础设施。【免费下载链接】IoT-For-Beginners12 Weeks, 24 Lessons, IoT for All!项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
IoT for Beginners 测验应用实战：从本地开发到 Azure Static Web Apps 一键部署
IoT for Beginners 测验应用实战从本地开发到 Azure Static Web Apps 一键部署【免费下载链接】IoT-For-Beginners12 Weeks, 24 Lessons, IoT for All!项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners本篇技术指南围绕开源课程仓库GitHub_Trending/io/IoT-For-Beginners中的测验应用quiz-app展开系统讲解该应用在 IoT for Beginners 课程中的定位、本地开发环境的搭建、核心代码结构以及如何通过 Azure Static Web Apps 与 GitHub Actions 实现从提交代码到线上发布的完整 CI/CD 流程。读完本文你将掌握一套 Vue 测验应用的本地运行命令、构建产物说明、Azure 门户配置要点以及可直接复用的静态站点部署工作流。应用定位课程配套的课前与课后测验在 quiz-app/README.md 中明确说明这套测验应用承载的是IoT for Beginners 课程的课前pre-lecture与课后post-lecture测验是整个 12 周、24 课课程学习闭环的重要组成部分。学习者可以在每节课开始前测试已有认知在课程结束后检验学习成果形成测验—学习—再测验的反馈路径。从源码看测验题目以 JSON 形式集中存放在 quiz-app/src/assets/translations/ 目录下。以 en.json 为例每道测验固定包含 3 个问题如物联网中的 I 代表什么到 2020 年底在用的物联网设备估计数量是多少智能手机是物联网设备吗每题提供若干答案选项并通过isCorrect字段标记正确答案。题目数据通过vue-i18n的语言包机制加载实现了内容与逻辑的完全解耦——新增或修改题目只需编辑 JSON无需改动组件代码。项目技术栈与代码结构先看仓库中的工程配置文件 quiz-app/package.json可以确认该应用基于Vue CLI 5 Vue 3构建并集成了以下关键依赖vue^3.5.18核心框架vue-router^3.4.9前端路由负责测验页面的 URL 分发vue-i18n^8.22.2国际化支撑多语言测验内容vue/cli-service~5.0.8提供serve/build/lint三条核心脚本命令。主要源码文件及其职责如下文件路径职责src/main.js应用入口初始化 Vue 实例、路由与 vue-i18n默认语言设为enfallback 语言同为ensrc/router/index.js路由表定义/首页、/quiz/:id测验页、兜底 404 页采用 history 模式src/views/Home.vue首页遍历quizzes数据生成测验入口链接列表src/components/Quiz.vue核心测验组件逐题渲染题干与选项按钮处理答题逻辑src/assets/translations/多语言题目与文案ar、bn、en、zh-cn 等通过 index.js 汇总注册public/routes.jsonAzure Static Web App 的 SPA 路由回退规则babel.config.jsBabel 预设配置vue/cli-plugin-babel/preset答题逻辑的源码级解析在 Quiz.vue 的handleAnswerClick方法中可以看到完整的答题判定逻辑点击任意选项按钮时把该选项的isCorrect值传入方法若回答正确isCorrect truecurrentQuestion自增进入下一题每个测验固定 3 题当nextQuestion 3时继续否则将complete置为true显示完成提示若回答错误将error置为true渲染Sorry, try again提示并停留在当前题目等待学习者重新作答。这一答错不跳题、必须全对才能完成的设计与课程测验巩固理解的定位高度一致保证学习者真正掌握每个知识点后才算过关。测验页通过路由参数:id定位具体测验并支持?loc查询参数指定语言多语言适配能力一目了然。本地开发四步跑通测验应用按 quiz-app/README.md 的Project setup一节在仓库根目录的quiz-app目录下依次执行即可完成本地开发闭环。1. 安装依赖npm install该命令依据package-lock.json锁定版本安装全部依赖core-js、vue、vue-i18n、vue-router以及 Vue CLI 系列开发依赖是后续所有命令的前置条件。2. 开发模式编译与热重载npm run serve对应vue-cli-service serve启动本地开发服务器并开启热模块替换HMR。修改src/下的组件、路由或 JSON 语言包后页面会自动刷新方便快速迭代题目内容与界面交互。默认监听http://localhost:8080浏览器打开后即可看到首页列出全部测验链接。3. 生产环境编译与压缩npm run build对应vue-cli-service build对应用进行生产构建与代码压缩默认输出到dist/目录。该目录即后续部署到 Azure Static Web Apps 时的Output Location。构建产物为纯静态文件HTML、JS、CSS可直接托管在任何静态站点服务上。4. 代码检查与自动修复npm run lint对应vue-cli-service lint依据 package.json 中的eslintConfig继承plugin:vue/essential与eslint:recommended使用babel-eslint解析对源码进行风格与规范检查并自动修复可修复的问题。browserslist配置 1%、last 2 versions、not dead则决定了构建时 Babel 的转译目标浏览器范围。注README 中提到的 Vue CLI Configuration Reference 为官方外部文档如需自定义构建配置可直接修改仓库内的 [vue.config.js 相关配置]当前仓库未内置该文件采用 Vue CLI 默认配置或查看vue/cli-service的默认行为。部署到 Azure Static Web Apps逐步指南README 的后半部分给出了从 GitHub 仓库到 Azure 静态站点上线的完整流程其本质是GitHub 源码 Azure Static Web Apps 托管 GitHub Actions 自动构建部署三者联动。下面按步骤展开并补充源码层面的对应关系。第 1 步Fork GitHub 仓库将整个IoT-For-Beginners仓库 Fork 到自己的 GitHub 账号下。Azure Static Web Apps 需要从 GitHub 拉取源码并自动注入部署工作流因此静态站点代码必须托管在你的 GitHub 仓库中。测验应用的源码位于仓库的quiz-app/目录后续所有位置配置均以该目录为基准。第 2 步创建 Azure Static Web App 资源注册/登录 Azure 账号进入 Azure 门户点击Create a resource搜索Static Web App点击Create进入资源配置向导。第 3 步配置 Static Web App 各项参数Basics基础信息Subscription选择你的 Azure 订阅Resource Group新建或复用现有资源组Name为静态 Web 应用命名该名称会体现在最终的访问 URL 中Region选择离目标用户最近的区域以降低访问延迟。Deployment Details部署信息Source选择 GitHubGitHub Account授权 Azure 访问你的 GitHub 账号Organization选择 Fork 后的仓库所属组织Repository选择包含静态 Web 应用代码的仓库即 Fork 后的IoT-For-BeginnersBranch选择要部署的分支仓库主分支为main。Build Details构建信息——与仓库源码严格对应配置项推荐值说明Build PresetsVue本应用由 Vue 构建选择该预设后 Azure 会使用相应的 Node 构建流程App Locationquiz-app应用代码所在目录即 package.json 所在位置API Location留空本应用无后端 API此项可选Output Locationdistnpm run build的产物目录与 Vue CLI 默认输出一致第 4 步Review 并创建核对上述设置后点击Create。Azure 会自动创建所需的托管资源并在你的 GitHub 仓库中生成一个名为.github/workflows/azure-static-web-apps-name.yml的 Actions 工作流文件。该文件是后续每次提交自动构建、自动发布的调度中枢。第 5 步理解自动生成的 GitHub Actions 工作流README 给出了该工作流文件的典型示例完整内容如下name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: upload app_location: quiz-app #App source code path api_location: API source code path optional output_location: dist #Built app content directory - optional对关键字段的说明on.push.branches: [main]每次向main分支推送代码都会触发构建与部署on.pull_requestPR 的打开、同步、重开、关闭等事件也会触发工作流便于在合并前预览站点Azure/static-web-apps-deployv1官方部署 Action负责执行构建并上传产物azure_static_web_apps_api_token部署令牌由 Azure 创建资源时自动注入到仓库 Secrets 中repo_token: ${{ secrets.GITHUB_TOKEN }}GitHub 自动生成的仓库级令牌供工作流访问仓库action: upload上传模式PR 关闭时工作流会自动执行清理动作app_location: quiz-app与门户中的 App Location 一致指向源码目录output_location: dist构建产物目录对应 package.json 中npm run build的输出。值得留意的是仓库内已为 SPA 路由准备了 public/routes.json其中定义了一条/*→/index.html的兜底路由规则。这意味着即便用户直接访问/quiz/1这类深层路径Azure Static Web Apps 也会回退到index.html交由前端路由history 模式接管渲染避免刷新页面出现 404。该文件会被原样复制到dist/产物中是静态站点正常工作的重要一环。第 6 步监控部署状态回到 GitHub 仓库的Actions标签页可以看到刚触发的工作流正在运行其执行内容即第 5 步中的构建与部署 Job工作流运行成功后访问 Azure 提供的 URL 即可看到线上版本的测验应用若配置了 PR 预览每次 PR 也会生成独立的临时预览地址。多语言支持测验内容的一处配置、多语言呈现虽然 README 本身未展开多语言细节但源码充分体现了应用的多语言设计vue-i18n在 main.js 中初始化语言包由 src/assets/translations/index.js 统一汇总目前已内置阿拉伯语ar、孟加拉语bn、英语en与简体中文zh-cn四种语言这与仓库translations/与translated_images/目录下数十种语言的课程内容翻译体系相呼应。测验题目、完成提示Congratulations, you completed the quiz!与错误提示Sorry, try again均以语言包键值形式组织在 Quiz.vue 中通过$t()函数取用天然支持按需扩展更多语言。常见问题与排错思路本地npm run serve后页面空白优先检查是否已执行npm install并确认 Node 版本与 Vue CLI 5 兼容部署后刷新深层路径如/quiz/1出现 404确认dist/产物中包含routes.json该文件是 SPA 回退规则生效的前提推送代码后 Actions 工作流未触发检查工作流文件是否位于分支根目录的.github/workflows/下以及触发分支名是否与on.push.branches一致构建产物与本地不一致确保门户/工作流中的app_location指向quiz-app、output_location为dist两者缺一不可。总结本文完整覆盖了 IoT for Beginners 课程测验应用的开发与上线链路从 quiz-app/README.md 的本地四步命令到 Vue 3 vue-i18n vue-router 的源码结构再到 Azure Static Web Apps 门户配置与 GitHub Actions 工作流的三段式部署。核心要点可归纳为本地以npm run serve开发、npm run build产出dist/云端以app_locationquiz-app、output_locationdist完成构建对齐线上通过routes.json保证 SPA 路由回退。掌握了这套流程你既能快速在本地体验与定制测验内容也能在每次提交代码后自动获得可公开访问的线上版本为课程学习或社区复刻提供开箱即用的测验基础设施。【免费下载链接】IoT-For-Beginners12 Weeks, 24 Lessons, IoT for All!项目地址: https://gitcode.com/GitHub_Trending/io/IoT-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
原理与实战应用详解)
