Web前端应用开发项目式教程（基于uni-app框架） 教学设计 任务1 项目开发准备

教学整体设计任务名称任务1项目开发准备开课学期第3学期课程类型专业核心课授课班级授课学时4学时授课地点研讨型智慧实训室授课形式理实一体教学内容本任务将实现“启嘉校园”项目的项目开发准备工作，包括产品需求文档分析、页面设计图分析、搭建前端开发环境、后端开发环境、创建项目开发目录。教学目标素质目标1.通过搭建项目开发环境，增强学习者的系统思维能力，养成统筹全局的习惯。2.通过学习MasterGo的使用，增强学习者合理使用工具和技术的能力，养成优化方法，提高工作效率的习惯。知识目标1.了解产品需求文档的作用。2.了解页面设计图的作用。3.了解字体图标的作用。4.了解接口文档的作用。5.掌握搭建前端开发环境的方法。6.掌握搭建后端开发环境的方法。能力目标1.能够使用MasterGo查看项目设计图。2.能够在Windows操作系统中安装HBuilderX。3.能够在Windows操作系统中安装微信开发者工具。4.能够使用HBuilderX创建uni-app项目。5.能够使用HBuilderX运行项目预览效果。学情分析知识基础1.已掌握微信小程序相关知识。2.已掌握软件测试相关知识。技能基础1.已具备微信小程序开发能力。2.已具备手机端小程序软件测试能力。学习特点与诉求1.学生对于真实项目开发具有浓厚兴趣，喜欢具有挑战性的项目内容。2.学生比较喜欢实践类教学方法，理论教学超过35分钟，就会注意力不集中。教学重点1.前端、后端环境搭建方法2.需求文档分析方法。教学难点1.灵活高效搭建前端、后端环境。2.准确对需求文档进行分析。教学策略教学方式方法1.任务驱动教学。2.组队讨论教学。3.启发式教学。4.理实一体化教学。教学团队1.企业工程师与校内专任教师共同开发课程项目、构造任务场景、设计教学实施过程、设计融入思政的课程评价体系并开展多元评价。2.校内教师重点负责课堂过程中的项目讲解与项目实施。3.企业工程师在个别环节（如项目验收等）参与双师授课。4.企业工程师负责对项目完成情况给予工程化评价。5.学生助教负责协助教师开展课前及课后的拓展任务等。教学资源使用本书配套文档、素材等资源教学评价

二、教学实施过程教学过程（一）课前1.以预习培养学生自主学习能力通过布置课前预习产品需求文档分析、查看页面设计图、查看接口文档的任务，锻炼学生的自主学习能力，促进学生养成预习的学习习惯。2.以测验促进课堂提质增效通过布置预期内容中需求分析分析、页面设计图分析、接口文档分析知识测验，教师可以更好地了解学生对本次任务基础知识的学习需求和问题，总结提炼重难点知识，从而在课堂上进行更有针对性的讲解和讨论，提高教学质量和效果。知识图谱智能推荐拓展知识通过知识图谱向学生推送更多关于本节所学知识的应用场景，及应用技巧，学习相关论文及实战项目中列举的拓展使用方法，以点带面，使学生知识储备更全面，理解更透彻，从而为本任务准确实施奠定雄厚的知识基础。教师活动学生活动1.发布任务。通过职教云发布预习任务。2.发布测验。通过职教云发布知识测验。3.发布资料。通过职教云发布微课视频、PPT课件、虚拟仿真、知识图谱拓展阅读等学习资源。4.批阅任务。分析知识测验结果，梳理重难点知识。1.课前预习。通过微课和课件自主学习基础知识。2.基础测验。通过职教云完成知识测验。3.资料学习。学习教师推动的视频、PPT、虚拟仿真、知识图谱拓展阅读等，有问题同学可通过平台在留言板留言进行提问。（二）课中1.课程教学设计遵循学生的技能成长规律和学习规律，紧密结合制作个人资料页的实际工作过程，进行系统性的教学设计，构造“情景项目导入、渐进任务分解、组队任务执行、多元技能测评、凝练项目总结、激发构想延展”六步教学实施过程，确保学生能够体验真实的工作场景，通过循序渐进的任务开发，锻炼学生制作个人资料页的实操技能和工程素养。采用双师教学、头脑风暴、组队开发、学生助教辅导等特色环节组织教学，充分发挥企业工程师、教师和学生的优势，结合利用现代信息技术平台“职教云”辅助教学，激发教师授课激情、点燃学生学习热情、提高课堂授课效果。2.思政教学设计本课程的思政教学设计渗透于每个任务的描述、素养目标、关键代码的名师解惑、课上教学设计、课下任务拓展等多个环节，从而循序渐进、渗透式、全方位地落实思政教育“进教材、进课堂、进头脑”。借助本章的任务描述向学生传递“多学习新技术，让软件生命力更持久”的思想，让学生养成“持续发展、终身学习”的习惯；通过课堂中组织组队任务实施，培养学生“团队协作、互帮互助”的精神；通过对删除功能关键代码的实现，培养学生“满足用户需求，提升软件价值”的职业素养；通过任务扩展，让学生了解图片存储的新技术、最优解决方案的选择，培养学生践行“技术为民，服务社会”的理念。第1学时教学环节教师活动学生活动情景导入与任务描述1(10分钟)1.情景导入。通过播放动画说明需求文档的重要性。2.发布讨论。你认为需求文档有必要进行详细分析吗？3.介绍任务。本任务将完成“启嘉校园”项目开始前的开发准备工作，主要包括了解开发中使用的项目资源和项目资源使用方法，部署前、后端开发环境，以及创建项目开发目录。本任务将尽可能详细地为读者讲解如何使用HBuilderX创建uni-app项目和项目文件，引导读者以全局视野了解uni-app项目，形成以系统思维方式解决问题的习惯。1.操作体验。认真观看教师播放动画。2.回答问题。认真回答教师的问题。3.了解任务。认真听取教师介绍项目1的任务介绍，同时思考，如何高效搭建开发环境。知识储备讲解1(35分钟)1.产品需求分档概念讲解。（1）实现原理讲解。（2）通过流程图或者思维导图介绍实现逻辑，解决重难点问题。2.查看“启嘉校园”需求分档。讲解什么是页面设计图，如何查看设计标注，如何下载图片素材、字体图标。3.需求文档分析升华点拨。教师对需求文档分析的重要性及分析中常见问题进行讲解，以及注意事项进行说明。1.聆听知识讲解产品需求文档。认真听取教师讲解产品需求文档的概念，并思考如何准确分析需求分档。2.聆听“启嘉校园”需求文档分析。认真观看教师演示，并进行同步仿做，遇到问题可在教师巡回指导期间进行提问。3.聆听需求文档分析升华点拨笔记撰写。认真听取教师对需求文档分析的升华点拨讲解，并将核心知识及重要知识记录到课堂笔记当中。第2学时教学环节教师活动学生活动情景导入与任务描述2(10分钟)1.发布讨论。什么是接口文档？2.创设情境。通过动画演示什么是接口文档3.介绍任务。1.回答讨论。认真思考并回答教师发布的讨论。2.观看动画。认真观看教师播放的动画，初步了解什么是页面生命周期。3.了解任务。认真听取教师介绍本节课的任务介绍，同时思考，如何快速准确查看接口文档。知识储备讲解2(35分钟)1.接口文档知识讲解。接口主要用来向开发者服务器传递数据，接口文档即应用程序接口的说明文档，又称为API文档，用来描述系统所提供接口信息的文档。2.“启嘉校园”项目源码。“启嘉校园”项目功能完整，代码量大，告诉同学们源码的下载地址及方法。1.聆听知识讲解页面生命周期。认真听取教师讲解页面生命周期的语法格式，属性说明及使用方法，并思考如何应用到实际项目当中。2.查看“启嘉校园”项目源码。登录网址，查看源码，有必要的同学可进行下载。第3学时教学环节教师活动学生活动任务实施逻辑分析1(10分钟)1.发布讨论。你认为不同的开发工具对于软件开发有影响吗？创设情境。播放动画，引导同学在环境安装过程中细致耐心。3.介绍任务。1.回答讨论。认真思考并回答讨论。2.观看动画。观看动画，调整心态，接下来的环境安装会遇到很多问题，细致耐心，不断尝试，攻坚克难。3.了解任务。认真听取教师介绍本节课的任务介绍。任务实施编码实现1(35分钟)1.搭建前端开发环境。介绍前端开发环境需要的工具，并发送给学生。2.前端开发环境安装演示。带领学生安装环境。3.搭建后端开发环境。介绍后端开发环境需要的工具，并发送给学生。4.后端开发环境安装演示。带领学生安装环境。聆听讲解认真听取教师讲解后端开发环境所需工具，并进行下载。2.同步安装环境。认真观看教师演示，同步安装，遇到问题及时向教师提问。第4学时教学环节教师活动学生活动任务实施逻辑分析2(10分钟)1.任务介绍。教师介绍本节课需要完成的任务：创建项目开发目录、运行项目、任务测试。2.任务讲解。1.知晓任务。听取教师讲解本次课要完成的任务。2.明确步骤。跟随教师讲解的思路，建立项目开发目录，明确完成本节课任务需要的基础步骤，必要时可到线上资源进行学习。任务实施编码实现2(20分钟)1.分配小组。教师依据知识储备阶段的测验结果，及学生组队意愿，3人组成一队，尽量让强弱互补，形成互相帮扶小组。2.巡回指导。教师在组间巡回指导，出现的共性问题，可在班级内向同学进行简短讲解点拨。1.组建小组。在教师的引导下，结合自己意愿，组成3人一组的团队。2.任务实施。认真完成本次课程的任务，遇到问题先组内解决，组内无法解决，可向教师提问，或者通过职教云平台向其他组进行求助提问，也可到在线资源中观看视频进行学习。任务测试与评价（15分钟）1.环境及项目测试。2.组间巡回指导。教师在组间进行巡回指导，遇到共性问题，在班级内统一点拨。3.任务评分。企业教师和授课教师对学生整体任务实施情况，测试情况进行评分。同时引导学生进行组内评分，组间互评。4.教师点评。企业教师和授课教师分别对班级内评分最高的2组，及评分较低的2组进行点评，指出本次任务中，同学们的优秀做法，及共性问题。1.完成测试。2.完成评价。3.聆听点评。认真听取企业教师及专业教师对本次任务的评价，学习