{ "themeColor": "#10162F", "slug": "web-code-bootcamp-or-learn-to-code-1", "name": "AI Engineer 全栈项目班 Code Bootcamp | Learn to Code", "description": "全栈班+DevOps班流程图整个流程分为五个大阶段：计划、开发、构建、测试、发布。从全栈班到DevOps班学员共同奋斗完成这五个阶段内容，这一流程为开发团队提供了完整的解决方案，帮助学员全面掌握全栈开发DevOps的核心技能。我们独有的P3商业项目同时贯穿了整个栈，全面提升了实战能力流程和对抗！澳洲的IT工作环境如何？在澳洲做会计师是怎样的一种体验？没有996，没有35岁，不歧视女性，不内卷，工作和生活平衡等等。工作生活平衡：澳大利亚职场文化强调合理的工作时间和灵活的工作安排，支持工作与生活的平衡。信念和约束性：澳洲致力于营造一个多元和约束性的工作环境，不严格年龄限制，同时积极推动性别平等。职业发展机会：IT行业的快速发展带来了广泛的职业机会，公司通常提供培训和发展课程以支持员工技能提升。有相对的薪酬和福利：IT专业人士可以享受到具有相对价格和全面的福利套餐。优质的工作和生活环境：现代化的办公设施和优美的自然环境，使得工作和生活质量都相当重要。澳洲IT行业翟先生？在澳大利亚，IT行业的薪资水平因地区、公司规模和职位的不同而存在显着差异。根据2023年的数据，澳大利亚各州的平均薪资之间也有所不同，新南威尔士州平均薪资最高，达到约80,000澳元，而塔斯马尼亚州的薪资最低，约65,000澳元。此外，随着技能的持续，几乎九成的雇主都面临人才难题，这导致许多雇主提高薪资以奖励和留住员工。全栈开发者职业发展下图展示了全栈工程师在IT公司的职位和不同的工作职位从需求部署的各个阶段中涉及不同的角色和技术，对IT开发流程有以下关键项目参与者和参与者： Stakeholder : 明确项目的需求和目标。 Business Analyst : 分析业务需求，确定项目范围。 Product Owner : 确保产品符合业务需求和用户需求。 UI Designer : 设计产品的用户界面，提高用户体验。 QA & Tester : 负责软件的质量控制和bug测试。 Full-stack Developer : 负责开发和项目落地。 DevOps & SRE & Cloud Engineer : 优化项目的开发运营流程，管理云基础设施。 Data Engineer : 处理和管理数据流，设计数据存储解决方案。 Data Analyst : 分析数据，提供决策支持。 Data Warehouse/Lake/Tools : 管理和分析大量数据。 UAT, Staging, Production (用户验收测试、预生产、生产环境) : 分阶段部署和测试软件，确保产品质量。针对 Agile (敏捷) 方法论的应用，这是一种迭代和以人为核心的开发流程，可以快速响应项目需求的变化，增强团队协作和项目透明度。整个图示反映了现代软件开发中多学科团队的协作和技术的综合应用，突出了全栈开发者在整个开发周期内的关键作用，以及他们如何与其他专业领域的专家一起工作，共同推进项目的成功。 Developer职业成长 Web全栈班是为了帮助IT/CS毕业生，以及想转行做IT，成长成为一位合格 (Qualified) 的Full-stack Developer/ Front-end Developer/Back-end Developer/ Software Engineer，在澳洲和中国找到一份全职工作。如何在澳洲找到第一份工作? 什么是Web开发全栈项目班? 2017年，匠人学院在澳洲首次独创 Web全栈班模式，完全自主研发课程，课件，内容，以及关联项目和澳洲本地合作公司，每一期都不断地询问学员意见进行修改和升级， Web全栈班会根据一线老师，以及公司需求变化而变化。匠人也跟Deloitte, Servian等公司合作，定向向公司提供优秀学员。 Web全栈班根据澳洲 Job Market 的需求变化而变化，完全面向企业需求进行课程设置。Web全栈班已经培养了 4000 多位学员，帮助 4000 多位学员在澳洲、中国、美国就业。 ”帮助大家能更好地在本地就业“ --- 这也是匠人学院始终如一的目标。精彩的Web全栈学习之旅- 掌握从前端开发到后端、云端部署及CI/CD的全方位技能从基础到精通，我们的课程覆盖了 JavaScript ， HTML5 ， CSS3 ， ES6 ，程序员必备版本控制能力 Git ，澳洲市场占有率最高的前端框架 React.js 、以及三大高需求后端技术： Node.js 、 Java 、 .NET ，还有 Amazon Web Service(AWS) ， OpenAI 等企业需求的技术。不仅仅是基础开发工作，更多会涉及到云端架构， Serverless ， Microservice 等架构，经历目前企业需要的必备 CI/CD 部署经验等。从开发到部署，全链路学习。通过实战项目，您不仅能掌握编程知识，还会获得实际开发经验。我们提供2个个人项目和1个商业项目，让您能在真实场景中应用所学，准备好步入职场。同时，我们的职业辅导和简历内推服务，将助您顺利找到理想的工作。 Offer收割机已经帮助4000多位学生就业。 Web全栈班的团队大项目+简历内推，让学生通过Web全栈班就能拿到至少2个优质的工作经验。整个的Agile工作模式体系，跟中等规模的公司相似。拿到工作经验=拿到Offer，可以拿到相当于6个月的工作经验，不愁在澳洲找不到工作。每期全栈班都是全新的团队项目，每个团队都是不同的项目，每个团队有项目Tutor带领。让上课学到的知识也可以直接实践利用，并且很多更难的技术也可以在项目学习和应用。 Web全栈班课程安排（Timeline） Web全栈班6.0 开始，有14周的教课内容。整个Bootcamp持续24周 Web 全栈班课程大纲 6.0 新的 Web 全栈班课程大纲，新增Nextjs、AWS、Lambda和AI App课程内容。 Web全栈班核心解决的问题团队合作能力欠缺，缺乏团队合作意识刚毕业或在校学生的团队合作能力普遍比较欠缺，不知道如何跟团队里其他的Developer沟通和合作，缺乏团队合作的经验和意识。遇到代码问题常常不知道如何解决，也找不到有效的沟通方式和解决办法，通常都是一个人蒙头写代码，但结果却不尽人意，既浪费了时间也还影响了团队的工作效率。缺乏工程化思维工程思维是指在解决问题和设计解决方案时，能够综合考虑项目的全局性、系统性和实用性，以及可持续发展和风险管理等方面的思考模式。在软件开发领域，这意味着开发人员不仅需要关注代码的编写，还需要从更广阔的视角考虑软件的设计、架构、用户体验、性能、安全、维护和可扩展性等各个方面。简单来说，就是在开发的过程中需要把复杂问题简单化，知道妥协、知道循序渐进。不仅要考虑代码的质量问题，还要考虑业务需求、项目工期、开发成本等各种因素之间的相互影响。学校所学技能不符合澳洲公司主流技术栈要求许多学员在学习学习的技术多为基础理论，缺乏实际项目的练习和实践。而且学校目前教授的HTML，CSS等课程都是开发中较为基础的技术栈，与澳洲企业要求的主流技术栈存在明显的gap，学生毕业后无法直接达到企业招聘的要求和满足实际需求。代码质量达不到澳洲IT公司标准在学校学习或自学编程的过程中常常缺乏code review 环节，难以达到商业级工程代码质量。我们的课程中会提供专业导师点评，帮助学员快速提升。学习并实践符合澳洲企业编制的代码规范，提高代码质量，以达到澳洲公司要求。缺乏云端项目经验学校的作业或个人项目缺乏云端部署的经验，匠人提供Production Grade的云端项目实战经验，帮助学员熟悉从开发到部署的完整流程。简历总是石沉大海，缺乏竞争力澳洲留学生找工作难的原因之一就是简历不过关或简历缺乏竞争力，投递的简历总是石沉大海。匠人Web全栈班能够帮助学员补充商业级项目经验、实习经验，提升简历含金量，让HR更愿意给出面试机会。缺少工作机会和职业资源支持澳洲的留学生或毕业生求职往往都是孤军奋战，只能仅通过常规的招聘网站来找工作，缺少工作机会和职业资源支持。但匠人的学员能够借助匠人学院庞大的校友网络，获得工作内推机会。也可以通过建立Networking扩大自己的人脉资源，从前辈和行业大神那里收获行业资讯和经验分享。匠人可以为学员求职提供强有力的支持。 Web 全栈班学习内容多元化职业道路，一次报名，三重选择选择我们的课程，您将开启 Node.js 、 .Net 、 Java 三大热门后端技术的学习之旅。我们的资源共享机制，跨课程、跨城市的学习环境，助您拓宽职业视野，增加获取理想工作Offer的可能性。无论您在澳洲还是中国，这门课程都将为您的Web开发和编程事业铺设坚实的基石。通过实战项目经验积累，提升您在职场的竞争力，我们的课程适合想在商业项目中增加实战经验的您。前端培训: 企业级前端技术精讲深入解析前端技术的企业应用，如 React 、 Redux Saga 、 ES6 等，帮助学员紧跟行业最新需求，编写出高质量的代码。课程内容随市场需求定期更新，确保学员学到最实用、最前沿的技能。 Web 培训: Web 标准化与响应式设计系统讲解 HTML5 、 CSS3 、 Sass 等前端基础，重点训练标准化编程和响应式网页设计，让学员能编写出符合行业标准的Web项目。 React 培训: 系统掌握 React 开发摆脱自学困境，通过项目实战和企业案例，深入学习 React 的语法、结构和组件设计，帮助学员理解企业级代码质量要求，提升React开发能力。后端培训: 可选三语言后端开发精英培养澳洲唯一涵盖 Nodejs， .NET , Java 的三语言后端培训，深入讲解后端架构、微服务、 RESTful API 等核心知识，拓宽学员的职业发展路径。 Node.js 方向 Node.js采用线上直播课的模式学习。在Node.js方向的学习中，你将深入了解Node.js的核心原理、模块系统以及事件驱动模型。我们将从基础开始，带你逐步掌握 Node.js 的基本语法、 API 调用以及 Express.js 等常用框架的使用。 .NET 方向 .NET方向采用线下教学的模式，悉尼、墨尔本、布里斯班三个城市开班。在.NET方向的学习中，你将领略到.NET框架的强大功能与灵活性。我们将从 .NET 框架的基础知识讲起，涵盖 C#语言基础、 ASP.NET Web开发、 WCF服务开发等多个方面。通过学习，你将掌握如何使用.NET框架构建高效、安全的Web应用程序，提升你的开发能力和项目实战水平。 Java 方向 Java方向采用 Self-Paced Learning 的学习模式。在Java方向的学习中，你将体验到Java作为企业级开发语言的魅力。我们将从Java语言基础入手，讲解面向对象编程思想、JVM原理、常用设计模式等核心知识，还会学习Spring Boot。 AI方向内容介绍 Speech sample app 功能亮点全面的AI应用：AI课程涵盖语音识别、文本转换、翻译及生成式AI应用，全面提升学员的AI技术能力。实用工具开发：通过开发实际应用（如语音转文字、文本翻译），学员能够将所学知识应用于实际课程中。热门技术栈：使用业界流行的工具和技术（如Python、Azure AI、OpenAI），紧跟技术前沿。企业应用案例：学习和实践澳洲企业中实际应用AI技术的案例，提升职业竞争力。 AI内容介绍 AI文字语音转换翻译课程旨在通过开发一个功能全面的Web应用，帮助用户进行语音到文字、文字到语音及翻译的转换。该课程结合了AI技术与实际应用，帮助学员掌握AI技术在编程中的具体应用。将通过Azure AI和OpenAI的API，实现语音识别、文字生成和翻译功能，并通过React构建用户界面。主要功能包括：语音识别：将用户的语音输入转换为文本。文本到语音：将文本转换为语音进行播放。文本翻译：将文本翻译成多种语言。 AI生成：通过生成式AI技术，生成符合上下文的文本回答。提升能力通过完成AI文字语音转换翻译，学员将提升以下技能： AI技术应用：学习如何使用Azure AI进行语音识别和文本转换。掌握使用OpenAI进行文本生成和翻译。职业发展能力：通过项目实践，提升解决实际问题的能力。积累项目开发经验，为职业发展打下坚实基础。通过这些内容学习，学员不仅能掌握AI技术在语音识别、文本生成和翻译中的应用，还能通过实践提升综合开发能力，为进一步的职业发展和实际项目开发打下坚实基础。全栈班+DevOps班流程图整个过程分为五大阶段：Plan、Development、Build、Test、Release。从全栈班到DevOps班学员共同配合完成这五个阶段内容，这一流程为开发团队提供了完整的解决方案，帮助学员全面掌握全栈开发DevOps的核心技能。我们独特的P3商业项目同时贯穿整个流程，全面提升学员的实战能力和竞争力！ Web 全栈班阶段 Web 全栈班分五个阶段：Web 基础技能提升，Web Application Delivery，Agile Team Project Delivery，Career Coaching Self-paced Learning面试准备与技能提升，简历内推库阶段 1：Web 基本技能提升熟练掌握 Web 开发三剑客 HTML 、 CSS 、 JavaScript 的企业级开发习惯和常用模块，并通过个人网站的开发夯实基础。项目本身也可以作为简历中的项目经历、或者求职过程中展示自己的一份作品。 Web 基础技能提升阶段，主要学习 HTML，CSS，JavaScript，Sass，Flexbox，Responsive Web Design，以及 Version Control -- Git 工具第一阶段需要完成的项目- 商业级个人/公司Landing Page 阶段 2：Web App Delivery 学习三大前端框架之一的 React.js 以及相关工具，大幅提升你的前端开发能力以及小型网页应用项目的独立开发能力。该阶段需要完成一个常见 MongoDB 面试项目题——Weather Application 的开发，完成后你就可以 handle 常见的面试项目题第二阶段的学习内容围绕 React 展开，通过 ES6 (ECMAScript 2015)，提升 JavaScript 的使用，学习 Linter 规范代码格式，以及学习 SOLID，思维范式等等，提升工程师能力第二阶段的项目需要完成 Weather App 的开发，从 2017 年沿用到现在，是重要的提升 Code Challenge 的项目阶段 3：商业项目 Delivery 学习后端框架、数据库，基本的架构、云服务等知识，并通过参与团队大项目，亲身体验互联网产品主流项目开发流程——Agile 敏捷开发流程，获得职场中不可或缺的多角色团队配合能力。到了第三阶段整体技术学习难度和广度都有提升什么是 Web 全栈班 P3 项目 -- 项目实战由 8-10 位 Full stack Developers，6-8 位 DevOps Enginners，1 位 Business Analyst 和 1 位 UI Designer 组队，共同完成一个商业级项目。项目通过团队协作，获得澳洲真实的开发工作流程。 Web 全栈班项目与其他匠人培训班（Bootcamp）高度搭配融合 Web 全栈班最著名的 P3 项目，不再仅仅是 Web 全栈班的单一项目，而是由 Web 全栈班为核心，与其他班级搭配形成一个完整的大团队，这个在其他任何培训机构从未出现过，P3 项目组会包含 8-10 个 Full-stack Developers 来自 Web 全栈班，1 位 Business Analyst 来自 BA 产品经理班，6-8 位 DevOps Engineers 来自 DevOps 项目班，以及 1 位 UI Designer 来自 UI 项目班。学生将会有两次做团队项目的权益，增加简历筹码。第三个项目为匠人学院独创, 提供多个 Projects 选择, 每个班分成不同 Team, 通过 Agile, 花三个月时间, Deliver 一个完整的全栈项目, 最后项目结束会有 Presentation 以及来自现场导师的反馈。多种不同级别的商业项目可以选。可以选择适合转行转专业的同学的 Level 1 级别的项目，Level 1 的项目除了可以自己做之外，还提供其他真实企业的项目经验，进入合作公司去做 Level 1。如果进入合作公司的 Level 1 的项目，需要经过面试，公司满意后，可以进入做项目。 P3 项目亮点每个小组配有项目 Tutor 全程为组员项目答疑产品经理协助项目管理，保障项目顺利落地班主任督促检查每周项目进度项目直接对接企业方 Employer 每个小组不同主题，组间 Battle 团队协作，模拟澳洲真实职场项目写进简历提升 Offer 筹码对外商业 Showcase 项目成果对外展示，与雇主面对面交流，增加项目商业化。通过参加 Showcase，招聘官可以直接了解学员的背景和优势，得到与各大行业领头公司 decision maker 的直接对话机会，大大提升求职成功率，更有可能现场获得 Offer 哦。阶段 4：IT Career Coaching Self-paced Learning 100+Career Coaching的视频资料可供大家Self-paced Learning，从职业规划，简历，面试，谈薪水等多方面提升。阶段 5：简历内推库 & 工作实习内推让学员“不仅仅是获得实习，更成为工作 Offer 收割机” 简历内推库是一个特设的、专为我们的学员打造的数字化简历存储平台。在这里，每位学员的简历都经过专业导师的审核与优化，确保其准确、专业且符合行业标准。匠人毕业学员的简历，有权优先录入简历内推库。依托匠人长久积累的的企业伙伴和毕业校友、导师的长久合作，这些简历会被优先推荐和匹配合适的岗位，有效缩短求职路径。面向“转码”同学的帮助从 Web 入门班晋升过来的同学，为了能够让转码的同学更友好的拿到 Offer。我们为转码的同学单独开设以下举措： 1. 提供适合转码同学的单独 Tutorial 进度，针对性答疑 2. 设立转码互助学习小组，转码同学互相取暖，互相帮助 3. 可以选择性参加转码补习小组，小班制，最多五人。 4. 多种不同难度级别的项目可供选择，不同级别项目也有对应的公司，提供难度较低的工作机会，扩充简历内容 Web全栈班如何保障“IT”专业学生获得Offer 没有经验缺乏工作？全栈班核心问题就是去解决，企业需要相关工作经验，但自己没有相关经验问题。对于全栈班，提供了多种级别涉猎的项目可以做，不同的项目，同样对应，不同的利益相关者（公司、老师等），为学员提供更多的项目经验需求，来满足企业对工作经验的要求。每年3次的内推会，可以近距离接触位置内推官，直接面向企业需求。网络开发全栈班导师介绍一线大厂老师，多年面试经验，辅导以及教学经验。多种不同，针对不同阶段教学授课老师课程导师项目导师项目带队导师全班导师协议为什么选择Web开发全栈项目班？帮助数千名同学，找到了澳洲和中国的工作，获得了Offer。阿富汗大学课程与企业需求的鸿沟(Gap) 超强导师团队一线大厂老师授课，并同时有课程辅导导师+项目辅导导师，陪伴你的学习之路。独创3+3+12模式独创3+3+12模式，通过3个月课程+3个项目+12个月简历内推库，填写简历空白，求职有表格！面向职场的开发人员培训锻炼只学习开发技术，还对接真实的互联网工作环境，带你熟悉开发团队中BA、UI设计师、DevOps等其他岗位的工作内容和涉及技术，帮助你未来更快的巴基斯坦工作团队。指导针对前面、工作室、全栈等不同开发岗位提供专业的求职辅导，资深导师教你如何写简历、写Linkedin、应对面试。超越开发者团队合作参与团队大型项目，与来自匠人学院其他培训项目的BA、UI设计师、DevOps组队完成商业级别的互联网项目开发，提前体验互联网项目开发团队配合。學 Web全栈班會議員: 课程全程导师全程答疑所有项目团队配备项目导师 1 年项目经验期往及课程全程录音三个项目经验丰富你的简历模拟面试与HR面试简历指导与简历修改背景调查证明匠人庞大工作内推网络庞大的大师学员及导师资源学员，大师导师直接优秀挖人与匠人合作企业的内推及实习与全职工作机会我们的学员工作自Web全栈班开班以来，已有超过3000+同学成功就业，也有学生进入澳洲各大公司如德勤，Servian等知名公司工作。以下为往届学生的部分作品展示。为什么Web全栈训练营受到大企业认可项目技术面向企业人才需求项目流程与公司工作流程一样开发人员与 DevOps 一起工作与真实公司工作一致 3 个月项目经验 = 3 个月工作经验进行项目魔鬼训练，修炼IT专业性符合公司需求学员具有初步的系统设计能力禅师权益大盘点，属于禅师学员的独特礼遇概念界定大师学员：凡报名过大师学员Web开发栈项目班的学员新学员：报名Web开发全栈项目班后，第一次参与全栈课程期间，统称为新学员学员：报名Web开发全栈项目班后，第一次参与的课程结课后，统称为老学员（这里主要指enroll老学员课程期间内） ⚠️以下权益仅限购买课程本人使用，禁止售卖和转让，一经发现封号处理 ", "description_html": "

全栈班+DevOps班流程图

\r\n

整个流程分为五个大阶段：计划、开发、构建、测试、发布。
从全栈班到DevOps班学员共同奋斗完成这五个阶段内容，这一流程为开发团队提供了完整的解决方案，帮助学员全面掌握全栈开发DevOps的核心技能。我们独有的P3商业项目同时贯穿了整个栈，全面提升了实战能力流程和对抗！

\r\n

$\"\"$

\r\n

澳洲的IT工作环境如何？

\r\n

在澳洲做会计师是怎样的一种体验？没有996，没有35岁，不歧视女性，不内卷，工作和生活平衡等等。

\r\n

工作生活平衡：澳大利亚职场文化强调合理的工作时间和灵活的工作安排，支持工作与生活的平衡。
信念和约束性：澳洲致力于营造一个多元和约束性的工作环境，不严格年龄限制，同时积极推动性别平等。
职业发展机会：IT行业的快速发展带来了广泛的职业机会，公司通常提供培训和发展课程以支持员工技能提升。
有相对的薪酬和福利：IT专业人士可以享受到具有相对价格和全面的福利套餐。
优质的工作和生活环境：现代化的办公设施和优美的自然环境，使得工作和生活质量都相当重要。

\r\n

$\"\"$

\r\n

澳洲IT行业翟先生？

\r\n

在澳大利亚，IT行业的薪资水平因地区、公司规模和职位的不同而存在显着差异。根据2023年的数据，澳大利亚各州的平均薪资之间也有所不同，新南威尔士州平均薪资最高，达到约80,000澳元，而塔斯马尼亚州的薪资最低，约65,000澳元。此外，随着技能的持续，几乎九成的雇主都面临人才难题，这导致许多雇主提高薪资以奖励和留住员工。

\r\n

$\"\"$

\r\n

全栈开发者职业发展

\r\n

下图展示了全栈工程师在IT公司的职位和不同的工作职位

\r\n

$\"不同岗位在IT公司的位置\"$

\r\n

从需求部署的各个阶段中涉及不同的角色和技术，对IT开发流程有以下关键项目参与者和参与者：

\r\n

Stakeholder: 明确项目的需求和目标。
Business Analyst: 分析业务需求，确定项目范围。
Product Owner : 确保产品符合业务需求和用户需求。
UI Designer : 设计产品的用户界面，提高用户体验。
QA & Tester : 负责软件的质量控制和bug测试。
Full-stack Developer: 负责开发和项目落地。
DevOps & SRE & Cloud Engineer: 优化项目的开发运营流程，管理云基础设施。
Data Engineer : 处理和管理数据流，设计数据存储解决方案。
Data Analyst: 分析数据，提供决策支持。
Data Warehouse/Lake/Tools : 管理和分析大量数据。
UAT, Staging, Production (用户验收测试、预生产、生产环境): 分阶段部署和测试软件，确保产品质量。

\r\n

针对 Agile (敏捷) 方法论的应用，这是一种迭代和以人为核心的开发流程，可以快速响应项目需求的变化，增强团队协作和项目透明度。整个图示反映了现代软件开发中多学科团队的协作和技术的综合应用，突出了全栈开发者在整个开发周期内的关键作用，以及他们如何与其他专业领域的专家一起工作，共同推进项目的成功。

\r\n

Developer职业成长

\r\n

Web全栈班是为了帮助IT/CS毕业生，以及想转行做IT，成长成为一位合格 (Qualified) 的Full-stack Developer/ Front-end Developer/Back-end Developer/ Software Engineer，在澳洲和中国找到一份全职工作。

\r\n

$\"全栈-18\"$

\r\n

如何在澳洲找到第一份工作?

\r\n

\r\n

什么是Web开发全栈项目班?

\r\n

2017年，匠人学院在澳洲首次独创Web全栈班模式，完全自主研发课程，课件，内容，以及关联项目和澳洲本地合作公司，每一期都不断地询问学员意见进行修改和升级，Web全栈班会根据一线老师，以及公司需求变化而变化。匠人也跟Deloitte, Servian等公司合作，定向向公司提供优秀学员。

\r\n

Web全栈班根据澳洲Job Market的需求变化而变化，完全面向企业需求进行课程设置。Web全栈班已经培养了4000多位学员，帮助4000多位学员在澳洲、中国、美国就业。

\r\n

”帮助大家能更好地在本地就业“ --- 这也是匠人学院始终如一的目标。

\r\n

精彩的Web全栈学习之旅- 掌握从前端开发到后端、云端部署及CI/CD的全方位技能

\r\n

从基础到精通，我们的课程覆盖了JavaScript，HTML5，CSS3，ES6，程序员必备版本控制能力Git，澳洲市场占有率最高的前端框架React.js、以及三大高需求后端技术：Node.js、Java、.NET，还有Amazon Web Service(AWS)，OpenAI等企业需求的技术。

\r\n

不仅仅是基础开发工作，更多会涉及到云端架构，Serverless，Microservice等架构，经历目前企业需要的必备CI/CD部署经验等。从开发到部署，全链路学习。

\r\n

通过实战项目，您不仅能掌握编程知识，还会获得实际开发经验。我们提供2个个人项目和1个商业项目，让您能在真实场景中应用所学，准备好步入职场。同时，我们的职业辅导和简历内推服务，将助您顺利找到理想的工作。

\r\n

$\"\"$

\r\n

Offer收割机

\r\n

已经帮助4000多位学生就业。Web全栈班的团队大项目+简历内推，让学生通过Web全栈班就能拿到至少2个优质的工作经验。整个的Agile工作模式体系，跟中等规模的公司相似。拿到工作经验=拿到Offer，可以拿到相当于6个月的工作经验，不愁在澳洲找不到工作。每期全栈班都是全新的团队项目，每个团队都是不同的项目，每个团队有项目Tutor带领。让上课学到的知识也可以直接实践利用，并且很多更难的技术也可以在项目学习和应用。

\r\n

Web全栈班课程安排（Timeline）

\r\n

Web全栈班6.0 开始，有14周的教课内容。整个Bootcamp持续24周

\r\n

$\"\"$

\r\n

Web 全栈班课程大纲 6.0

\r\n

新的 Web 全栈班课程大纲，新增Nextjs、AWS、Lambda和AI App课程内容。

\r\n

Web全栈班核心解决的问题

\r\n

团队合作能力欠缺，缺乏团队合作意识

\r\n

刚毕业或在校学生的团队合作能力普遍比较欠缺，不知道如何跟团队里其他的Developer沟通和合作，缺乏团队合作的经验和意识。遇到代码问题常常不知道如何解决，也找不到有效的沟通方式和解决办法，通常都是一个人蒙头写代码，但结果却不尽人意，既浪费了时间也还影响了团队的工作效率。

\r\n

缺乏工程化思维

\r\n

工程思维是指在解决问题和设计解决方案时，能够综合考虑项目的全局性、系统性和实用性，以及可持续发展和风险管理等方面的思考模式。在软件开发领域，这意味着开发人员不仅需要关注代码的编写，还需要从更广阔的视角考虑软件的设计、架构、用户体验、性能、安全、维护和可扩展性等各个方面。

\r\n

简单来说，就是在开发的过程中需要把复杂问题简单化，知道妥协、知道循序渐进。不仅要考虑代码的质量问题，还要考虑业务需求、项目工期、开发成本等各种因素之间的相互影响。

\r\n

学校所学技能不符合澳洲公司主流技术栈要求

\r\n

许多学员在学习学习的技术多为基础理论，缺乏实际项目的练习和实践。而且学校目前教授的HTML，CSS等课程都是开发中较为基础的技术栈，与澳洲企业要求的主流技术栈存在明显的gap，学生毕业后无法直接达到企业招聘的要求和满足实际需求。

\r\n

代码质量达不到澳洲IT公司标准

\r\n

在学校学习或自学编程的过程中常常缺乏code review 环节，难以达到商业级工程代码质量。我们的课程中会提供专业导师点评，帮助学员快速提升。学习并实践符合澳洲企业编制的代码规范，提高代码质量，以达到澳洲公司要求。

\r\n

缺乏云端项目经验

\r\n

学校的作业或个人项目缺乏云端部署的经验，匠人提供Production Grade的云端项目实战经验，帮助学员熟悉从开发到部署的完整流程。

\r\n

简历总是石沉大海，缺乏竞争力

\r\n

澳洲留学生找工作难的原因之一就是简历不过关或简历缺乏竞争力，投递的简历总是石沉大海。匠人Web全栈班能够帮助学员补充商业级项目经验、实习经验，提升简历含金量，让HR更愿意给出面试机会。

\r\n

缺少工作机会和职业资源支持

\r\n

澳洲的留学生或毕业生求职往往都是孤军奋战，只能仅通过常规的招聘网站来找工作，缺少工作机会和职业资源支持。但匠人的学员能够借助匠人学院庞大的校友网络，获得工作内推机会。也可以通过建立Networking扩大自己的人脉资源，从前辈和行业大神那里收获行业资讯和经验分享。匠人可以为学员求职提供强有力的支持。

\r\n

\r\n

Web 全栈班学习内容

\r\n

$\"\"$

\r\n

多元化职业道路，一次报名，三重选择

\r\n

选择我们的课程，您将开启Node.js、.Net、Java三大热门后端技术的学习之旅。我们的资源共享机制，跨课程、跨城市的学习环境，助您拓宽职业视野，增加获取理想工作Offer的可能性。无论您在澳洲还是中国，这门课程都将为您的Web开发和编程事业铺设坚实的基石。通过实战项目经验积累，提升您在职场的竞争力，我们的课程适合想在商业项目中增加实战经验的您。

\r\n

$\"\"$

\r\n

\r\n

前端培训: 企业级前端技术精讲

\r\n

深入解析前端技术的企业应用，如React、Redux Saga、ES6等，帮助学员紧跟行业最新需求，编写出高质量的代码。课程内容随市场需求定期更新，确保学员学到最实用、最前沿的技能。

\r\n

Web 培训: Web 标准化与响应式设计

\r\n

系统讲解HTML5、CSS3、Sass等前端基础，重点训练标准化编程和响应式网页设计，让学员能编写出符合行业标准的Web项目。

\r\n

React 培训: 系统掌握 React 开发

\r\n

摆脱自学困境，通过项目实战和企业案例，深入学习React的语法、结构和组件设计，帮助学员理解企业级代码质量要求，提升React开发能力。

\r\n

后端培训: 可选三语言后端开发精英培养

\r\n

澳洲唯一涵盖Nodejs，.NET, Java的三语言后端培训，深入讲解后端架构、微服务、RESTful API等核心知识，拓宽学员的职业发展路径。

\r\n

Node.js 方向

\r\n

Node.js采用线上直播课的模式学习。在Node.js方向的学习中，你将深入了解Node.js的核心原理、模块系统以及事件驱动模型。我们将从基础开始，带你逐步掌握Node.js的基本语法、API调用以及Express.js等常用框架的使用。

\r\n

.NET 方向

\r\n

$\"\"$

\r\n

.NET方向采用线下教学的模式，悉尼、墨尔本、布里斯班三个城市开班。在.NET方向的学习中，你将领略到.NET框架的强大功能与灵活性。我们将从.NET框架的基础知识讲起，涵盖C#语言基础、ASP.NET Web开发、WCF服务开发等多个方面。通过学习，你将掌握如何使用.NET框架构建高效、安全的Web应用程序，提升你的开发能力和项目实战水平。

\r\n

Java 方向

\r\n

Java方向采用Self-Paced Learning的学习模式。在Java方向的学习中，你将体验到Java作为企业级开发语言的魅力。我们将从Java语言基础入手，讲解面向对象编程思想、JVM原理、常用设计模式等核心知识，还会学习Spring Boot。

\r\n

AI方向内容介绍 Speech sample app

\r\n

$\"\"$

\r\n

功能亮点

\r\n

全面的AI应用：AI课程涵盖语音识别、文本转换、翻译及生成式AI应用，全面提升学员的AI技术能力。
实用工具开发：通过开发实际应用（如语音转文字、文本翻译），学员能够将所学知识应用于实际课程中。
热门技术栈：使用业界流行的工具和技术（如Python、Azure AI、OpenAI），紧跟技术前沿。
企业应用案例：学习和实践澳洲企业中实际应用AI技术的案例，提升职业竞争力。

\r\n

AI内容介绍

\r\n

AI文字语音转换翻译课程旨在通过开发一个功能全面的Web应用，帮助用户进行语音到文字、文字到语音及翻译的转换。该课程结合了AI技术与实际应用，帮助学员掌握AI技术在编程中的具体应用。将通过Azure AI和OpenAI的API，实现语音识别、文字生成和翻译功能，并通过React构建用户界面。

\r\n

主要功能包括：

\r\n

语音识别：将用户的语音输入转换为文本。
文本到语音：将文本转换为语音进行播放。
文本翻译：将文本翻译成多种语言。
AI生成：通过生成式AI技术，生成符合上下文的文本回答。

\r\n

提升能力

\r\n

通过完成AI文字语音转换翻译，学员将提升以下技能：

\r\n

AI技术应用：\r\n
- 学习如何使用Azure AI进行语音识别和文本转换。
- 掌握使用OpenAI进行文本生成和翻译。
\r\n
职业发展能力：\r\n
- 通过项目实践，提升解决实际问题的能力。
- 积累项目开发经验，为职业发展打下坚实基础。
\r\n

\r\n

通过这些内容学习，学员不仅能掌握AI技术在语音识别、文本生成和翻译中的应用，还能通过实践提升综合开发能力，为进一步的职业发展和实际项目开发打下坚实基础。

\r\n

全栈班+DevOps班流程图

\r\n

整个过程分为五大阶段：Plan、Development、Build、Test、Release。
从全栈班到DevOps班学员共同配合完成这五个阶段内容，这一流程为开发团队提供了完整的解决方案，帮助学员全面掌握全栈开发DevOps的核心技能。我们独特的P3商业项目同时贯穿整个流程，全面提升学员的实战能力和竞争力！

\r\n

$\"\"$

\r\n

Web 全栈班阶段

\r\n

$\"\"$

\r\n

Web 全栈班分五个阶段：Web 基础技能提升，Web Application Delivery，Agile Team Project Delivery，Career Coaching Self-paced Learning面试准备与技能提升，简历内推库

\r\n

阶段 1：Web 基本技能提升

\r\n

熟练掌握 Web 开发三剑客 HTML、CSS、JavaScript 的企业级开发习惯和常用模块，并通过个人网站的开发夯实基础。项目本身也可以作为简历中的项目经历、或者求职过程中展示自己的一份作品。

\r\n

$\"全栈-11\"$

\r\n

Web 基础技能提升阶段，主要学习 HTML，CSS，JavaScript，Sass，Flexbox，Responsive Web Design，以及 Version Control -- Git 工具

\r\n

$\"Web$

\r\n

第一阶段需要完成的项目- 商业级个人/公司Landing Page

\r\n

$\"\"$

\r\n

阶段 2：Web App Delivery

\r\n

学习三大前端框架之一的 React.js 以及相关工具，大幅提升你的前端开发能力以及小型网页应用项目的独立开发能力。该阶段需要完成一个常见 MongoDB 面试项目题——Weather Application 的开发，完成后你就可以 handle 常见的面试项目题

\r\n

$\"\"$

\r\n

第二阶段的学习内容围绕 React 展开，通过 ES6(ECMAScript 2015)，提升 JavaScript 的使用，学习 Linter规范代码格式，以及学习 SOLID，思维范式等等，提升工程师能力

\r\n

$\"Web全班第二阶段\"$

\r\n

第二阶段的项目需要完成 Weather App 的开发，从 2017 年沿用到现在，是重要的提升 Code Challenge 的项目

\r\n

阶段 3：商业项目 Delivery

\r\n

学习后端框架、数据库，基本的架构、云服务等知识，并通过参与团队大项目，亲身体验互联网产品主流项目开发流程——Agile 敏捷开发流程，获得职场中不可或缺的多角色团队配合能力。

\r\n

$\"全栈-13\"$

\r\n

到了第三阶段整体技术学习难度和广度都有提升

\r\n

$\"web全栈板\"$

\r\n

什么是 Web 全栈班 P3 项目 -- 项目实战

\r\n

由 8-10 位 Full stack Developers，6-8 位 DevOps Enginners，1 位 Business Analyst 和 1 位 UI Designer 组队，共同完成一个商业级项目。项目通过团队协作，获得澳洲真实的开发工作流程。

\r\n

Web 全栈班项目与其他匠人培训班（Bootcamp）高度搭配融合

\r\n

Web 全栈班最著名的 P3 项目，不再仅仅是 Web 全栈班的单一项目，而是由 Web 全栈班为核心，与其他班级搭配形成一个完整的大团队，这个在其他任何培训机构从未出现过，P3 项目组会包含 8-10 个 Full-stack Developers 来自 Web 全栈班，1 位 Business Analyst 来自 BA 产品经理班，6-8 位 DevOps Engineers 来自 DevOps 项目班，以及 1 位 UI Designer 来自 UI 项目班。学生将会有两次做团队项目的权益，增加简历筹码。

\r\n

$\"全栈-14\"$

\r\n

第三个项目为匠人学院独创, 提供多个 Projects 选择, 每个班分成不同 Team, 通过 Agile, 花三个月时间, Deliver 一个完整的全栈项目, 最后项目结束会有 Presentation 以及来自现场导师的反馈。

\r\n

$\"参与Web全栈班团队项目流程\"$

\r\n

多种不同级别的商业项目可以选。可以选择适合转行转专业的同学的 Level 1 级别的项目，Level 1 的项目除了可以自己做之外，还提供其他真实企业的项目经验，进入合作公司去做 Level 1。如果进入合作公司的 Level 1 的项目，需要经过面试，公司满意后，可以进入做项目。

\r\n

P3 项目亮点

\r\n

\r\n
每个小组配有项目 Tutor 全程为组员项目答疑
\r\n
\r\n
产品经理协助项目管理，保障项目顺利落地
\r\n
\r\n
班主任督促检查每周项目进度
\r\n
\r\n
项目直接对接企业方 Employer
\r\n
\r\n
每个小组不同主题，组间 Battle
\r\n
\r\n
团队协作，模拟澳洲真实职场项目
\r\n
\r\n
写进简历提升 Offer 筹码
\r\n

\r\n

对外商业 Showcase

\r\n

项目成果对外展示，与雇主面对面交流，增加项目商业化。通过参加 Showcase，招聘官可以直接了解学员的背景和优势，得到与各大行业领头公司 decision maker 的直接对话机会，大大提升求职成功率，更有可能现场获得 Offer 哦。

\r\n

\r\n

$\"JR学院展示\"$

\r\n

\r\n

\r\n

阶段 4：IT Career Coaching Self-paced Learning

\r\n

100+Career Coaching的视频资料可供大家Self-paced Learning，从职业规划，简历，面试，谈薪水等多方面提升。

\r\n

\r\n

\r\n

阶段 5：简历内推库 & 工作实习内推

\r\n

让学员“不仅仅是获得实习，更成为工作 Offer 收割机”

\r\n

简历内推库是一个特设的、专为我们的学员打造的数字化简历存储平台。在这里，每位学员的简历都经过专业导师的审核与优化，确保其准确、专业且符合行业标准。

\r\n

$\"\"$

\r\n

匠人毕业学员的简历，有权优先录入简历内推库。依托匠人长久积累的的企业伙伴和毕业校友、导师的长久合作，这些简历会被优先推荐和匹配合适的岗位，有效缩短求职路径。

\r\n

$\"简历内推库\"$

\r\n

\r\n

\r\n

面向“转码”同学的帮助

\r\n

从 Web 入门班晋升过来的同学，为了能够让转码的同学更友好的拿到 Offer。我们为转码的同学单独开设以下举措：

\r\n

1. 提供适合转码同学的单独 Tutorial 进度，针对性答疑

\r\n

2. 设立转码互助学习小组，转码同学互相取暖，互相帮助

\r\n

3. 可以选择性参加转码补习小组，小班制，最多五人。

\r\n

4. 多种不同难度级别的项目可供选择，不同级别项目也有对应的公司，提供难度较低的工作机会，扩充简历内容

\r\n

$\"澳洲转运\"$

\r\n

\r\n

Web全栈班如何保障“IT”专业学生获得Offer

\r\n

没有经验缺乏工作？

\r\n

全栈班核心问题就是去解决，企业需要相关工作经验，但自己没有相关经验问题。

\r\n

对于全栈班，提供了多种级别涉猎的项目可以做，不同的项目，同样对应，不同的利益相关者（公司、老师等），为学员提供更多的项目经验需求，来满足企业对工作经验的要求。

\r\n

每年3次的内推会，可以近距离接触位置内推官，直接面向企业需求。

\r\n

$\"\"$

\r\n

\r\n

网络开发全栈班导师介绍

\r\n

一线大厂老师，多年面试经验，辅导以及教学经验。多种不同，针对不同阶段教学

\r\n

授课老师
课程导师
项目导师
项目带队导师

\r\n

$\"Web全板导师介绍\"$

\r\n

全班导师协议

\r\n

\r\n

$\"网站全班老师\"$

\r\n

\r\n

$\"\"$

\r\n

$\"\"$ $\"网站全班老师\"$ $\"网站全班老师\"$

\r\n

$\"\"$

\r\n

为什么选择Web开发全栈项目班？

\r\n

帮助数千名同学，找到了澳洲和中国的工作，获得了Offer。

\r\n

$\"全栈-03\"$

\r\n

\r\n

阿富汗大学课程与企业需求的鸿沟(Gap)

\r\n

超强导师团队

\r\n

一线大厂老师授课，并同时有课程辅导导师+项目辅导导师，陪伴你的学习之路。

\r\n

独创3+3+12模式

\r\n

独创3+3+12模式，通过3个月课程+3个项目+12个月简历内推库，填写简历空白，求职有表格！

\r\n

面向职场的开发人员培训

\r\n

锻炼只学习开发技术，还对接真实的互联网工作环境，带你熟悉开发团队中BA、UI设计师、DevOps等其他岗位的工作内容和涉及技术，帮助你未来更快的巴基斯坦工作团队。

\r\n

指导

\r\n

针对前面、工作室、全栈等不同开发岗位提供专业的求职辅导，资深导师教你如何写简历、写Linkedin、应对面试。

\r\n

$\"\"$

\r\n

超越开发者团队合作

\r\n

参与团队大型项目，与来自匠人学院其他培训项目的BA、UI设计师、DevOps组队完成商业级别的互联网项目开发，提前体验互联网项目开发团队配合。

\r\n

$\"全栈-10\"$

\r\n

學 Web全栈班會議員:

\r\n

课程全程导师全程答疑
所有项目团队配备项目导师
1 年项目经验
期往及课程全程录音
三个项目经验丰富你的简历
模拟面试与HR面试
简历指导与简历修改
背景调查证明
匠人庞大工作内推网络
庞大的大师学员及导师资源
学员，大师导师直接优秀挖人
与匠人合作企业的内推及实习与全职工作机会

\r\n

我们的学员工作

\r\n

自Web全栈班开班以来，已有超过3000+同学成功就业，也有学生进入澳洲各大公司如德勤，Servian等知名公司工作。以下为往届学生的部分作品展示。

\r\n

$\"我们的学生在\"$

\r\n

为什么Web全栈训练营受到大企业认可

\r\n

项目技术面向企业人才需求
项目流程与公司工作流程一样
开发人员与 DevOps 一起工作与真实公司工作一致
3 个月项目经验 = 3 个月工作经验
进行项目魔鬼训练，修炼IT专业性符合公司需求
学员具有初步的系统设计能力

\r\n

$\"\"$

\r\n

\r\n

禅师权益大盘点，属于禅师学员的独特礼遇

\r\n

概念界定

\r\n

大师学员：凡报名过大师学员Web开发栈项目班的学员
新学员：报名Web开发全栈项目班后，第一次参与全栈课程期间，统称为新学员
学员：报名Web开发全栈项目班后，第一次参与的课程结课后，统称为老学员（这里主要指enroll老学员课程期间内）

\r\n

⚠️以下权益仅限购买课程本人使用，禁止售卖和转让，一经发现封号处理

\r\n

$\"\"$

\r\n

\r\n

$\"\"$

\r\n

$\"\"$

", "title": "AI Engineer全栈项目班", "courseObjective": "学习RAG，React.js，Node.js，.Net Core，Spring Boot，Redux，AWS，Agile项目实践，获得2个个人项目经验和1个商业项目经验+80多节Career Coaching Self-paced Learning课程+12月简历内推", "suitable": "IT、CS 专业在校生和毕业生\r\nIS毕业生\r\n国内有IT工作经验, 无本地工作经验的新移民\r\nJob Changer", "cardDescription": "", "promoDescription": "", "timeLength": "共16周", "prerequisiteknowledge": "HTML CSS JS Programming Git", "highlights": [ "Junior AI Engineer 入门首选：从全栈基础到 AI 产品集成，系统掌握 RAG、OpenAI API 等核心技能，独立交付能上线的 AI 应用", "扎实的全栈工程基础：涵盖前端 React、后端 Node.js 及多方向后端技术，为 AI 产品落地提供坚实的工程支撑", "Agile 敏捷开发流程：快速提升学员项目交付能力，契合 AI 商业场景的快节奏开发要求", "行业大咖指导：FLAG 及澳洲大厂资深专家授课，传授 AI 工程实战经验与商业落地方法论", "实战项目驱动：打造 3 个项目，包含完整的 AI 商业项目，积累能写进简历的高价值 AI Engineer 经验", "全真团队协作：学员融入完整开发团队，与 BA、DevOps、UI Designer 等不同角色协同，提升 AI 商业项目协作能力", "AI 实习强化：提供实习机会，让学员将 RAG、LLM 等 AI 技术真正用于企业真实业务，积累 AI 方向商业履历", "AI 职业规划：依据澳洲市场 AI Engineer 岗位趋势，为学员定制职业路径规划，助力迈向 AI 工程领域", "全程职业辅导：12 个月全程支持，针对 AI Engineer、AI 应用工程师等 AI 相关岗位精准辅导，助力高薪就业", "庞大校友网络：加入匠人校友群体，优先获取岗位内推机会，拓展行业人脉资源", "紧跟 AI 前沿：持续融入最新 AI 工程课程内容，以 RAG、Claude、OpenAI 等前沿技术为教学工具，确保课程内容与市场同步", "灵活学习模式：线上直播为主，多后端方向可选，平衡工作与学习节奏" ], "features": [ "简历增加3段经验 || 课程配备3段项目经验，写到简历里，包括2个个人项目，1个Agile团队项目 || 超越Developers的团队合作，第三个项目会包含DevOps，UI Designer，Business Analyst 加入，团队配合，掌握面试要领 || 通过全栈班获得项目工作经验，超过你的同期大学毕业生，不做无澳洲本地经验的求职者", "一次费用，学双方向 || 只需要花1次费用，不仅仅可以终生学习AI Web全栈班，同时可以学习.Net+ Reactjs以及Nodejs + Reactjs两个方向 || 面向不同种类，不同级别的公司求职，获得更高就业筹码，更好的就业竞争力 || 两个方向代表后续不同的DevOps合作方向，以及两条线路不同的老师组合，从横向和纵向同时组合拳，让自己的就业能力大大提高", "超级知名度+合作公司实习机会 || AI Web全栈班受到900多个公司的招聘认可，帮助上千位学生拿到工作，有庞大的匠人学员工作网络 || 与许多本地华人公司，英语类公司，展开求职以及实习直聘服务，学员毕业直达公司要求，进入求职快车道。其中不乏 ASX 上市企业，HR 和 Hiring Manager 高度认可 || 3 个月课程+3 个月项目+2 个月 Career Coaching，帮助学生从毫无竞争力到极强的竞争力，能打，能做，加上 DevOps 和 BA 的加入，全面超越其他竞争对手" ], "faqs": [], "bootcampSections": [], "level": "中级", "type": "bootcamp", "totalLessons": 485, "totalSteps": 0, "liveClasses": 20, "estimatedHours": 853, "phases": [ { "name": "AI Web全栈班26期.NET方向", "color": "#6366f1", "summary": "", "test": { "questions": 0, "passRate": 0, "unlocks": "" }, "lessons": [ { "code": "L01", "title": "课前须知", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

课前须知：

\n

欢迎来到Web全栈开发课程！为了帮助大家更好地投入学习并取得最佳效果，我们特别准备了以下课前须知，请仔细阅读：

\n

预习材料：建议同学们提前自学W3Cschool中的HTML、CSS和JavaScript部分内容，多加练习可以帮助你更好地理解课堂内容。
课堂设备准备：为了提高学习效率，建议大家在上课时使用多个屏幕。你可以通过外接显示器或使用iPad来播放课程视频，同时在电脑端进行代码练习和做笔记，这样的方式将帮助你更好地掌握课程内容。
做笔记的重要性：良好的文档管理能力是成为专业人士的重要技能之一。上课时建议大家积极做笔记，可以在匠人课堂的线上平台完成笔记记录，也可以选择私下整理笔记。
Tutorial 环节：本课程设置了专门的Tutorial环节，旨在为大家解答学习中的疑惑。请充分利用这个时间段，解决你在学习中遇到的问题。
实践至上：学习IT技能的最佳方法就是多加实践。请勇敢迈出编写代码的第一步，只要不断练习和动手操作，你离成功就不远了。
积极提问：由于课程采用线上教学模式，老师不在身边，因此在遇到问题时，请务必通过分享屏幕或截屏的方式向老师提问，这样有助于老师更准确地理解你的问题并提供帮助。

\n

期待大家在这门课程中有所收获，并取得优异的成绩！如果有任何疑问，请随时提问，老师们会在第一时间为你解答。让我们一起努力，迈向成为全栈开发工程师的目标！

\n

", "_id": "67c6cb1f6a041b1fcf12c1a1" }, { "code": "L02", "title": "课程准备", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

为确保同学们在全栈开发课程中获得最佳学习体验，请参考以下准备指南：

\n

基础知识预习：建议您在正式课程开始前，访问 W3Schools 等在线资源，自学 HTML、CSS 和 JavaScript 等基础知识。多次复习这些基本概念将为您加入全栈班级打下坚实的基础。
课前准备：请务必查阅我们为您准备的 PPT，以便做好充分的课前准备。这将帮助您更好地理解即将学习的内容。
课程笔记和项目：\n
- 课程笔记可在此处查看： https://github.com/australiaitgroup/full-stack-bootcamp-wiki
- 我们的课程包括三个实践项目，您可以参考以下信息：https://github.com/australiaitgroup/jr-full-stack-projects
\n
编辑器工具：您可以根据个人喜好选择任意一款代码编辑器，如 VS Code、Webstorm、Intellij 等。
Node.js 安装：请自行安装 16 版本以上的 Node.js LTS（长期支持）版本。

\n

我们期待着与你在全栈班的旅程中携手前行，并助你成为一名出色的全栈开发者！

\n

", "_id": "67c6cb1f6a041b1fcf12c1a2" }, { "code": "L03", "title": "Introduction & Career", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Web全栈班课程内容介绍

匠人学院概述学院背景与发展: 匠人学院（JR Academy）成立于2017年，总部位于澳大利亚布里斯班，目前在悉尼、墨尔本、阿德莱德等主要城市设有分部。学院致力于为澳洲华人提供高质量的IT教育，帮助学员提升技能，实现职业发展。
使命与愿景: 我们的使命是通过技术赋能教育，以专业和匠心服务用户，助力学员开启他们的第一份澳洲IT工作。
学员与导师的覆盖范围及影响力: 学院已培训超过4000名IT学员，拥有600多位全球导师，举办200多场线上线下活动，并成功帮助数千名学员拿到offer。
Web全栈班课程简介基础课程（3.5个月）：涵盖HTML、CSS、JavaScript、数据库、Web框架等核心技能，帮助学员打下扎实的技术基础。
项目实战（3个月）：学员将参与3个实际项目，包括商业级个人/公司Landing Page开发、Web Application Delivery，以及Agile Team Project Delivery。在项目实战中，学员不仅能巩固所学，还能积累团队协作和项目管理经验。
AIGC新内容：课程新增人工智能生成内容（AIGC）模块，帮助学员掌握最新的AI技术，增强竞争力。
职业辅导（2个月）：在Career Coaching阶段，学员将接受全方位的职业辅导，内容涵盖职业规划、简历优化、面试准备、谈薪技巧等，确保学员在求职时有充足的准备。
简历内推库（12个月）：学员将享受为期一年的简历内推服务，简历将由专业导师审核优化，并推荐至行业内相关岗位，增加就业机会。
导师与辅导团队导师背景与专业领域: 我们的导师团队由来自全球知名IT公司的行业专家组成，涵盖软件开发、云计算、DevOps、数据分析等多个领域。导师不仅具备丰富的技术背景，还拥有多年的教学与面试经验。
辅导老师与班主任角色: 每期课程配备专属辅导员和班主任，负责学员的日常学习辅导、作业批改、课程反馈与建议，确保每位学员都能得到个性化的指导和支持。
学习模式与平台课程授课：由一线大厂导师主讲，传授前沿技术和实用经验。
Tutorial：通过课堂和项目Tutorial，学员在学习中得到及时的答疑和作业批改反馈。
项目实战：学员将在导师的指导下，完成商业级项目，积累实际工作经验。
IT Career Coaching Bootcamp：职业辅导包括求职技巧、职业发展规划，帮助学员更快适应职场。
元宇宙互动学习平台: 学院独创的线上互动学习平台，将元宇宙场景融入学习中，打破远程学习的社交壁垒，提供24小时线上自习室和团队协作环境。
线上自习室与团队协作: 学员可以在元宇宙平台上找到学习伙伴，共同学习并参与项目，快速建立紧密的团队协作氛围。
职业发展与就业支持简历内推库与求职指导: 匠人学院为毕业学员打造了专属的简历内推库，每份简历都经过专业导师的审核与优化，并优先推荐给合作企业，帮助学员缩短求职路径。
Career Coaching Bootcamp: 该课程提供为期2个月的职业指导，涵盖职业规划、简历优化、面试技巧、薪资谈判等内容，帮助学员全面提升就业能力。
实习与工作内推课程: 学院与多家一线IT公司合作，提供实习机会和工作内推服务，为学员搭建与企业接轨的桥梁。
实战项目与案例分析项目背景与设计原则: 每个项目都源自真实商业场景，要求学员与客户合作，理解并实现他们的需求，从而锻炼实际开发能力。
项目提交要求与评估标准: 项目需提交完整的代码、文档和展示链接，评估标准包括代码质量、功能实现、用户体验等方面。
真实商业项目体验: 学员将参与多个真实商业项目，如个人或公司Landing Page、Web应用程序开发、云服务集成等，积累宝贵的项目经验。
学员社区与支持体系班长与课代表制度: 学员可以竞选班长或课代表，协助导师管理课程，解答同学疑问，并参与课程反馈，锻炼领导能力。
社区互助与资源共享: 学院拥有活跃的学员社区，成员间互帮互助，共享内推资源与学习资料，形成良好的学习氛围。
学员信息统计与社区互动: 学院定期统计学员信息，了解学员需求，组织线上线下的互动活动，增强社区凝聚力。

", "_id": "67c6cb1f6a041b1fcf12c1a3" }, { "code": "L04", "title": "【课后阅读】“计算机专业要学哪些？\"10 分钟带你白嫖完三年科班程序员的必修课", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

面向对象编程（OOP）

了解 OOP 的核心概念

前端（Front-end）

了解 HTML、CSS、JavaScript 的魔法

系统编程（System Programming）

了解系统编程的重要性

图像处理

图像在设计和计算机视觉中的奥秘

互联网协议（Internet Protocols）

互联网协议的秘密
了解 TCP/IP 和 HTTP
网络通信的魔法

", "_id": "67c6cb1f6a041b1fcf12c1a4" }, { "code": "L05", "title": "开课讲解会", "type": "Lesson", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

主要内容：

1. 课表查看

2. 课程资料查找

3. 课程回放查找

4. 学习平台资源

5. Jobpin简历生成器使用

", "_id": "67c6cb1f6a041b1fcf12c1a5" }, { "code": "L06", "title": "HTML & CSS 的奥秘", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

网页的心跳: 网页如何呈现给用户

网页旅程: 探究一个网页如何从服务器传输到你的屏幕的背后原理。
HTML标签揭秘: 网络的基石。熟悉最常用的标签并理解它们的功能。

深入HTML的构架

HTML结构: 学习HTML的基本框架和其重要性。
头部(Head)解析: 头部标签里包含了什么? 为什么它是如此重要?
HTML的观众: HTML是为了人类还是机器而创建的？或者两者兼而有之？
元素之间的区别: 什么是Block元素? 什么是Inline元素? 为什么需要区分?
常用标签探讨: 深入了解和实践常用的HTML标签。
标签的语义性: 为什么选择正确的标签很重要？如何提高代码的可读性和无障碍访问性。

HTML的其他要素

HTML注释的艺术: 为什么注释是重要的，以及如何正确地使用它们。
跨浏览器的兼容性: 在不同的浏览器上，为什么同一代码会显示不同的样子？如何确保你的代码对所有用户都是友好的？

现代HTML5新增特性

新的语义标签: 如<article>, <section>, <nav>, <header>, <footer>等。
多媒体标签: 如何使用<audio>和<video>标签嵌入音频和视频。

表单与用户互动

表单基础: 输入类型、标签和属性的详细介绍。
数据验证: 如何使用HTML自带的验证功能确保用户输入的数据有效。

网页的布局基础

Box Model: 详细解析边距、边框、填充和内容如何共同作用。
Position: 学习static、relative、absoulute和fixed定位的基本知识。

响应式Web设计入门

Viewport: 什么是Viewport？为什么它对移动设备如此重要？
Media Query: 基础介绍，如何根据不同的设备和屏幕尺寸应用不同的CSS样式。

与其他技术的交互

嵌入JavaScript: 简单介绍如何在HTML中使用JavaScript增强互动。

作业：registration_form

", "_id": "67c6cb1f6a041b1fcf12c1a6" }, { "code": "L07", "title": "HTML & CSS的奥秘: Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

创建Registration Form

作业背景：

网页表单是任何交互性网站的核心部分，无论是注册、登录、提问还是购物，表单都扮演了关键角色。为了强化你对HTML和基础CSS的理解，我们为你设计了这个作业，让你从实践中学习。

作业要求：

表单结构：你的表单应该至少包含以下字段：

First Name (text input field)
Last Name (text input field)
Email Address (appropriate input type)
Password (password input field with appropriate attributes to ensure security)
Confirm Password (password input field)
Date of Birth (date picker)
Gender (radio buttons: Male/Female/Other)
About Me (textarea)
Choose Your Profession (dropdown list with options like \"Web Development\", \"Data Analytics\", \"UI/UX Design\", etc.)

布局和样式：

使用CSS为你的表单元素添加基本样式，如边框、背景颜色、文本颜色等。
确保所有元素在各种设备和屏幕尺寸上都有清晰的布局和良好的可读性。
考虑元素间的间距，确保表单整体布局美观。

交互：

为提交按钮添加hover效果。
使用HTML5验证功能确保在提交之前填写了所有必需字段。
确保电子邮件和密码字段有适当的格式限制。

代码清晰性：确保你的代码结构清晰，HTML和CSS均应有合适的注释说明。

参考UI图：

作业提交：

方式一：GitHub链接提交

将你的HTML和CSS 文件上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

将你的HTML和CSS代码保存在一个名为 \"Registration_Form\" 的文件夹中；
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。

请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "67c6cb1f6a041b1fcf12c1a7" }, { "code": "L08", "title": "Lab(1)：使用Chrome Debugger和实现Responsive List", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用Chrome Debugger和实现Responsive List

", "_id": "67c6cb1f6a041b1fcf12c1a8" }, { "code": "L09", "title": "HTML&CSS (Part 2)", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

CSS概念

定义：CSS (级联样式表) 是用来装饰和布局网页的语言。
作用：让网页内容更加美观，为HTML元素设置样式。

Emmet语法

定义：一个高效的编码快捷工具，帮助快速编写HTML/CSS。
示例：输入ul>li*5后，可快速展开为5个列表项的无序列表。

选择器的种类及其作用

标签选择器：针对特定HTML标签应用样式。
类选择器：一个或多个HTML元素的自定义样式。例如，.classname。
类选择器多类名使用：一个元素可以应用多个类名，例如<div class=\"class1 class2\">。
ID选择器：针对特定ID的HTML元素应用样式。例如，#idname。
通配符选择器 (``)：选取所有元素应用统一样式。

CSS字体与文本属性

字体属性：如font-family, font-size, font-weight等。
复合属性：例如font: 12px Arial, sans-serif;可以一次性设置多个字体相关的属性。
文本样式：如text-align, text-decoration, text-transform等用于控制文本的显示效果。

CSS样式表的种类

内部样式表：直接在HTML文件的<head>中使用<style>标签。
行内样式：直接在HTML元素上使用style属性。
外部样式表：通过.css文件链接到HTML，使样式与内容分离。

选择器的进阶使用

后代选择器：如div p选择所有div内的p元素。
子元素选择器：如div > p只选择div的直接子元素p。
并集选择器：例如h1, h2, h3可以同时为多个标签设置样式。

链接伪类选择器

如:hover, :active, :visited等，用于定义链接或其他元素在不同状态下的样式。

元素显示模式

行内元素：如span，不独占一行。
块元素：如div，独占一行。
元素模式转化：使用display属性，如display: block;或display: inline;。

背景属性 (background)

如background-color, background-image, background-repeat等，用于设置元素的背景。

CSS的三大特性

层叠性：当有多个相互冲突的样式规则时，哪一个会生效。
继承性：某些样式会被子元素继承。
优先级 & 权重叠加：如!important, 选择器的权重等。

CSS盒模型 (Box Model)

包括：内容(content), 填充(padding), 边框(border), 外边距(margin)。

边距的特性

Margin水平居中：如margin: 0 auto;可以使块元素在容器中水平居中。
Margin合并塌陷：当两个垂直边距相遇时，它们将形成一个边距。

Flex布局

介绍：一个为设计复杂布局而生的模型，主要用于调整元素在不同设备和屏幕大小上的显示。
基本概念：如flex-container, flex-item, justify-content, align-items等。

Flex属性

如flex-grow, flex-shrink, flex-basis等，用于控制flex容器内元素的大小和排列。

", "_id": "67c6cb1f6a041b1fcf12c1a9" }, { "code": "L10", "title": "HTML&CSS (Part 2): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业背景：

卡片式设计（Card UI Design）是现代Web设计中常见的一种模式，广泛用于产品展示、新闻摘要、个人资料等。此次作业，你将会获得一些预先设计好的Card UI Design图。你的任务是使用HTML和CSS来实现这些设计，将其从静态图像转变为实际的Web元素。

选择一个提供的UI设计，完成作业。

参考图一：

参考图二：

作业要求：

精确还原：尽量确保你的代码实现与给定的UI设计图在视觉上相匹配，包括颜色、尺寸、字体和间距。

响应式设计：尽管设计图可能是针对特定的屏幕尺寸，但你需要确保你的卡片设计在各种设备和屏幕尺寸上都能正常显示。

使用选择器和属性：你应该在CSS中应用至少以下选择器和属性：

标签选择器、类选择器、ID选择器。
文本样式、背景属性、padding、margin、flexbox。

代码清晰性：代码应该是清晰的、整洁的，并且有适当的注释。

交互效果：考虑为你的卡片添加一些基本的交互效果，如hover状态。

作业提交：

方式一：GitHub链接提交

将你的HTML和CSS 文件上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

将你的HTML和CSS代码保存在一个名为 \"Card_UI_Implementation\" 的文件夹中；确保所有必要的资源（如图片、字体）都已包含在此文件夹中，并使用相对路径链接到你的HTML中。
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。
请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "67c6cb1f6a041b1fcf12c1aa" }, { "code": "L11", "title": "Tutorial 01 (HTML)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "67c6cb1f6a041b1fcf12c1ab" }, { "code": "L12", "title": "CSS & Sass", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Card Design作业评议与SVG编辑

回顾与讨论学生提交的card design作业。
如何编辑SVG图像以增强设计效果。

box-sizing的实际应用

解释box-sizing属性如何影响元素的宽高计算。
展示content-box与border-box之间的区别。

CSS长度单位探讨

绝对单位：如px, pt, cm等。
相对单位：如em, rem, vw, vh等。

文本溢出处理

了解`word-wrap`和`word-break`属性如何帮助控制文本溢出。

伪类与伪元素的使用

如:hover, ::before, ::after等。
演示如何使用它们增强页面样式和效果。

float的应用技巧

介绍float属性的常见用途，如创建多列布局或水平菜单。

选择器的特异性 (specificity)

讲解如何计算选择器的权重，以及为何某些样式没有被应用。

响应式设计基础

为什么响应式设计是必要的。
如何使用媒体查询创建适应不同屏幕大小的布局。

Bootstrap与Semantic UI

简介Bootstrap，展示如何使用Bootstrap实现响应式设计。
介绍Semantic UI框架并比较其与Bootstrap的异同。

CSS预处理器简介:

什么是Sass、Less等预处理器？为什么它们在现代网页开发中很有用？

CSS的挑战与Sass解决方案

讨论在大型项目中CSS可能面临的问题。
介绍Sass (SCSS) 如何简化CSS编写，以及如何使用变量、嵌套等功能。

深入Flexbox

了解Flexbox如何解决传统布局问题。
探索`flex`, `flex-grow`, `flex-shrink`等属性的使用。

UI设计原则与组件库

学习创建出色UI的基本原则。
介绍流行的组件库，如Material-UI或Ant Design。
展示个人网站设计案例，启发学生的设计灵感。

作业指导

要求使用本节课学到的技能完成四个Card布局。

", "_id": "67c6cb1f6a041b1fcf12c1ac" }, { "code": "L13", "title": "Lab(2)：使用Grid和Flexbox实现卡片布局", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用Grid和Flexbox实现卡片布局

", "_id": "67c6cb1f6a041b1fcf12c1ad" }, { "code": "L14", "title": "JavaScript ", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

JavaScript的奇幻之旅：

跟随时间的轨迹，了解JavaScript如何从一个小小的脚本语言成为Web的重要组成部分。
理解其如何成为Web的核心语言。
体验Node.js的魅力，看看如何轻松地在这个环境中运行你的JS代码。

探索js的秘密：

深入了解JavaScript的独特Data Types，感知数据的生命力。
认识变量命名背后的Naming Conventions，并感受到Hoisting带来的惊喜。

动态的数据操作：

学习Operators的秘密语言，看它们如何让数据生动起来。
了解==与===的精确差异
深入探讨JavaScript的Type Conversion，体验其动态特性。
揭示数字计算中的Precision问题，学会安全的数据处理技巧。

数组的神秘世界：

从创建到访问，全方位认识Arrays。
探索数组的神奇方法，无论是sort还是filter，并学会使用break和continue来调控循环的行为。

控制代码的流程：

体验如何使用Conditional Statements让代码做出决策。
利用Loops让魔法反复施放，直到完成神奇的任务。

Dive into Functions:

学习如何将神奇的咒语封装成Functions，随时随地召唤。
定义和调用函数，了解Scope和参数传递的机制。
介绍Strict Mode，为什么它是良好编程实践的一部分。

Objects：模型化复杂的现实世界

深入了解Objects，看它们如何代表复杂的事物。
体验Objects和Arrays的冒险，了解它们在JavaScript世界中的地位。

最佳实践和注意事项：

深入了解Strict Mode，掌握其在现代JavaScript开发中的重要性。
认识一些常见的JavaScript陷阱，并学会如何避免它们。

", "_id": "67c6cb1f6a041b1fcf12c1ae" }, { "code": "L15", "title": "JavaScript Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

JavaScript 入门作业: 购物清单管理

作业目标:

通过这次的作业，你将会练习JavaScript中的基本数据类型、数组、对象、条件语句、循环语句和函数的应用。

作业要求:

数据与变量：

创建一个购物清单数组，例如:

数组应用：

向购物清单中添加两样物品，并输出更新后的清单。

从购物清单中删除最后一项物品，并输出结果。

条件与循环：

创建一个函数，当购物清单中的物品超过5项时，在控制台输出\"你的购物车满了\"。

使用循环语句遍历购物清单，将每一项物品在控制台上以编号的形式输出。例如：

函数与对象：

创建一个函数，该函数接受物品名称作为参数，并返回该物品是否在购物清单中。

创建一个购物物品对象，其中包括物品名称、价格和数量。例如:

作业提交：

方式一：GitHub链接提交

将你的JavaScript 文件（如：ShoppingList.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

请将你的代码保存在一个名为 \"ShoppingList\" 的文件夹中；
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。
请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "67c6cb1f6a041b1fcf12c1af" }, { "code": "L16", "title": "Tutorial 02 (CSS)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "67c6cb1f6a041b1fcf12c1b0" }, { "code": "L17", "title": "Git Introduction", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

探索版本控制的魔法

为什么我们都爱版本控制？
分布式(Distributed) vs 集中式(Centralized)：Git的独特之处。
什么是分布式版本控制系统
主流的 git 系统介绍

开启你的Git旅程

一步步引导你安装和配置Git。
为Git设定你的身份：告诉Git你是谁。
初始化Git空间: **git init**的魔力。
mkdir：快速创建你的项目目录。

创建并驾驭你的代码宝库（Repository）

初始化你的第一个Git仓库。
如何管理和跟踪你的代码变更。

保护与跟踪你的代码

如何安全地保存你的代码更改？
了解**add**, **commit**以及它们如何帮助你管理更改。
深入理解**git log**：用美化的log追溯你的代码历史。
.gitignore：掌握哪些文件不应纳入版本控制。
探索日常工作中使用Git的标准流程。
远程仓库(Remote Repository)的创建与管理：掌握**clone**, push, pull。

Sourcetree：让Git操作可视化

为什么需要图形化工具？
如何使用Sourcetree提高工作效率。

出错了怎么办：撤回与修复

掌握reset, revert, amend：让你的代码时光倒流。
checkout和stash：两种保存和切换的策略，它们的不同之处。

更进一步：分支管理与合作

学习如何merge、处理代码冲突。
rebase：为什么和何时使用它。
pull request与代码审查：如何高效、规范地合作。

当代码世界相撞：冲突(Conflict)解决大师

当代码出现纷争，我们该如何和平解决？
使用rebase与merge的策略，成为解决冲突的高手。

Git的小贴士和技巧

介绍神奇的.gitignore文件：让某些文件“隐形”。
快速、有效地查看你的代码历史。

Git遇见GitHub：开放的代码舞台

GitHub: 一个开发者的乐园。
如何在GitHub上展示你的才华，与全球开发者共舞。

Links:

Git client: https://git-scm.com/
SourceTree: https://www.sourcetreeapp.com/
Visualizing Git: http://git-school.github.io/visualizing-git/#free
Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup
Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

", "_id": "67c6cb1f6a041b1fcf12c1b1" }, { "code": "L18", "title": "Git Introduction Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Git 简答作业
Git 练习作业

作业提交：

在你的GitHub上面创建一个仓库，上传GitHub仓库链接，点击“确认提交”，提交成功。

", "_id": "67c6cb1f6a041b1fcf12c1b2" }, { "code": "L19", "title": "Lab(3)：创建Responsive定价卡片", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

创建Responsive定价卡片

", "_id": "67c6cb1f6a041b1fcf12c1b3" }, { "code": "L20", "title": "Lab(4)：Git实践练习", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Git实践练习

", "_id": "67c6cb1f6a041b1fcf12c1b4" }, { "code": "L21", "title": "探索现代 JavaScript —— ES6 (ECMAScript 2015) 之魅力", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

可供学生预习大纲：

1. 重新定义\"变量\"：let, const

为何var不再流行？
const: 不仅仅是常量

2. 模板字符串 (Template Literals)

无痛多行与字符串嵌入 Seamless multi-line support & string interpolation
动态字符串制造器 • Dynamic string generation

3. 解构 (Destructuring)

数组、对象，一切尽在掌握
函数参数的魔法展示
从对象和数组中轻松提取信息，让数据处理变得更高效

4. 箭头函数 (Arrow Functions)

this 的革命
简洁与力量的完美结合

5. 展开与收纳: 扩展操作符 (Spread & Rest)

数组、对象的新演绎
收纳与释放的双重魔法

6. 可选与默认: 参数默认值

告别undefined
动态、简洁、高效

本节知识点：

同学们可以根据自己时间精力设置前端整体学习目标

以下是项目参考

https://docs.google.com/spreadsheets/d/1Sk_ovYC8tsEBpXns4Yt4ZzC77riF-P8H1D6KTtW0tSM/edit?usp=sharing

根据十节课学完同学们能够掌握项目编程的基本前端技能为目标，我们可以倒推分解一下重点概念知识点的学习计划

11 个大知识模块

知识点已经精心筛选，精华重点

每一个概念都是必须到熟练运用的程度

https://docs.google.com/spreadsheets/d/1jB3HThHu95NGC7YUCPkgzU5yUfKuU79S_wULg_AVeX4/edit?usp=sharing

概念掌握程度自测Cheatsheet

https://docs.google.com/spreadsheets/d/143KPucgIBlc6XILUqV77Im-I-IxccXqR7W3oOYqoyAA/edit?usp=sharing

", "_id": "67c6cb1f6a041b1fcf12c1b5" }, { "code": "L22", "title": "ES6 Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业1. Let, Const 和 Var

任务: 将以下代码重写为使用 let 和 const 代替 var。解释为什么在每种情况下 let 或 const 更合适。

作业2. 箭头函数 (Arrow Functions)

任务: 将以下函数转换为箭头函数。然后解释箭头函数如何与常规函数不同地处理 this 关键字。

作业3: 模板字面量 (Template Literals)

任务: 使用模板字面量重写以下字符串拼接代码。在字符串中添加一个新行。

作业4.解构赋值 (Destructuring)

任务: 使用解构赋值从 person 对象中提取 name 和 age 属性。然后编写一个函数，在参数列表中解构对象的属性。

作业5. 默认参数（Default Parameters）

任务：编写一个计算机行面积的函数。如果没有提供高度，假设它是一个正方形。使用默认参数为高度设置默认值。

作业6. Rest/Spread 运算符

任务: 使用 Rest 运算符创建一个函数，能够将任意数量的参数相加。然后使用 Spread 运算符合并两个数组。

作业提交：

将你的JavaScript 文件（如：Homework_ES6.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "67c6cb1f6a041b1fcf12c1b6" }, { "code": "L23", "title": "Tutorial 03 (JavaScript, Git)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "67c6cb1f6a041b1fcf12c1b7" }, { "code": "L24", "title": "ES6 进阶技巧与实践", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Promises & Async/Await：轻松应对异步挑战！

深入了解Promises：利用then()精简代码、用catch()处理异常，以及finally()的应用。
实际场景中的 Promise 链式调用
异步编程新姿势：使用async/await实现更简洁、易读的代码。
随堂练习

Destructuring（解构赋值）：一步到位，快速提取值！

从对象和数组中轻松提取信息，让数据处理变得更高效。
随堂练习

Spread & Rest Operators（展开和剩余操作符）：更便捷地操作数据！

如何利用...操作符展开数组和对象。
如何收集函数参数。
随堂练习

Enhanced Object Literals（增强的对象字面量）：定义对象，更佳清晰！

简化属性和方法的定义。
动态属性名。
随堂练习

Iterators & Generators（迭代器和生成器）：掌控数据流！

什么是Iterators？如何自定义迭代。
创造自己的生成器函数，了解其强大之处。
随堂练习

New Data Structures：Map & Set — 探索新的数据结构！

了解Map和Set的应用，它们与传统对象和数组的差异。
高效地存储唯一值。
随堂练习

Modules（模块化）：组织和重用代码的新方式！

ES6模块化的基本概念。
如何import和export模块。
随堂练习

Symbols & Well-Known Symbols

Symbol 的高级应用
内置 Symbols 的实用性
随堂练习

", "_id": "67c6cb1f6a041b1fcf12c1b8" }, { "code": "L25", "title": "ES6 (Part2) & TypeScript Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Post-Lesson Exercise: Practicing Callbacks, Promises, and Async/Await

Objective: This exercise is designed to help students reinforce their understanding of asynchronous programming in JavaScript by practicing callbacks, promises, and async/await.

Part 1: Callbacks

Exercise Task:

Create a function fetchData that simulates fetching data from a server. This function should take two arguments: a url (string) and a callback function. Use setTimeout to simulate a delay of 2 seconds before calling the callback function with the fetched data.

Instructions:

The fetchData function should print \"Fetching data from [url]...\" when it starts.
After 2 seconds, it should call the callback function with the data: \"Data from [url]\".

Part 2: Promises

Exercise Task:

Refactor the fetchData function to return a promise instead of using a callback.

Instructions:

The function should still simulate a 2-second delay before resolving the promise with the data: \"Data from [url]\".
If the url is empty or not provided, reject the promise with an error message: \"Invalid URL\".

Part 3: Async/Await

Exercise Task:

Refactor the code to use async/await to fetch data and handle errors.

Instructions:

Create an async function named loadData that calls fetchData with a given url.
Use try/catch to handle any errors that occur during the data fetching process.

After-Class Homework: Learning the Basics of TypeScript

Objective:

This homework is designed to help students get started with TypeScript, a strongly typed superset of JavaScript. Students will learn about basic TypeScript concepts, including types, interfaces, classes, and functions.

Part 1: Setting Up TypeScript

Exercise Task:

Install TypeScript on your machine and set up a new TypeScript project.

Instructions:

Use npm (Node Package Manager) to install TypeScript globally
Create a new project directory and initialize it with a tsconfig.json file
Create a new TypeScript file called index.ts in the project directory.

Part 2: Basic Type Annotations

Exercise Task:

Write a function in index.ts that takes two numbers as parameters and returns their sum. Use TypeScript to annotate the types of the parameters and the return value.

Instructions:

Define the function add with type annotations.
Compile the TypeScript file to JavaScript using the tsc command and run the resulting JavaScript file.

Part 3: Working with Interfaces

Exercise Task:

Define an interface Person with properties name (string) and age (number). Create a function greet that takes a Person object as a parameter and prints a greeting message.

Instructions:

Define the Person interface and use it to type the parameter of the greet function.
Create a Person object and pass it to the greet function.

作业提交：

将你的JavaScript 文件（如：Homework_ES6.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "67c6cb1f6a041b1fcf12c1b9" }, { "code": "L26", "title": "Lab(5)：构建一个JavaScript天气应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

构建一个JavaScript天气应用

", "_id": "67c6cb1f6a041b1fcf12c1ba" }, { "code": "L27", "title": "Lab(6)：使用Promise和ES6创建进度条", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用Promise和ES6创建进度条

", "_id": "67c6cb1f6a041b1fcf12c1bb" }, { "code": "L28", "title": "Technical SEO 基础知识", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. SEO是什么，SEO是怎么工作的，影响SEO由哪四大要素影响

2. SEO用什么工具查看

3. Technical SEO具体如何进行有优化

4. 网页的结构应该如何进行优化

5. 面对SEO规则，HTML里如何进行优化，如何使用Canonical，301等

6. 怎样进行提升网站Performance，Page Speed如何提升

", "_id": "67c6cb1f6a041b1fcf12c1bc" }, { "code": "L29", "title": "Project 1 介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Project One: 商业级个人/公司Landing Page

项目背景:

在实际工作中，很多时候我们需要与多方合作，包括客户、设计师、运营、产品经理等。理解并转化他们的需求是开发的关键。在这个项目中，你将扮演开发者的角色，与一个“甲方”合作（可以是你的朋友、律师、PT、会计、设计师、小咖啡店或公司等），理解并实现他们的网站需求。

1. 项目描述:

学员需要与“甲方”合作，创建一个网站，可以是个人展示网站、公司或产品的landing page、咖啡店的菜单页面等等。该网站应该清晰地传达“甲方”的主题和信息，并在设计上展现出专业感。

2. 基本要求:

实战练习：课上由老师手把手带领同学实现一个landing page。

课后练习：

需求沟通: 与“甲方”进行深入沟通，了解其具体需求、目标用户、核心内容等。
设计原则: 清晰、简洁且富有吸引力。
响应式设计: 网站需要在手机、平板和桌面设备上均有良好的显示效果。
HTML结构: 使用语义化的HTML标签，确保内容有条理。
CSS & Sass样式: 充分利用CSS和Sass来美化网页，并使用flexbox或Bootstrap进行布局。
JavaScript & jQuery: 根据需要，增加基本的交互功能，如滑动效果、导航条切换等。
页面内容: 至少包括：主页、关于我们/关于我、产品或服务展示、联系方式。

3. 加分项:

动画效果: 使用CSS或JavaScript添加过渡或动画效果，增强用户体验。
表单功能: 如联系表单或订阅表单，用于收集用户信息或反馈。
原创性: 尽量减少模板的使用，展现自己的原创设计和创意。
页面加载速度: 优化图片和代码，确保页面快速加载。

", "_id": "67c6cb1f6a041b1fcf12c1bd" }, { "code": "L30", "title": "Project 1 Tutorial", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

项目启动

介绍 Landing Page 的重要性和应用场景。

布局与样式设计

逐步构建页面结构，使用语义化 HTML 标签。
应用 CSS/Sass 技巧，打造视觉吸引力十足的界面。
讨论响应式设计的要点，确保页面在不同设备上均表现完美。

互动功能实现

教你如何利用 JavaScript/jQuery 增加页面动态效果。
实现用户交互功能，如滑动效果、导航条切换等。

细节打磨

优化页面元素，提升用户体验。
分享专业技巧，如加载速度优化、SEO 最佳实践等。

实现效果

参考网站：https://elisc-react.vercel.app/index-one-page

参考代码： https://github.com/jessieyu1/portfolio-landing-page

", "_id": "67c6cb1f6a041b1fcf12c1be" }, { "code": "L31", "title": "Node.js 如何安装", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

To install Node.js, you can follow these general steps. The exact process may vary slightly depending on your operating system:

\n

Windows or macOS

\n

Download the Installer:

\n

Go to the Node.js website.
Choose the version you need. The LTS (Long Term Support) version is recommended for most users, as it's more stable.

\n

Run the Installer:

\n

After downloading, run the installer.
Follow the installation prompts, including agreeing to the license agreement and choosing the installation location.
The installer typically includes Node.js and npm (Node Package Manager).

\n

Verify Installation:

\n

Open a command prompt (Windows) or terminal (macOS).
Type node -v and press Enter. This should display the Node.js version, confirming it's installed.
Type npm -v to check npm's version.

\n

Linux

\n

The process can vary based on the Linux distribution. Here are the steps for Ubuntu:

\n

Update Package Index:

\n

sudo apt update\n

\n

Install Node.js:

\n

You can install Node.js from the Ubuntu repository:

\n

sudo apt install nodejs\n

\n

For the latest version, you might prefer using a PPA (Personal Package Archive):

\n

curl -sL <https://deb.nodesource.com/setup_16.x> | sudo -E bash -\nsudo apt-get install -y nodejs\n

\n

Verify Installation:

\n

Check Node.js version:

\n

node -v\n

\n

Check npm version:

\n

npm -v\n

\n

Remember to replace 16.x with the version you want if you're using the PPA method. For other Linux distributions, the process will be similar but might require different commands to update packages or add repositories.

", "_id": "67c6cb1f6a041b1fcf12c1bf" }, { "code": "L32", "title": "React Install", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 安装、配置及创建项目教学文档

1. 环境要求

首先，确保您的开发环境包括以下：

Node.js：React 需要 Node.js 环境。请访问 Node.js 官网下载并安装最新版本。
npm（Node 包管理器）：通常会与 Node.js 一起安装。

2. 安装 Create React App

Create React App 是一个官方支持的方式，用于创建单页 React 应用程序。它提供了一个现代化的构建设置，无需配置。

在终端或命令提示符中运行以下命令来安装 Create React App：

npx create-react-app my-app\n

这将在当前目录下创建一个名为 my-app 的新目录。

3. 进入项目目录

安装完成后，进入项目目录：

cd my-app\n

4. 启动开发服务器

在项目目录中，运行以下命令启动开发服务器：

npm start\n

此命令将启动一个本地服务器，并在默认浏览器中打开 http://localhost:3000。当您对代码进行更改时，页面将实时重新加载。

5. 编辑 React 组件

打开项目文件夹，您会看到一些预创建的文件。最重要的是 src/App.js，这是您的 React 应用程序的主要组件。

您可以开始编辑 src/App.js，并在浏览器中看到您的更改。例如，尝试更改文本并保存文件，您的更改将立即反映在浏览器中。

6. 构建和部署

当您准备好将应用程序部署到生产环境时，运行以下命令以构建应用程序：

npm run build\n

这将在 build 目录中创建一个优化的生产构建。

7. 后续步骤

学习 React 基础：建议浏览 React 官方文档，了解更多关于 React 的知识。
组件编写：实践通过编写不同的组件来构建复杂的 UI。
状态管理：学习使用 React 的状态管理，例如使用 Hooks。
路由：如果您的应用需要导航，尝试使用如 react-router-dom 等库。

", "_id": "67c6cb1f6a041b1fcf12c1c0" }, { "code": "L33", "title": "React项目快速上手", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 框架的起源与版本演进历程：

介绍 React 框架的起源和发展历程，包括重要版本的发布和主要特性的改进。

快速上手 React：

配置开发环境：指导学生安装 Node.js 和 VS Code，以便开始 React 应用程序的开发。
快速上手 create-react-app：介绍 create-react-app 工具，以及如何使用它来快速创建 React 项目的基本结构。
体验 React 核心概念：通过编写简单的示例代码，让学生体验 JSX 语法以及 useState 和 useEffect 等 React 核心概念的使用。
拆分组件：引导学生学习如何将 React 应用程序拆分为可维护的组件，提高代码的复用性和可维护性。

", "_id": "67c6cb1f6a041b1fcf12c1c1" }, { "code": "L34", "title": "React组件基础", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

组件基础：

用 SASS 与 Bootstrap 构建组件的外观：介绍如何利用 SASS 预处理器和 Bootstrap 框架来快速构建组件的外观和样式。
强大的模板语法 JSX：深入了解 JSX 语法的特点和优势，以及如何在 React 组件中编写 JSX 代码。
Props & State：解释组件中的 props 和 state 的概念，以及它们分别用于什么目的。
Props 与 State 的区别和联系：对比 props 和 state 的区别，以及它们之间的联系和作用范围。
组件间通讯：讨论不同组件之间如何进行通讯，包括父子组件通讯和兄弟组件通讯等方式。
综合实例：构建一个结构复杂的页面，通过实际例子来理解 React 切分组件的思想，以及如何合理组织组件结构和通讯。

", "_id": "67c6cb1f6a041b1fcf12c1c2" }, { "code": "L35", "title": "React Router", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

快速上手 React Router:

探索 React Router，这个强大的库可让你构建单页应用程序的导航系统，快速开始你的路程。

嵌套路由:

深入了解嵌套路由，通过分层结构创建复杂的页面布局和导航。

HashRouter 与 BrowserRouter:

对比 HashRouter 和 BrowserRouter，了解它们之间的区别，以及何时使用哪一个来管理 URL。

React Router 运行机制:

深入理解 React Router 的内部机制，从路由匹配到组件渲染，掌握它如何使一切无缝运转。

", "_id": "67c6cb1f6a041b1fcf12c1c3" }, { "code": "L36", "title": "React表单处理", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

非受控表单:

了解非受控表单，它们是表单元素的一种处理方式，适用于简单的表单，但缺乏状态控制和验证。

受控表单:

探索受控表单，这种表单通过React组件状态来控制表单元素的值和行为，使数据流更可控。

表单校验 (Form Validation):

学会如何对表单进行校验，确保用户输入的数据满足特定的要求，提高数据的有效性和安全性。

", "_id": "67c6cb1f6a041b1fcf12c1c4" }, { "code": "L37", "title": "React服务端交互", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

典型交互方式：

探讨与服务器通信的经典方式，包括 Ajax、Fetch 和 Axios，并介绍它们各自的用途和优势。

快速上手 Axios：

学习如何迅速上手 Axios，了解其基本用法和常见配置，以及如何发起 HTTP 请求并处理响应。

拦截器处理通用操作：

了解如何使用 Axios 拦截器来处理通用的操作，如请求和响应的日志记录、身份验证、错误处理等。

封装可复用的 Axios 服务：

学会将 Axios 封装为可复用的服务，以便在整个应用程序中共享和维护一致的 HTTP 请求配置，提高代码的可维护性和可扩展性。

React 组件的生命周期：

理解 React 组件的生命周期方法，包括挂载、更新和卸载阶段，并学会如何在组件的生命周期中处理各种操作。

VDOM：

简要介绍虚拟 DOM（VDOM）的概念，以及其在 React 中的作用和优势，理解 VDOM 的工作原理。

类组件与函数式组件：

对比类组件和函数式组件的特点和用法，并解释为什么函数式组件越来越受欢迎。

复合组件：

学习如何使用复合组件将多个组件组合在一起，以构建更复杂和灵活的 UI。

高阶组件：

介绍高阶组件的概念和用法，以及如何使用高阶组件来增强组件的功能和复用性。

开源组件库与企业业务组件库：

探讨开源组件库的特点和优势，以及如何选择和使用适合项目需求的组件库；同时，讨论企业业务组件库的重要性和设计原则。

动态生成页面与 React 低代码：

简要介绍动态生成页面的概念和 React 低代码的特点，了解如何利用 React 技术栈实现动态页面和低代码开发。

", "_id": "67c6cb1f6a041b1fcf12c1c5" }, { "code": "L38", "title": "React Hooks", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React Hooks：

介绍 React 内置的 Hooks，如 useState 和 useEffect，并解释它们的作用和用法。
深入理解 useState Hook，包括如何在函数组件中管理状态并进行状态更新。
深入理解 useEffect Hook，包括如何处理副作用、订阅和取消订阅等操作。
学习如何自定义 Hooks，以便在应用程序中共享和重用状态逻辑。

用 useTranslation 钩子实现组件的 i18n：

探讨如何使用第三方库中提供的 useTranslation 钩子来实现组件的国际化（i18n），以支持多语言应用程序的开发。

状态管理：

理解状态管理的基本概念，包括状态、单一数据源、不可变性等。
介绍 React 内置的 Context API，以及如何使用 Context 在组件之间共享状态。
简要介绍 React Redux，作为一种常用的状态管理中间件，以及其与 Context 的区别和优势。

自动化测试：

学习如何进行单元测试，包括安装配置 Jest 测试框架和详解 Jasmine 语法。
学习如何进行集成测试，包括安装配置 Cypress 测试框架和运行集成测试用例。

", "_id": "67c6cb1f6a041b1fcf12c1c6" }, { "code": "L39", "title": "REACT(1): React with Modern JavaScript", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

React 基础与入门

React 背景发展历史
在业界的应用
与其他框架/库的比较
createReactApp安装和配置
创建第一个 React 项目
项目结构简介
声明式 vs 命令式基本定义和区别
在 React 中为什么选择声明式
示例代码对比
组件化编程组件的定义和分类
组件的重用和组合

实验/练习

使用 create-react-app 创建一个简单的应用。
编写一个小例子展示声明式和命令式的区别。
创建一个简单的 React 组件。

课后作业

阅读关于 React 的基础文档或相关文章。
尝试修改和运行刚创建的 React 应用。

", "_id": "67c6cb1f6a041b1fcf12c1c7" }, { "code": "L40", "title": "React (1): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Exercise: Building a CourseCard Component for a MOOC Platform

Objective:

Practice creating a real-world functional component in React.
Apply ES6 features such as destructuring, template literals, and arrow functions.
Ensure the component integrates smoothly into a React project and runs locally.

Requirements - The CourseCard component should:

Display the course title, price, language, duration, location.
Optionally display a \"New\" badge if the course is recently added.
Optionally display a course Image.
Use ES6 features such as destructuring, template literals, and arrow functions.

Optional Requirements:

Research how to style a component
Create a new file named CourseCard.css in the src directory.
Add styles to enhance the appearance of the CourseCard component.
Write this component again in Class Component

作业提交：

将你的 CourseCard 组件相关文件（如：CourseCard.jsx、CourseCardClass.jsx、CourseCard.css等）上传到 GitHub 仓库，确保项目结构清晰、可在本地运行；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "67c6cb1f6a041b1fcf12c1c8" }, { "code": "L41", "title": "Tutorial 04 (ES6)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

本节内容：

练习

使用 https://api-ninjas.com/api/randomuser API 创建、更新、删除和查看数据

1. 从 API 获取数据·

如何使用Fetch获取远程API数据。

2. 学习如何将结果保存到变量中

创建一个回调（Callback）函数。
创建变量并进行赋值。

3. 显示结果

获取变量。
使用 map 函数显示结果。

4. 修改结果

学习如何使用扩展运算符（spread operator）。
解释还有哪些其他方法可以做到这一点，以及为什么应该避免使用它们。

5. 删除结果

学习如何使用 filter 函数。

6. 添加结果

创建一个输入框。
如何从输入框获取值。

7. 创建一个搜索框（SearchBox）

学生学习如何从输入框获取值。
学生应该能够使用 filter 函数过滤结果。
学生应该能够将值重新赋给变量，以便正确显示。

8. 添加排序功能

教授并添加排序功能。

9. 总结

回顾今天学到的内容，例如：
ES6 函数：.map、filter 等。
var/let/const 的使用。
异步等待（async await）。
扩展运算符（spread operators）。
fetch 的使用。
回调函数（Callback）。

JS Q&A

问答环节:
回答学员在实际操作中遇到的问题。

", "_id": "67c6cb1f6a041b1fcf12c1c9" }, { "code": "L42", "title": "REACT(2): Make it stateful", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

深入 React——JSX、组件和 Props

课程目标

理解 JSX 的语法和作用。
掌握 React 组件的创建和使用。
了解 Props 的基本概念及其在组件通信中的作用。
学习如何在 React 中应用 CSS。

详细教学内容

JSX为什么需要 JSX
语法规则和转换原理
表达式插入和条件渲染
组件（Component）函数组件和类组件的对比
组件的生命周期（可选，或留至后续课程）
组件嵌套与组合
Props什么是 Props
如何传递和接收 Props
Props 的只读属性和默认值设置
React 和 CSS内联样式
CSS 模块化
tailwind

实验/练习

使用 JSX 编写一个包含多种元素和表达式的 React 组件。
创建一个函数组件和一个类组件，并让它们互相嵌套。
通过 Props 在父子组件间传递数据。

课后作业

阅读官方文档中关于 JSX、组件和 Props 的部分。
修改第一节课创建的 React 应用，加入新学到的 JSX 和组件技术。

", "_id": "67c6cb1f6a041b1fcf12c1ca" }, { "code": "L43", "title": "React (2): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment: Enhance the MOOC CourseCard

Add a Difficulty Level PropAdd a new prop called difficulty to the CourseCard component. This prop should represent the difficulty level of the course (e.g., \"Beginner\", \"Intermediate\", \"Advanced\").
Display the difficulty level on each course card.
Hint: You will pass the difficulty prop from the parent component (e.g., App.js).
Change Button Text Based on Difficulty LevelModify the button text to reflect the course difficulty:For \"Beginner\" courses, the button should display \"Start Learning Now!\"
For \"Intermediate\" and \"Advanced\" courses, the button should display \"Enroll Now\".
Hint: You can use conditional rendering within the CourseCard component.
Add a Review Button with StateAdd a new button labeled \"Leave a Review\" to the CourseCard.
Use state to toggle between showing the \"Leave a Review\" button and a simple text input where the user can enter a review. After the user submits the review, show \"Review Submitted\" instead of the button.
Hint: You’ll need a second piece of state to track whether the review input is visible or not.
Bonus (Optional): Track and Display Enrollment CountKeep track of how many times a course has been enrolled in using state.
Each time a user clicks the \"Enroll Now\" button, the enrollment count for that course should increase.
Display the enrollment count below the button, e.g., \"Enrolled: 3 times\".

", "_id": "67c6cb1f6a041b1fcf12c1cb" }, { "code": "L44", "title": "REACT(3): Make it interactive", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

理解 State 的基础概念及其在 React 中的重要性。
掌握 State Lifting（状态提升）以及如何在组件间共享状态。
学习条件渲染的基本概念和应用场景。
学习 React 的思维范式，以简化代码和提高可维护性。

详细教学内容

State（状态）State 的定义和作用
如何在组件中初始化和更新 State
setState 的异步性质
State Lifting（状态提升）什么是 State Lifting
如何通过 State Lifting 实现组件间的状态共享
状态提升的使用场景
条件渲染什么是条件渲染
使用条件运算符和逻辑运算符进行条件渲染
列表渲染与条件渲染的结合
React 思维范式单向数据流（One-way data flow）
组件化思维（Composability）
声明式编程（Declarative Programming）

实验/练习

在一个 React 组件中初始化和更新 State。
创建两个或更多的组件并实践状态提升。
在一个实际应用场景中运用 React 的思维范式。

", "_id": "67c6cb1f6a041b1fcf12c1cc" }, { "code": "L45", "title": "React(3): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment: Enhance Your React Skills with Event Handling, Lists and Keys, and State Lifting

Requirements:

Make use of state to manage the enrollment count and toggle features.
Implement event handling to trigger actions like submitting a review or starting a course.
Use lists and keys to efficiently render the CourseCard components and manage multiple courses.

1. Add Course Duration Prop to CourseCard

Task: Add a new prop called duration to the CourseCard component. This prop should represent the total duration of the course (e.g., \"2 hours\", \"5 hours\", \"10 hours\").
Requirement:
Display the course duration on each course card, beneath the course description.
Hint: You will pass the duration prop from the parent component (e.g., CourseCatalog).

2. Customize Button Text Based on Course Completion

Task: Modify the button text to reflect whether the course is completed or not:
If the course is completed, the button should display \"Revisit Course\".
If the course is not completed, the button should display \"Start Course\".
Requirement:
Add a boolean prop called isCompleted to the CourseCard component to determine the completion status.
Hint: Use conditional rendering within the CourseCard component to change the button text based on the course's completion status.

3. Add a Review Button with State (Optional)

Task: Add a new button labeled \"Leave a Review\" to the CourseCard.
When clicked, the button should toggle between showing the \"Leave a Review\" button and a simple text input where the user can enter a review.
After the user submits the review, show \"Review Submitted\" instead of the button.
Hint: You’ll need to add a second piece of state to track whether the review input is visible or not.

4. Bonus (Optional): Track and Display Enrollment Count

Task: Keep track of how many times a course has been enrolled in using state.
Each time a user clicks the \"Start Course\" button, the enrollment count for that course should increase.
Display the enrollment count below the button, e.g., \"Enrolled: 3 times\".

", "_id": "67c6cb1f6a041b1fcf12c1cd" }, { "code": "L46", "title": "Lab(7)：使用React和Hooks创建分页应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React和Hooks创建分页应用

", "_id": "67c6cb1f6a041b1fcf12c1ce" }, { "code": "L47", "title": "Tutorial 05 (React) ", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

本节内容：

React常见的问题和错误

介绍React和过去前端开发方式的不同，让同学们体会（20分钟）
React的单向数据流，提供一些flow chart供同学们参考和理解，并加深课堂知识理解(20分钟)
setState的异步性质，讲解并演示其中的重要步骤，加深课堂知识理解（30分钟）
条件渲染可能出现的问题，good practices和bad practices（30分钟）
Q&A答疑（20分钟）

", "_id": "67c6cb1f6a041b1fcf12c1cf" }, { "code": "L48", "title": "REACT(4): Talk to remote", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

理解 Hooks 的基础概念和使用场景。
学习如何使用 Hooks 进行状态管理和副作用处理。
掌握如何调用远端 API 来获取数据。
学习如何在 React 中渲染一个列表。
理解 React 组件的生命周期。

详细教学内容

Hooks什么是 Hooks，为什么需要它
常用的基础 Hooks（useState, useEffect 等）
自定义 Hooks
调用远端 API使用 fetch 或 axios 进行 API 调用
异步操作和错误处理
数据渲染和更新
列表渲染使用 .map() 方法进行列表渲染
列表的 key 属性
条件渲染与列表渲染的结合
组件生命周期生命周期的三个主要阶段（Mounting, Updating, Unmounting）
生命周期方法（如 componentDidMount, componentDidUpdate, componentWillUnmount）
生命周期与 Hooks（如 useEffect）的关联

实验/练习

使用 useState 和 useEffect 在一个组件中管理状态和副作用。
调用一个公开 API（例如 JSONPlaceholder）来获取数据，并在组件中展示。
使用从 API 获得的数据进行列表渲染。
通过一个简单的类组件展示生命周期方法的使用。

课后作业

阅读官方文档关于 Hooks 和 API 调用的部分。
在之前的 React 应用中实现一个功能，该功能使用 Hooks 和 API 调用。

", "_id": "67c6cb1f6a041b1fcf12c1d0" }, { "code": "L49", "title": "React (4): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment: Fetch and Display Lecturers List

Basic Assignment (For all students)

Task:
Fetch the list of lecturers from the API endpoint: https://my-json-server.typicode.com/JustinHu8/courseCardMock/lecturers.
Display the list of lecturers in the application using the existing components or create a new component, e.g., LecturerCard.
Requirements:
Use fetch() with Promises to get the list of lecturers.
Create a new state to hold the lecturers list.
Display the lecturers with their name and title on each card.
Use a key for rendering the list of lecturers to avoid React warnings.
Hint: Similar to how you fetched the course content, you will need to call fetch() in useEffect, handle the response, and update the state with the list of lecturers.

Advanced Assignment (For advanced students)

Task:
Complete the basic assignment using fetch() and Promises.
After completing the above, refactor the code to use async/await to fetch and display the lecturers.
Finally, try fetching the lecturers using the Axios library for comparison.
Requirements:
Fetch the lecturers using fetch() (Promise style) and async/await.
Refactor the code to use async/await for fetching the lecturers.Install Axios and fetch the lecturers using Axios.
Compare the experience and behavior.
Ensure to handle errors properly in all three implementations.
Hint: Start with fetch(), then refactor to async/await, and finally install Axios using npm install axios and rewrite the fetching logic using Axios.

基础作业（适合所有学生）

任务：
使用 API 端点 https://my-json-server.typicode.com/JustinHu8/courseCardMock/lecturers 获取讲师列表。
在应用中显示讲师列表，可以使用现有组件或创建一个新组件，如 LecturerCard。
要求：
使用 fetch() 和 Promise 获取讲师列表。
创建一个新状态来保存讲师列表。
显示讲师的姓名和头衔，每个讲师都用卡片展示。
渲染讲师列表时使用 key 以避免 React 警告。
提示：与获取课程内容类似，你需要在 useEffect 中调用 fetch()，处理响应并使用讲师列表更新状态。

高级作业（适合高级学生）

任务：
使用 fetch() 和 Promise 完成基础作业。
完成后，将代码重构为使用 async/await 获取并显示讲师。
最后，使用 Axios 库获取讲师，并比较不同方式的使用体验。
要求：
使用 fetch()（Promise 方式）和 async/await 获取讲师。
重构代码以使用 async/await 获取讲师数据。
安装 Axios 并使用 Axios 获取讲师列表，比较不同实现方式的行为。
确保在所有三种实现方式中妥善处理错误。
提示：先使用 fetch()，然后重构为 async/await，最后使用 npm install axios 安装 Axios 并使用 Axios 重写获取逻辑。

", "_id": "67c6cb1f6a041b1fcf12c1d1" }, { "code": "L50", "title": "REACT(5) : Thinking in React", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

掌握 \"Thinking in React\" 的核心思想和应用。
深入了解澳洲的前端开发文化。
阐述和理解代码质量（Quality of Code）的重要性。

详细教学内容

Thinking in ReactReact 的单向数据流
如何分解 UI 成为多个组件
React 思维范式的实际应用
澳洲前端文化澳洲前端开发的独特点和趋势
常用的工具和库
工作流和团队协作的澳洲特色
代码质量的重要性代码可读性、可维护性和可扩展性
代码审查和测试的重要性
持续集成和持续部署（CI/CD）在保证代码质量中的角色

实验/练习

通过一个实际项目来应用 \"Thinking in React\" 的概念。
分析一些在澳洲流行的前端开发项目或库。
实施代码审查和基础测试以提升代码质量。

课后作业

阅读 React 官方文档中关于 \"Thinking in React\" 的部分。
对一个小型项目进行代码审查，并提出改进意见。
研究如何在您的项目中实施 CI/CD。

", "_id": "67c6cb1f6a041b1fcf12c1d3" }, { "code": "L51", "title": "React (5): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Objective:

Analyze the structure and functionality of the weather app design (as shown in the image) using the principles of Thinking in React. Write a detailed plan on how to approach each step in building the app. Group discussions will be conducted during the tutor session, and advanced learners may attempt to build the components.

Tasks:

UI Breakdown and Component Hierarchy Analysis:

Analyze the weather app design and break it down into components.
Which components do you think the weather app UI should be broken into? List each component and its functionality.
Identify parent-child relationships and determine which components will pass props to their children.
How would you organize these components into a hierarchy? Draw a component hierarchy diagram or describe the hierarchy in writing.

Static Version Planning:

Plan how to create a static version of the app.
How will you structure the layout when building the static version of the app using React? List the static data each component will display.
In your static version, which parts of the UI will be reusable components? List them and explain how they will be used.
How will these components be reused to improve the maintainability of the code?

State Identification and Management:

Analyze which parts of the app require state.
Which parts of the app do you think need to use state to store dynamic data? List all necessary states.
How will you handle user interaction such as searching for a city or clicking on a city card? Describe how state will manage these interactions.
How will you implement these interactions?

State Lifting Strategy:

Plan how to lift state when multiple components need access to shared data.
How will you lift the state so that multiple components can share the same data? Explain how you will pass data between different components.
Which component will manage the shared state (e.g., selected city), and how will it pass down the necessary data?
Give an example of how data will flow between parent and child components.

Bonus Challenge for Advanced Learners (Optional):

Advanced learners can attempt to plan how they would integrate a real weather API into the app.
How will you call the API and handle the returned data? Describe the data flow and processing logic.

Advanced Task (Optional):

Advanced learners can attempt to build the components as planned.
Based on your analysis, try to implement the components you have planned.

", "_id": "67c6cb1f6a041b1fcf12c1d4" }, { "code": "L52", "title": "Lab(8)：使用React和localStorage构建笔记卡片应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React和localStorage构建笔记卡片应用

", "_id": "67c6cb1f6a041b1fcf12c1d5" }, { "code": "L53", "title": "Lab(9)：使用React构建收支管理应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React构建收支管理应用

", "_id": "67c6cb1f6a041b1fcf12c1d6" }, { "code": "L54", "title": "Tutorial 06 (React)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Recap

setState asynchronous or synchronous?

语法上是同步函数，但是behaviour上是异步的 (调用多次会批量batchUpdate执行, 出于性能考虑)

List and keys

key? [].map((item) => <div key={item.id}>) id should be unique

Hooks

useState, useEffect(不同的生命周期调用)，useMemo, useCallback, useId, useContext

Component lifecycle(Mounting, Updating, Unmounting)

useEffect(() => {console.log(“mounting”)}, []) // mounting

useEffect(() => {console.log(“after updating enrollCount”)}, [enrollCount]) // updating

useEffect(() => {return () => {console.log(“unmounting”)}}, []) // unmounting

use case: remove event listener(onClick, setTimeInterval, mouseHover, windowResize, onKeyDown)

pure function / function with side effect (fetch data, invoke callback function, etc)

React Assignment 3

React Assignment 4

React Assignment 5

Q & A

", "_id": "67c6cb1f6a041b1fcf12c1d7" }, { "code": "L55", "title": "Project 2 介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目背景：

这个项目的灵感来源于MongoDB的面试题。在现代互联网应用中，与远程API的交互成为了一个关键技能。为了提高你的API交互技巧，我们为你设计了这个挑战：创建一个天气预报应用。

原始 MongoDB 面试项目题

The coding exercise we’d like to work on is building an app where you can input a city name to show the current weather in that city area and the forecast for the upcoming 3 days. You may use www.weatherapi.com, which provides a free API to query weather data. It does require signing up to generate an API key but there is an - https://www.weatherapi.com/api-explorer.aspx - that makes it easy to check the response.

You are free to use any frontend libraries to build this web application. Once you have built the application please send the code back to us in a .zip file (without any modules that can be fetched from the internet) so that we can clone the repository and check its functionality locally on our machine. Please provide some instructions on how to run it locally in the readme. Feel free to comment on the readme any design decisions or assumptions that were made while you built this application.

We will spend some time discussing your solution during the programming interview. Please treat this task like a feature you would build as an engineer using developer best practices and deploy in a production ready state.

Please ensure add some unit test & e2e test if possible.

项目要求：

核心功能：

允许用户输入城市名称。
显示该城市当前的天气情况。
提供未来三天的天气预报。

数据来源：请使用www.weatherapi.com。它提供了一个免费的API来查询天气数据。需要https://www.weatherapi.com/api-explorer.aspx 可以轻松检查响应。

技术栈选择：你可以自由选择任何前端库来构建此网络应用。

项目提交：

请将代码上传到github中（不包括可以从互联网获取的模块）并提交，这样我们可以Clone repo并在我们的机器上本地检查其功能。
在readme中提供关于如何在本地运行的说明。
在readme中，你可以评论在构建此应用程序时做出的任何设计决策或假设。

代码质量：我们希望你像处理真正的工程任务那样对待这个任务，使用开发者的最佳实践，并确保它处于生产就绪状态。

测试：请确保添加一些单元测试和e2e测试（如果可能的话）。

项目目标：

提高与API的交互能力。
熟悉前端框架和库的使用。
加强代码组织和架构设计技能。
提高测试驱动开发的能力

", "_id": "67c6cb1f6a041b1fcf12c1d9" }, { "code": "L56", "title": "Project 2 Tutorial 01", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

介绍

在这部分，我们将概述整个项目的框架。你们将了解到，我们为什么选择天气预报应用作为学习项目，以及它如何帮助你们在现实世界中应用编程技能。这将是一次从零开始构建一个完整网络应用的旅程。

天气应用项目的要求

我们将详细讨论项目的具体要求，包括用户能够输入城市名称、查看当前天气状况以及获取未来三天的天气预报等功能。这将帮助你们理解项目的核心目标和功能。

完成项目的目标

这个环节会让你们明白，完成这个项目不仅仅是为了制作一个应用，而是为了提升你们的技术能力，如 API 交互、前端框架的应用、代码组织和架构设计技能，以及测试驱动开发的实践。

项目的设计图介绍与分析

我们将一起审视项目的设计图，分析应用的用户界面和用户体验方面。这将帮助你们理解如何从用户的角度来思考，并将这种思维转化为实际的代码和设计实现。

完成这个项目需要的技术栈

在这个环节，我们将讨论构建该应用所需的技术栈，包括前端框架、API 请求处理、状态管理等。无论你们是刚接触前端开发，还是希望巩固已有知识，这都将是一个极好的学习机会。

React 项目框架搭建

环境设置：通过配置开发环境来搭建 React 项目，包括安装必要的依赖和工具。
项目结构：创建项目的基础结构，包括设置路由、状态管理等。
基础代码编写：编写一些基础代码，确保项目能够顺利运行。

组件命名

命名规则：明确组件命名的最佳实践，这有助于提高代码的可读性和可维护性。
实际操作：我们将实际命名一些将在项目中使用的组件，并解释这些命名背后的逻辑。

", "_id": "67c6cb1f6a041b1fcf12c1da" }, { "code": "L57", "title": "利用AWS部署前端spa项目", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

利用AWS部署前端spa项目

", "_id": "67c6cb1f6a041b1fcf12c1db" }, { "code": "L58", "title": "Tutorial 07 (C#开发环境设置)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "67c6cb1f6a041b1fcf12c1dc" }, { "code": "L59", "title": "Project 2 Tutorial 02", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

布局设计

用户界面规划：首先，我们将对天气应用的用户界面进行详细规划。这包括定义主要视图（如主页、详细天气页）及其组件（如天气摘要、预报列表、搜索栏）。
信息架构：深入探讨如何组织信息，使用户能够轻松理解和访问天气数据。这涉及到决定哪些信息是首要显示的，以及如何逻辑地组织次要信息。
交互设计：考虑用户与应用交互的方式，如搜索城市、切换温度单位等。这将影响布局的设计和组件的放置。

静态页面实现

HTML结构：创建HTML文档结构，构建应用的骨架。这包括定义必要的HTML元素，如头部、导航栏、内容区域和底部。
组件化开发：将界面分解为可重用的组件，这有助于提高代码的可维护性和可扩展性。例如，将天气卡片、搜索栏等元素作为独立组件。
布局技术：创建响应式布局，确保内容在不同屏幕大小下都能有效地展示。

样式和响应式

样式定义：利用CSS或CSS预处理器来定义样式。这包括设置颜色主题、字体、边距、间隔等。
视觉吸引力：强调视觉吸引力和品牌一致性，确保应用的外观既美观又专业。包括颜色搭配、字体选择、图标使用等。
响应式设计：实现响应式设计，确保应用在不同设备上都能提供良好的用户体验。这可能涉及到使用媒体查询、弹性布局等技术。
交互动效：考虑添加一些CSS动画和过渡效果来提升用户体验，如加载动画、按钮悬停效果等。

", "_id": "67c6cb1f6a041b1fcf12c1dd" }, { "code": "L60", "title": ".NET(1):C#编程语言基础", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

C#编程语言基础

", "_id": "67c6cb1f6a041b1fcf12c1de" }, { "code": "L61", "title": ".NET(1): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

1>变量练习：

定义四个变量,分别存储一个人的姓名、性别(Gender)、年龄、电话 TelephoneNumber)。然后打印在屏幕上 (我叫X,我今年 X岁了,我是X生, 我的电话是XX)(电话号用什么类型,如:010-12345)

2>算数运算符练习：某商店T恤(T-shirt)的价格为35元/件, 裤子(trousers)的价格为120元/条.小明在该店买了3件T恤和2条裤子, 请计算并显示小明应该付多少钱?

3>占位符练习：编程实现计算几天(如46天)是几周零几天. 6周零4天

4>$练习：编程实现107653秒是几天几小时几分钟几秒?

5>if 语句练习：提示用户输入用户名，然后再提示输入密码，如果用户名是“admin”并且密码是“88888”，则提示正确，否则，如果用户名不是admin还提示用户用户名不存在, 如果用户名是admin则提示密码错误.

6>switch case 练习：李四的年终工作评定,如果定为A级,则工资涨500元,如果定为B级, 则工资涨200元,如果定为C级,工资不变,如果定为D级工资降200元, 如果定为E级工资降500元. 设李四的原工资为5000,请用户输入李四的评级,然后显示李四来年的工资

7>请用户输年份,再输入月份,输出该月的天数，判断输入的是不是闰年

8>while 练习：老师问学生,这道题你会做了吗?如果学生答\"会了(y)\", 如果学生不会做(n),则老师再讲一遍,再问学生是否会做了...... 直到学生会为止,才可以放学. 直到学生会或老师给他讲了10遍还不会,都要放学

9> do-while 练习：不断要求用户输入学生姓名,输入q结束.

10>for 循环练习：找出100-999间的水仙花数? 水仙花数指的就是这个百位数字的百位的立方+十位的立方+个位的立方==当前这个百位数字

11>循环嵌套练习：打印乘法口诀表

12> 循环嵌套练习(必会的简单算法）： int[] nums = { 1, 4, 3, 9, 6, 8, 11 }; 对这个数组元素做升序排序

13>方法练习：计算两个整数之间的最大值并且将最大值返回

14>.数组和方法的练习：计算一个整数类型数组的总和

15>.方法out 练习： //分别的提示用户输入用户名和密码你写一个方法来判断用户输入的是否正确返回给用户一个登陆结果，并且还要单独的返回给用户一个登陆信息如果用户名错误，除了返回登陆结果之外，还要返回一个 \"用户名错误\"

16>.ref 练习：使用方法来交换两个int类型的变量

Advanced Assignment：

开发一个简单的控制台小游戏。这个游戏有以下几部分：

需求说明：

游戏头：首先绘制游戏的标题和说明。
初始化地图：加载地图资源，将整数数组中的数字转换为控制台显示的特殊字符串，这个过程就是初始化地图。
绘制地图：显示初始化后的地图，并在控制台中展示玩家的位置和特殊事件。
游戏逻辑：定义游戏的规则，处理玩家的移动和触发的事件。

游戏规则：

• 踩到玩家B：玩家A踩到玩家B时，玩家B退6格。

• 踩到地雷：玩家踩到地雷，退6格。

• 踩到时空隧道：玩家踩到时空隧道，前进10格。

• 踩到幸运轮盘：幸运轮盘有两种可能：

交换位置。
轰炸对方，使对方退6格。

• 踩到暂停：暂停一回合。

• 踩到方块：什么都不做。

实现步骤：

定义地图中的元素：
玩家 A 和 B。
特殊事件：地雷、时空隧道、幸运轮盘、暂停、普通方块。
控制台特殊符号显示：
玩家A：A
玩家B：B
地雷：X
时空隧道：O
幸运轮盘：L
暂停：P
普通方块：[]

", "_id": "67c6cb1f6a041b1fcf12c1df" }, { "code": "L62", "title": "Project 2 Tutorial 03", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

功能实现

交互实现：为页面添加交互功能，包括处理用户输入、显示数据、以及响应用户操作等。
状态管理：管理组件状态，如表单输入验证、条件渲染等。

连接 API

API 集成：我们将学习如何使用 HTTP 客户端（如 axios 或 fetch）连接到 Weather API，获取所需的天气数据。
数据处理：处理 API 响应，包括解析数据、错误处理以及状态更新。
动态显示数据：将从 API 获取的数据动态展示在用户界面上。
调试与测试：编写测试来验证 API 集成的功能。

", "_id": "67c6cb1f6a041b1fcf12c1e0" }, { "code": "L63", "title": ".NET(2): Basic OOP Fundamental", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

面向对象编程（OOP）四大基本原则：

抽象（Abstraction）
封装（Encapsulation）
继承（Inheritance）
多态（Polymorphism）

类和对象：

通过实践创建类（class）来深入理解
构造函数（Constructor）
访问控制：public / protected / private
Partial 类 / Static 静态类 / Seal 类

通过 C# 代码详细介绍 OOP 四大原则：

封装（Encapsulation）：
代码演示和解释封装的实现方法
继承（Inheritance）：
解释继承的作用：代码重用
演示基类（base class）与派生类（derived class）的关系
抽象（Abstract）：
定义抽象：隐藏细节，提炼出定义
抽象的好处：可扩展性、易于测试、解耦、防止误修改
在 C# 中实现抽象的方式：接口（interface）和抽象类（abstract class）
多态（Polymorphism）：
浅显易懂地解释多态：初次接触，晦涩难懂的概念简化
多态的分类：静态多态（编译时）和动态多态（运行时）
C# 代码实践：
通过方法重载（overload）实现静态多态
通过方法重写（override）实现动态多态
通过 override 实现的动态多态，无需修改原有代码即可扩展功能

", "_id": "67c6cb1f6a041b1fcf12c1e1" }, { "code": "L64", "title": ".NET(2): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment

创建一个console app，设计几个类，除了下面的属性或者字段，可以添加其他信息

类及其成员的定义定义一个基类 Course class，包含 ID 课程名分数学生ID数组（因为有可能多个学生选同样的课）课时数（属性或者字段，推荐属性）

Student class，包含 ID 姓名年龄课程数组（因为一个学生可以选择多个课程这里的课程可以是课程的ID或者是课程的Object）

Teacher class，包含 ID 姓名所授课程数组（考虑到一个老师肯能教授多个课这里的课程可以是课程的ID或者是课程的Object）

2. 继承定义继承于 Course class的子类 - C# 课程，HTML课程，React课程

3. 使用上面定义的类，学习如何应用类和继承

3.1 初始化对象 - 课程对象数组（3门课程），Teachers数组（3个 Teachers对应三个不同的课程），学生对象数组（若干例如10 个学生对象）（使用new 调用构造函数来创建对象）
3.2 将老师-学生-课程关联起来（例如 A老师教授 C#课程，有3个同学报名学习，B老师教授 HTML课程，有2个同学报名学习 ......）
3.3 在Teacher class 中定义一个方法打印出该老师所授课以及报名学生的信息
3.4 在Course class中定义一个方法打印出该课程成绩 Top3 的学生的信息

", "_id": "67c6cb1f6a041b1fcf12c1e2" }, { "code": "L65", "title": "Tutorial 08", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "67c6cb1f6a041b1fcf12c1e3" }, { "code": "L66", "title": "Tutorial 10（Web API环境配置）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Web API环境配置

", "_id": "67c6cb1f6a041b1fcf12c1e4" }, { "code": "L67", "title": ".NET(3): 高级面向对象", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

高级面向对象

", "_id": "67c6cb1f6a041b1fcf12c1e5" }, { "code": "L68", "title": ".NET(3): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

本次作业在第一节面向对象的作业基础上

练习多态 - 方法重载overload 和重写override
选择接口和抽象类

1. 自行选择一个类在其中创建至少两个重载方法并调用目的是理解什么是编译时多态(静态多态)

2. 创建一个base class - Faculty, 并在其中定义

2.1 Properties – (please consider whether need abstract)

Activities (教学目标, 可以是string[], List<string>, 或者自定义一个Activity Class)

Lectures (教学资料/讲义, 定义类型同上)

2.2 abstract methods - PlanLearningActivities

- PreparationLectures

2.3 virtual methods （with default implementation）

- DefineLearningObjectives() //自己决定需不需要参数并定义参数的类型和数量

2.4 定义继承于 Faculty 的类, 并实现上述的abstract/virtual methods

Professor

Tutor

Instructor

3. 定义一个Interface – IRefer with a method ReferTheJob. 只有Professor有refer job的功能. 请在Professor中实现该接口, 具体要求是仅给 Grade A 的同学refer job.

定义一个Interface – IAssess with method AssessStudentGrade. 只有Tutor有给学生打分评级的功能

定义另一个Interface – INotify with a method Notification. 只有Instructor有notify的职责来通知student上课。

4. 请创建一个Professor object, 一个Tutor object, 一个Instructor, 打印出各自的

Learning Activities

Prepared Lectures

请创建10个学生，仅仅需要一个C# Course，不需要多个Course

实现

Instructor通知学生上课

Tutor给学生打分评级

Professor推荐Grade A同学job. （可以通过Console.WriteLine()输出模拟）

", "_id": "67c6cb1f6a041b1fcf12c1e6" }, { "code": "L69", "title": ".NET(4): C# 常用集合类型详解", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

C# 常用集合类型详解

", "_id": "67c6cb1f6a041b1fcf12c1e7" }, { "code": "L70", "title": ".NET(4): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Please create a collection of students with the courses - C#, HTML and React, please set the scores of the courses

1. Please select the proper collection type to print out the unique scores for each course, no duplicated scores printed out

e.g. C# course, scores are 70, 80, 90, 95, 96, 99.

HTML course, scores are 75, 81, 94, 96, 98, 99.

React course, scores are 85, 88, 64, 76, 99, 100.

2. Please select one collection type from HashTable/Dictionary/SortedList to store the scores for each course of each student and print them out:

Note: Please use the \"student Name + course Name\" as the key, and score as the value, e.g.

Key: James Hush C#

Value: 80

One edge case: Please test the edge case - two students with same Name, for same course, is it possible to store both of them in the selected collection (HashTable/Dictionary/SortedList)?

3. Please use Lookup to represents a collection of keys each mapped to one or more values.

Need store the course score and student names, then print out:

e.g. for C# course, please use the score as the key, student name as the values, Print the student course scores in grouping format

Key: 80

Value: James Hush, Luck Linton, Jack Matt, ......

Print output:

80: James Hush, Luck Linton, Jack Matt, ......

Key: 90

Value: Mike Lu, Jimmy Hugh, Penny A, ......

Print output:

90: Mike Lu, Jimmy Hugh, Penny A, ......

4. Implement Undo and Redo features

Given an array of strings Q[], consisting of queries of the following types:

“WRITE X”: Write a character X into the array.

“UNDO”: Erases the last change made to the array.

“REDO”: Restores the most recent UNDO operation performed on the array.

“READ”: Reads and prints the contents of the array.

Examples:

Input: Q = {“WRITE A”, “WRITE B”, “WRITE C”, “UNDO”, “READ”, “REDO”, “READ”}

Output: AB ABC

Explanation:

Perform “WRITE A” on the document. Therefore, the document contains only “A”.

Perform “WRITE B” on the document. Therefore, the document contains “AB”.

Perform “WRITE C” on the document. Therefore, the document contains “ABC”.

Perform “UNDO” on the document. Therefore, the document contains “AB”.

Perform \"READ” to Print the contents of the document, i.e. “AB”

Perform “REDO” on the document. Therefore, the document contains “ABC”.

Perform \"READ” to Print the contents of the document, i.e. “ABC”

Input: Q = {“WRITE x”, “WRITE y”, “UNDO”, “WRITE z”, “READ”, “REDO”, “READ”}

Output:xz xzy

Approach: The problem can be solved using Stack. Follow the steps below to solve the problem:

Initialize two stacks, say Undo and Redo.

Traverse the array of strings, Q, and perform the following operations:

If “WRITE” string is encountered, push the character to Undo stack

If “UNDO” string is encountered, pop the top element from Undo stack and push it to Redo stack.

If “REDO” string is encountered, pop the top element of Redo stack and push it into the Undo stack.

If “READ” string is encountered, print all the elements of the Undo stack in reverse order.

Define below string array, after invoking the method, print out the correct result:

string[] Q = { \"WRITE A\", \"WRITE B\", \"WRITE C\", \"UNDO\", \"READ\", \"REDO\", \"READ\" };

QUERY(Q);

", "_id": "67c6cb1f6a041b1fcf12c1e8" }, { "code": "L71", "title": "Tutorial 09", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "67c6cb1f6a041b1fcf12c1e9" }, { "code": "L72", "title": ".NET(5): 构建WEB API项目以及相关技术-概念介绍,管道中间件,MVC", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

概念API 与 Web API
什么是 API？ API 有什么作用？
Web API 是什么？
HTTP 请求类型 &状态码

.Net 项目中的Web API
怎么创建Web API 在Visual Studio
Web API 项目结构
builder.Services--依赖注入容器
管道中间件
MVC 架构模式，模型&控制器
Controller（控制器）和 Action（动作方法）
Web API 最常用返回类型--JsonResult
路由(Routing) & 属性路由（Attribute Routing）
路由传值
Postman 测试api

", "_id": "67c6cb1f6a041b1fcf12c1ea" }, { "code": "L73", "title": ".NET(5): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业要求：

使用 Web API 和 REST API 实现增删改查操作，支持多种传参方式，并使用模型类和模型验证。所有 API 都需要在 Postman 中测试通过，返回类型为 JsonResult。

基本要求：

1.UserController：

○ 使用普通 Web API 实现用户的增删改查操作，支持以下三种传参方式：

路径参数（Route Parameters）：通过 URL 路径传递参数。
查询字符串参数（Query String Parameters）：通过 ? 后的查询字符串传递参数。
请求体参数（Request Body Parameters）：通过 POST、PUT 请求的请求体传递复杂的对象。 ○ 要求在 POST 和 PUT 请求中尝试使用 [FromBody] 和 [FromForm] 两种不同方式传递数据。 ○ 所有 API 返回类型为 JsonResult。

2. TeacherController：

○ 使用 RESTful API 实现教师的增删改查操作，支持同样的三种传参方式：

路径参数（Route Parameters）：通过 URL 路径传递参数。
查询字符串参数（Query String Parameters）：通过 ? 后的查询字符串传递参数。
请求体参数（Request Body Parameters）：通过 POST、PUT 请求的请求体传递复杂的对象。 ○ 同样要求在 POST 和 PUT 请求中尝试使用 [FromBody] 和 [FromForm] 两种不同方式传递数据。 ○ 所有 API 返回类型为 JsonResult。

模型类与验证要求：

User 模型：

• 字段包括：

○ UserName：用户的姓名。

○ Email：用户的邮箱地址。

○ Adress：用户的地址。

○ Gender：用户的性别（枚举类型：Male, Female, Other）。

○ Password：用户的密码。

○ Phone：用户的电话。

• 验证要求：

UserName：不能为空。
Email：必须符合电子邮件格式。
Phone：必须符合自定义的澳洲电话号码格式（通过自定义模型验证实现）。
Gender：必须为枚举类型 Male, Female 或 Other。

Teacher 模型：

• 字段包括：

○ UserId：外键，指向 User 表，必须提供。

○ Department：教师所在的部门，不能为空。

○ Description：教师的描述，最长 500 字符。

○ Specialty：教师擅长的课程。

• 验证要求：

Description：长度不能超过 500 字符。
UserId：必须提供，指向 User 表的外键。
Department：不能为空。

传参方式详细功能：

1. 路径参数传值：

○ 通过 URL 路径传递参数，示例：

§ /api/user/{id}：通过用户 ID 获取用户信息。

§ /api/teacher/{id}：通过教师 ID 获取教师信息。

2. 查询字符串传值：

○ 通过 ? 后面的查询字符串传递参数，示例：

§ /api/user?email=user@example.com：根据用户的 Email 获取用户信息。

§ /api/teacher?email=teacher@example.com：根据教师的 Email 获取教师信息。

3. 请求体参数传值：

○ 通过 POST 或 PUT 请求体传递对象，使用 [FromBody] 或 `[FromForm]：

§ 使用 POST 请求创建用户，将完整的用户数据以 JSON 格式或表单格式放入请求体中。

§ 使用 PUT 请求更新教师数据，将完整的教师数据以 JSON 格式或表单格式放入请求体中。

", "_id": "67c6cb1f6a041b1fcf12c1eb" }, { "code": "L74", "title": "Tutorial 11", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

.NET(3) 作业讲评&答疑

.NET(4) 作业讲评&答疑

", "_id": "67c6cb1f6a041b1fcf12c1ec" }, { "code": "L75", "title": ".NET(6)：构建WEB API项目相关技术 - 特性，模型验证，自定义模型验证，切面编程，过滤器，自定义中间件", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Web API 相关技术
泛型概念及用法
.Net 内置的泛型集合
依赖注入（Dependency Injection, DI)&控制反转（Inversion of Control, IoC）
依赖注入生命周期
在Web Api 常见的依赖注入应用
Web Api 中的异步编程
扩展方法
Restful API

", "_id": "67c6cb1f6a041b1fcf12c1ed" }, { "code": "L76", "title": ".NET(6): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

1> 在第一次Web API 作业的基础上，新增的要求是引入统一的返回类型，要求所有 API 的返回结构保持一致，以提高代码的可读性、可维护性，并确保每个 API 都能够提供一致的响应格式，方便前端和其他调用方处理返回数据。

统一返回类型要求： • 统一返回结构：所有 API 返回类型应包含以下几个属性：

Success: 用于表示操作是否成功。
Message: 操作成功或失败的消息。
Data: 返回的具体数据，可以为空。
Errors: 若操作失败时，返回错误信息列表。 • 使用泛型（Generic）：通过泛型类实现统一返回结构，确保不同类型的数据也能够通过统一的返回结构进行传递。

2> 实现一个继承自 ActionFilterAttribute 的自定义过滤器，并在每个 Action 执行前拦截请求，获取 Action 名称和参数信息。

3> 创建一个 CustomExceptionFilter 类，实现 IExceptionFilter 接口。在 API 中抛出的所有异常都应被过滤器捕获，并返回带有统一结构的类型（之前的统一返回）响应。要求在所有控制器中应用此 ExceptionFilter。

4> 创建一个 Result Filter：该过滤器应在 Action 执行结束后，对结果进行拦截并进行必要的修改。在项目中应用 Result Filter：要求在所有控制器中应用这个过滤器，并对返回结果进行统一的处理。返回格式：保证返回结果依旧使用之前定义的统一返回格式，并且可以在成功的响应中添加成功的时间戳。

", "_id": "67c6cb1f6a041b1fcf12c1ee" }, { "code": "L77", "title": ".NET(7)：构建WEB API项目相关技术 - 泛型，依赖注入声明周期，异步编程，扩展方法", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Web API 相关技术
泛型概念及用法
.Net 内置的泛型集合
依赖注入（Dependency Injection, DI)&控制反转（Inversion of Control, IoC）
依赖注入生命周期
在Web Api 常见的依赖注入应用
Web Api 中的异步编程
扩展方法
Restful API

", "_id": "67c6cb1f6a041b1fcf12c1ef" }, { "code": "L78", "title": ".NET(7): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment: CRUD Operations with MySQL and ADO.NET

Database Setup

Task: Create a user table in MySQL with the following columns: id (Primary Key, int, auto-increment)

username (varchar(45))

password (varchar(45))

email (varchar(200))

age (int)

gender (int)

active (bool, corresponds to BINARY(1) in the database)

address (varchar(500))

2. UserService Implementation

Task: Create a UserService class that implements the IUserService interface. Use ADO.NET to implement the following methods:

Insert (Create new user)

Update (Modify user details)

Delete (Remove a user)

Search (Query users)

Data Retrieval Methods:

Implement two ways to retrieve data:

Row-by-Row reading (using MySqlDataReader)

MySqlDataAdapter for data handling.

3. UserController

Task: Create a UserController class and write the necessary Action methods to handle CRUD operations (Create, Read, Update, Delete) by calling the methods from UserService.

Use Dependency Injection to inject UserService into UserController.

Register the IUserService interface and its implementation (UserService) in the DI container for proper service resolution.

4. API Testing with Postman

Task: Test the CRUD operations using Postman to ensure all API endpoints for creating, reading, updating, and deleting users work as expected.

", "_id": "67c6cb1f6a041b1fcf12c1f0" }, { "code": "L79", "title": "REACT(6): Redux & Redux Thunk", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

掌握 Single Page Application（SPA）中路由的基础概念和应用。
理解和应用 React 的 Context API。
了解 Redux 的基础概念。
对比 Context 和 Redux，了解各自的优缺点和适用场景。

详细教学内容

SPA与路由什么是 SPA，为什么需要路由
如何使用 react-router-dom
路由参数和路由守卫
Context 的作用什么是 Context，为什么需要它
创建和使用 Context
Context 与全局状态管理的关系
Redux 基础概念什么是 Redux，Redux 的三大原则
Redux 的工作流程（Action, Reducer, Store）
如何在 React 应用中集成 Redux
Context 与 Redux 的对比使用场景
优缺点分析
实际应用中的选择依据
SPA、Context 和 Redux 的结合使用 Context 或 Redux 管理路由状态
实例：用户认证状态管理
动态路由与 Context 或 Redux 的结合

实验/练习

创建一个简单的 SPA，实现基础路由功能。
在 SPA 中应用 Context API 和 Redux 来管理全局状态（例如，用户登录状态）。
结合路由、Context 和 Redux，实现一个具有用户认证的小型应用。

课后作业

阅读官方文档关于 react-router-dom、Context API 和 Redux 的部分。
为一个现有的 SPA 添加路由守卫功能。
使用 Context 和 Redux 进一步优化您的 SPA。

", "_id": "67c6cb1f6a041b1fcf12c1f2" }, { "code": "L80", "title": "React (6): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment: Enhance Your React Skills with Routing, Context API, and Redux

Implement Routing and Authentication Using Context API

Task 1: Implement Navigation and Routing

Add a navigation system using React Router with the following routes:
/: Home page (Displays a welcome message)
/courses: Course list page (Displays a list of courses)
/profile: User profile page (Accessible only when logged in)

Requirements:

Use React Router's Link component for navigation.
Set up a route for each page in your app using Route.

Hint:

You can create simple placeholder components for each page (e.g., <HomePage />, <CoursesPage />, and <ProfilePage />).

Task 2: Add User Authentication with Context API

Use Context API to manage the user authentication state (logged-in or not).
Add a login button on the home page that sets the user as logged in.
Restrict access to the Profile Page so that only logged-in users can view it. If a user is not logged in, redirect them to the login page.

Requirements:

Create an AuthContext that manages user and isAuthenticated state.
Use the useContext hook in components to check if the user is logged in.

Hint:

Implement conditional routing with Redirect to protect the profile page.

(Optional task for fast learner): Implement Global State with Redux

Task: Add Course Enrollment State Using Redux

Implement global state management using Redux to track enrolled courses across different components.
Add an \"Enroll\" button to each course card that, when clicked, adds the course to a list of enrolled courses.

Requirements:

Use Redux to manage the list of enrolled courses in the global state.
Use useDispatch to dispatch an action when a user enrolls in a course.
Use useSelector to display enrolled courses on the Profile Page.

Hint:

Create an enroll action and a corresponding reducer to handle course enrollment.

", "_id": "67c6cb1f6a041b1fcf12c1f3" }, { "code": "L81", "title": "Tutorial 12", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

.NET(5) 作业讲评&答疑

.NET(6) 作业讲评&答疑

", "_id": "67c6cb1f6a041b1fcf12c1f4" }, { "code": "L82", "title": "Lab(10)：使用React, Hooks和Redux Toolkit构建图书馆应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React, Hooks和Redux Toolkit构建图书馆应用

", "_id": "67c6cb1f6a041b1fcf12c1f5" }, { "code": "L83", "title": "Lab(11)：使用React和Express构建图像上传应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React和Express构建图像上传应用

", "_id": "67c6cb1f6a041b1fcf12c1f6" }, { "code": "L84", "title": ".NET(8): 构建WEB API项目相关技术 - 数据库，SQL Script，ADO.NET", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

数据库 & SQL Script
ADO.NET
ADO.NET 的主要功能
Web API 如何使用ado.net
用ADO.NET 写insert 和seache 方法
Using的用法和参数化查询防止sql 注入
ADO.NET 读取数据的三种方式

", "_id": "67c6cb1f6a041b1fcf12c1f7" }, { "code": "L85", "title": ".NET(8): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment

创建模型并生成数据库表Category 模型：
属性：
Id（主键）
categoryName：分类名称
CategoryLevel：分类级别（用于表示是一级分类还是二级分类）
ParentId：父分类的 Id，用于实现分类的层级关系。
说明：这个模型主要用于表示分类层次关系，比如 IT 是一级分类，software 是 IT 的子分类。
Course 模型：
属性：
Id（主键）
CourseName：课程名称
Description：课程描述
CategoryId：外键，关联 Category，表示课程所属的分类。
关系：
一个 Category 可以有多个 Course，即 Category 与 Course 是一对多的关系。
Category 模型本身也有自关联，ParentId 用来实现分类的父子关系。
在 DbContext 中实现模型和关系在 EF Core 的 DbContext 中，创建 DbSet<Category> 和 DbSet<Course>，并通过 Fluent API 或数据注解来配置 Category 与 Course 之间的一对多关系，以及 Category 的自关联（ParentId）。
配置数据库连接在项目的 appsettings.json 或 Program.cs 中配置数据库连接字符串。
使用 EF Core Migrations 生成数据库表。
实现 REST API 和普通 APICategory 的 API：
使用 REST API 设计，提供增删改查（CRUD）操作。
例如：GET /api/category 获取所有分类，POST /api/category 创建新分类。
Course 的 API：
提供常规的增删改查 API。
例如：GET /api/course 获取所有课程，POST /api/course 创建新课程。
配置 NLog参考 NLog 官方文档。
在你的 API 操作或服务层中，针对重要的操作（例如，创建、删除、更新数据）写日志，记录这些操作的执行情况和错误。
配置 Swagger参考 Swagger 官方文档。
配置 Swagger 来自动生成 API 文档，并通过 Swagger UI 测试 API 的各个 endpoint。
进阶部分（JWT 身份验证）JWT 配置：
实现 JWT 生成功能，在用户登录时生成 Token。
在 API 中校验前端传来的 Token 是否有效，使用 JWT 来保护 API 路由。
Swagger 的 Authorization：
在 Swagger 中配置 Authorization，使得 Swagger UI 能够发送带有 JWT 的请求，以便测试受保护的 API。

完整的流程：

创建 Category 和 Course 模型，定义好表的关系。
在 DbContext 中配置这些模型。
配置数据库连接并生成数据库表。
实现 Category 和 Course 的 API，完成 CRUD 操作。
配置 NLog，记录日志信息。
配置 Swagger，生成 API 文档并测试 API。
进阶部分：使用 JWT 实现身份验证，并配置 Swagger 进行 JWT 保护的 API 测试。

", "_id": "67c6cb1f6a041b1fcf12c1f8" }, { "code": "L86", "title": "Project 3介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目背景

在现实世界中，创业公司通常需要快速开发产品并应对市场的变化。这个项目将模拟一个创业公司的实际情景，让你和你的团队合作，创建一个创新的软件产品。

项目任务

你将加入到一个由你的同学组成的团队中，该团队将一起创建一个新的Web Application。你的任务是在团队中发挥作用，贡献你的技能，共同推动项目的成功。

项目要求

项目选题: 你的团队可以自由选择一个创新的项目主题，但它必须包括以下要素：

前端：使用React，Redux，Nextjs，Styled-Components等。
后端：使用Node.js，Express.js，Koa，Passport.js等。
数据库：Mongodb，PostgreSQL，DynamoDB等，选择合适的数据库来存储和管理数据。
部署：将你的应用部署到云端，如AWS、Azure等。

敏捷开发: 使用敏捷开发方法，将项目拆分成多个迭代，并定期交付新的功能。使用敏捷工具（如Trello或JIRA）来跟踪任务和进度。

协作与沟通: 团队协作和沟通至关重要。定期召开站会（stand-up meetings）以更新团队成员，确保每个人都了解项目的状态和任务分配。

Quality and Testing: 保证你的应用程序质量良好。编写单元测试和端到端测试，并确保每个功能都经过充分测试。

Documentation: 创建清晰的文档，包括项目计划、需求文档、系统架构和部署说明。这些文档对于团队成员和潜在用户都非常重要。

Presentation and Demonstration: 在项目结束时，团队需要准备一个演示，展示你的应用程序功能和亮点。这也是你展示你的项目成果的机会。

项目交付

项目完成后，你的团队需要准备一个综合性的项目报告，其中包括以下内容：

Detailed project description, including the theme and objectives.
Project plan and progress reports, documenting various phases and completion status.
System architecture and technology stack of the application.
Deployment documentation, explaining how to deploy your application on a cloud platform.
Testing reports, including the results of unit tests and end-to-end tests.
Materials for project presentation and demonstration, including screenshots or demo videos of the user interface.

项目评估

项目将根据以下标准进行评估：

项目完成度：项目是否按计划完成，是否满足了项目要求。
代码质量：代码是否整洁、可维护，并遵循最佳实践。
功能实现：应用程序是否实现了所需的功能和特性。
文档质量：项目文档是否详尽清晰，便于他人理解。
团队协作：团队协作和沟通是否良好。
演示与展示：演示是否能够生动地展示项目的价值。

", "_id": "67c6cb1f6a041b1fcf12c1f9" }, { "code": "L87", "title": "Project 3 Bootstrap", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Project 3：创造、展示、协作的新篇章

课程概述

欢迎踏入新的阶段，一个专注于实践、创新和团队协作的全新教育体验！在这里，你不仅学习技术，更将参与到真实的项目中，与团队一起创造有意义的作品。我们的目标是培养能够独立思考、卓越创新的匠人，让每位学员在技术路上更进一步。

1. 匠人培训 5.0 的含义

实践与创新：超越传统理论教学，强调通过实际项目的开发来掌握和应用技术。
团队协作：重视团队合作，通过小组项目培养沟通和协作技能。
持续成长：不仅提供知识，更注重培养学习和解决问题的能力。

2. 项目展示

最终展示：每个项目组会在课程末尾线上展示他们的作品，全面介绍项目成果和学习体验。

3. 项目分组与导师组

项目如何分组：学员将根据兴趣和技能分入不同的项目组，每组承担一个独特的项目。
导师组与自拟项目组：导师组由经验丰富的老师领导，指导项目实施；自拟项目组则更加自由，学员可以根据自己的想法创建和实施项目。

4. 项目组规定的重要性

规定的目的：确保每个成员都能在公平、有序的环境中学习和贡献。
遵守的必要性：有助于提升团队效率，保证项目顺利完成。

加入我们的匠人培训5.0，开启你的技术创新之旅，与我们一起成长！

在这个课程中，每一步都充满了挑战和机遇。我们期待看到你的参与和你的作品，一起来创造令人惊叹的项目！

", "_id": "67c6cb1f6a041b1fcf12c1fa" }, { "code": "L88", "title": "AWS 基础", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

老师：Michel Su

\n

公司：Atlassian

\n

职位：SRE

\n

内容：

\n

1. AWS的基础知识，已经AWS是什么，为什么使用Cloud云计算服务

\n

2. 云计算的优势是什么，云计算的种类，为什么要用AWS

\n

3. IAM是什么，如何定义IAM，Users，Groups，Roles分别是什么，如何进行实施

\n

4. s3的基本操作，如何创建S3的bucket

\n

5. ec2是什么，如何启用ec2。ec2 ，ecs，lambda区别是什么，如何设计

\n

6. Load Balancer是什么，Application Load Balancer用来做什么的。Network的协议是什么

\n

7. AWS考试以及证书是什么

\n

8. API gateway的实施

\n

9. 使用老师提供的项目build一个Serverless的Web Application

", "_id": "67c6cb1f6a041b1fcf12c1fb" }, { "code": "L89", "title": "Workshop: AWS IAM 的基本用法和高级使用", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop 分享人： Henry

\n

内容：

\n

AWS IAM 创建账户
IAM 的 policy 如何设置
IAM 的 role 如何设置
当用户的 Policy 抵达上限，如何解决
IAM 如何设置 boundary，如何限制 User 只能使用悉尼地区服务
针对 Non-production 和 Production 如何配置权限

\n

", "_id": "67c6cb1f6a041b1fcf12c1fc" }, { "code": "L90", "title": "什么是Agile SDLC, Waterfall, Agile介绍", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值

2. 传统的项目管理如何进行的：悉尼歌剧院，悉尼轻轨

3. Software Development Life Cycle(SDLC)是什么, 具体的每个阶段是什么

4. SDLC-Waterfall和V Model是什么

5. Project Management Methodologies有什么

6. Lean Startup是什么

7. 为什么使用敏捷开发，什么是敏捷开发，与Waterfall有什么区别

8. Agile的价值观是什么，Agile Manifesto是什么，12个原则是什么

", "_id": "67c6cb1f6a041b1fcf12c1fd" }, { "code": "L91", "title": "Agile Methodologies", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. 敏捷开发采用的具体方法，什么是Scrum，什么是Kanban

2. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

3. Kanban的几个阶段，具体每个阶段的意义是什么

4. Scrum在敏捷开发中的定义是什么

5. Scrum里面的roles是什么，Artifacts是什么，Scrum里面包含的Events有什么

6. SCRUM的3355原则是什么，Value Propositions是什么

7. Retrospective meeting主要用来作什么的

8. Scrum的Teams Roles: Product Owner, Development Team, Scrum Master，分别是什么

9. Kanban具体的步骤是什么

10. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

11. User Story是什么，具体的User Story该怎么写

12. Sprint Planning是什么

", "_id": "67c6cb1f6a041b1fcf12c1fe" }, { "code": "L92", "title": "Agile Case研究：微软Microsoft Case Study", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

来自微软曾获得MVP的Ray老师，讲述以微软Windows交付使用Agile的流程

1. 微软是如何使用Agile的，如何使用Agile敏捷开发以及采用DevOps文化

2. Windows的发布周期

3. Waas是什么，Windows as a Service，其中Rings是什么

4. 微软的开发团队分布

5. Windows开发具体的周期

6. Up-front Planning开发，Code Test Stabilize 过程

7. Windows的开发流程如何转型的，如何提升效率和成功率的

8. Agile在项目开发中的好处是什么

", "_id": "67c6cb1f6a041b1fcf12c1ff" }, { "code": "L93", "title": "Tutorial 14", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

SCRUM Review

SCRUM Master
Team members
Product Owner
Daily Scrum
Retro
Planning

Common problems

Leave Comments
Delays

JIRA

Bitbucket

开发人员日常工作流程图

Meeting → tickets → review MR's → completed ticket → retro…..

", "_id": "67c6cb1f6a041b1fcf12c200" }, { "code": "L94", "title": "Agile 方法论: 解锁团队的协作潜力", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

1. Agile敏捷开发：历史与哲学探究

从传统瀑布模型到敏捷方法的革命性变革。
敏捷哲学：为什么它如此强大？
Agile 哲学：为什么\"Agile\"变得如此重要？

2. 深入Agile Manifesto (敏捷宣言)

敏捷的四个核心价值观：从\"个体与互动\"到\"响应变化\"。
十二条开发原则的解析：如何将价值观付诸实践？

3. Scrum、Kanban：敏捷的支柱

Scrum 框架的各个流程概述，“3355”方法论
Scrum：迭代开发、自组织团队的奇妙之处。
Kanban：可视化工作流、持续改进的精髓。

4. 深入Scrum

Product Backlog：需求的生命线。
Sprints：高效迭代与交付的秘密。
日常站立会议 (Daily Standups)：团队默契的塑造。
Sprint Retrospectives：持续改进的动力。
结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

5. 用户故事与验收标准：需求的精髓

打造高质量用户故事的策略。
Acceptance Criteria：确保交付符合预期的关键。
怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 实践出真知：构建自己的敏捷看板

使用现代工具 (如Trello、JIRA) 建立工作流程。
实际操作：从构建产品积压到完成冲刺。

7. 敏捷在企业中的演进

大型组织的敏捷转型：成功的案例分析。
避免常见陷阱：敏捷实施中的挑战与解决。
怎样改进流程、提高效率，为什么企业需要 T 型人才

8. 敏捷的未来展望

敏捷开发不断演进的趋势。
如何将敏捷原则融入日常工作。

", "_id": "67c6cb1f6a041b1fcf12c201" }, { "code": "L95", "title": "REACT(7): Unit Test", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

理解软件测试的基本概念和重要性。
掌握 React 组件和应用的基础测试方法。
学会使用测试工具如 Jest 和 React Testing Library。

详细教学内容

软件测试的基本概念为什么需要测试
测试的种类（单元测试、集成测试、端到端测试）
测试的重要性代码质量保证
团队协作和项目可维护性
CI/CD 中的测试
React 组件测试使用 Jest 进行基础测试
使用 React Testing Library 测试组件交互
React 应用测试路由测试
全局状态（Context 或 Redux）测试
Mocking API calls

实验/练习

创建单元测试以验证一个 React 组件的功能。
实现一个集成测试案例，检查几个组件间的交互。
在 CI/CD 流程中集成您的测试案例。

课后作业

阅读 Jest 和 React Testing Library 的官方文档。
为您的项目或一个开源项目添加测试。
了解如何在澳洲的前端开发文化中应用测试。

", "_id": "67c6cb1f6a041b1fcf12c202" }, { "code": "L96", "title": "React (7): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

Read Official Documentation:
Explore the official documentation of Jest and React Testing Library.
Add Tests to Your Project:
Add meaningful tests to your current project or contribute tests to an open-source project.
Explore Testing Culture in Australian Frontend Development:
Understand the role of testing in the software development culture in Australia.

", "_id": "67c6cb1f6a041b1fcf12c203" }, { "code": "L97", "title": ".NET(12): Unit Test", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Unit Test

", "_id": "67c6cb1f6a041b1fcf12c204" }, { "code": "L98", "title": ".NET(12): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

Create a xUnit test project for the Web API project, which is from the Lecture Web API 项目
Add package moq to the xUnit test project
Decide which controller/service need the unit test (for public method)
Write the unit test for your selected API methods, if possible, can write you own public methods including the logic or calculation, which is better feasible for unit test
Given a few examples:

UserController.TestServcies method,

TeacherController.Post method,

TeacherService.GetUser method

5. Trying to use moq package to simulate the DBContext –e.g.CourseCategoryService.Add method in unit test

6. Trying to use some fake external API in your Web API methods and write the unit test to mock this external API.

Below are some candidates could be used from the fake external API - https://jsonplaceholder.typicode.com

7. Trying to run the power shell script and generate the report - please go through the ps script and remember to replace the below value to your solution name

# Run the Coverlet.Collector - REPLACING YOUR SOLUTION NAME!!!

$output = [string] (& dotnet test ../YOURSOLUTION.sln --collect:\"XPlat Code Coverage\" 2>&1)

", "_id": "67c6cb1f6a041b1fcf12c205" }, { "code": "L99", "title": "Tutorial 16", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Q&A

解答学习 React 中的疑问。
解答学习 .NET 中的疑问。

", "_id": "67c6cb1f6a041b1fcf12c206" }, { "code": "L100", "title": ".NET(11): C# 事件与委托", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

C# 事件与委托

", "_id": "67c6cb1f6a041b1fcf12c207" }, { "code": "L101", "title": ".NET(11): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment:

1. Define the delegates, please practice the different types:

single delegate - the delegate only used by score top 1 student

e.g. define the delegate HonourBonus for the top 1 score student, associate the top 1 student's ReceiveBonus method with this delegate

multicast delegate

e.g. define the delegate CourseStarting for all students, associate the all student's Start method with this delegate

In the main method, please initiate the instance of delegate to call associated methods and print out the result (in console log)

2. Define the events

Please consider the difference when using event keyword with the above delegate.

Update existing Course class which will be treated as Subject/Observable/Publisher, to add an event - ScheduledTimeChanged (means the course time updated/changed)

Update the existing Student class, which will be the Observer/Subscriber, to add the event handler (method) to listen above event and accordingly update the behavior (print out something in console log)

Simulate some students could quite the course, please remove the subscription from these students

Imaging new students joined and interested in the course, please add the new subscriptions for the event.

Please trigger the time changed event, and print out all subscriber/observer reactions (print out something in console log)

", "_id": "67c6cb1f6a041b1fcf12c208" }, { "code": "L102", "title": "REACT(8): Iteration 0, CI/CD, ESLint 和 Commit Hook", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

理解 Iteration 0 在软件开发生命周期中的作用。
掌握持续集成（CI）和持续部署（CD）的基本概念。
学习如何使用 ESLint 进行代码规范检查。
掌握 Commit Hook 的应用和设置。

详细教学内容

Iteration 0 的概念和重要性什么是 Iteration 0
Iteration 0 的目标和产出
CI/CD 基础什么是 CI/CD
CI/CD 的优点和应用场景
ESLint 的应用什么是 ESLint，为什么需要它
如何配置和使用 ESLint
ESLint 在 CI 流程中的角色
Commit Hook 的设置与应用什么是 Commit Hook
如何使用工具（如 Husky）设置 Commit Hook
Commit Hook 在代码质量控制中的作用
综合应用：Iteration 0 与 CI/CD在 Iteration 0 中如何整合 ESLint 和 Commit Hook
实际案例和最佳实践

实验/练习

为一个简单的 React 应用设置 CI/CD（可选工具：GitHub Actions, Jenkins）。
在该应用中集成 ESLint 和 Commit Hook。
讨论如何在 Iteration 0 的背景下，整合这些工具和流程。

课后作业

阅读有关 CI/CD、ESLint 和 Commit Hook 的官方文档和相关资料。
为一个现有或新建的项目进行 Iteration 0 规划，并实践集成 ESLint 和 Commit Hook。

", "_id": "67c6cb1f6a041b1fcf12c209" }, { "code": "L103", "title": "React (8): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

观摩范例 https://github.com/JustinHu8/react-8-ci-cd
研究ESLint是如何设置的，哪些文件需要configuration changes
复习pre-commit hook, husky 和lint-staged, 网上查阅如何从零开始设置，尝试自行设置
复习Github Actions, 大致了解其与CI/CD的关系
阅读有关CI/CD、ESLint和CommitHook的官方文档和相关资料。
为一个现有或新建的项目进行Iteration0规划，并实践集成ESLint和CommitHook。

", "_id": "67c6cb1f6a041b1fcf12c20a" }, { "code": "L104", "title": "Tutorial 17", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Q&A

.NET Unit Test 答疑。
针对 React CI/CD 和代码质量的答疑 解答学员关于 CI/CD 流程、ESLint 和 Commit Hook 配置的问题。

", "_id": "67c6cb1f6a041b1fcf12c20b" }, { "code": "L105", "title": "React(9): Authentication Lab", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

实际操作 - 创建一个 Authentication Form

课程目标

理解身份认证在现代应用中的重要性。
学习如何在 React 应用中实现基础的身份认证。
通过实际操作，创建一个完整的 Authentication Form。

详细教学内容

身份认证的基础知识什么是身份认证
JWT
React 中的身份认证概念使用 Context 管理认证状态
使用 Hooks 进行身份验证
Authentication Form 的设计与实现创建登录和注册表单
表单验证
后端 API 调用
安全性考虑密码加密与存储

实验/练习

从头开始创建一个简单的 React 应用，包含登录和注册功能。
实现前端表单验证和后端 API 调用。
将身份认证状态存储并全局可访问。

课后作业

阅读有关身份认证和安全性的文献。
优化你的 Authentication Form，加入更多高级功能（如多因素认证）。

", "_id": "67c6cb1f6a041b1fcf12c20c" }, { "code": "L106", "title": "React (9): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

Review Each Part of Authentication Implementation
Managing Authentication State
Authentication Form
Backend API Integration for Authentication
Client-side Validation

2. Try to build a frontend authentication solution yourself with reference provided.

3. Optional: Try to improve the implementation such as client-side validation, add a registration form

复习认证实现的每个部分：
管理认证状态
认证表单
与后端 API 集成进行认证
客户端验证
尝试参考提供的资料自行构建一个前端认证解决方案。
可选：
尝试改进实现，例如客户端验证
添加一个注册表单

", "_id": "67c6cb1f6a041b1fcf12c20d" }, { "code": "L107", "title": "Next.js 和不同的渲染模式", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

课程目标

理解 Next.js 在现代前端开发中的作用。
掌握不同的渲染模式（SSR、SSG、CSR）。
通过实际操作，创建一个带分页功能的列表。

详细教学内容

Next.js 概述什么是 Next.js
Next.js 的优点和特性
渲染模式的对比客户端渲染（CSR）
服务端渲染（SSR）
静态生成（SSG）
实战：创建带分页功能的列表初始化 Next.js 项目
创建一个基础的列表展示
实现分页逻辑
高级特性与最佳实践使用 getStaticProps 和 getServerSideProps
数据预取和优化

实验/练习

创建一个 Next.js 项目，实现一个带有分页功能的列表。
尝试使用不同的渲染模式来实现该列表，并比较它们的优缺点。

课后作业

阅读 Next.js 官方文档，了解其更多高级特性。
扩展你的列表应用，添加搜索或筛选功能。

", "_id": "67c6cb1f6a041b1fcf12c20e" }, { "code": "L108", "title": "课后补充知识：什么是SSR，CSR，SSG", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

服务器端渲染（SSR）

\n

介绍SSR的工作原理和主要特点。
探索SSR的优势，如更快的首屏加载时间和更好的SEO。

\n

\n

客户端渲染（CSR）

\n

讲解CSR如何在浏览器端动态生成页面内容。
分析CSR的优点，例如更丰富的交互和更好的用户体验。

\n

静态站点生成（SSG）

\n

说明SSG的概念和生成静态网页的过程。
探讨SSG的使用场景，如博客、文档站点等。

\n

选择最适合的渲染技术

\n

根据不同的项目需求和目标，讨论如何选择最合适的渲染方式。

", "_id": "67c6cb1f6a041b1fcf12c20f" }, { "code": "L109", "title": "Tutorial 18", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

本节内容：

答疑

React 身份认证相关问题解答 回答关于 React 中身份认证的基础知识、JWT 的使用、Context 和 Hooks 在认证中的应用等问题。
Next.js 渲染模式相关问题解答 解答有关 Next.js 的概述、不同渲染模式（CSR、SSR、SSG）的特点和应用场景的问题。

实践练习

练习1: React 身份认证表单实现

任务: 创建一个 React 应用
登录
注册
登出
删除帐户
表单验证:
实现基础前端验证逻辑，
实现检查输入是否为空，格式是否正确等。
模拟 API 调用:
使用 mock service worker（MSW）或其他工具模拟后端 API 响应。
状态管理: 使用 React 的 Context API 来管理用户的登录状态。
创建 Context API
解码 JWT Token
保存用户信息
展示用户信息

练习2: Next.js 分页列表实现 (额外)

任务: 使用 Next.js 创建一个列表应用，该列表包含分页功能。
数据源: 可以使用公开的 API 或静态数据作为列表的数据源。
渲染模式探索: 尝试使用 CSR、SSR 和 SSG 等不同渲染模式，并了解每种模式的特点和适用场景。
分页逻辑: 实现分页组件，允许用户在列表数据间导航。

", "_id": "67c6cb1f6a041b1fcf12c210" }, { "code": "L110", "title": "Tutorial 19 (Azure AI Preparation)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

课程内容：

注册Azure账号，开通Speech Service，开通OpenAI API

具体任务：

学员在导师指导下注册Azure账号，

https://azure.microsoft.com/en-au/free/ai-services

开通Speech Service

https://portal.azure.com/#create/Microsoft.CognitiveServicesSpeechServices

入口文档

https://learn.microsoft.com/en-au/azure/ai-services/speech-service/overview#try-the-speech-service-for-free

开通Open AI API

https://platform.openai.com

https://chatgpt.com

", "_id": "67c6cb1f6a041b1fcf12c211" }, { "code": "L111", "title": "Azure AI Service和TTS", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

微软云Azure AI Service 提前注册

课程内容

Icebreaking，导师自我介绍，学员自我介绍
AI 简介
AI是什么葫芦里的什么药
AI是什么药（是什么，能干什么）
AI是什么葫芦（几种实现技术）
传统算法
深度学习
机器学习
大语言模型（机器学习的一种分支）
AI相关的几个典型岗位
Algorithm Engineer (算法工程师 - 大牛)
Hyperparameter tuning engineer （调参侠）
Prompt Engineer （提示工程师 - 调整优化提示）
Application Engineer (应用工程师 - 大部分的程序员，调用AI的API实现商业价值)
AI在澳洲的企业应用
Optus的应用案例
Optus 机器人
Optus 数字人
Service NSW的应用案例
客户输入自然语言的理解
语言之间的翻译
Azure AI Service 的简要介绍
Azure是什么？Azure有什么？
Azure AI Service 是什么？有什么？
演示Azure Protal

课堂实操练习

在Azure Portal上面体验文字转语音和语音转文字
登陆Azure Portal
进入Speech Studio
动手操作文字转语音
动手操作上传语音转文字
动手操作用麦克风录入语音转文字
跟随练习说明，用React写一个最简单的文字转语音（TTS - Text To Speech）Web应用
阅读练习说明，写一个form，包括 input，和 submit，输入文字，用window.speechSynthesis控件播放语音
===============中场休息10分钟==============
Azure API 介绍
Azure API 怎么读
跟随练习说明，用React写一个最简单的语音转文字（STT - Speech To Text）Web应用
写一个form，包括三个按钮：开始录音，暂停录音，停止录音
用microsoft-cognitiveservices-speech-sdk实现实时语音转文字
写一个文本显示框，显示转换之后的文字
讨论 - 练习2 和练习3 的局限和潜在风险
调用云AI服务的text to speech 对比直接用浏览器自带的text to speech 空间的好处和坏处是什么，不同的应用场景
练习3的实际应用中一个重要安全性问题 - 你的API Key会暴露在客户端
介绍另一种验证方式：Token
引入后端，跟随练习说明，用.net写一个获取token的后端
初始化一个Web API
配置好Web API
写一个controller，提供一个API /api/VoiceController/get-speech-token
在这个controller里面调用Azure cognitive 服务获取token并作为Response返回
讨论 - 本次课堂体验小结
实现效果

", "_id": "67c6cb1f6a041b1fcf12c212" }, { "code": "L112", "title": "Integrate Azure AI Service and Streaming", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

完成课程Azure AI Service和TTS

课程内容

Warmup，回顾上一节的练习和下一步练习
回顾后端获取短期token
下一步：前端用token通过Stream 模式和AI Service通讯，
跟随练习说明，写一个React App，调用后端获取token，并进行Stream实现TTS和STT
调用上面的后端获取token
从麦克风录音转换成文字
上传文件转换成文字
文字阅读（文字转语音）
文字阅读的暂停和继续
实现STT和TTS - Pros & Cons ？
讨论：继续优化Azure AI（1）练习的安全性
跟随练习说明更新上一节的 .net 后端应用，提供一个API，接受一个音频文件，调用Azure AI转化成文字，并作为Reponse 返回 -
增加一个API endpoint /api/VoiceController/upload 接受一个webm文件
保存文件并转换成wav
调用SpeechRecognizer 把文件传至Azure识别出文字
返回文字到Response
练习解释：为什么要转换成wav ？

===============中场休息10分钟==============

更新上一节的 React 前端，把录到的语音传给上面的API，获取文字
用react-mic录音
上传文件
Azure Speech Translation （语音翻译）介绍
练习：在Azure Portal 上体验翻译功能
练习：基于上一个练习增加一个API，实现语音翻译成文字功能
练习：基于上一个练习的前端，增加一个按钮，调用新增的翻译API，实现语音翻译成文字功能

讨论：回顾这两天Azure AI的使用体验

", "_id": "67c6cb1f6a041b1fcf12c213" }, { "code": "L113", "title": "如何撰写IT专业简历", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

清晰的格式和布局：使用易于阅读的字体和清晰的布局。保持简历的长度适中，通常不超过两页。
个人信息和联系方式：包括你的姓名、职业头衔（如软件工程师、系统管理员等）、联系电话、电子邮箱和 LinkedIn 个人页面链接。
专业摘要或目标声明：简洁地概述你的职业背景、技能和你寻求的职位类型。这部分应该具有吸引力且针对你申请的职位量身定制。
技术技能：明确列出你的技术技能，如编程语言（例如 Java、Python）、框架（如 Spring、React）、数据库（如 MySQL、MongoDB）和工具（如 Git、Docker）。根据求职职位的要求来调整技能列表。
工作经验：按时间顺序列出你的工作经历，包括公司名称、职位、工作时间和职责描述。突出具体成就和使用的技术。
项目经历：如果你有相关的项目经验（包括学校项目、个人项目或自由职业项目），请列出来，说明你的角色、使用的技术和项目成果。
教育背景：提供你的最高学历信息，包括学校名称、学位、专业和毕业时间。如果你是新毕业生，可以更详细地说明你的教育背景。
证书和培训：如果你有相关的行业证书（如 AWS Certified Solutions Architect、Cisco 的 CCNA）或完成了重要的专业培训，务必列出。
其他信息：如语言能力、志愿者经验、获奖情况等，如果它们对你申请的职位有帮助，可以选择性地加入。
定制你的简历：针对每个职位调整你的简历，确保它符合职位描述中的关键字和要求。
校对和审核：在提交前，请仔细校对你的简历，确保没有拼写和语法错误。有可能的话，让你的同事或朋友帮你复查。

", "_id": "67c6cb1f6a041b1fcf12c214" }, { "code": "L114", "title": "Project Management Workshop", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Project Management Workshop

", "_id": "67c6cb1f6a041b1fcf12c215" }, { "code": "L115", "title": "5分钟手动部署Web Application 到 AWS S3 静态网站", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

前端App部署基础

\n

介绍如何准备前端应用以便于部署。
指导如何选择合适的部署平台和服务。

\n

创建AWS S3 Bucket

\n

逐步演示如何在AWS S3中创建一个新的Bucket。
讨论Bucket命名规则和配置选项。

\n

编写Bucket策略

\n

学习如何为Bucket编写安全策略。
分析策略语法和关键要素。

\n

Bucket的日常操作

\n

演示如何上传、下载和管理Bucket中的文件。
探索如何监控和维护Bucket。

", "_id": "67c6cb1f6a041b1fcf12c216" }, { "code": "L116", "title": "GraphQL 101: 剥离RESTful的银行系统开发实践—Gary Sun", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Gary

\n

内容：

\n

RESTFul与GraphQL对比

\n

探讨两种API设计范式的优缺点。
分析何时使用RESTFul，何时更适合选择GraphQL。

\n

GraphQL的核心概念

\n

详细介绍GraphQL的工作原理和主要特性。
讨论GraphQL如何改善数据获取和管理。

\n

GraphQL查询语言

\n

学习如何构建高效的查询，获取精确的数据。
实践GraphQL的强大灵活性，适应复杂的应用需求。

\n

", "_id": "67c6cb1f6a041b1fcf12c217" }, { "code": "L117", "title": "AWS Lambda 基础知识", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Shaun

\n

内容：

\n

1. Serverles 基础概念

\n

2. Faas 基础概念 Function-as-a-Service 概念

\n

3. Lambda 如何使用，Lambda 的特点，优缺点

\n

4. Lambda 在匠人学院 App 里的使用

\n

5. 简单的 Lambda Demo

", "_id": "67c6cb1f6a041b1fcf12c218" }, { "code": "L118", "title": "Docker Introduction", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Docker 视频学习： https://youtu.be/gAkwW2tuIqE

\n

本节知识点：

\n

docker 原理与介绍
docker 命令行与 gui 的使用
docker 中的端口映射，以及外部调用
如何通过 docker 打包我们的项目
docker compose 一键启动本地开发环境

\n

", "_id": "67c6cb1f6a041b1fcf12c219" }, { "code": "L119", "title": "SpringBoot的Production部署到AWS ECS Fargate，如何使用Microservice with docker", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: Xiaokai & Yinhang

\n

内容：

\n

Springboot 的 Docker 部署到 AWS
ECS AWS
ECS 如何进行 CICD
Task 是什么，如何使用
VPC 是什么
Subnet 是什么，如何使用
Microservice 是什么

", "_id": "67c6cb1f6a041b1fcf12c21a" }, { "code": "L120", "title": "Workshop: 持续集成(CI)/持续部署(CD)的概念以及Jenkins的使用", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Roger

\n

内容：

\n

持续集成(CI)/持续部署(CD)的概念
Jenkins 如何一步一步部署上的
Jenkins 的 Docker Image 如何部署的
如何实现 Nodejs 后端的自动化部署
如何实现 React 前端的自动化部署

", "_id": "67c6cb1f6a041b1fcf12c21b" }, { "code": "L121", "title": "CI CD基础使用Jenkins和AWS CodePipeline 手把手部署一个Web App", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

\n

内容：

\n

1. Jenkins和AWS Codedeploy的区别是什么，有什么优点好处

\n

2. 代码里的Jenkinsfile逐行解读

\n

3. Jenkins如何开一个新的pipeline部署到Branch上

\n

4. 如何使用AWS CodePipeline部署

", "_id": "67c6cb1f6a041b1fcf12c21c" }, { "code": "L122", "title": "Open AI Huggingface讲解 - Guang", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

OpenAI概览

\n

介绍OpenAI的发展历程、愿景和主要成果。

\n

提示词工程与高级使用

\n

探讨如何精准地使用提示词来提高模型的效果。
分析高级应用技巧和策略。

\n

OpenAI的其他模型

\n

了解OpenAI提供的各种AI模型及其特点和用途。

\n

开源AI模型对比

\n

探讨与OpenAI相似的开源模型，比较它们的优势和局限。

\n

产品和运维中的应用

\n

分析OpenAI在实际产品开发和运维中的应用案例。
探索如何将AI模型融入生产实践。

", "_id": "67c6cb1f6a041b1fcf12c21d" }, { "code": "L123", "title": "用 Kafka 实践 Event First 设计思维—虎头锤", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 虎头锤

\n

内容:

\n

Kafka简介

\n

介绍Kafka的功能和在现代数据处理中的重要性。
讨论Kafka的主要组件，包括生产者、消费者、主题和分区。

\n

Event First设计

\n

解析Event First设计方法的原则和优势。
分析如何使用Kafka构建事件驱动的系统架构。

\n

Kafka实战应用

\n

演示如何设置和配置Kafka环境。
指导如何创建Kafka主题，发送和接收消息。

", "_id": "67c6cb1f6a041b1fcf12c21e" }, { "code": "L124", "title": "如何准备澳洲大厂开发类岗位面试", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

老师：Xuecong，就职于悉尼 AWS，SDE

内容：

1. 澳洲大厂开发类岗位面试常见流程

2. 如何‘管理'整个面试流程

3. 如何准备面试申请

4. 准备面试，哪些专业能力需要提高

5. 如何准备大厂面试，体现价值观和企业文化

6. 面试当天注意事项

7. 如何接受，拒绝，协商 Offer

", "_id": "67c6cb1f6a041b1fcf12c21f" }, { "code": "L125", "title": "求职国内秋招大厂前端开发岗，需要做哪些准备", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

内容：

国内大厂前端岗位如何细分？
获得前端岗位 Offer 所需的几大要素
如何准备面试中的八股文、算法等硬核考点？
怎样的实习经历可以让你在校招求职中脱颖而出？

", "_id": "67c6cb1f6a041b1fcf12c220" }, { "code": "L126", "title": "如何准备国内秋招，才能获得大厂 Offer?", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Chen

内容：

秋招时间规划

解析秋招的主要时间节点，帮助你合理安排准备时间。
讨论如何在学习、实习和求职之间平衡。

准备秋招的步骤

提供详细的秋招准备指南，包括市场调研、目标公司筛选等。
强调技能提升和实战经验积累的重要性。

笔试准备技巧

分析常见的笔试题型和应对策略。
提供实用的学习资源和练习方法。

面试技巧训练

探讨如何在面试中有效展现你的能力和潜力。
分享面试中的常见问题和最佳回答技巧。

", "_id": "67c6cb1f6a041b1fcf12c221" }, { "code": "L127", "title": "在澳洲如何找到一份Java Developer的工作 -- 虎头锤", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：虎头锤

\n

内容:

\n

澳洲Java工作市场分析

\n

探索澳洲Java开发岗位的市场需求和主要工作要求。
分析技术技能和行业经验在职场中的重要性。

\n

回答行为面试问题

\n

提供实用的策略和技巧，帮助你准备和回答行为面试中的问题。
分析常见的行为问题及其背后的意图。

\n

简历撰写和个人品牌打造

\n

教你如何撰写一份突出你技能和经验的简历。
讨论如何在简历中有效地展示你的项目经验和技术能力。

\n

", "_id": "67c6cb1f6a041b1fcf12c222" }, { "code": "L128", "title": "澳洲程序员找工作必备哪些后端知识", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 老虎

\n

内容:

\n

澳洲后端开发者必备知识

\n

分析澳洲后端开发职位的常见要求和技能需求。
探讨关键的编程语言（如Java、Python、Node.js）和框架。

\n

数据库技能

\n

介绍常用的数据库技术，包括关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB）。

\n

API开发与RESTful服务

\n

学习如何设计和实现高效的RESTful API。

\n

版本控制和代码协作

\n

强调Git等版本控制系统的重要性，并探索代码协作的最佳实践。

\n

云服务和容器化技术

\n

介绍云计算服务（如AWS、Azure）和容器技术（如Docker、Kubernetes）。

\n

软件工程最佳实践

\n

探讨如何编写可维护、高效的代码，以及软件测试和持续集成的重要性。

\n

", "_id": "67c6cb1f6a041b1fcf12c223" }, { "code": "L129", "title": "在澳洲，IT学生如何准备System Design面试-----Ben", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Ben

内容：

系统设计面试的基本功

概念理解：讲解系统设计面试中经常涉及的关键概念，如可扩展性、可靠性、效率等。
技能要点：强调分析问题、沟通思路、考虑权衡的重要性，并提供实用技巧帮助你在面试中脱颖而出。

面试准备方法

资源梳理：介绍高质量的学习资源和实践工具，帮助你系统地准备系统设计面试。

Monolith架构解析

定义和特点：详细解释Monolith（单体架构）的概念，并探讨其优缺点。

Microservice架构探索

核心理念：深入讲解Microservice（微服务架构）的基本原则和结构。

", "_id": "67c6cb1f6a041b1fcf12c224" }, { "code": "L130", "title": "从0到1打造React/Node 全栈IoT实时应用——Bryan", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

主讲人：Bryan

内容：

IoT概览

介绍IoT的定义、发展历程和关键技术。
分析IoT在不同行业中的应用案例。

IoT架构与最佳实践

讨论IoT系统的典型架构和组件。
探索IoT项目的设计原则和最佳实践。

实时应用与技术栈

解析构建IoT实时应用的技术栈和框架。
分析物联网的数据处理和通信技术。

案例研究和演示

通过具体的项目示例展示IoT技术的应用。
演示如何实现IoT解决方案，并讨论其实际效果。

", "_id": "67c6cb1f6a041b1fcf12c225" }, { "code": "L131", "title": "Google大佬教你，如何突破年薪20w澳币天花板 -- 韭天", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 韭天

\n

内容:

\n

薪资的组成

\n

深入了解薪资的不同组成部分，包括基本工资、奖金、福利等。

\n

提升薪资的方法

\n

探讨如何通过技能提升、职位晋升等方式增加薪资。
分析职业发展中关键的技能和资格认证。

\n

优质雇主的选择

\n

比较不同类型的公司及其提供的薪资水平。
讨论如何选择能够提供更好薪资和职业发展机会的公司。

\n

职业生涯规划

\n

指导如何根据个人目标和市场趋势规划职业生涯。
分析长期职业规划对薪资和职业满意度的影响。

\n

", "_id": "67c6cb1f6a041b1fcf12c226" }, { "code": "L132", "title": "Elastic Search基础知识分享Workshop", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

\n

内容：

\n

Logging Saas 服务商横向比较：Elastic Search，Splunk，Sumo Logic，Datadog，New Relic 等
Elastic Search 是什么，Elastic 的优势是什么
Elastic Search 架构 Log，Beats，Logstash，Elasticsearch，Kibana
Beats 的使用，Beats 的特点
Elastic Search 在匠人的架构，Lambda 如何使用
Elastic Search 的如何创建 Dashboard
Elastic Search 的如何查询 Logging 信息，如何做筛选

", "_id": "67c6cb1f6a041b1fcf12c227" }, { "code": "L133", "title": "关于如何解决Error Messages，几个步骤", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

应对error message的几个步骤： 1. 详细阅读一下error message，看报错的内容是什么，是否和自己操作的步骤有关，你是否能从报错的内容中找到出错位置，以及出错原因 2. 如果自己无法理解错误信息，尝试提炼出error message中的关键语句，在google上搜索。这一步很重要。如果全盘复制error message，有可能会因为字符数太多而无法详细匹配到你要找的答案。所以如何精炼错误信息的同时又精准的找到网上的答案，也是锻炼搜索能力的重要一步 3. 尝试从google的搜索结果当中，逐一比较，是否和你的错误信息相关。如果是，可以尝试google提出的解决方案。通常情况下你找到的第一个不一定是能解决你问题的那个一个。有可能需要尝试五六个/六七个不同的方案，才最终能找到你想要的内容 4. 如果google上的内容也无法帮你解决问题，可以截图错误信息，注意截图中要包含你所跑的命令和详细的错误信息，发到群里，大家帮你参考。

", "_id": "67c6cb1f6a041b1fcf12c228" }, { "code": "L134", "title": "澳洲工作职场介绍", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"澳洲公司全景：行业领袖与职业机遇\"

\n

澳洲公司的市场概况：深入介绍澳洲主要行业和领先公司，包括它们的市场定位、企业文化和核心价值。
澳洲公司的职业前景：探讨在澳洲各种类型公司工作的优势和挑战，以及如何在这些环境中发展职业生涯。

\n

\"就业方向解析：产品与咨询服务\"

\n

产品方向的职业机遇：探讨在产品管理、开发和策略等领域的职业路径，以及如何在这些领域成功发展。
咨询服务方向的职业途径：深入分析咨询行业的工作性质、职业晋升路径和必备技能，以及如何在咨询服务领域建立成功的职业。

", "_id": "67c6cb1f6a041b1fcf12c229" }, { "code": "L135", "title": "澳洲企业招聘流程", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"澳洲企业招聘全攻略：三大关键阶段深度解析\"

\n

简历和求职信的制作与提交：学习如何撰写针对澳洲市场的高效简历和求职信，包括格式、内容和展现个人特色的技巧。
面试的全面准备：深入分析招聘过程中的各种面试类型，包括初步面试、在线评估、技术面试和管理层面试。提供准备技巧、常见问题解答和成功策略。
Offer 阶段的策略：探讨如何在收到工作邀约时进行有效的沟通和谈判，包括薪资、福利和其他工作条件。

", "_id": "67c6cb1f6a041b1fcf12c22a" }, { "code": "L136", "title": "招聘官挑选简历的标准", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

招聘官在挑选简历时通常会根据以下几个标准进行筛选：

\n

符合职位要求：首先会检查应聘者的教育背景、工作经验、技能和资格是否符合岗位的具体要求。
清晰、专业的简历格式：一份清晰、逻辑性强、格式规范、无拼写错误的简历更容易获得青睐。
关键字匹配：许多公司使用自动跟踪系统（ATS）来筛选简历，这些系统会根据职位描述中的关键字来评估简历的相关性。
成就和成绩：与其仅仅列出职责，招聘官更倾向于看到具体的成就和成绩，例如销售额、成本节约、项目成功实施等量化的结果。
职业发展的连贯性：职业路径中的逻辑发展和进步表明了候选人的职业目标和职业规划。
个性和文化契合度：简历中的个人陈述或兴趣爱好部分可以体现出候选人是否可能与公司文化和团队精神相契合。
职业目标：简历应该传达出候选人的职业目标与申请职位是如何对齐的。
社交媒体和在线存在：有时候招聘官也会查看LinkedIn等专业网络或其他社交媒体来了解候选人的专业背景和行为表现。
推荐信和联系人：提供可以证实候选人能力和表现的推荐人可以是一个加分项。
附加技能：除了基本技能之外，候选人显示的任何额外技能或证书也会让其简历更加突出。

", "_id": "67c6cb1f6a041b1fcf12c22b" }, { "code": "L137", "title": "简历常见问题", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"简历制作艺术：重点、加减分项及编写原则\"

\n

简历的重点内容：指导您如何突出简历中的重点内容，包括职业经历、技能、成就和教育背景，确保雇主能够快速抓住您的核心优势。
避免的简历减分项：教您识别和避免简历中的常见错误和不利因素，如过度冗长、格式不当或信息不准确等。
简历的加分元素：提供策略和建议，帮助您在简历中加入能够提升吸引力的元素，如特定技能证明、相关项目经验或突出成就等。
编写简历的基本原则：探讨在编写简历时应遵循的基本原则，包括清晰性、专业性和针对性，以及如何根据目标职位定制简历。

", "_id": "67c6cb1f6a041b1fcf12c22d" }, { "code": "L138", "title": "如何利用 ChatGPT 写简历", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"利用 ChatGPT 提升简历撰写技巧：指南与实践\"

\n

ChatGPT 基本使用方法：本节课将介绍 ChatGPT 的基础功能和操作方法，帮助学员快速掌握如何有效使用这一先进的工具。
ChatGPT 在简历撰写中的应用技巧：这部分将指导学员如何充分利用 ChatGPT 在简历撰写中的潜力，包括格式建议、内容生成和优化技巧，以打造一份吸引眼球的简历。
与 ChatGPT 进行个性化交互：教授学员如何与 ChatGPT 进行有效的个性化交互，以获取更加符合职业目标和个人特色的简历内容。
ChatGPT 实例演示：通过实际操作演示，展示 ChatGPT 在简历撰写和改进方面的应用，帮助学员更好地理解和掌握实际操作技巧。

", "_id": "67c6cb1f6a041b1fcf12c22e" }, { "code": "L139", "title": "手把手带着运营 LinkedIn", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"LinkedIn 职业建设：完善个人资料与网络拓展\"

\n

维护完整、专业的 LinkedIn 个人资料：指导您如何创建和维护一个展现您职业经历、技能和成就的专业 LinkedIn 资料。这包括头像选择、经历描述、技能展示和获取推荐等关键元素。
加入与行业和兴趣相关的 LinkedIn 群组：教您如何找到和加入与您的职业领域和兴趣相关的 LinkedIn 群组，以便进行行业交流、拓展职业网络和获取行业最新动态。

", "_id": "67c6cb1f6a041b1fcf12c22f" }, { "code": "L140", "title": "如何利用 LinkedIn 准备面试", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"求职成功攻略：职位描述解析、面试准备与公司研究\"

\n

这个课程旨在全面指导您如何在求职过程中取得成功。本课程将包括：

\n

职位描述深度解析：教您如何仔细分析职位描述，理解职位要求的核心内容和隐含条件，从而更有效地准备申请材料和面试。
面试准备技巧：提供面试准备的策略，包括如何针对面试描述准备回答问题、展示自己的优势，以及如何应对常见面试问题。
利用 LinkedIn 搜索目标公司：指导您如何有效利用 LinkedIn 平台搜索并研究目标公司，包括公司背景、文化、行业地位等信息，以增强您的求职策略。

", "_id": "67c6cb1f6a041b1fcf12c230" }, { "code": "L141", "title": "Next.js", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Next.js

", "_id": "67d3e2c07dd4a4f885efcd05" }, { "code": "L142", "title": "The Four Prototyping Patterns: Prompting, Fine-Tuning, RAG, Agents", "type": "Lesson", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

The Four Prototyping Patterns: Prompting, Fine-Tuning, RAG, Agents

BY THE END OF THE SESSION

• Prompting \"giving the LLM more context\" Prompting = asking questions in a better way with better context

• Fine Tuning \"teaching the LLM how to act\" 3 types: task training, constraining I/0 schema, and language training

• RAG \"giving the LLM access to new knowledge\" Retrieval Augmented Generation = Dense Vector Retrieval + In-Context Learning

• Agents

\"giving the LLM access to tools\"

Agents = reasoning, action, repeat

• Prompting \"giving the LLM more context\" Prompting = asking questions in a better way with better context

• Fine Tuning \"teaching the LLM how to act\" 3 types: task training, constraining I/0 schema, and language training

• RAG \"giving the LLM access to new knowledge\" Retrieval Augmented Generation = Dense Vector Retrieval + In-Context Learning

• Agents

\"giving the LLM access to tools\"

Agents = reasoning, action, repeat

Prompting

Prompt is nothing but what you said to AI.

Prompt Engineering is the art of crafting effective prompts that elicit desired responses from LLMs. It's the foundation of interacting with these models, and its effectiveness can significantly impact the quality and relevance of the output.

A typical prompt can be broken down into several key components:

Priming: This sets the context for the LLM, providing information about the desired task, persona, or style. For example, you might prime the model by saying, \"You are a friendly chatbot that helps users with their travel plans.\"
Instructions: These guide the LLM on how to handle specific aspects of the task, such as the tone of voice, the format of the output, or how to handle edge cases. For example, you might instruct the model to \"use a conversational tone\" or \"provide a bulleted list of recommendations.\"
User Inquiry: This is the dynamic content of the prompt, the specific question or request that the user provides. It's the input that changes with each interaction.
Output Formatting: This specifies the desired format of the LLM's response. It could be plain text, a structured format like JSON, or even a specific template.

Example:

Priming: You are a helpful and informative chatbot that answers questions about history.

Instructions: Provide concise and accurate answers, using bullet points to list key facts.

User Inquiry: What were the major causes of World War II?

Output Formatting: A bulleted list of key causes.

Another famous the COSTAT:

The COSTAR Framework Explained:

Context : Providing background information helps the LLM understand the specific scenario.

Objective (O): Clearly defining the task directs the LLM’s focus.

Style (S): Specifying the desired writing style aligns the LLM response.

Tone (T): Setting the tone ensures the response resonates with the required sentiment.

Audience (A): Identifying the intended audience tailors the LLM’s response to be targeted to an audience.

Response (R): Providing the response format, like text or json, ensures the LLM outputs, and help build pipelines.

Benefits of Prompt Engineering:

Control over Output: Prompt Engineering allows you to guide the LLM's behavior and ensure that the output aligns with your specific needs.
Customization: You can tailor prompts to specific tasks, audiences, and contexts.
Efficiency: Well-crafted prompts can reduce the need for extensive fine-tuning, saving time and resources.

Limitations of Prompt Engineering:

Context Window: LLMs have a limited context window, meaning they can only process a certain amount of text at a time. This can limit the complexity of prompts and the amount of information that can be provided.
Lack of Factual Grounding: LLMs are trained on massive datasets of text, but they don't store specific facts. They predict the most likely word based on the context, which can lead to inaccuracies or inconsistencies.

=========================================

Fine-Tuning

Fine-tuning is a powerful technique that allows you to customize the behavior of an LLM by training it on a specific dataset of examples. This process adjusts the LLM's internal parameters, enabling it to perform better on tasks related to the training data.

How Fine-tuning Works:

Training Data: A dataset of prompt-completion pairs is created, where each pair consists of a prompt and the desired response. This data represents the specific task or style that you want the LLM to learn.
Model Training: The LLM is trained on the provided dataset, adjusting its internal parameters to better predict the desired responses for the given prompts.
Evaluation: The fine-tuned model is evaluated on a separate dataset to assess its performance and ensure that it has learned the desired behavior.

Example:

Imagine you want to fine-tune an LLM to write product descriptions in a specific style.

Training Data: You create a dataset of product descriptions written in your desired style, along with the corresponding product names.
Model Training: The LLM is trained on this dataset, learning to generate product descriptions that match the style and tone of the training data.
Evaluation: You evaluate the fine-tuned model by providing it with new product names and assessing the quality of the generated descriptions.

Benefits of Fine-tuning:

Improved Performance: Fine-tuning can significantly improve the LLM's performance on specific tasks, such as writing in a particular style, generating creative content, or answering questions in a specific domain.
Style and Tone Customization: Fine-tuning allows you to bake in your desired style, tone, and formatting into the LLM's output.
Reduced Prompt Length: Fine-tuning can reduce the need for extensive instructions in the prompt, allowing for a larger context window and more complex outputs.

Limitations of Fine-tuning:

Data Requirements: Fine-tuning requires a dataset of examples, which can be time-consuming and resource-intensive to create.
Overfitting: If the training data is too small or not representative of the desired behavior, the model may overfit to the training data and perform poorly on unseen examples.
Cost and Resources: Fine-tuning can be computationally expensive, requiring significant resources and time.

RAG

RAG addresses the limitations of prompt engineering by incorporating external knowledge sources into the LLM's decision-making process. It allows LLMs to access and utilize factual information from databases, websites, or other sources, enhancing their ability to provide accurate and relevant responses.

How RAG Works:

Database Setup: A database is created containing relevant information, which can be text from websites, documents, or internal knowledge bases. This information is then split into smaller chunks, such as paragraphs or sections, to ensure that related text is kept together.
Embedding Generation: Each chunk of text is converted into a vector representation called an embedding. Embeddings capture the semantic meaning of the text, allowing for efficient comparison and retrieval.
Retrieval: When a user inquiry is received, it is also converted into an embedding. This embedding is then compared to the embeddings in the database using a vector search algorithm. The most similar chunks of text are retrieved.
Prompt Augmentation: The retrieved information is then incorporated into the prompt, providing the LLM with the necessary context to answer the user's question.

Example:

Imagine a user asks, \"How do I fix a leaky faucet?\"

Retrieval: The user's inquiry is converted into an embedding and compared to the embeddings in a database containing a plumber's handbook. The most relevant section, \"Fixing Common Leaks,\" is retrieved.
Prompt Augmentation: The retrieved section is added to the prompt, providing the LLM with the necessary information to answer the question.

Benefits of RAG:

Factual Accuracy: RAG allows LLMs to access and utilize factual information from external sources, improving the accuracy and reliability of their responses.
Real-time Knowledge Updates: The database can be updated in real time, ensuring that the LLM has access to the latest information.
Expanded Knowledge Base: RAG enables LLMs to access a much larger knowledge base than what is available within their training data.

Limitations of RAG:

Database Setup and Maintenance: Creating and maintaining a comprehensive and accurate database can be time-consuming and resource-intensive.
Retrieval Accuracy: The accuracy of the retrieved information depends on the quality of the database and the effectiveness of the vector search algorithm.
Context Window: The retrieved information is still subject to the LLM's context window limitations.

Agents

Agent is nothing but a fancy RAG

Introduction to LLM Agents

LLM agents represent the next frontier in artificial intelligence, moving beyond simple text input-output models to interactive, reasoning-capable systems.

What are LLM Agents?

Definition: Systems that use Large Language Models (LLMs) as their core for reasoning and planning, enabling interaction with external environments.
Key difference from traditional LLMs: Ability to observe, plan, and take actions in diverse environments.

Components of LLM Agents

Agent/Brain/Core:
Core LLM for processing and understanding language
Customizable prompts and personas
Planning:
Ability to create and execute plans for complex tasks
Memory:
Short-term memory: Temporary storage for ongoing conversations
Long-term memory: Persistent storage for learning and recall
Tool Use:
Integration with external tools and APIs
Ability to leverage specialized knowledge bases

Capabilities of LLM Agents

Advanced Problem Solving:
Executing complex tasks efficiently
Generating project plans, writing code, creating summaries
Self-Reflection and Improvement:
Analyzing and critiquing their own output
Continuous enhancement through learning
Multi-Agent Collaboration:
Interaction and cooperation between multiple agents
Division of tasks and specialization
Environment Interaction:
Web browsing, API usage, physical world interaction (in robotics)
Multi-modal input processing (text, images, sensory data)

Applications of LLM Agents

Software Development:
Code generation and debugging
Project planning and management
Workflow Automation:
Task planning and execution in business processes
Intelligent personal assistants
Research and Analysis:
Information gathering and synthesis
Report generation and data analysis
Customer Service:
Advanced chatbots and virtual assistants
Multi-step problem resolution

Frameworks and Tools for LLM Agents

LangChain and LangGraph:
Open-source frameworks for building LLM applications
Components for agent creation, memory management, and tool integration
Agentic Search:
Enhanced search capabilities for agents
Retrieval of multiple answers in agent-friendly formats

Challenges and Considerations

Ethical Concerns:
Ensuring responsible use of autonomous agents
Privacy and data security considerations
Limitations:
Current constraints in reasoning capabilities
Need for precise instructions and prompts
Ongoing Research Areas:
Improving long-term memory and learning
Enhancing multi-modal capabilities

Conclusion

LLM agents represent a significant advancement in AI, offering powerful tools for complex problem-solving and automation. As research progresses, we can expect these agents to become increasingly capable and integrated into various aspects of work and daily life.This lecture outline provides a comprehensive overview of LLM agents, covering their core concepts, capabilities, applications, and challenges. It can be expanded with specific examples and case studies to create a full-length lecture on the topic.

Benefits and When to Use

Prompt Engineering:

Benefits: Easy to implement, rapid prototyping, intuitive for guiding LLM behavior.
When to Use: When you need quick and simple control over LLM output, when you don't have a large dataset for fine-tuning, or when you want to experiment with different prompts.

RAG:

Benefits: Access to external knowledge sources, real-time knowledge updates, expanded knowledge base.
When to Use: When you need to provide LLMs with factual information, when you want to leverage external databases or knowledge bases, or when you need to ensure that the LLM's responses are grounded in real-world data.

Fine-tuning:

Benefits: Improved performance on specific tasks, style and tone customization, reduced prompt length.
When to Use: When you need to train an LLM to perform a specific task, when you want to customize the LLM's output style or tone, or when you want to reduce the need for extensive instructions in the prompt.

Agent:

Benefits: Advanced problem-solving: LLM agents can handle complex, multi-step tasks efficiently by breaking them down into manageable subtasks.
When to Use: When tasks require sequential reasoning, planning, and memory. They excel in situations where simple text generation or information retrieval is not sufficient, and more complex problem-solving or decision-making is needed

", "_id": "67da95667dd4a4f8852945ab" }, { "code": "L143", "title": "Introduction to Embeddings", "type": "Lesson", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

学习目标

- 掌握Embeddings的基本概念及其在自然语言处理、信息检索等领域的应用

- 学习如何生成和使用文本嵌入向量表示语义关系

- 理解不同Embedding模型的工作原理及其对文本表示的影响

- 提升在实际项目中使用Embeddings进行文本分类、相似性搜索等任务的能力

知识点介绍

**Embeddings基础**

- 了解什么是Embeddings，如何将文本或其他数据转化为向量

- 学习Embeddings的核心概念，如语义空间和向量表示

**常见的Embedding模型**

- 掌握常见的Embedding模型，如Word2Vec、GloVe、BERT等的工作原理

- 学习如何选择合适的Embedding模型以满足不同的任务需求

**文本嵌入的生成与应用**

- 学习如何生成文本嵌入，并应用于相似性搜索、分类和聚类等任务

- 理解如何通过嵌入向量表示语义相似性，进行语义搜索和推荐

**模型性能与优化**

- 探索如何评估和优化Embedding模型的性能，确保其生成的向量具有高语义关联性

- 学习如何通过微调Embedding模型提升在特定任务中的表现

**实际应用场景**

- 了解Embeddings在信息检索、自然语言处理和推荐系统中的应用

- 探讨如何在项目中应用Embeddings进行高效的文本处理和语义分析

通过这些知识点，学员将能够理解并应用Embeddings技术，用于各种自然语言处理任务，并通过优化和调优提升模型的表现。

", "_id": "67da95d07dd4a4f885294abf" }, { "code": "L144", "title": "Introduction to Retrieval Augmented Generation (RAG)", "type": "Lesson", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

学习目标

- 掌握Retrieval Augmented Generation (RAG)的基本概念，理解其在生成式AI中的作用

- 学习如何通过RAG结合信息检索与生成模型，提高生成内容的相关性和准确性

- 掌握RAG系统的核心组件，包括文档检索、嵌入生成与生成模型的集成

- 提升在实际项目中构建和优化RAG系统的能力，满足复杂信息生成需求

知识点介绍

**RAG基础概念**

- 了解RAG的架构和工作原理，学习如何通过文档检索增强生成模型的表现

- 探索RAG系统中的主要组件：Document Retrieval、Embedding Generation与Generative Models

**文档检索与生成的集成**

- 学习如何通过RAG系统结合文档检索和生成模型，提升生成内容的上下文相关性

- 理解如何在生成过程中动态调用检索信息，确保生成内容的准确性与完整性

**RAG系统的优化与调优**

- 学习如何优化RAG系统中的检索和生成流程，提高响应速度和生成质量

- 掌握如何通过Prompt Engineering和检索策略的调整，提升RAG系统的效果

**应用场景与案例分析**

- 探讨RAG在知识问答、文档生成、智能客服等应用中的实际案例

- 学习如何根据具体业务需求定制RAG系统，提升系统的智能化和用户体验

通过这些知识点，学员将能够理解并应用Retrieval Augmented Generation (RAG)技术，构建具有高相关性和高准确性的生成系统，并通过优化和调优提升系统性能。

", "_id": "67da95fd7dd4a4f885294fba" }, { "code": "L145", "title": "Building RAG from Scratch in JavaScript", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

学习目标

掌握如何使用JavaScript从零开始构建一个完整的Retrieval Augmented Generation (RAG)系统
理解RAG系统的核心组件，包括Information Retrieval、Embeddings和Generative Models
学习如何将检索模块与生成模块无缝集成，以处理复杂的文本检索和生成任务
掌握如何在JavaScript中优化RAG系统的性能，确保在实际应用中的高效运行

", "_id": "67db8f057dd4a4f885306f75" }, { "code": "L146", "title": "Integrate Azure AI and OpenAI", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

完成课程 Integrate Azure AI Service and Streaming

已注册ChatGPT/Open AI并开通Open AI API服务（需要预存5美金）

课程内容

上次课程（Azure语音转文字和翻译）的回顾
Generative AI
几个最常见的Generative AI产品
ChatGPT 和 Open AI 简介
ChatGPT vs OpenAI
Open AI API 简介及其价钱
Open AI Platform
Assistant
Playground
Other
在澳洲企业的实际应用案例（如何玩转Prompt）
Employment Hero - 简历阅读和评判
Service NSW - ChatGPT 与 Azure CLU的PK
练习：Open AI API 初体验 - Open AI Playground 的体验

=============中场休息10分钟===============

基于上一章练习（Azure AI 2）的后端应用，改动后端API，提供同样的语音转文字功能，但背后调用的是Open AI，而不是Azure AI
调用Open AI 的 Rest API 把文件传至OpenAI识别出文字
返回文字到Response
整合上一节应用的前端测试（原则上前端无任何改动，实际上需要有一处小改动）
基于上一节的后端应用，增加一个API，提供对话功能
调用Open AI 的 Rest API 把文件传至OpenAI，让OpenAI回答文字
返回文字到Response
前端改动，调用新增的这个API，测试
做一个chatgpt的马甲：支持文字或语音输入，文字回答 - 40-60分
OpenAI on Azure AI Service - 60-80
AI 体验的小结和讨论 - 80-85分

", "_id": "67db8fc57dd4a4f88530803b" }, { "code": "L147", "title": "Student Showcase: Stripe Integration in Practice", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Student Showcase: Stripe Integration in Practice

", "_id": "67f633ec33685a211e5474d7" }, { "code": "L148", "title": "学会撰写IT专业简历", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

学会撰写IT专业简历

", "_id": "67f72f8b7cf9a503e51ac121" }, { "code": "L149", "title": "LinkedIn & CV", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

LinkedIn & CV

", "_id": "67f730b27cf9a503e51af6e5" }, { "code": "L150", "title": "手把手教你运营LinkedIn", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

🌟 课程简介

在澳洲找工作，LinkedIn是你不可忽视的第二张名片。本课程将手把手教你打造高吸引力的LinkedIn主页，拓展高质量人脉，并通过运营策略提升个人品牌影响力，让HR和猎头主动联系你。

💼 你将学到：

✅ 从零开始优化LinkedIn主页

✅ 拓展500+精准职业人脉

✅ 学会发帖与私信，提升曝光

✅ 简历与LinkedIn一致性策略，提升求职成功率

", "_id": "68073f6cb5d34ab45f0e7c98" }, { "code": "L151", "title": "Workshop: Agile Project Management", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop: Agile Project Management

", "_id": "680a0a01bc3576956e2fe163" }, { "code": "L152", "title": "React基础(1) - 代码质量", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

代码规范的重要性
课堂实践：写出可读性高的代码 - Income Tax Calculator
写出符合人类思维方式的代码
代码质量的核心概念：可读性、可维护性、可扩展性
SOLID 原则
小练习：写出一个高质量的 getFlightsStops 函数

", "_id": "682443c9754b6a4959bac082" }, { "code": "L153", "title": "React基础(2) - 为什么需要 React", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

传统开发 vs 组件化开发
React 的核心概念（声明式 UI、组件化、单向数据流）
用 JS 操作 DOM vs 用 React 渲染 UI（对比体验）

", "_id": "68244438754b6a4959bae372" }, { "code": "L154", "title": "开发环境与工具", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

什么是打包工具？(Webpack)
Babel 介绍：JSX 如何转换成 JavaScript？
什么是脚手架？
创建第一个 React 项目（Vite）
小练习：用 Vite 启动一个 React 应用环境

", "_id": "68244461754b6a4959baebfc" }, { "code": "L155", "title": "React基础(3) - 开发环境与工具", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

什么是打包工具？(Webpack)
Babel 介绍：JSX 如何转换成 JavaScript？
什么是脚手架？
创建第一个 React 项目（Vite）
小练习：用 Vite 启动一个 React 应用环境

", "_id": "6824448c754b6a4959baf078" }, { "code": "L156", "title": "React基础(4) - 组件 & JSX 语法", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

JSX 语法规则
React 组件
如何在 JSX 里写 JavaScript？
组件的 Props（属性传递）
小练习：编写一个简单的 Button 组件，支持不同文本

", "_id": "682444b4754b6a4959bafea1" }, { "code": "L157", "title": "React基础(5) - 条件渲染 & 列表渲染", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

if / 三元运算符 ? : / && 渲染组件
数组 .map() 生成组件列表
为什么 key 很重要？
小练习：渲染一个 Todo List

", "_id": "682444ec754b6a4959bb06e6" }, { "code": "L158", "title": "React基础(6) - 组件的状态", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 组件是如何保存状态的？
useState 的基本用法
事件处理（onClick、onChange）
状态提升（Lifting State Up）
小练习：制作一个带开关的灯泡组件（点击按钮切换亮/灭）

", "_id": "6824453f754b6a4959bb1539" }, { "code": "L159", "title": "React基础(7) - React 组件生命周期 & 使用 API 获取数据", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 组件的生命周期（挂载、更新、卸载）
useEffect 介绍
清理副作用（避免内存泄漏）
小练习：制作一个自动倒计时的组件
如何使用 fetch 请求 API
处理加载中 & 错误状态
小练习：请求 GitHub API 并显示用户信息

", "_id": "6824457a754b6a4959bb21fc" }, { "code": "L160", "title": "React 进阶(1) - Thinking in React", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React
Step 3: Identify The Minimal (but complete) Representation Of UI State
Step 4: Identify Where Your State Should Live
Step 5: Add Inverse Data Flow
And That’s It

", "_id": "682445ba754b6a4959bb3025" }, { "code": "L161", "title": "React 进阶(2) - 测试和 a11y", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

测试金字塔
Unit Test
vitest
react testing lib
js-dom
accessibility

", "_id": "6824460b754b6a4959bb4382" }, { "code": "L162", "title": "Workshop：前端技术干货分享", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop：前端技术干货分享

", "_id": "6836d0b6705ef70538c77ded" }, { "code": "L163", "title": "Workshop：如何使用最新AI工具高效编程", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop：如何使用最新AI工具高效编程

", "_id": "68380a5b705ef70538dff21f" }, { "code": "L164", "title": "Tutorial 13", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

作业讲评：

.NET(2): Assignment

.NET(3): Assignment

.NET(4): Assignment

", "_id": "68527dd36aa070c1cd9f10fc" }, { "code": "L165", "title": ".NET(9): 构建WEB API项目相关技术 - Entity Framework Core，Linq，Sweager，nlog", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

构建WEB API项目相关技术 - Entity Framework Core，Linq，Sweager，nlog

", "_id": "685374ff6aa070c1cdae8fac" }, { "code": "L166", "title": ".NET(10): 构建WEB API项目相关技术 - Web API认证与授权（JWT Authentication & RBAC Authorization）", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

构建WEB API项目相关技术 - Web API认证与授权（JWT Authentication & RBAC Authorization）

", "_id": "685375ab6aa070c1cdae9f9b" }, { "code": "L167", "title": "Tutorial 15", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "685376276aa070c1cdaeaac7" }, { "code": "L168", "title": "Scrum User Story: 实现标准化用户管理 API 与全局过滤器", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Scrum User Story: 实现标准化用户管理 API 与全局过滤器

As a developer,

I want to build a UserController that supports CRUD operations for users with validation and consistent API response structure,

So that front-end developers and consumers can reliably interact with the API and handle results and errors uniformly.

Acceptance Criteria (AC):

AC1: 实现用户基本信息模型与验证

Create a User class with the following properties:

- UserName: Required

- Email: Must be a valid email format

- Phone: Must match Australian phone number format via custom validation

- Gender: Enum with values Male, Female, Other

- Address: Must be 10-50 characters

- Password: Required，less than 10 characters via custom validation

Use data annotations and custom validation for Password and phone

AC2: 实现 CRUD API

1.Create a UserController with endpoints:

- POST /api/user: Add a new user

- GET /api/user/{id}: Get user by ID

- PUT /api/user/{id}: Update user by ID

- DELETE /api/user/{id}: Delete user by ID

2.Post, put API must use the User model as a parameter

AC3: 统一 API 返回格式

All API responses must follow a common structure:

{

\"success\": true/false,

\"message\": \"Operation result message\",

\"data\": null or object,

\"errors\": [] or null

}

AC4: 创建 ActionFilter 拦截器

1.Implement a class inheriting ActionFilterAttribute

2.Log or capture:

- Action name

- Parameter names and values

3.Apply globally or decorate on the controller

AC5: 创建 ExceptionFilter 异常过滤器

Create CustomExceptionFilter class implementing IExceptionFilter
Catch all unhandled exceptions
Return a unified error response using the API structure above
Apply globally to all controllers

AC6: 创建 ResultFilter 响应结果拦截器

1.Implement a ResultFilter that:

- Adds a timestamp to all successful responses

- Ensures response remains in unified format

2.Apply globally to all controllers

AC7: 添加一个自定义中间件

Middleware to log all incoming request paths and timestamps
Ensure it runs before controller processing

Definition of Done:

All code builds and runs successfully
All endpoints return the correct JSON format
Validation errors are returned clearly under errors
Filters and middleware work across all actions
Tested using Postman with various valid/invalid inputs

", "_id": "685754266aa070c1cdeec15f" }, { "code": "L169", "title": "AI Coding & Vibe Coding Workshop", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

AI Coding & Vibe Coding Workshop

", "_id": "6892f5841872983abefe6244" }, { "code": "L170", "title": "Project 2 Tutorial 01（全栈25期）", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

介绍

在这部分，我们将概述整个项目的框架。你们将了解到，我们为什么选择天气预报应用作为学习项目，以及它如何帮助你们在现实世界中应用编程技能。这将是一次从零开始构建一个完整网络应用的旅程。

天气应用项目的要求

我们将详细讨论项目的具体要求，包括用户能够输入城市名称、查看当前天气状况以及获取未来三天的天气预报等功能。这将帮助你们理解项目的核心目标和功能。

完成项目的目标

这个环节会让你们明白，完成这个项目不仅仅是为了制作一个应用，而是为了提升你们的技术能力，如 API 交互、前端框架的应用、代码组织和架构设计技能，以及测试驱动开发的实践。

项目的设计图介绍与分析

我们将一起审视项目的设计图，分析应用的用户界面和用户体验方面。这将帮助你们理解如何从用户的角度来思考，并将这种思维转化为实际的代码和设计实现。

完成这个项目需要的技术栈

在这个环节，我们将讨论构建该应用所需的技术栈，包括前端框架、API 请求处理、状态管理等。无论你们是刚接触前端开发，还是希望巩固已有知识，这都将是一个极好的学习机会。

React 项目框架搭建

环境设置：通过配置开发环境来搭建 React 项目，包括安装必要的依赖和工具。
项目结构：创建项目的基础结构，包括设置路由、状态管理等。
基础代码编写：编写一些基础代码，确保项目能够顺利运行。

组件命名

命名规则：明确组件命名的最佳实践，这有助于提高代码的可读性和可维护性。
实际操作：我们将实际命名一些将在项目中使用的组件，并解释这些命名背后的逻辑。

", "_id": "68c23491715ffd88cde00553" }, { "code": "L171", "title": "Project 2 Tutorial 02（全栈25期）", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

布局设计

用户界面规划：首先，我们将对天气应用的用户界面进行详细规划。这包括定义主要视图（如主页、详细天气页）及其组件（如天气摘要、预报列表、搜索栏）。
信息架构：深入探讨如何组织信息，使用户能够轻松理解和访问天气数据。这涉及到决定哪些信息是首要显示的，以及如何逻辑地组织次要信息。
交互设计：考虑用户与应用交互的方式，如搜索城市、切换温度单位等。这将影响布局的设计和组件的放置。

静态页面实现

HTML结构：创建HTML文档结构，构建应用的骨架。这包括定义必要的HTML元素，如头部、导航栏、内容区域和底部。
组件化开发：将界面分解为可重用的组件，这有助于提高代码的可维护性和可扩展性。例如，将天气卡片、搜索栏等元素作为独立组件。
布局技术：创建响应式布局，确保内容在不同屏幕大小下都能有效地展示。

样式和响应式

样式定义：利用CSS或CSS预处理器来定义样式。这包括设置颜色主题、字体、边距、间隔等。
视觉吸引力：强调视觉吸引力和品牌一致性，确保应用的外观既美观又专业。包括颜色搭配、字体选择、图标使用等。
响应式设计：实现响应式设计，确保应用在不同设备上都能提供良好的用户体验。这可能涉及到使用媒体查询、弹性布局等技术。
交互动效：考虑添加一些CSS动画和过渡效果来提升用户体验，如加载动画、按钮悬停效果等。

", "_id": "68c2358e715ffd88cde0719e" }, { "code": "L172", "title": "Project 2 Tutorial 03（全栈25期）", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

功能实现

交互实现：为页面添加交互功能，包括处理用户输入、显示数据、以及响应用户操作等。
状态管理：管理组件状态，如表单输入验证、条件渲染等。

连接 API

API 集成：我们将学习如何使用 HTTP 客户端（如 axios 或 fetch）连接到 Weather API，获取所需的天气数据。
数据处理：处理 API 响应，包括解析数据、错误处理以及状态更新。
动态显示数据：将从 API 获取的数据动态展示在用户界面上。
调试与测试：编写测试来验证 API 集成的功能。

", "_id": "68c23646715ffd88cde0a2c3" }, { "code": "L173", "title": "AI in Programming Workshop", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

AI in Programming Workshop

", "_id": "68c7a2df360f12aea632042d" }, { "code": "L174", "title": "如何撰写IT专业简历", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

清晰的格式和布局：使用易于阅读的字体和清晰的布局。保持简历的长度适中，通常不超过两页。
个人信息和联系方式：包括你的姓名、职业头衔（如软件工程师、系统管理员等）、联系电话、电子邮箱和 LinkedIn 个人页面链接。
专业摘要或目标声明：简洁地概述你的职业背景、技能和你寻求的职位类型。这部分应该具有吸引力且针对你申请的职位量身定制。
技术技能：明确列出你的技术技能，如编程语言（例如 Java、Python）、框架（如 Spring、React）、数据库（如 MySQL、MongoDB）和工具（如 Git、Docker）。根据求职职位的要求来调整技能列表。
工作经验：按时间顺序列出你的工作经历，包括公司名称、职位、工作时间和职责描述。突出具体成就和使用的技术。
项目经历：如果你有相关的项目经验（包括学校项目、个人项目或自由职业项目），请列出来，说明你的角色、使用的技术和项目成果。
教育背景：提供你的最高学历信息，包括学校名称、学位、专业和毕业时间。如果你是新毕业生，可以更详细地说明你的教育背景。
证书和培训：如果你有相关的行业证书（如 AWS Certified Solutions Architect、Cisco 的 CCNA）或完成了重要的专业培训，务必列出。
其他信息：如语言能力、志愿者经验、获奖情况等，如果它们对你申请的职位有帮助，可以选择性地加入。
定制你的简历：针对每个职位调整你的简历，确保它符合职位描述中的关键字和要求。
校对和审核：在提交前，请仔细校对你的简历，确保没有拼写和语法错误。有可能的话，让你的同事或朋友帮你复查。

", "_id": "690449988e9052303811926a" }, { "code": "L175", "title": "Lab(9)：使用React构建收支管理应用", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691fd6fa83c15bc978860e60" }, { "code": "L176", "title": "Vibe Coding", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6941227fbc0df65b1893d060" } ] }, { "name": "AI Web全栈班27期.NET寒假班", "color": "#10b981", "summary": "", "test": { "questions": 0, "passRate": 0, "unlocks": "" }, "lessons": [ { "code": "L01", "title": "课前须知", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

课前须知：

欢迎来到Web全栈开发课程！为了帮助大家更好地投入学习并取得最佳效果，我们特别准备了以下课前须知，请仔细阅读：

预习材料：建议同学们提前自学W3Cschool中的HTML、CSS和JavaScript部分内容，多加练习可以帮助你更好地理解课堂内容。
课堂设备准备：为了提高学习效率，建议大家在上课时使用多个屏幕。你可以通过外接显示器或使用iPad来播放课程视频，同时在电脑端进行代码练习和做笔记，这样的方式将帮助你更好地掌握课程内容。
做笔记的重要性：良好的文档管理能力是成为专业人士的重要技能之一。上课时建议大家积极做笔记，可以在匠人课堂的线上平台完成笔记记录，也可以选择私下整理笔记。
Tutorial 环节：本课程设置了专门的Tutorial环节，旨在为大家解答学习中的疑惑。请充分利用这个时间段，解决你在学习中遇到的问题。
实践至上：学习IT技能的最佳方法就是多加实践。请勇敢迈出编写代码的第一步，只要不断练习和动手操作，你离成功就不远了。
积极提问：由于课程采用线上教学模式，老师不在身边，因此在遇到问题时，请务必通过分享屏幕或截屏的方式向老师提问，这样有助于老师更准确地理解你的问题并提供帮助。

期待大家在这门课程中有所收获，并取得优异的成绩！如果有任何疑问，请随时提问，老师们会在第一时间为你解答。让我们一起努力，迈向成为全栈开发工程师的目标！

", "_id": "68491cffcf1221161b82ae6d" }, { "code": "L02", "title": "课程准备", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

为确保同学们在全栈开发课程中获得最佳学习体验，请参考以下准备指南：

\n

基础知识预习：建议您在正式课程开始前，访问 W3Schools 等在线资源，自学 HTML、CSS 和 JavaScript 等基础知识。多次复习这些基本概念将为您加入全栈班级打下坚实的基础。
课前准备：请务必查阅我们为您准备的 PPT，以便做好充分的课前准备。这将帮助您更好地理解即将学习的内容。
课程笔记和项目：\n
- 课程笔记可在此处查看： https://github.com/australiaitgroup/full-stack-bootcamp-wiki
- 我们的课程包括三个实践项目，您可以参考以下信息：https://github.com/australiaitgroup/jr-full-stack-projects
\n
编辑器工具：您可以根据个人喜好选择任意一款代码编辑器，如 VS Code、Webstorm、Intellij 等。
Node.js 安装：请自行安装 16 版本以上的 Node.js LTS（长期支持）版本。

\n

我们期待着与你在全栈班的旅程中携手前行，并助你成为一名出色的全栈开发者！

\n

", "_id": "69e329409f9cc30e74196cc7" }, { "code": "L03", "title": "Introduction & Career", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Web全栈班课程内容介绍

匠人学院概述学院背景与发展: 匠人学院（JR Academy）成立于2017年，总部位于澳大利亚布里斯班，目前在悉尼、墨尔本、阿德莱德等主要城市设有分部。学院致力于为澳洲华人提供高质量的IT教育，帮助学员提升技能，实现职业发展。
使命与愿景: 我们的使命是通过技术赋能教育，以专业和匠心服务用户，助力学员开启他们的第一份澳洲IT工作。
学员与导师的覆盖范围及影响力: 学院已培训超过4000名IT学员，拥有600多位全球导师，举办200多场线上线下活动，并成功帮助数千名学员拿到offer。
Web全栈班课程简介基础课程（3.5个月）：涵盖HTML、CSS、JavaScript、数据库、Web框架等核心技能，帮助学员打下扎实的技术基础。
项目实战（3个月）：学员将参与3个实际项目，包括商业级个人/公司Landing Page开发、Web Application Delivery，以及Agile Team Project Delivery。在项目实战中，学员不仅能巩固所学，还能积累团队协作和项目管理经验。
AIGC新内容：课程新增人工智能生成内容（AIGC）模块，帮助学员掌握最新的AI技术，增强竞争力。
职业辅导（2个月）：在Career Coaching阶段，学员将接受全方位的职业辅导，内容涵盖职业规划、简历优化、面试准备、谈薪技巧等，确保学员在求职时有充足的准备。
简历内推库（12个月）：学员将享受为期一年的简历内推服务，简历将由专业导师审核优化，并推荐至行业内相关岗位，增加就业机会。
导师与辅导团队导师背景与专业领域: 我们的导师团队由来自全球知名IT公司的行业专家组成，涵盖软件开发、云计算、DevOps、数据分析等多个领域。导师不仅具备丰富的技术背景，还拥有多年的教学与面试经验。
辅导老师与班主任角色: 每期课程配备专属辅导员和班主任，负责学员的日常学习辅导、作业批改、课程反馈与建议，确保每位学员都能得到个性化的指导和支持。
学习模式与平台课程授课：由一线大厂导师主讲，传授前沿技术和实用经验。
Tutorial：通过课堂和项目Tutorial，学员在学习中得到及时的答疑和作业批改反馈。
项目实战：学员将在导师的指导下，完成商业级项目，积累实际工作经验。
IT Career Coaching Bootcamp：职业辅导包括求职技巧、职业发展规划，帮助学员更快适应职场。
元宇宙互动学习平台: 学院独创的线上互动学习平台，将元宇宙场景融入学习中，打破远程学习的社交壁垒，提供24小时线上自习室和团队协作环境。
线上自习室与团队协作: 学员可以在元宇宙平台上找到学习伙伴，共同学习并参与项目，快速建立紧密的团队协作氛围。
职业发展与就业支持简历内推库与求职指导: 匠人学院为毕业学员打造了专属的简历内推库，每份简历都经过专业导师的审核与优化，并优先推荐给合作企业，帮助学员缩短求职路径。
Career Coaching Bootcamp: 该课程提供为期2个月的职业指导，涵盖职业规划、简历优化、面试技巧、薪资谈判等内容，帮助学员全面提升就业能力。
实习与工作内推课程: 学院与多家一线IT公司合作，提供实习机会和工作内推服务，为学员搭建与企业接轨的桥梁。
实战项目与案例分析项目背景与设计原则: 每个项目都源自真实商业场景，要求学员与客户合作，理解并实现他们的需求，从而锻炼实际开发能力。
项目提交要求与评估标准: 项目需提交完整的代码、文档和展示链接，评估标准包括代码质量、功能实现、用户体验等方面。
真实商业项目体验: 学员将参与多个真实商业项目，如个人或公司Landing Page、Web应用程序开发、云服务集成等，积累宝贵的项目经验。
学员社区与支持体系班长与课代表制度: 学员可以竞选班长或课代表，协助导师管理课程，解答同学疑问，并参与课程反馈，锻炼领导能力。
社区互助与资源共享: 学院拥有活跃的学员社区，成员间互帮互助，共享内推资源与学习资料，形成良好的学习氛围。
学员信息统计与社区互动: 学院定期统计学员信息，了解学员需求，组织线上线下的互动活动，增强社区凝聚力。

", "_id": "6834079e705ef70538933632" }, { "code": "L04", "title": "【课后阅读】“计算机专业要学哪些？\"10 分钟带你白嫖完三年科班程序员的必修课", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

面向对象编程（OOP）

了解 OOP 的核心概念

前端（Front-end）

了解 HTML、CSS、JavaScript 的魔法

系统编程（System Programming）

了解系统编程的重要性

图像处理

图像在设计和计算机视觉中的奥秘

互联网协议（Internet Protocols）

互联网协议的秘密
了解 TCP/IP 和 HTTP
网络通信的魔法

", "_id": "69e329409f9cc30e74196cdb" }, { "code": "L05", "title": "开课讲解会", "type": "Lesson", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

主要内容：

1. 课表查看

2. 课程资料查找

3. 课程回放查找

4. 学习平台资源

5. Jobpin简历生成器使用

", "_id": "6834079e705ef70538933633" }, { "code": "L06", "title": "HTML & CSS 的奥秘", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

网页的心跳: 网页如何呈现给用户

网页旅程: 探究一个网页如何从服务器传输到你的屏幕的背后原理。
HTML标签揭秘: 网络的基石。熟悉最常用的标签并理解它们的功能。

深入HTML的构架

HTML结构: 学习HTML的基本框架和其重要性。
头部(Head)解析: 头部标签里包含了什么? 为什么它是如此重要?
HTML的观众: HTML是为了人类还是机器而创建的？或者两者兼而有之？
元素之间的区别: 什么是Block元素? 什么是Inline元素? 为什么需要区分?
常用标签探讨: 深入了解和实践常用的HTML标签。
标签的语义性: 为什么选择正确的标签很重要？如何提高代码的可读性和无障碍访问性。

HTML的其他要素

HTML注释的艺术: 为什么注释是重要的，以及如何正确地使用它们。
跨浏览器的兼容性: 在不同的浏览器上，为什么同一代码会显示不同的样子？如何确保你的代码对所有用户都是友好的？

现代HTML5新增特性

新的语义标签: 如<article>, <section>, <nav>, <header>, <footer>等。
多媒体标签: 如何使用<audio>和<video>标签嵌入音频和视频。

表单与用户互动

表单基础: 输入类型、标签和属性的详细介绍。
数据验证: 如何使用HTML自带的验证功能确保用户输入的数据有效。

网页的布局基础

Box Model: 详细解析边距、边框、填充和内容如何共同作用。
Position: 学习static、relative、absoulute和fixed定位的基本知识。

响应式Web设计入门

Viewport: 什么是Viewport？为什么它对移动设备如此重要？
Media Query: 基础介绍，如何根据不同的设备和屏幕尺寸应用不同的CSS样式。

与其他技术的交互

嵌入JavaScript: 简单介绍如何在HTML中使用JavaScript增强互动。

作业：registration_form

", "_id": "69e329419f9cc30e74196ce8" }, { "code": "L07", "title": "HTML & CSS的奥秘: Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

创建Registration Form

作业背景：

网页表单是任何交互性网站的核心部分，无论是注册、登录、提问还是购物，表单都扮演了关键角色。为了强化你对HTML和基础CSS的理解，我们为你设计了这个作业，让你从实践中学习。

作业要求：

表单结构：你的表单应该至少包含以下字段：

First Name (text input field)
Last Name (text input field)
Email Address (appropriate input type)
Password (password input field with appropriate attributes to ensure security)
Confirm Password (password input field)
Date of Birth (date picker)
Gender (radio buttons: Male/Female/Other)
About Me (textarea)
Choose Your Profession (dropdown list with options like \"Web Development\", \"Data Analytics\", \"UI/UX Design\", etc.)

布局和样式：

使用CSS为你的表单元素添加基本样式，如边框、背景颜色、文本颜色等。
确保所有元素在各种设备和屏幕尺寸上都有清晰的布局和良好的可读性。
考虑元素间的间距，确保表单整体布局美观。

交互：

为提交按钮添加hover效果。
使用HTML5验证功能确保在提交之前填写了所有必需字段。
确保电子邮件和密码字段有适当的格式限制。

代码清晰性：确保你的代码结构清晰，HTML和CSS均应有合适的注释说明。

参考UI图：

作业提交：

方式一：GitHub链接提交

将你的HTML和CSS 文件上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

将你的HTML和CSS代码保存在一个名为 \"Registration_Form\" 的文件夹中；
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。

请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "69e329419f9cc30e74196cf2" }, { "code": "L08", "title": "Lab(1)：使用Chrome Debugger和实现Responsive List", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用Chrome Debugger和实现Responsive List

", "_id": "69e329419f9cc30e74196cff" }, { "code": "L09", "title": "HTML&CSS (Part 2)", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

CSS概念

定义：CSS (级联样式表) 是用来装饰和布局网页的语言。
作用：让网页内容更加美观，为HTML元素设置样式。

Emmet语法

定义：一个高效的编码快捷工具，帮助快速编写HTML/CSS。
示例：输入ul>li*5后，可快速展开为5个列表项的无序列表。

选择器的种类及其作用

标签选择器：针对特定HTML标签应用样式。
类选择器：一个或多个HTML元素的自定义样式。例如，.classname。
类选择器多类名使用：一个元素可以应用多个类名，例如<div class=\"class1 class2\">。
ID选择器：针对特定ID的HTML元素应用样式。例如，#idname。
通配符选择器 (``)：选取所有元素应用统一样式。

CSS字体与文本属性

字体属性：如font-family, font-size, font-weight等。
复合属性：例如font: 12px Arial, sans-serif;可以一次性设置多个字体相关的属性。
文本样式：如text-align, text-decoration, text-transform等用于控制文本的显示效果。

CSS样式表的种类

内部样式表：直接在HTML文件的<head>中使用<style>标签。
行内样式：直接在HTML元素上使用style属性。
外部样式表：通过.css文件链接到HTML，使样式与内容分离。

选择器的进阶使用

后代选择器：如div p选择所有div内的p元素。
子元素选择器：如div > p只选择div的直接子元素p。
并集选择器：例如h1, h2, h3可以同时为多个标签设置样式。

链接伪类选择器

如:hover, :active, :visited等，用于定义链接或其他元素在不同状态下的样式。

元素显示模式

行内元素：如span，不独占一行。
块元素：如div，独占一行。
元素模式转化：使用display属性，如display: block;或display: inline;。

背景属性 (background)

如background-color, background-image, background-repeat等，用于设置元素的背景。

CSS的三大特性

层叠性：当有多个相互冲突的样式规则时，哪一个会生效。
继承性：某些样式会被子元素继承。
优先级 & 权重叠加：如!important, 选择器的权重等。

CSS盒模型 (Box Model)

包括：内容(content), 填充(padding), 边框(border), 外边距(margin)。

边距的特性

Margin水平居中：如margin: 0 auto;可以使块元素在容器中水平居中。
Margin合并塌陷：当两个垂直边距相遇时，它们将形成一个边距。

Flex布局

介绍：一个为设计复杂布局而生的模型，主要用于调整元素在不同设备和屏幕大小上的显示。
基本概念：如flex-container, flex-item, justify-content, align-items等。

Flex属性

如flex-grow, flex-shrink, flex-basis等，用于控制flex容器内元素的大小和排列。

", "_id": "6834079e705ef70538933636" }, { "code": "L10", "title": "HTML&CSS (Part 2): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业背景：

卡片式设计（Card UI Design）是现代Web设计中常见的一种模式，广泛用于产品展示、新闻摘要、个人资料等。此次作业，你将会获得一些预先设计好的Card UI Design图。你的任务是使用HTML和CSS来实现这些设计，将其从静态图像转变为实际的Web元素。

选择一个提供的UI设计，完成作业。

参考图一：

参考图二：

作业要求：

精确还原：尽量确保你的代码实现与给定的UI设计图在视觉上相匹配，包括颜色、尺寸、字体和间距。

响应式设计：尽管设计图可能是针对特定的屏幕尺寸，但你需要确保你的卡片设计在各种设备和屏幕尺寸上都能正常显示。

使用选择器和属性：你应该在CSS中应用至少以下选择器和属性：

标签选择器、类选择器、ID选择器。
文本样式、背景属性、padding、margin、flexbox。

代码清晰性：代码应该是清晰的、整洁的，并且有适当的注释。

交互效果：考虑为你的卡片添加一些基本的交互效果，如hover状态。

作业提交：

方式一：GitHub链接提交

将你的HTML和CSS 文件上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

将你的HTML和CSS代码保存在一个名为 \"Card_UI_Implementation\" 的文件夹中；确保所有必要的资源（如图片、字体）都已包含在此文件夹中，并使用相对路径链接到你的HTML中。
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。
请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "69e329419f9cc30e74196d12" }, { "code": "L11", "title": "Tutorial 01 (HTML)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

自我介绍以及上课要求

手把手练习

页面仿写练习:
使用 HTML 和 CSS 仿写 https://jiangren.com.au/ 网站的主页布局和样式。
学会如何分析网页元素的结构和样式。
学会如何用Chrome Inspect分析网页元素和拿取图片。
Tutor示范如何用HTML创建Head部分
包括 head, title, description 以及解释 SEO
学生练习
Tutor示范如何用HTML创建Header部分
包括 input, button, div, options, img alt, span…..
学生练习
Tutor示范如何用HTML创建Menu部分
包括 ul, li, menu, img, alt, button, a, span
学生练习
Tutor示范如何用HTML创建Banner部分
包括 section, div, img, alt, a, span…..
学生练习
Tutor示范如何用HTML创建Footer部分
包括 ul, li, a, button, img, alt, p, span….
学生练习

作业点评&答疑

创建 Registration Form:

答疑注册表单作业。
提供反馈和改进建议，聚焦于表单结构、字段校验、和响应式设计。

HTML&CSS 问答

问答环节:

回答学员在学习 HTML 和 CSS 过程中提出的问题。
提供解决常见问题的策略和技巧。

", "_id": "6834079e705ef70538933638" }, { "code": "L12", "title": "CSS & Sass", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Card Design作业评议与SVG编辑

回顾与讨论学生提交的card design作业。
如何编辑SVG图像以增强设计效果。

box-sizing的实际应用

解释box-sizing属性如何影响元素的宽高计算。
展示content-box与border-box之间的区别。

CSS长度单位探讨

绝对单位：如px, pt, cm等。
相对单位：如em, rem, vw, vh等。

文本溢出处理

了解`word-wrap`和`word-break`属性如何帮助控制文本溢出。

伪类与伪元素的使用

如:hover, ::before, ::after等。
演示如何使用它们增强页面样式和效果。

float的应用技巧

介绍float属性的常见用途，如创建多列布局或水平菜单。

选择器的特异性 (specificity)

讲解如何计算选择器的权重，以及为何某些样式没有被应用。

响应式设计基础

为什么响应式设计是必要的。
如何使用媒体查询创建适应不同屏幕大小的布局。

Bootstrap与Semantic UI

简介Bootstrap，展示如何使用Bootstrap实现响应式设计。
介绍Semantic UI框架并比较其与Bootstrap的异同。

CSS预处理器简介:

什么是Sass、Less等预处理器？为什么它们在现代网页开发中很有用？

CSS的挑战与Sass解决方案

讨论在大型项目中CSS可能面临的问题。
介绍Sass (SCSS) 如何简化CSS编写，以及如何使用变量、嵌套等功能。

深入Flexbox

了解Flexbox如何解决传统布局问题。
探索`flex`, `flex-grow`, `flex-shrink`等属性的使用。

UI设计原则与组件库

学习创建出色UI的基本原则。
介绍流行的组件库，如Material-UI或Ant Design。
展示个人网站设计案例，启发学生的设计灵感。

作业指导

要求使用本节课学到的技能完成四个Card布局。

", "_id": "6834079e705ef7053893363a" }, { "code": "L13", "title": "Lab(2)：使用Grid和Flexbox实现卡片布局", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用Grid和Flexbox实现卡片布局

", "_id": "69e329429f9cc30e74196d2d" }, { "code": "L14", "title": "JavaScript ", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

JavaScript的奇幻之旅：

跟随时间的轨迹，了解JavaScript如何从一个小小的脚本语言成为Web的重要组成部分。
理解其如何成为Web的核心语言。
体验Node.js的魅力，看看如何轻松地在这个环境中运行你的JS代码。

探索js的秘密：

深入了解JavaScript的独特Data Types，感知数据的生命力。
认识变量命名背后的Naming Conventions，并感受到Hoisting带来的惊喜。

动态的数据操作：

学习Operators的秘密语言，看它们如何让数据生动起来。
了解==与===的精确差异
深入探讨JavaScript的Type Conversion，体验其动态特性。
揭示数字计算中的Precision问题，学会安全的数据处理技巧。

数组的神秘世界：

从创建到访问，全方位认识Arrays。
探索数组的神奇方法，无论是sort还是filter，并学会使用break和continue来调控循环的行为。

控制代码的流程：

体验如何使用Conditional Statements让代码做出决策。
利用Loops让魔法反复施放，直到完成神奇的任务。

Dive into Functions:

学习如何将神奇的咒语封装成Functions，随时随地召唤。
定义和调用函数，了解Scope和参数传递的机制。
介绍Strict Mode，为什么它是良好编程实践的一部分。

Objects：模型化复杂的现实世界

深入了解Objects，看它们如何代表复杂的事物。
体验Objects和Arrays的冒险，了解它们在JavaScript世界中的地位。

最佳实践和注意事项：

深入了解Strict Mode，掌握其在现代JavaScript开发中的重要性。
认识一些常见的JavaScript陷阱，并学会如何避免它们。

", "_id": "6834079e705ef7053893363b" }, { "code": "L15", "title": "JavaScript Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

JavaScript 入门作业: 购物清单管理

作业目标:

通过这次的作业，你将会练习JavaScript中的基本数据类型、数组、对象、条件语句、循环语句和函数的应用。

作业要求:

数据与变量：

创建一个购物清单数组，例如:

数组应用：

向购物清单中添加两样物品，并输出更新后的清单。

从购物清单中删除最后一项物品，并输出结果。

条件与循环：

创建一个函数，当购物清单中的物品超过5项时，在控制台输出\"你的购物车满了\"。

使用循环语句遍历购物清单，将每一项物品在控制台上以编号的形式输出。例如：

函数与对象：

创建一个函数，该函数接受物品名称作为参数，并返回该物品是否在购物清单中。

创建一个购物物品对象，其中包括物品名称、价格和数量。例如:

作业提交：

方式一：GitHub链接提交

将你的JavaScript 文件（如：ShoppingList.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

请将你的代码保存在一个名为 \"ShoppingList\" 的文件夹中；
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。
请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "69e329429f9cc30e74196d42" }, { "code": "L16", "title": "Tutorial 02 (CSS)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

手把手练习

页面仿写:
实时演示如何分析和利用HTML和CSS构建 https://jiangren.com.au/
使用 HTML 和 CSS 进行布局设计，并实现响应式特性。
Tutor示范如何用HTML创建Header部分
包括 flex, :hover, color, font-size, font-family…etc
包括 button
学生练习
Tutor示范如何用HTML创建Menu部分
包括 flex, :hover, color, width, height, font-family…etc
学生练习
Tutor示范如何用HTML创建Banner部分
包括 section, div, img, alt, a, span…..
包括 maxwith, flexwrap, color…etc
学生练习
Tutor示范如何用HTML创建Footer部分
包括 ul, li, a, button, img, alt, p, span….
学生练习

作业点评

创建 Card UI Design:

答疑卡片 UI 设计作业。
讨论不同设计方法，以及如何使用 CSS 来提高界面的吸引力。

HTML&CSS 问答

问答环节:
回答学员在学习 HTML 和 CSS 过程中提出的问题。
提供解决常见问题的策略和技巧。

", "_id": "6834079e705ef7053893363d" }, { "code": "L17", "title": "Git Introduction", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

探索版本控制的魔法

为什么我们都爱版本控制？
分布式(Distributed) vs 集中式(Centralized)：Git的独特之处。
什么是分布式版本控制系统
主流的 git 系统介绍

开启你的Git旅程

一步步引导你安装和配置Git。
为Git设定你的身份：告诉Git你是谁。
初始化Git空间: **git init**的魔力。
mkdir：快速创建你的项目目录。

创建并驾驭你的代码宝库（Repository）

初始化你的第一个Git仓库。
如何管理和跟踪你的代码变更。

保护与跟踪你的代码

如何安全地保存你的代码更改？
了解**add**, **commit**以及它们如何帮助你管理更改。
深入理解**git log**：用美化的log追溯你的代码历史。
.gitignore：掌握哪些文件不应纳入版本控制。
探索日常工作中使用Git的标准流程。
远程仓库(Remote Repository)的创建与管理：掌握**clone**, push, pull。

Sourcetree：让Git操作可视化

为什么需要图形化工具？
如何使用Sourcetree提高工作效率。

出错了怎么办：撤回与修复

掌握reset, revert, amend：让你的代码时光倒流。
checkout和stash：两种保存和切换的策略，它们的不同之处。

更进一步：分支管理与合作

学习如何merge、处理代码冲突。
rebase：为什么和何时使用它。
pull request与代码审查：如何高效、规范地合作。

当代码世界相撞：冲突(Conflict)解决大师

当代码出现纷争，我们该如何和平解决？
使用rebase与merge的策略，成为解决冲突的高手。

Git的小贴士和技巧

介绍神奇的.gitignore文件：让某些文件“隐形”。
快速、有效地查看你的代码历史。

Git遇见GitHub：开放的代码舞台

GitHub: 一个开发者的乐园。
如何在GitHub上展示你的才华，与全球开发者共舞。

Links:

Git client: https://git-scm.com/
SourceTree: https://www.sourcetreeapp.com/
Visualizing Git: http://git-school.github.io/visualizing-git/#free
Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup
Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

", "_id": "6834079e705ef70538933640" }, { "code": "L18", "title": "Git Introduction Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Git 简答作业
Git 练习作业

作业提交：

在你的GitHub上面创建一个仓库，上传GitHub仓库链接，点击“确认提交”，提交成功。

", "_id": "69e329439f9cc30e74196d60" }, { "code": "L19", "title": "Lab(3)：创建Responsive定价卡片", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

创建Responsive定价卡片

", "_id": "69e329439f9cc30e74196d6f" }, { "code": "L20", "title": "Lab(4)：Git实践练习", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Git实践练习

", "_id": "69e329439f9cc30e74196d76" }, { "code": "L21", "title": "探索现代 JavaScript —— ES6 (ECMAScript 2015) 之魅力", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

可供学生预习大纲：

1. 重新定义\"变量\"：let, const

为何var不再流行？
const: 不仅仅是常量

2. 模板字符串 (Template Literals)

无痛多行与字符串嵌入 Seamless multi-line support & string interpolation
动态字符串制造器 • Dynamic string generation

3. 解构 (Destructuring)

数组、对象，一切尽在掌握
函数参数的魔法展示
从对象和数组中轻松提取信息，让数据处理变得更高效

4. 箭头函数 (Arrow Functions)

this 的革命
简洁与力量的完美结合

5. 展开与收纳: 扩展操作符 (Spread & Rest)

数组、对象的新演绎
收纳与释放的双重魔法

6. 可选与默认: 参数默认值

告别undefined
动态、简洁、高效

本节知识点：

同学们可以根据自己时间精力设置前端整体学习目标

以下是项目参考

https://docs.google.com/spreadsheets/d/1Sk_ovYC8tsEBpXns4Yt4ZzC77riF-P8H1D6KTtW0tSM/edit?usp=sharing

根据十节课学完同学们能够掌握项目编程的基本前端技能为目标，我们可以倒推分解一下重点概念知识点的学习计划

11 个大知识模块

知识点已经精心筛选，精华重点

每一个概念都是必须到熟练运用的程度

https://docs.google.com/spreadsheets/d/1jB3HThHu95NGC7YUCPkgzU5yUfKuU79S_wULg_AVeX4/edit?usp=sharing

概念掌握程度自测Cheatsheet

https://docs.google.com/spreadsheets/d/143KPucgIBlc6XILUqV77Im-I-IxccXqR7W3oOYqoyAA/edit?usp=sharing

", "_id": "69e329439f9cc30e74196d81" }, { "code": "L22", "title": "ES6 Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业1. Let, Const 和 Var

任务: 将以下代码重写为使用 let 和 const 代替 var。解释为什么在每种情况下 let 或 const 更合适。

作业2. 箭头函数 (Arrow Functions)

任务: 将以下函数转换为箭头函数。然后解释箭头函数如何与常规函数不同地处理 this 关键字。

作业3: 模板字面量 (Template Literals)

任务: 使用模板字面量重写以下字符串拼接代码。在字符串中添加一个新行。

作业4.解构赋值 (Destructuring)

任务: 使用解构赋值从 person 对象中提取 name 和 age 属性。然后编写一个函数，在参数列表中解构对象的属性。

作业5. 默认参数（Default Parameters）

任务：编写一个计算机行面积的函数。如果没有提供高度，假设它是一个正方形。使用默认参数为高度设置默认值。

作业6. Rest/Spread 运算符

任务: 使用 Rest 运算符创建一个函数，能够将任意数量的参数相加。然后使用 Spread 运算符合并两个数组。

作业提交：

将你的JavaScript 文件（如：Homework_ES6.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "6834079e705ef70538933658" }, { "code": "L23", "title": "Tutorial 03 (JavaScript, Git)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

练习: Git Flow 实操

Git Flow 背景介绍
什么是 git flow ?
为什么我们需要和原因 git flow ?
大概概述它是如何工作的

团队协作模拟

Git clone Repo
学员分对，协作创建新的 feature 分支，模拟日常开发流程。
实践如何在 feature 分支上进行 add、commit 和 push 操作。
正确 commit message

创建合并冲突

学员故意制造分支间的冲突，以模拟实际工作中可能遇到的情况。
学习如何使用 Git 命令来处理和解决合并冲突。

合并到 dev 和 master

练习将 feature 分支合并到 dev 分支，再从 dev 分支合并到 master。
讨论何时应该合并到 master，以及合并请求 (MR/PR) 的最佳实践。
正確 MR title and description

Thunk Base development 介绍

什么是 git thunk base development?
git flow vs git thunk base development?
大概概述它是如何工作的

Assignment 答疑

JavaScript Assignment 答疑：
答疑学员提交的购物清单管理作业。
Git Introduction Assignment 答疑：
分析和点评学员提交的 Git 作业。
讨论 Git 的基本操作，如 clone、commit、push 等。
强调好的提交习惯，例如提交信息的撰写(git convention commit)。

Git Q&A

问答环节:
回答学员在实际操作中遇到的问题。
提供解决实际问题的 Git 命令和策略。

", "_id": "6834079e705ef70538933643" }, { "code": "L24", "title": "ES6 进阶技巧与实践", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Promises & Async/Await：轻松应对异步挑战！

深入了解Promises：利用then()精简代码、用catch()处理异常，以及finally()的应用。
实际场景中的 Promise 链式调用
异步编程新姿势：使用async/await实现更简洁、易读的代码。
随堂练习

Destructuring（解构赋值）：一步到位，快速提取值！

从对象和数组中轻松提取信息，让数据处理变得更高效。
随堂练习

Spread & Rest Operators（展开和剩余操作符）：更便捷地操作数据！

如何利用...操作符展开数组和对象。
如何收集函数参数。
随堂练习

Enhanced Object Literals（增强的对象字面量）：定义对象，更佳清晰！

简化属性和方法的定义。
动态属性名。
随堂练习

Iterators & Generators（迭代器和生成器）：掌控数据流！

什么是Iterators？如何自定义迭代。
创造自己的生成器函数，了解其强大之处。
随堂练习

New Data Structures：Map & Set — 探索新的数据结构！

了解Map和Set的应用，它们与传统对象和数组的差异。
高效地存储唯一值。
随堂练习

Modules（模块化）：组织和重用代码的新方式！

ES6模块化的基本概念。
如何import和export模块。
随堂练习

Symbols & Well-Known Symbols

Symbol 的高级应用
内置 Symbols 的实用性
随堂练习

", "_id": "69e329449f9cc30e74196d9e" }, { "code": "L25", "title": "ES6 (Part2) & TypeScript Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Post-Lesson Exercise: Practicing Callbacks, Promises, and Async/Await

Objective: This exercise is designed to help students reinforce their understanding of asynchronous programming in JavaScript by practicing callbacks, promises, and async/await.

Part 1: Callbacks

Exercise Task:

Create a function fetchData that simulates fetching data from a server. This function should take two arguments: a url (string) and a callback function. Use setTimeout to simulate a delay of 2 seconds before calling the callback function with the fetched data.

Instructions:

The fetchData function should print \"Fetching data from [url]...\" when it starts.
After 2 seconds, it should call the callback function with the data: \"Data from [url]\".

Part 2: Promises

Exercise Task:

Refactor the fetchData function to return a promise instead of using a callback.

Instructions:

The function should still simulate a 2-second delay before resolving the promise with the data: \"Data from [url]\".
If the url is empty or not provided, reject the promise with an error message: \"Invalid URL\".

Part 3: Async/Await

Exercise Task:

Refactor the code to use async/await to fetch data and handle errors.

Instructions:

Create an async function named loadData that calls fetchData with a given url.
Use try/catch to handle any errors that occur during the data fetching process.

After-Class Homework: Learning the Basics of TypeScript

Objective:

This homework is designed to help students get started with TypeScript, a strongly typed superset of JavaScript. Students will learn about basic TypeScript concepts, including types, interfaces, classes, and functions.

Part 1: Setting Up TypeScript

Exercise Task:

Install TypeScript on your machine and set up a new TypeScript project.

Instructions:

Use npm (Node Package Manager) to install TypeScript globally
Create a new project directory and initialize it with a tsconfig.json file
Create a new TypeScript file called index.ts in the project directory.

Part 2: Basic Type Annotations

Exercise Task:

Write a function in index.ts that takes two numbers as parameters and returns their sum. Use TypeScript to annotate the types of the parameters and the return value.

Instructions:

Define the function add with type annotations.
Compile the TypeScript file to JavaScript using the tsc command and run the resulting JavaScript file.

Part 3: Working with Interfaces

Exercise Task:

Define an interface Person with properties name (string) and age (number). Create a function greet that takes a Person object as a parameter and prints a greeting message.

Instructions:

Define the Person interface and use it to type the parameter of the greet function.
Create a Person object and pass it to the greet function.

作业提交：

将你的JavaScript 文件（如：Homework_ES6.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "68775ca664f9daa7d652f479" }, { "code": "L26", "title": "Lab(5)：构建一个JavaScript天气应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

构建一个JavaScript天气应用

", "_id": "69e329449f9cc30e74196dad" }, { "code": "L27", "title": "Lab(6)：使用Promise和ES6创建进度条", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用Promise和ES6创建进度条

", "_id": "69e329459f9cc30e74196db3" }, { "code": "L28", "title": "Technical SEO 基础知识", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. SEO是什么，SEO是怎么工作的，影响SEO由哪四大要素影响

2. SEO用什么工具查看

3. Technical SEO具体如何进行有优化

4. 网页的结构应该如何进行优化

5. 面对SEO规则，HTML里如何进行优化，如何使用Canonical，301等

6. 怎样进行提升网站Performance，Page Speed如何提升

", "_id": "69e329459f9cc30e74196db9" }, { "code": "L29", "title": "Project 1 介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Project One: 商业级个人/公司Landing Page

项目背景:

在实际工作中，很多时候我们需要与多方合作，包括客户、设计师、运营、产品经理等。理解并转化他们的需求是开发的关键。在这个项目中，你将扮演开发者的角色，与一个“甲方”合作（可以是你的朋友、律师、PT、会计、设计师、小咖啡店或公司等），理解并实现他们的网站需求。

1. 项目描述:

学员需要与“甲方”合作，创建一个网站，可以是个人展示网站、公司或产品的landing page、咖啡店的菜单页面等等。该网站应该清晰地传达“甲方”的主题和信息，并在设计上展现出专业感。

2. 基本要求:

实战练习：课上由老师手把手带领同学实现一个landing page。

课后练习：

需求沟通: 与“甲方”进行深入沟通，了解其具体需求、目标用户、核心内容等。
设计原则: 清晰、简洁且富有吸引力。
响应式设计: 网站需要在手机、平板和桌面设备上均有良好的显示效果。
HTML结构: 使用语义化的HTML标签，确保内容有条理。
CSS & Sass样式: 充分利用CSS和Sass来美化网页，并使用flexbox或Bootstrap进行布局。
JavaScript & jQuery: 根据需要，增加基本的交互功能，如滑动效果、导航条切换等。
页面内容: 至少包括：主页、关于我们/关于我、产品或服务展示、联系方式。

3. 加分项:

动画效果: 使用CSS或JavaScript添加过渡或动画效果，增强用户体验。
表单功能: 如联系表单或订阅表单，用于收集用户信息或反馈。
原创性: 尽量减少模板的使用，展现自己的原创设计和创意。
页面加载速度: 优化图片和代码，确保页面快速加载。

", "_id": "69e329459f9cc30e74196dbf" }, { "code": "L30", "title": "Project 1 Tutorial", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

项目启动

介绍 Landing Page 的重要性和应用场景。

布局与样式设计

逐步构建页面结构，使用语义化 HTML 标签。
应用 CSS/Sass 技巧，打造视觉吸引力十足的界面。
讨论响应式设计的要点，确保页面在不同设备上均表现完美。

互动功能实现

教你如何利用 JavaScript/jQuery 增加页面动态效果。
实现用户交互功能，如滑动效果、导航条切换等。

细节打磨

优化页面元素，提升用户体验。
分享专业技巧，如加载速度优化、SEO 最佳实践等。

实现效果

参考网站：https://elisc-react.vercel.app/index-one-page

参考代码： https://github.com/jessieyu1/portfolio-landing-page

", "_id": "6834079e705ef7053893364a" }, { "code": "L31", "title": "Node.js 如何安装", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

To install Node.js, you can follow these general steps. The exact process may vary slightly depending on your operating system:

\n

Windows or macOS

\n

Download the Installer:

\n

Go to the Node.js website.
Choose the version you need. The LTS (Long Term Support) version is recommended for most users, as it's more stable.

\n

Run the Installer:

\n

After downloading, run the installer.
Follow the installation prompts, including agreeing to the license agreement and choosing the installation location.
The installer typically includes Node.js and npm (Node Package Manager).

\n

Verify Installation:

\n

Open a command prompt (Windows) or terminal (macOS).
Type node -v and press Enter. This should display the Node.js version, confirming it's installed.
Type npm -v to check npm's version.

\n

Linux

\n

The process can vary based on the Linux distribution. Here are the steps for Ubuntu:

\n

Update Package Index:

\n

sudo apt update\n

\n

Install Node.js:

\n

You can install Node.js from the Ubuntu repository:

\n

sudo apt install nodejs\n

\n

For the latest version, you might prefer using a PPA (Personal Package Archive):

\n

curl -sL <https://deb.nodesource.com/setup_16.x> | sudo -E bash -\nsudo apt-get install -y nodejs\n

\n

Verify Installation:

\n

Check Node.js version:

\n

node -v\n

\n

Check npm version:

\n

npm -v\n

\n

Remember to replace 16.x with the version you want if you're using the PPA method. For other Linux distributions, the process will be similar but might require different commands to update packages or add repositories.

", "_id": "69e329459f9cc30e74196dd3" }, { "code": "L32", "title": "React 如何安装", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 安装、配置及创建项目教学文档

1. 环境要求

首先，确保您的开发环境包括以下：

Node.js：React 需要 Node.js 环境。请访问 Node.js 官网下载并安装最新版本。
npm（Node 包管理器）：通常会与 Node.js 一起安装。

2. 安装 Create React App

Create React App 是一个官方支持的方式，用于创建单页 React 应用程序。它提供了一个现代化的构建设置，无需配置。

在终端或命令提示符中运行以下命令来安装 Create React App：

npx create-react-app my-app

这将在当前目录下创建一个名为 my-app 的新目录。

3. 进入项目目录

安装完成后，进入项目目录：

cd my-app

4. 启动开发服务器

在项目目录中，运行以下命令启动开发服务器：

npm start

此命令将启动一个本地服务器，并在默认浏览器中打开 http://localhost:3000。当您对代码进行更改时，页面将实时重新加载。

5. 编辑 React 组件

打开项目文件夹，您会看到一些预创建的文件。最重要的是 src/App.js，这是您的 React 应用程序的主要组件。

您可以开始编辑 src/App.js，并在浏览器中看到您的更改。例如，尝试更改文本并保存文件，您的更改将立即反映在浏览器中。

6. 构建和部署

当您准备好将应用程序部署到生产环境时，运行以下命令以构建应用程序：

npm run build

这将在 build 目录中创建一个优化的生产构建。

7. 后续步骤

学习 React 基础：建议浏览 React 官方文档，了解更多关于 React 的知识。
组件编写：实践通过编写不同的组件来构建复杂的 UI。
状态管理：学习使用 React 的状态管理，例如使用 Hooks。
路由：如果您的应用需要导航，尝试使用如 react-router-dom 等库。

", "_id": "69e329629f9cc30e741974cb" }, { "code": "L33", "title": "React项目快速上手", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 框架的起源与版本演进历程：

介绍 React 框架的起源和发展历程，包括重要版本的发布和主要特性的改进。

快速上手 React：

配置开发环境：指导学生安装 Node.js 和 VS Code，以便开始 React 应用程序的开发。
快速上手 create-react-app：介绍 create-react-app 工具，以及如何使用它来快速创建 React 项目的基本结构。
体验 React 核心概念：通过编写简单的示例代码，让学生体验 JSX 语法以及 useState 和 useEffect 等 React 核心概念的使用。
拆分组件：引导学生学习如何将 React 应用程序拆分为可维护的组件，提高代码的复用性和可维护性。

", "_id": "6834079e705ef7053893364d" }, { "code": "L34", "title": "React组件基础", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

组件基础：

用 SASS 与 Bootstrap 构建组件的外观：介绍如何利用 SASS 预处理器和 Bootstrap 框架来快速构建组件的外观和样式。
强大的模板语法 JSX：深入了解 JSX 语法的特点和优势，以及如何在 React 组件中编写 JSX 代码。
Props & State：解释组件中的 props 和 state 的概念，以及它们分别用于什么目的。
Props 与 State 的区别和联系：对比 props 和 state 的区别，以及它们之间的联系和作用范围。
组件间通讯：讨论不同组件之间如何进行通讯，包括父子组件通讯和兄弟组件通讯等方式。
综合实例：构建一个结构复杂的页面，通过实际例子来理解 React 切分组件的思想，以及如何合理组织组件结构和通讯。

", "_id": "6834079e705ef7053893364e" }, { "code": "L35", "title": "React Router", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

快速上手 React Router:

探索 React Router，这个强大的库可让你构建单页应用程序的导航系统，快速开始你的路程。

嵌套路由:

深入了解嵌套路由，通过分层结构创建复杂的页面布局和导航。

HashRouter 与 BrowserRouter:

对比 HashRouter 和 BrowserRouter，了解它们之间的区别，以及何时使用哪一个来管理 URL。

React Router 运行机制:

深入理解 React Router 的内部机制，从路由匹配到组件渲染，掌握它如何使一切无缝运转。

", "_id": "6834079e705ef7053893364f" }, { "code": "L36", "title": "React表单处理", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

非受控表单:

了解非受控表单，它们是表单元素的一种处理方式，适用于简单的表单，但缺乏状态控制和验证。

受控表单:

探索受控表单，这种表单通过React组件状态来控制表单元素的值和行为，使数据流更可控。

表单校验 (Form Validation):

学会如何对表单进行校验，确保用户输入的数据满足特定的要求，提高数据的有效性和安全性。

", "_id": "6834079e705ef70538933650" }, { "code": "L37", "title": "React服务端交互", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

典型交互方式：

探讨与服务器通信的经典方式，包括 Ajax、Fetch 和 Axios，并介绍它们各自的用途和优势。

快速上手 Axios：

学习如何迅速上手 Axios，了解其基本用法和常见配置，以及如何发起 HTTP 请求并处理响应。

拦截器处理通用操作：

了解如何使用 Axios 拦截器来处理通用的操作，如请求和响应的日志记录、身份验证、错误处理等。

封装可复用的 Axios 服务：

学会将 Axios 封装为可复用的服务，以便在整个应用程序中共享和维护一致的 HTTP 请求配置，提高代码的可维护性和可扩展性。

React 组件的生命周期：

理解 React 组件的生命周期方法，包括挂载、更新和卸载阶段，并学会如何在组件的生命周期中处理各种操作。

VDOM：

简要介绍虚拟 DOM（VDOM）的概念，以及其在 React 中的作用和优势，理解 VDOM 的工作原理。

类组件与函数式组件：

对比类组件和函数式组件的特点和用法，并解释为什么函数式组件越来越受欢迎。

复合组件：

学习如何使用复合组件将多个组件组合在一起，以构建更复杂和灵活的 UI。

高阶组件：

介绍高阶组件的概念和用法，以及如何使用高阶组件来增强组件的功能和复用性。

开源组件库与企业业务组件库：

探讨开源组件库的特点和优势，以及如何选择和使用适合项目需求的组件库；同时，讨论企业业务组件库的重要性和设计原则。

动态生成页面与 React 低代码：

简要介绍动态生成页面的概念和 React 低代码的特点，了解如何利用 React 技术栈实现动态页面和低代码开发。

", "_id": "6834079e705ef70538933651" }, { "code": "L38", "title": "React Hooks", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React Hooks：

介绍 React 内置的 Hooks，如 useState 和 useEffect，并解释它们的作用和用法。
深入理解 useState Hook，包括如何在函数组件中管理状态并进行状态更新。
深入理解 useEffect Hook，包括如何处理副作用、订阅和取消订阅等操作。
学习如何自定义 Hooks，以便在应用程序中共享和重用状态逻辑。

用 useTranslation 钩子实现组件的 i18n：

探讨如何使用第三方库中提供的 useTranslation 钩子来实现组件的国际化（i18n），以支持多语言应用程序的开发。

状态管理：

理解状态管理的基本概念，包括状态、单一数据源、不可变性等。
介绍 React 内置的 Context API，以及如何使用 Context 在组件之间共享状态。
简要介绍 React Redux，作为一种常用的状态管理中间件，以及其与 Context 的区别和优势。

自动化测试：

学习如何进行单元测试，包括安装配置 Jest 测试框架和详解 Jasmine 语法。
学习如何进行集成测试，包括安装配置 Cypress 测试框架和运行集成测试用例。

", "_id": "6834079e705ef70538933652" }, { "code": "L39", "title": "React基础(1) - 代码质量", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

代码规范的重要性
课堂实践：写出可读性高的代码 - Income Tax Calculator
写出符合人类思维方式的代码
代码质量的核心概念：可读性、可维护性、可扩展性
SOLID 原则
小练习：写出一个高质量的 getFlightsStops 函数

", "_id": "6834079e705ef70538933653" }, { "code": "L40", "title": "Tutorial 04 (ES6)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

练习

使用 https://api-ninjas.com/api/randomuser API 创建、更新、删除和查看数据

1. 从 API 获取数据·

如何使用Fetch获取远程API数据。

2. 学习如何将结果保存到变量中

创建一个回调（Callback）函数。
创建变量并进行赋值。

3. 显示结果

获取变量。
使用 map 函数显示结果。

4. 修改结果

学习如何使用扩展运算符（spread operator）。
解释还有哪些其他方法可以做到这一点，以及为什么应该避免使用它们。

5. 删除结果

学习如何使用 filter 函数。

6. 添加结果

创建一个输入框。
如何从输入框获取值。

7. 创建一个搜索框（SearchBox）

学生学习如何从输入框获取值。
学生应该能够使用 filter 函数过滤结果。
学生应该能够将值重新赋给变量，以便正确显示。

8. 添加排序功能

教授并添加排序功能。

9. 总结

回顾今天学到的内容，例如：
var/let/const 的使用。
ES6 函数：.map、filter 等。
异步等待（async await）。
扩展运算符（spread operators）。
fetch 的使用。
回调函数（Callback）。

JS Q&A

问答环节:
回答学员在实际操作中遇到的问题。

", "_id": "6834079e705ef70538933654" }, { "code": "L41", "title": "React基础(2) - 为什么需要 React", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

传统开发 vs 组件化开发
React 的核心概念（声明式 UI、组件化、单向数据流）
用 JS 操作 DOM vs 用 React 渲染 UI（对比体验）

", "_id": "6834079e705ef70538933655" }, { "code": "L42", "title": "开发环境与工具", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

什么是打包工具？(Webpack)
Babel 介绍：JSX 如何转换成 JavaScript？
什么是脚手架？
创建第一个 React 项目（Vite）
小练习：用 Vite 启动一个 React 应用环境

", "_id": "6834079e705ef70538933657" }, { "code": "L43", "title": "Lab(7)：使用React和Hooks创建分页应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React和Hooks创建分页应用

", "_id": "69e329489f9cc30e74196eb8" }, { "code": "L44", "title": "Tutorial 05 (React) ", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

React常见的问题和错误：

介绍React和过去前端开发方式的不同，让同学们体会
React的单向数据流，提供一些flow chart供同学们参考和理解，并加深课堂知识理解
setState的异步性质，讲解并演示其中的重要步骤，加深课堂知识理解
条件渲染可能出现的问题，good practices和bad practices
Q&A答疑

", "_id": "6834079e705ef70538933659" }, { "code": "L45", "title": "React基础(3) - 开发环境与工具", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

什么是打包工具？(Webpack)
Babel 介绍：JSX 如何转换成 JavaScript？
什么是脚手架？
创建第一个 React 项目（Vite）
小练习：用 Vite 启动一个 React 应用环境

", "_id": "6834079e705ef7053893365b" }, { "code": "L46", "title": "React基础(4) - 组件 & JSX 语法", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

JSX 语法规则
React 组件
如何在 JSX 里写 JavaScript？
组件的 Props（属性传递）
小练习：编写一个简单的 Button 组件，支持不同文本

", "_id": "6834079e705ef7053893365c" }, { "code": "L47", "title": "Lab(8)：使用React和localStorage构建笔记卡片应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React和localStorage构建笔记卡片应用

", "_id": "69e329499f9cc30e74196ee8" }, { "code": "L48", "title": "Lab(9)：使用React构建收支管理应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React构建收支管理应用

", "_id": "69e3294a9f9cc30e74196eef" }, { "code": "L49", "title": "Tutorial 08 (React)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

练习

继续升级Tutorial 04的练习，通过react改写并添加额外的功能

利用React，使用 https://api-ninjas.com/api/randomuser API 创建、更新、删除和查看数据

1. 新建React项目

使用vite创建react项目

2. 创建一个搜索框（SearchBox）

讲解并演示创建搜索框并使用Material UI

3. 创建表单验证

讲解并演示添加表单验证以添加新结果。

4. 使用Axios获取数据

安装Axios，使用axios获取远程数据

5. 加载动画

教学生如何使用 Chrome 减慢网络速度。
教学生如何创建加载动画。
解释为什么能够同时获取数据和显示加载动画（async/await）。

6. 错误处理

教学生如何使用 Chrome 模拟网络故障。
在 axios 中添加 try-catch 以进行错误处理。

7. 总结

回顾今天学到的内容，例如：
创建react项目。
如何使用UI组件库，比如Material UI。
如何加载动画提升用户体验。
如何处理错误。
axios的使用。

React Q&A

公开讨论:
导师将解决学生对 React 的任何问题，从基本概念到更高级的主题。
鼓励学生提出与他们刚刚做的练习相关的问题是有益的。

", "_id": "69e329659f9cc30e74197606" }, { "code": "L50", "title": "Project 2 介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目背景：

这个项目的灵感来源于MongoDB的面试题。在现代互联网应用中，与远程API的交互成为了一个关键技能。为了提高你的API交互技巧，我们为你设计了这个挑战：创建一个天气预报应用。

原始 MongoDB 面试项目题

The coding exercise we’d like to work on is building an app where you can input a city name to show the current weather in that city area and the forecast for the upcoming 3 days. You may use www.weatherapi.com, which provides a free API to query weather data. It does require signing up to generate an API key but there is an - https://www.weatherapi.com/api-explorer.aspx - that makes it easy to check the response.

You are free to use any frontend libraries to build this web application. Once you have built the application please send the code back to us in a .zip file (without any modules that can be fetched from the internet) so that we can clone the repository and check its functionality locally on our machine. Please provide some instructions on how to run it locally in the readme. Feel free to comment on the readme any design decisions or assumptions that were made while you built this application.

We will spend some time discussing your solution during the programming interview. Please treat this task like a feature you would build as an engineer using developer best practices and deploy in a production ready state.

Please ensure add some unit test & e2e test if possible.

项目要求：

核心功能：

允许用户输入城市名称。
显示该城市当前的天气情况。
提供未来三天的天气预报。

数据来源：请使用www.weatherapi.com。它提供了一个免费的API来查询天气数据。需要https://www.weatherapi.com/api-explorer.aspx 可以轻松检查响应。

技术栈选择：你可以自由选择任何前端库来构建此网络应用。

项目提交：

请将代码上传到github中（不包括可以从互联网获取的模块）并提交，这样我们可以Clone repo并在我们的机器上本地检查其功能。
在readme中提供关于如何在本地运行的说明。
在readme中，你可以评论在构建此应用程序时做出的任何设计决策或假设。

代码质量：我们希望你像处理真正的工程任务那样对待这个任务，使用开发者的最佳实践，并确保它处于生产就绪状态。

测试：请确保添加一些单元测试和e2e测试（如果可能的话）。

项目目标：

提高与API的交互能力。
熟悉前端框架和库的使用。
加强代码组织和架构设计技能。
提高测试驱动开发的能力

", "_id": "6834079e705ef70538933660" }, { "code": "L51", "title": "Project 2 Tutorial 01", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

介绍

在这部分，我们将概述整个项目的框架。你们将了解到，我们为什么选择天气预报应用作为学习项目，以及它如何帮助你们在现实世界中应用编程技能。这将是一次从零开始构建一个完整网络应用的旅程。

天气应用项目的要求

我们将详细讨论项目的具体要求，包括用户能够输入城市名称、查看当前天气状况以及获取未来三天的天气预报等功能。这将帮助你们理解项目的核心目标和功能。

完成项目的目标

这个环节会让你们明白，完成这个项目不仅仅是为了制作一个应用，而是为了提升你们的技术能力，如 API 交互、前端框架的应用、代码组织和架构设计技能，以及测试驱动开发的实践。

项目的设计图介绍与分析

我们将一起审视项目的设计图，分析应用的用户界面和用户体验方面。这将帮助你们理解如何从用户的角度来思考，并将这种思维转化为实际的代码和设计实现。

完成这个项目需要的技术栈

在这个环节，我们将讨论构建该应用所需的技术栈，包括前端框架、API 请求处理、状态管理等。无论你们是刚接触前端开发，还是希望巩固已有知识，这都将是一个极好的学习机会。

React 项目框架搭建

环境设置：通过配置开发环境来搭建 React 项目，包括安装必要的依赖和工具。
项目结构：创建项目的基础结构，包括设置路由、状态管理等。
基础代码编写：编写一些基础代码，确保项目能够顺利运行。

组件命名

命名规则：明确组件命名的最佳实践，这有助于提高代码的可读性和可维护性。
实际操作：我们将实际命名一些将在项目中使用的组件，并解释这些命名背后的逻辑。

", "_id": "6834079e705ef70538933661" }, { "code": "L52", "title": "利用AWS部署前端spa项目", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

利用AWS部署前端spa项目

", "_id": "6834079e705ef70538933656" }, { "code": "L53", "title": "Tutorial 06 (C#开发环境设置)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

C#开发环境设置

文档：

https://www.notion.so/208681d7ed828091b950eb36209ebc82

", "_id": "69e329669f9cc30e7419762c" }, { "code": "L54", "title": "Project 2 Tutorial 02", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

布局设计

用户界面规划：首先，我们将对天气应用的用户界面进行详细规划。这包括定义主要视图（如主页、详细天气页）及其组件（如天气摘要、预报列表、搜索栏）。
信息架构：深入探讨如何组织信息，使用户能够轻松理解和访问天气数据。这涉及到决定哪些信息是首要显示的，以及如何逻辑地组织次要信息。
交互设计：考虑用户与应用交互的方式，如搜索城市、切换温度单位等。这将影响布局的设计和组件的放置。

静态页面实现

HTML结构：创建HTML文档结构，构建应用的骨架。这包括定义必要的HTML元素，如头部、导航栏、内容区域和底部。
组件化开发：将界面分解为可重用的组件，这有助于提高代码的可维护性和可扩展性。例如，将天气卡片、搜索栏等元素作为独立组件。
布局技术：创建响应式布局，确保内容在不同屏幕大小下都能有效地展示。

样式和响应式

样式定义：利用CSS或CSS预处理器来定义样式。这包括设置颜色主题、字体、边距、间隔等。
视觉吸引力：强调视觉吸引力和品牌一致性，确保应用的外观既美观又专业。包括颜色搭配、字体选择、图标使用等。
响应式设计：实现响应式设计，确保应用在不同设备上都能提供良好的用户体验。这可能涉及到使用媒体查询、弹性布局等技术。
交互动效：考虑添加一些CSS动画和过渡效果来提升用户体验，如加载动画、按钮悬停效果等。

", "_id": "6834079e705ef70538933667" }, { "code": "L55", "title": ".NET(1):C#编程语言基础", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

C#编程语言基础

", "_id": "69e3294b9f9cc30e74196f2d" }, { "code": "L56", "title": ".NET(1): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

1>变量练习：

定义四个变量,分别存储一个人的姓名、性别(Gender)、年龄、电话 TelephoneNumber)。然后打印在屏幕上 (我叫X,我今年 X岁了,我是X生, 我的电话是XX)(电话号用什么类型,如:010-12345)

2>算数运算符练习：某商店T恤(T-shirt)的价格为35元/件, 裤子(trousers)的价格为120元/条.小明在该店买了3件T恤和2条裤子, 请计算并显示小明应该付多少钱?

3>占位符练习：编程实现计算几天(如46天)是几周零几天. 6周零4天

4>$练习：编程实现107653秒是几天几小时几分钟几秒?

5>if 语句练习：提示用户输入用户名，然后再提示输入密码，如果用户名是“admin”并且密码是“88888”，则提示正确，否则，如果用户名不是admin还提示用户用户名不存在, 如果用户名是admin则提示密码错误.

6>switch case 练习：李四的年终工作评定,如果定为A级,则工资涨500元,如果定为B级, 则工资涨200元,如果定为C级,工资不变,如果定为D级工资降200元, 如果定为E级工资降500元. 设李四的原工资为5000,请用户输入李四的评级,然后显示李四来年的工资

7>请用户输年份,再输入月份,输出该月的天数，判断输入的是不是闰年

8>while 练习：老师问学生,这道题你会做了吗?如果学生答\"会了(y)\", 如果学生不会做(n),则老师再讲一遍,再问学生是否会做了...... 直到学生会为止,才可以放学. 直到学生会或老师给他讲了10遍还不会,都要放学

9> do-while 练习：不断要求用户输入学生姓名,输入q结束.

10>for 循环练习：找出100-999间的水仙花数? 水仙花数指的就是这个百位数字的百位的立方+十位的立方+个位的立方==当前这个百位数字

11>循环嵌套练习：打印乘法口诀表

12> 循环嵌套练习(必会的简单算法）： int[] nums = { 1, 4, 3, 9, 6, 8, 11 }; 对这个数组元素做升序排序

13>方法练习：计算两个整数之间的最大值并且将最大值返回

14>.数组和方法的练习：计算一个整数类型数组的总和

15>.方法out 练习： //分别的提示用户输入用户名和密码你写一个方法来判断用户输入的是否正确返回给用户一个登陆结果，并且还要单独的返回给用户一个登陆信息如果用户名错误，除了返回登陆结果之外，还要返回一个 \"用户名错误\"

16>.ref 练习：使用方法来交换两个int类型的变量

Advanced Assignment：

开发一个简单的控制台小游戏。这个游戏有以下几部分：

需求说明：

游戏头：首先绘制游戏的标题和说明。
初始化地图：加载地图资源，将整数数组中的数字转换为控制台显示的特殊字符串，这个过程就是初始化地图。
绘制地图：显示初始化后的地图，并在控制台中展示玩家的位置和特殊事件。
游戏逻辑：定义游戏的规则，处理玩家的移动和触发的事件。

游戏规则：

• 踩到玩家B：玩家A踩到玩家B时，玩家B退6格。

• 踩到地雷：玩家踩到地雷，退6格。

• 踩到时空隧道：玩家踩到时空隧道，前进10格。

• 踩到幸运轮盘：幸运轮盘有两种可能：

交换位置。
轰炸对方，使对方退6格。

• 踩到暂停：暂停一回合。

• 踩到方块：什么都不做。

实现步骤：

定义地图中的元素：
玩家 A 和 B。
特殊事件：地雷、时空隧道、幸运轮盘、暂停、普通方块。
控制台特殊符号显示：
玩家A：A
玩家B：B
地雷：X
时空隧道：O
幸运轮盘：L
暂停：P
普通方块：[]

", "_id": "69e3294b9f9cc30e74196f34" }, { "code": "L57", "title": "Project 2 Tutorial 03", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

功能实现

交互实现：为页面添加交互功能，包括处理用户输入、显示数据、以及响应用户操作等。
状态管理：管理组件状态，如表单输入验证、条件渲染等。

连接 API

API 集成：我们将学习如何使用 HTTP 客户端（如 axios 或 fetch）连接到 Weather API，获取所需的天气数据。
数据处理：处理 API 响应，包括解析数据、错误处理以及状态更新。
动态显示数据：将从 API 获取的数据动态展示在用户界面上。
调试与测试：编写测试来验证 API 集成的功能。

", "_id": "6834079e705ef7053893366d" }, { "code": "L58", "title": ".NET(2): Basic OOP Fundamental", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

面向对象编程（OOP）四大基本原则：

抽象（Abstraction）
封装（Encapsulation）
继承（Inheritance）
多态（Polymorphism）

类和对象：

通过实践创建类（class）来深入理解
构造函数（Constructor）
访问控制：public / protected / private
Partial 类 / Static 静态类 / Seal 类

通过 C# 代码详细介绍 OOP 四大原则：

封装（Encapsulation）：
代码演示和解释封装的实现方法
继承（Inheritance）：
解释继承的作用：代码重用
演示基类（base class）与派生类（derived class）的关系
抽象（Abstract）：
定义抽象：隐藏细节，提炼出定义
抽象的好处：可扩展性、易于测试、解耦、防止误修改
在 C# 中实现抽象的方式：接口（interface）和抽象类（abstract class）
多态（Polymorphism）：
浅显易懂地解释多态：初次接触，晦涩难懂的概念简化
多态的分类：静态多态（编译时）和动态多态（运行时）
C# 代码实践：
通过方法重载（overload）实现静态多态
通过方法重写（override）实现动态多态
通过 override 实现的动态多态，无需修改原有代码即可扩展功能

", "_id": "69e3294b9f9cc30e74196f46" }, { "code": "L59", "title": ".NET(2): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment

创建一个console app，设计几个类，除了下面的属性或者字段，可以添加其他信息

类及其成员的定义定义一个基类 Course class，包含 ID 课程名分数学生ID数组（因为有可能多个学生选同样的课）课时数（属性或者字段，推荐属性）

Student class，包含 ID 姓名年龄课程数组（因为一个学生可以选择多个课程这里的课程可以是课程的ID或者是课程的Object）

Teacher class，包含 ID 姓名所授课程数组（考虑到一个老师肯能教授多个课这里的课程可以是课程的ID或者是课程的Object）

2. 继承定义继承于 Course class的子类 - C# 课程，HTML课程，React课程

3. 使用上面定义的类，学习如何应用类和继承

3.1 初始化对象 - 课程对象数组（3门课程），Teachers数组（3个 Teachers对应三个不同的课程），学生对象数组（若干例如10 个学生对象）（使用new 调用构造函数来创建对象）
3.2 将老师-学生-课程关联起来（例如 A老师教授 C#课程，有3个同学报名学习，B老师教授 HTML课程，有2个同学报名学习 ......）
3.3 在Teacher class 中定义一个方法打印出该老师所授课以及报名学生的信息
3.4 在Course class中定义一个方法打印出该课程成绩 Top3 的学生的信息

", "_id": "69e3294c9f9cc30e74196f4d" }, { "code": "L60", "title": "Tutorial 07 (.NET)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

C#编程语言基础

", "_id": "69e329679f9cc30e74197685" }, { "code": "L61", "title": "Tutorial 11（Web API环境配置）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Web API环境配置

", "_id": "69e329689f9cc30e74197690" }, { "code": "L62", "title": ".NET(3): 高级面向对象", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

高级面向对象

", "_id": "69e3294c9f9cc30e74196f61" }, { "code": "L63", "title": ".NET(3): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

本次作业在第一节面向对象的作业基础上

练习多态 - 方法重载overload 和重写override
选择接口和抽象类

1. 自行选择一个类在其中创建至少两个重载方法并调用目的是理解什么是编译时多态(静态多态)

2. 创建一个base class - Faculty, 并在其中定义

2.1 Properties – (please consider whether need abstract)

Activities (教学目标, 可以是string[], List<string>, 或者自定义一个Activity Class)

Lectures (教学资料/讲义, 定义类型同上)

2.2 abstract methods - PlanLearningActivities

- PreparationLectures

2.3 virtual methods （with default implementation）

- DefineLearningObjectives() //自己决定需不需要参数并定义参数的类型和数量

2.4 定义继承于 Faculty 的类, 并实现上述的abstract/virtual methods

Professor

Tutor

Instructor

3. 定义一个Interface – IRefer with a method ReferTheJob. 只有Professor有refer job的功能. 请在Professor中实现该接口, 具体要求是仅给 Grade A 的同学refer job.

定义一个Interface – IAssess with method AssessStudentGrade. 只有Tutor有给学生打分评级的功能

定义另一个Interface – INotify with a method Notification. 只有Instructor有notify的职责来通知student上课。

4. 请创建一个Professor object, 一个Tutor object, 一个Instructor, 打印出各自的

Learning Activities

Prepared Lectures

请创建10个学生，仅仅需要一个C# Course，不需要多个Course

实现

Instructor通知学生上课

Tutor给学生打分评级

Professor推荐Grade A同学job. （可以通过Console.WriteLine()输出模拟）

", "_id": "69e3294c9f9cc30e74196f68" }, { "code": "L64", "title": ".NET(4): C# 常用集合类型详解", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

C# 常用集合类型详解

", "_id": "69e3294c9f9cc30e74196f6f" }, { "code": "L65", "title": ".NET(4): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Please create a collection of students with the courses - C#, HTML and React, please set the scores of the courses

1. Please select the proper collection type to print out the unique scores for each course, no duplicated scores printed out

e.g. C# course, scores are 70, 80, 90, 95, 96, 99.

HTML course, scores are 75, 81, 94, 96, 98, 99.

React course, scores are 85, 88, 64, 76, 99, 100.

2. Please select one collection type from HashTable/Dictionary/SortedList to store the scores for each course of each student and print them out:

Note: Please use the \"student Name + course Name\" as the key, and score as the value, e.g.

Key: James Hush C#

Value: 80

One edge case: Please test the edge case - two students with same Name, for same course, is it possible to store both of them in the selected collection (HashTable/Dictionary/SortedList)?

3. Please use Lookup to represents a collection of keys each mapped to one or more values.

Need store the course score and student names, then print out:

e.g. for C# course, please use the score as the key, student name as the values, Print the student course scores in grouping format

Key: 80

Value: James Hush, Luck Linton, Jack Matt, ......

Print output:

80: James Hush, Luck Linton, Jack Matt, ......

Key: 90

Value: Mike Lu, Jimmy Hugh, Penny A, ......

Print output:

90: Mike Lu, Jimmy Hugh, Penny A, ......

4. Implement Undo and Redo features

Given an array of strings Q[], consisting of queries of the following types:

“WRITE X”: Write a character X into the array.

“UNDO”: Erases the last change made to the array.

“REDO”: Restores the most recent UNDO operation performed on the array.

“READ”: Reads and prints the contents of the array.

Examples:

Input: Q = {“WRITE A”, “WRITE B”, “WRITE C”, “UNDO”, “READ”, “REDO”, “READ”}

Output: AB ABC

Explanation:

Perform “WRITE A” on the document. Therefore, the document contains only “A”.

Perform “WRITE B” on the document. Therefore, the document contains “AB”.

Perform “WRITE C” on the document. Therefore, the document contains “ABC”.

Perform “UNDO” on the document. Therefore, the document contains “AB”.

Perform \"READ” to Print the contents of the document, i.e. “AB”

Perform “REDO” on the document. Therefore, the document contains “ABC”.

Perform \"READ” to Print the contents of the document, i.e. “ABC”

Input: Q = {“WRITE x”, “WRITE y”, “UNDO”, “WRITE z”, “READ”, “REDO”, “READ”}

Output:xz xzy

Approach: The problem can be solved using Stack. Follow the steps below to solve the problem:

Initialize two stacks, say Undo and Redo.

Traverse the array of strings, Q, and perform the following operations:

If “WRITE” string is encountered, push the character to Undo stack

If “UNDO” string is encountered, pop the top element from Undo stack and push it to Redo stack.

If “REDO” string is encountered, pop the top element of Redo stack and push it into the Undo stack.

If “READ” string is encountered, print all the elements of the Undo stack in reverse order.

Define below string array, after invoking the method, print out the correct result:

string[] Q = { \"WRITE A\", \"WRITE B\", \"WRITE C\", \"UNDO\", \"READ\", \"REDO\", \"READ\" };

QUERY(Q);

", "_id": "69e3294d9f9cc30e74196f76" }, { "code": "L66", "title": "Tutorial 09（.NET）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

.NET(2) 作业讲评&答疑

.NET(3) 作业讲评&答疑

", "_id": "69e329699f9cc30e741976c5" }, { "code": "L67", "title": ".NET(5): 构建WEB API项目以及相关技术-概念介绍，管道，中间件，MVC", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

概念API 与 Web API
什么是 API？ API 有什么作用？
Web API 是什么？
HTTP 请求类型 &状态码

.Net 项目中的Web API
怎么创建Web API 在Visual Studio
Web API 项目结构
builder.Services--依赖注入容器
管道中间件
MVC 架构模式，模型&控制器
Controller（控制器）和 Action（动作方法）
Web API 最常用返回类型--JsonResult
路由(Routing) & 属性路由（Attribute Routing）
路由传值
Postman 测试api

", "_id": "69e329699f9cc30e741976cd" }, { "code": "L68", "title": ".NET(5): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业要求：

使用 Web API 和 REST API 实现增删改查操作，支持多种传参方式，并使用模型类和模型验证。所有 API 都需要在 Postman 中测试通过，返回类型为 JsonResult。

基本要求：

1.UserController：

○ 使用普通 Web API 实现用户的增删改查操作，支持以下三种传参方式：

路径参数（Route Parameters）：通过 URL 路径传递参数。
查询字符串参数（Query String Parameters）：通过 ? 后的查询字符串传递参数。
请求体参数（Request Body Parameters）：通过 POST、PUT 请求的请求体传递复杂的对象。 ○ 要求在 POST 和 PUT 请求中尝试使用 [FromBody] 和 [FromForm] 两种不同方式传递数据。 ○ 所有 API 返回类型为 JsonResult。

2. TeacherController：

○ 使用 RESTful API 实现教师的增删改查操作，支持同样的三种传参方式：

路径参数（Route Parameters）：通过 URL 路径传递参数。
查询字符串参数（Query String Parameters）：通过 ? 后的查询字符串传递参数。
请求体参数（Request Body Parameters）：通过 POST、PUT 请求的请求体传递复杂的对象。 ○ 同样要求在 POST 和 PUT 请求中尝试使用 [FromBody] 和 [FromForm] 两种不同方式传递数据。 ○ 所有 API 返回类型为 JsonResult。

模型类与验证要求：

User 模型：

• 字段包括：

○ UserName：用户的姓名。

○ Email：用户的邮箱地址。

○ Adress：用户的地址。

○ Gender：用户的性别（枚举类型：Male, Female, Other）。

○ Password：用户的密码。

○ Phone：用户的电话。

• 验证要求：

UserName：不能为空。
Email：必须符合电子邮件格式。
Phone：必须符合自定义的澳洲电话号码格式（通过自定义模型验证实现）。
Gender：必须为枚举类型 Male, Female 或 Other。

Teacher 模型：

• 字段包括：

○ UserId：外键，指向 User 表，必须提供。

○ Department：教师所在的部门，不能为空。

○ Description：教师的描述，最长 500 字符。

○ Specialty：教师擅长的课程。

• 验证要求：

Description：长度不能超过 500 字符。
UserId：必须提供，指向 User 表的外键。
Department：不能为空。

传参方式详细功能：

1. 路径参数传值：

○ 通过 URL 路径传递参数，示例：

§ /api/user/{id}：通过用户 ID 获取用户信息。

§ /api/teacher/{id}：通过教师 ID 获取教师信息。

2. 查询字符串传值：

○ 通过 ? 后面的查询字符串传递参数，示例：

§ /api/user?email=user@example.com：根据用户的 Email 获取用户信息。

§ /api/teacher?email=teacher@example.com：根据教师的 Email 获取教师信息。

3. 请求体参数传值：

○ 通过 POST 或 PUT 请求体传递对象，使用 [FromBody] 或 `[FromForm]：

§ 使用 POST 请求创建用户，将完整的用户数据以 JSON 格式或表单格式放入请求体中。

§ 使用 PUT 请求更新教师数据，将完整的教师数据以 JSON 格式或表单格式放入请求体中。

", "_id": "69e3294d9f9cc30e74196f8b" }, { "code": "L69", "title": "Tutorial 10（.NET）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

.NET(4) 作业讲评&答疑

", "_id": "69e329699f9cc30e741976dd" }, { "code": "L70", "title": ".NET(6)：构建WEB API项目相关技术 - 特性，模型验证，自定义模型验证，切面编程，过滤器，自定义中间件", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Web API 相关技术
泛型概念及用法
.Net 内置的泛型集合
依赖注入（Dependency Injection, DI)&控制反转（Inversion of Control, IoC）
依赖注入生命周期
在Web Api 常见的依赖注入应用
Web Api 中的异步编程
扩展方法
Restful API

", "_id": "69e3294e9f9cc30e74196f99" }, { "code": "L71", "title": ".NET(6): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

1> 在第一次Web API 作业的基础上，新增的要求是引入统一的返回类型，要求所有 API 的返回结构保持一致，以提高代码的可读性、可维护性，并确保每个 API 都能够提供一致的响应格式，方便前端和其他调用方处理返回数据。

统一返回类型要求： • 统一返回结构：所有 API 返回类型应包含以下几个属性：

Success: 用于表示操作是否成功。
Message: 操作成功或失败的消息。
Data: 返回的具体数据，可以为空。
Errors: 若操作失败时，返回错误信息列表。 • 使用泛型（Generic）：通过泛型类实现统一返回结构，确保不同类型的数据也能够通过统一的返回结构进行传递。

2> 实现一个继承自 ActionFilterAttribute 的自定义过滤器，并在每个 Action 执行前拦截请求，获取 Action 名称和参数信息。

3> 创建一个 CustomExceptionFilter 类，实现 IExceptionFilter 接口。在 API 中抛出的所有异常都应被过滤器捕获，并返回带有统一结构的类型（之前的统一返回）响应。要求在所有控制器中应用此 ExceptionFilter。

4> 创建一个 Result Filter：该过滤器应在 Action 执行结束后，对结果进行拦截并进行必要的修改。在项目中应用 Result Filter：要求在所有控制器中应用这个过滤器，并对返回结果进行统一的处理。返回格式：保证返回结果依旧使用之前定义的统一返回格式，并且可以在成功的响应中添加成功的时间戳。

", "_id": "69e3294e9f9cc30e74196fa0" }, { "code": "L72", "title": ".NET(7)：构建WEB API项目相关技术 - 泛型，依赖注入声明周期，异步编程，扩展方法", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Web API 相关技术
泛型概念及用法
.Net 内置的泛型集合
依赖注入（Dependency Injection, DI)&控制反转（Inversion of Control, IoC）
依赖注入生命周期
在Web Api 常见的依赖注入应用
Web Api 中的异步编程
扩展方法
Restful API

", "_id": "69e3294e9f9cc30e74196fa7" }, { "code": "L73", "title": ".NET(7): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment: CRUD Operations with MySQL and ADO.NET

Database Setup

Task: Create a user table in MySQL with the following columns: id (Primary Key, int, auto-increment)

username (varchar(45))

password (varchar(45))

email (varchar(200))

age (int)

gender (int)

active (bool, corresponds to BINARY(1) in the database)

address (varchar(500))

2. UserService Implementation

Task: Create a UserService class that implements the IUserService interface. Use ADO.NET to implement the following methods:

Insert (Create new user)

Update (Modify user details)

Delete (Remove a user)

Search (Query users)

Data Retrieval Methods:

Implement two ways to retrieve data:

Row-by-Row reading (using MySqlDataReader)

MySqlDataAdapter for data handling.

3. UserController

Task: Create a UserController class and write the necessary Action methods to handle CRUD operations (Create, Read, Update, Delete) by calling the methods from UserService.

Use Dependency Injection to inject UserService into UserController.

Register the IUserService interface and its implementation (UserService) in the DI container for proper service resolution.

4. API Testing with Postman

Task: Test the CRUD operations using Postman to ensure all API endpoints for creating, reading, updating, and deleting users work as expected.

", "_id": "69e3294e9f9cc30e74196fae" }, { "code": "L74", "title": "React基础(5) - 条件渲染 & 列表渲染", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

if / 三元运算符 ? : / && 渲染组件
数组 .map() 生成组件列表
为什么 key 很重要？
小练习：渲染一个 Todo List

", "_id": "6834079e705ef70538933671" }, { "code": "L75", "title": "Tutorial 13（.NET）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

.NET(5) 作业讲评&答疑

.NET(6) 作业讲评&答疑

", "_id": "69e3296a9f9cc30e74197710" }, { "code": "L76", "title": "Lab(10)：使用React, Hooks和Redux Toolkit构建图书馆应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React, Hooks和Redux Toolkit构建图书馆应用

", "_id": "69e3294f9f9cc30e74196fd5" }, { "code": "L77", "title": "Lab(11)：使用React和Express构建图像上传应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

使用React和Express构建图像上传应用

", "_id": "69e3294f9f9cc30e74196fdc" }, { "code": "L78", "title": ".NET(8): 构建WEB API项目相关技术 - 数据库，SQL Script，ADO.NET", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

数据库 & SQL Script
ADO.NET
ADO.NET 的主要功能
Web API 如何使用ado.net
用ADO.NET 写insert 和seache 方法
Using的用法和参数化查询防止sql 注入
ADO.NET 读取数据的三种方式

", "_id": "69e3294f9f9cc30e74196fe3" }, { "code": "L79", "title": ".NET(8): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment

创建模型并生成数据库表Category 模型：
属性：
Id（主键）
categoryName：分类名称
CategoryLevel：分类级别（用于表示是一级分类还是二级分类）
ParentId：父分类的 Id，用于实现分类的层级关系。
说明：这个模型主要用于表示分类层次关系，比如 IT 是一级分类，software 是 IT 的子分类。
Course 模型：
属性：
Id（主键）
CourseName：课程名称
Description：课程描述
CategoryId：外键，关联 Category，表示课程所属的分类。
关系：
一个 Category 可以有多个 Course，即 Category 与 Course 是一对多的关系。
Category 模型本身也有自关联，ParentId 用来实现分类的父子关系。
在 DbContext 中实现模型和关系在 EF Core 的 DbContext 中，创建 DbSet<Category> 和 DbSet<Course>，并通过 Fluent API 或数据注解来配置 Category 与 Course 之间的一对多关系，以及 Category 的自关联（ParentId）。
配置数据库连接在项目的 appsettings.json 或 Program.cs 中配置数据库连接字符串。
使用 EF Core Migrations 生成数据库表。
实现 REST API 和普通 APICategory 的 API：
使用 REST API 设计，提供增删改查（CRUD）操作。
例如：GET /api/category 获取所有分类，POST /api/category 创建新分类。
Course 的 API：
提供常规的增删改查 API。
例如：GET /api/course 获取所有课程，POST /api/course 创建新课程。
配置 NLog参考 NLog 官方文档。
在你的 API 操作或服务层中，针对重要的操作（例如，创建、删除、更新数据）写日志，记录这些操作的执行情况和错误。
配置 Swagger参考 Swagger 官方文档。
配置 Swagger 来自动生成 API 文档，并通过 Swagger UI 测试 API 的各个 endpoint。
进阶部分（JWT 身份验证）JWT 配置：
实现 JWT 生成功能，在用户登录时生成 Token。
在 API 中校验前端传来的 Token 是否有效，使用 JWT 来保护 API 路由。
Swagger 的 Authorization：
在 Swagger 中配置 Authorization，使得 Swagger UI 能够发送带有 JWT 的请求，以便测试受保护的 API。

完整的流程：

创建 Category 和 Course 模型，定义好表的关系。
在 DbContext 中配置这些模型。
配置数据库连接并生成数据库表。
实现 Category 和 Course 的 API，完成 CRUD 操作。
配置 NLog，记录日志信息。
配置 Swagger，生成 API 文档并测试 API。
进阶部分：使用 JWT 实现身份验证，并配置 Swagger 进行 JWT 保护的 API 测试。

", "_id": "69e3294f9f9cc30e74196fea" }, { "code": "L80", "title": "Project 3介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目背景

在现实世界中，创业公司通常需要快速开发产品并应对市场的变化。这个项目将模拟一个创业公司的实际情景，让你和你的团队合作，创建一个创新的软件产品。

项目任务

你将加入到一个由你的同学组成的团队中，该团队将一起创建一个新的Web Application。你的任务是在团队中发挥作用，贡献你的技能，共同推动项目的成功。

项目要求

项目选题: 你的团队可以自由选择一个创新的项目主题，但它必须包括以下要素：

前端：使用React，Redux，Nextjs，Styled-Components等。
后端：使用Node.js，Express.js，Koa，Passport.js等。
数据库：Mongodb，PostgreSQL，DynamoDB等，选择合适的数据库来存储和管理数据。
部署：将你的应用部署到云端，如AWS、Azure等。

敏捷开发: 使用敏捷开发方法，将项目拆分成多个迭代，并定期交付新的功能。使用敏捷工具（如Trello或JIRA）来跟踪任务和进度。

协作与沟通: 团队协作和沟通至关重要。定期召开站会（stand-up meetings）以更新团队成员，确保每个人都了解项目的状态和任务分配。

Quality and Testing: 保证你的应用程序质量良好。编写单元测试和端到端测试，并确保每个功能都经过充分测试。

Documentation: 创建清晰的文档，包括项目计划、需求文档、系统架构和部署说明。这些文档对于团队成员和潜在用户都非常重要。

Presentation and Demonstration: 在项目结束时，团队需要准备一个演示，展示你的应用程序功能和亮点。这也是你展示你的项目成果的机会。

项目交付

项目完成后，你的团队需要准备一个综合性的项目报告，其中包括以下内容：

Detailed project description, including the theme and objectives.
Project plan and progress reports, documenting various phases and completion status.
System architecture and technology stack of the application.
Deployment documentation, explaining how to deploy your application on a cloud platform.
Testing reports, including the results of unit tests and end-to-end tests.
Materials for project presentation and demonstration, including screenshots or demo videos of the user interface.

项目评估

项目将根据以下标准进行评估：

项目完成度：项目是否按计划完成，是否满足了项目要求。
代码质量：代码是否整洁、可维护，并遵循最佳实践。
功能实现：应用程序是否实现了所需的功能和特性。
文档质量：项目文档是否详尽清晰，便于他人理解。
团队协作：团队协作和沟通是否良好。
演示与展示：演示是否能够生动地展示项目的价值。

", "_id": "6834079e705ef70538933679" }, { "code": "L81", "title": "Project 3 Bootstrap", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Project 3：创造、展示、协作的新篇章

课程概述

欢迎踏入新的阶段，一个专注于实践、创新和团队协作的全新教育体验！在这里，你不仅学习技术，更将参与到真实的项目中，与团队一起创造有意义的作品。我们的目标是培养能够独立思考、卓越创新的匠人，让每位学员在技术路上更进一步。

1. 匠人培训 5.0 的含义

实践与创新：超越传统理论教学，强调通过实际项目的开发来掌握和应用技术。
团队协作：重视团队合作，通过小组项目培养沟通和协作技能。
持续成长：不仅提供知识，更注重培养学习和解决问题的能力。

2. 项目展示

最终展示：每个项目组会在课程末尾线上展示他们的作品，全面介绍项目成果和学习体验。

3. 项目分组与导师组

项目如何分组：学员将根据兴趣和技能分入不同的项目组，每组承担一个独特的项目。
导师组与自拟项目组：导师组由经验丰富的老师领导，指导项目实施；自拟项目组则更加自由，学员可以根据自己的想法创建和实施项目。

4. 项目组规定的重要性

规定的目的：确保每个成员都能在公平、有序的环境中学习和贡献。
遵守的必要性：有助于提升团队效率，保证项目顺利完成。

加入我们的匠人培训5.0，开启你的技术创新之旅，与我们一起成长！

在这个课程中，每一步都充满了挑战和机遇。我们期待看到你的参与和你的作品，一起来创造令人惊叹的项目！

", "_id": "6834079e705ef7053893367a" }, { "code": "L82", "title": "AWS 基础", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

老师：Michel Su

\n

公司：Atlassian

\n

职位：SRE

\n

内容：

\n

1. AWS的基础知识，已经AWS是什么，为什么使用Cloud云计算服务

\n

2. 云计算的优势是什么，云计算的种类，为什么要用AWS

\n

3. IAM是什么，如何定义IAM，Users，Groups，Roles分别是什么，如何进行实施

\n

4. s3的基本操作，如何创建S3的bucket

\n

5. ec2是什么，如何启用ec2。ec2 ，ecs，lambda区别是什么，如何设计

\n

6. Load Balancer是什么，Application Load Balancer用来做什么的。Network的协议是什么

\n

7. AWS考试以及证书是什么

\n

8. API gateway的实施

\n

9. 使用老师提供的项目build一个Serverless的Web Application

", "_id": "69e329509f9cc30e74197005" }, { "code": "L83", "title": "Workshop: AWS IAM 的基本用法和高级使用", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop 分享人： Henry

\n

内容：

\n

AWS IAM 创建账户
IAM 的 policy 如何设置
IAM 的 role 如何设置
当用户的 Policy 抵达上限，如何解决
IAM 如何设置 boundary，如何限制 User 只能使用悉尼地区服务
针对 Non-production 和 Production 如何配置权限

\n

", "_id": "69e329509f9cc30e7419700b" }, { "code": "L84", "title": "什么是Agile SDLC, Waterfall, Agile介绍", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. Agile 的由来、开发宣言、原则、主要关注点，什么是价值

2. 传统的项目管理如何进行的：悉尼歌剧院，悉尼轻轨

3. Software Development Life Cycle(SDLC)是什么, 具体的每个阶段是什么

4. SDLC-Waterfall和V Model是什么

5. Project Management Methodologies有什么

6. Lean Startup是什么

7. 为什么使用敏捷开发，什么是敏捷开发，与Waterfall有什么区别

8. Agile的价值观是什么，Agile Manifesto是什么，12个原则是什么

", "_id": "6834079e705ef70538933676" }, { "code": "L85", "title": "Agile Methodologies", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. 敏捷开发采用的具体方法，什么是Scrum，什么是Kanban

2. 结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

3. Kanban的几个阶段，具体每个阶段的意义是什么

4. Scrum在敏捷开发中的定义是什么

5. Scrum里面的roles是什么，Artifacts是什么，Scrum里面包含的Events有什么

6. SCRUM的3355原则是什么，Value Propositions是什么

7. Retrospective meeting主要用来作什么的

8. Scrum的Teams Roles: Product Owner, Development Team, Scrum Master，分别是什么

9. Kanban具体的步骤是什么

10. 怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

11. User Story是什么，具体的User Story该怎么写

12. Sprint Planning是什么

", "_id": "6834079e705ef70538933677" }, { "code": "L86", "title": "Agile Case研究：微软Microsoft Case Study", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

来自微软曾获得MVP的Ray老师，讲述以微软Windows交付使用Agile的流程

1. 微软是如何使用Agile的，如何使用Agile敏捷开发以及采用DevOps文化

2. Windows的发布周期

3. Waas是什么，Windows as a Service，其中Rings是什么

4. 微软的开发团队分布

5. Windows开发具体的周期

6. Up-front Planning开发，Code Test Stabilize 过程

7. Windows的开发流程如何转型的，如何提升效率和成功率的

8. Agile在项目开发中的好处是什么

", "_id": "6834079e705ef70538933678" }, { "code": "L87", "title": "Workshop: Agile Project Management", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop: Agile Project Management

", "_id": "6834079e705ef70538933675" }, { "code": "L88", "title": "Tutorial 15（.NET）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

", "_id": "69e3296d9f9cc30e7419778b" }, { "code": "L89", "title": "Agile 方法论: 解锁团队的协作潜力", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

1. Agile敏捷开发：历史与哲学探究

从传统瀑布模型到敏捷方法的革命性变革。
敏捷哲学：为什么它如此强大？
Agile 哲学：为什么\"Agile\"变得如此重要？

2. 深入Agile Manifesto (敏捷宣言)

敏捷的四个核心价值观：从\"个体与互动\"到\"响应变化\"。
十二条开发原则的解析：如何将价值观付诸实践？

3. Scrum、Kanban：敏捷的支柱

Scrum 框架的各个流程概述，“3355”方法论
Scrum：迭代开发、自组织团队的奇妙之处。
Kanban：可视化工作流、持续改进的精髓。

4. 深入Scrum

Product Backlog：需求的生命线。
Sprints：高效迭代与交付的秘密。
日常站立会议 (Daily Standups)：团队默契的塑造。
Sprint Retrospectives：持续改进的动力。
结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

5. 用户故事与验收标准：需求的精髓

打造高质量用户故事的策略。
Acceptance Criteria：确保交付符合预期的关键。
怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 实践出真知：构建自己的敏捷看板

使用现代工具 (如Trello、JIRA) 建立工作流程。
实际操作：从构建产品积压到完成冲刺。

7. 敏捷在企业中的演进

大型组织的敏捷转型：成功的案例分析。
避免常见陷阱：敏捷实施中的挑战与解决。
怎样改进流程、提高效率，为什么企业需要 T 型人才

8. 敏捷的未来展望

敏捷开发不断演进的趋势。
如何将敏捷原则融入日常工作。

", "_id": "69e329519f9cc30e74197031" }, { "code": "L90", "title": "React基础(6) - 组件的状态", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

React 组件是如何保存状态的？
useState 的基本用法
事件处理（onClick、onChange）
状态提升（Lifting State Up）
小练习：制作一个带开关的灯泡组件（点击按钮切换亮/灭）

", "_id": "6834079e705ef7053893367b" }, { "code": "L91", "title": ".NET(12): Unit Test", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Unit Test

", "_id": "69e329529f9cc30e74197049" }, { "code": "L92", "title": ".NET(12): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment：

Create a xUnit test project for the Web API project, which is from the Lecture Web API 项目
Add package moq to the xUnit test project
Decide which controller/service need the unit test (for public method)
Write the unit test for your selected API methods, if possible, can write you own public methods including the logic or calculation, which is better feasible for unit test
Given a few examples:

UserController.TestServcies method,

TeacherController.Post method,

TeacherService.GetUser method

5. Trying to use moq package to simulate the DBContext –e.g.CourseCategoryService.Add method in unit test

6. Trying to use some fake external API in your Web API methods and write the unit test to mock this external API.

Below are some candidates could be used from the fake external API - https://jsonplaceholder.typicode.com

7. Trying to run the power shell script and generate the report - please go through the ps script and remember to replace the below value to your solution name

# Run the Coverlet.Collector - REPLACING YOUR SOLUTION NAME!!!

$output = [string] (& dotnet test ../YOURSOLUTION.sln --collect:\"XPlat Code Coverage\" 2>&1)

", "_id": "69e329529f9cc30e74197053" }, { "code": "L93", "title": "Tutorial 12 (React, Context API)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Q&A

解答学习 React 中的疑问。
解答学习 .NET 中的疑问。

", "_id": "69e3296e9f9cc30e741977b6" }, { "code": "L94", "title": ".NET(11): C# 事件与委托", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

C# 事件与委托

", "_id": "69e329529f9cc30e74197062" }, { "code": "L95", "title": ".NET(11): Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Assignment:

1. Define the delegates, please practice the different types:

single delegate - the delegate only used by score top 1 student

e.g. define the delegate HonourBonus for the top 1 score student, associate the top 1 student's ReceiveBonus method with this delegate

multicast delegate

e.g. define the delegate CourseStarting for all students, associate the all student's Start method with this delegate

In the main method, please initiate the instance of delegate to call associated methods and print out the result (in console log)

2. Define the events

Please consider the difference when using event keyword with the above delegate.

Update existing Course class which will be treated as Subject/Observable/Publisher, to add an event - ScheduledTimeChanged (means the course time updated/changed)

Update the existing Student class, which will be the Observer/Subscriber, to add the event handler (method) to listen above event and accordingly update the behavior (print out something in console log)

Simulate some students could quite the course, please remove the subscription from these students

Imaging new students joined and interested in the course, please add the new subscriptions for the event.

Please trigger the time changed event, and print out all subscriber/observer reactions (print out something in console log)

", "_id": "69e329529f9cc30e74197069" }, { "code": "L96", "title": "React基础(7) - React 组件生命周期 & 使用 API 获取数据", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

React 组件的生命周期（挂载、更新、卸载）
useEffect 介绍
清理副作用（避免内存泄漏）
小练习：制作一个自动倒计时的组件
如何使用 fetch 请求 API
处理加载中 & 错误状态
小练习：请求 GitHub API 并显示用户信息

", "_id": "6834079e705ef70538933685" }, { "code": "L97", "title": "Tutorial 18 (.NET)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Q&A

针对上节课C# 事件与委托的答疑和练习

", "_id": "69e3296e9f9cc30e741977df" }, { "code": "L98", "title": "React 进阶(1) - Thinking in React", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React
Step 3: Identify The Minimal (but complete) Representation Of UI State
Step 4: Identify Where Your State Should Live
Step 5: Add Inverse Data Flow
And That’s It

", "_id": "6834079e705ef70538933687" }, { "code": "L99", "title": "Tutorial 14（SCRUM）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

SCRUM 常见问题及其解决方案 (50 分钟)

讨论常见问题 (25 分钟)
讨论 SCRUM 实施中常见的问题，
如留言问题
延迟
提供解决这些问题的策略和最佳实践。
如何与 SCRUM master 沟通
如何与 Product Owner 沟通
如何与 Team member 沟通
如何与 Team Leader 沟通
案例研究 (25 分钟)
分析真实的 SCRUM 案例，探讨如何处理复杂或棘手的问题。

JIRA 和 Bitbucket 工具使用 (50 分钟)

JIRA 使用介绍 (25 分钟)
展示如何在 JIRA 中创建和管理工单（tickets）。
讲解如何使用 JIRA 进行任务分配和进度追踪。
Bitbucket 的基本操作 (25 分钟)
演示如何在 Bitbucket 中进行代码审查（review MRs）和版本控制。
实践如何使用 Bitbucket 管理代码库和协作。

开发人员日常工作流程图制作 (20 分钟)

实践练习：制作工作流程图学员将根据所学内容，绘制一个描述开发人员日常工作流程的流程图。

", "_id": "69e3296f9f9cc30e741977f3" }, { "code": "L100", "title": "React 进阶(2) - 测试和 a11y", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

测试金字塔
Unit Test
vitest
react testing lib
js-dom
accessibility

", "_id": "6834079e705ef70538933689" }, { "code": "L101", "title": "课后补充知识：什么是SSR，CSR，SSG", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

服务器端渲染（SSR）

\n

介绍SSR的工作原理和主要特点。
探索SSR的优势，如更快的首屏加载时间和更好的SEO。

\n

\n

客户端渲染（CSR）

\n

讲解CSR如何在浏览器端动态生成页面内容。
分析CSR的优点，例如更丰富的交互和更好的用户体验。

\n

静态站点生成（SSG）

\n

说明SSG的概念和生成静态网页的过程。
探讨SSG的使用场景，如博客、文档站点等。

\n

选择最适合的渲染技术

\n

根据不同的项目需求和目标，讨论如何选择最合适的渲染方式。

", "_id": "6834079e705ef70538933669" }, { "code": "L102", "title": "Next.js", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Next.js

", "_id": "6834079e705ef7053893368c" }, { "code": "L103", "title": "The Four Prototyping Patterns: Prompting, Fine-Tuning, RAG, Agents", "type": "Lesson", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

The Four Prototyping Patterns: Prompting, Fine-Tuning, RAG, Agents

BY THE END OF THE SESSION

• Prompting \"giving the LLM more context\" Prompting = asking questions in a better way with better context

• Fine Tuning \"teaching the LLM how to act\" 3 types: task training, constraining I/0 schema, and language training

• RAG \"giving the LLM access to new knowledge\" Retrieval Augmented Generation = Dense Vector Retrieval + In-Context Learning

• Agents

\"giving the LLM access to tools\"

Agents = reasoning, action, repeat

• Prompting \"giving the LLM more context\" Prompting = asking questions in a better way with better context

• Fine Tuning \"teaching the LLM how to act\" 3 types: task training, constraining I/0 schema, and language training

• RAG \"giving the LLM access to new knowledge\" Retrieval Augmented Generation = Dense Vector Retrieval + In-Context Learning

• Agents

\"giving the LLM access to tools\"

Agents = reasoning, action, repeat

Prompting

Prompt is nothing but what you said to AI.

Prompt Engineering is the art of crafting effective prompts that elicit desired responses from LLMs. It's the foundation of interacting with these models, and its effectiveness can significantly impact the quality and relevance of the output.

A typical prompt can be broken down into several key components:

Priming: This sets the context for the LLM, providing information about the desired task, persona, or style. For example, you might prime the model by saying, \"You are a friendly chatbot that helps users with their travel plans.\"
Instructions: These guide the LLM on how to handle specific aspects of the task, such as the tone of voice, the format of the output, or how to handle edge cases. For example, you might instruct the model to \"use a conversational tone\" or \"provide a bulleted list of recommendations.\"
User Inquiry: This is the dynamic content of the prompt, the specific question or request that the user provides. It's the input that changes with each interaction.
Output Formatting: This specifies the desired format of the LLM's response. It could be plain text, a structured format like JSON, or even a specific template.

Example:

Priming: You are a helpful and informative chatbot that answers questions about history.

Instructions: Provide concise and accurate answers, using bullet points to list key facts.

User Inquiry: What were the major causes of World War II?

Output Formatting: A bulleted list of key causes.

Another famous the COSTAT:

The COSTAR Framework Explained:

Context : Providing background information helps the LLM understand the specific scenario.

Objective (O): Clearly defining the task directs the LLM’s focus.

Style (S): Specifying the desired writing style aligns the LLM response.

Tone (T): Setting the tone ensures the response resonates with the required sentiment.

Audience (A): Identifying the intended audience tailors the LLM’s response to be targeted to an audience.

Response (R): Providing the response format, like text or json, ensures the LLM outputs, and help build pipelines.

Benefits of Prompt Engineering:

Control over Output: Prompt Engineering allows you to guide the LLM's behavior and ensure that the output aligns with your specific needs.
Customization: You can tailor prompts to specific tasks, audiences, and contexts.
Efficiency: Well-crafted prompts can reduce the need for extensive fine-tuning, saving time and resources.

Limitations of Prompt Engineering:

Context Window: LLMs have a limited context window, meaning they can only process a certain amount of text at a time. This can limit the complexity of prompts and the amount of information that can be provided.
Lack of Factual Grounding: LLMs are trained on massive datasets of text, but they don't store specific facts. They predict the most likely word based on the context, which can lead to inaccuracies or inconsistencies.

=========================================

Fine-Tuning

Fine-tuning is a powerful technique that allows you to customize the behavior of an LLM by training it on a specific dataset of examples. This process adjusts the LLM's internal parameters, enabling it to perform better on tasks related to the training data.

How Fine-tuning Works:

Training Data: A dataset of prompt-completion pairs is created, where each pair consists of a prompt and the desired response. This data represents the specific task or style that you want the LLM to learn.
Model Training: The LLM is trained on the provided dataset, adjusting its internal parameters to better predict the desired responses for the given prompts.
Evaluation: The fine-tuned model is evaluated on a separate dataset to assess its performance and ensure that it has learned the desired behavior.

Example:

Imagine you want to fine-tune an LLM to write product descriptions in a specific style.

Training Data: You create a dataset of product descriptions written in your desired style, along with the corresponding product names.
Model Training: The LLM is trained on this dataset, learning to generate product descriptions that match the style and tone of the training data.
Evaluation: You evaluate the fine-tuned model by providing it with new product names and assessing the quality of the generated descriptions.

Benefits of Fine-tuning:

Improved Performance: Fine-tuning can significantly improve the LLM's performance on specific tasks, such as writing in a particular style, generating creative content, or answering questions in a specific domain.
Style and Tone Customization: Fine-tuning allows you to bake in your desired style, tone, and formatting into the LLM's output.
Reduced Prompt Length: Fine-tuning can reduce the need for extensive instructions in the prompt, allowing for a larger context window and more complex outputs.

Limitations of Fine-tuning:

Data Requirements: Fine-tuning requires a dataset of examples, which can be time-consuming and resource-intensive to create.
Overfitting: If the training data is too small or not representative of the desired behavior, the model may overfit to the training data and perform poorly on unseen examples.
Cost and Resources: Fine-tuning can be computationally expensive, requiring significant resources and time.

RAG

RAG addresses the limitations of prompt engineering by incorporating external knowledge sources into the LLM's decision-making process. It allows LLMs to access and utilize factual information from databases, websites, or other sources, enhancing their ability to provide accurate and relevant responses.

How RAG Works:

Database Setup: A database is created containing relevant information, which can be text from websites, documents, or internal knowledge bases. This information is then split into smaller chunks, such as paragraphs or sections, to ensure that related text is kept together.
Embedding Generation: Each chunk of text is converted into a vector representation called an embedding. Embeddings capture the semantic meaning of the text, allowing for efficient comparison and retrieval.
Retrieval: When a user inquiry is received, it is also converted into an embedding. This embedding is then compared to the embeddings in the database using a vector search algorithm. The most similar chunks of text are retrieved.
Prompt Augmentation: The retrieved information is then incorporated into the prompt, providing the LLM with the necessary context to answer the user's question.

Example:

Imagine a user asks, \"How do I fix a leaky faucet?\"

Retrieval: The user's inquiry is converted into an embedding and compared to the embeddings in a database containing a plumber's handbook. The most relevant section, \"Fixing Common Leaks,\" is retrieved.
Prompt Augmentation: The retrieved section is added to the prompt, providing the LLM with the necessary information to answer the question.

Benefits of RAG:

Factual Accuracy: RAG allows LLMs to access and utilize factual information from external sources, improving the accuracy and reliability of their responses.
Real-time Knowledge Updates: The database can be updated in real time, ensuring that the LLM has access to the latest information.
Expanded Knowledge Base: RAG enables LLMs to access a much larger knowledge base than what is available within their training data.

Limitations of RAG:

Database Setup and Maintenance: Creating and maintaining a comprehensive and accurate database can be time-consuming and resource-intensive.
Retrieval Accuracy: The accuracy of the retrieved information depends on the quality of the database and the effectiveness of the vector search algorithm.
Context Window: The retrieved information is still subject to the LLM's context window limitations.

Agents

Agent is nothing but a fancy RAG

Introduction to LLM Agents

LLM agents represent the next frontier in artificial intelligence, moving beyond simple text input-output models to interactive, reasoning-capable systems.

What are LLM Agents?

Definition: Systems that use Large Language Models (LLMs) as their core for reasoning and planning, enabling interaction with external environments.
Key difference from traditional LLMs: Ability to observe, plan, and take actions in diverse environments.

Components of LLM Agents

Agent/Brain/Core:
Core LLM for processing and understanding language
Customizable prompts and personas
Planning:
Ability to create and execute plans for complex tasks
Memory:
Short-term memory: Temporary storage for ongoing conversations
Long-term memory: Persistent storage for learning and recall
Tool Use:
Integration with external tools and APIs
Ability to leverage specialized knowledge bases

Capabilities of LLM Agents

Advanced Problem Solving:
Executing complex tasks efficiently
Generating project plans, writing code, creating summaries
Self-Reflection and Improvement:
Analyzing and critiquing their own output
Continuous enhancement through learning
Multi-Agent Collaboration:
Interaction and cooperation between multiple agents
Division of tasks and specialization
Environment Interaction:
Web browsing, API usage, physical world interaction (in robotics)
Multi-modal input processing (text, images, sensory data)

Applications of LLM Agents

Software Development:
Code generation and debugging
Project planning and management
Workflow Automation:
Task planning and execution in business processes
Intelligent personal assistants
Research and Analysis:
Information gathering and synthesis
Report generation and data analysis
Customer Service:
Advanced chatbots and virtual assistants
Multi-step problem resolution

Frameworks and Tools for LLM Agents

LangChain and LangGraph:
Open-source frameworks for building LLM applications
Components for agent creation, memory management, and tool integration
Agentic Search:
Enhanced search capabilities for agents
Retrieval of multiple answers in agent-friendly formats

Challenges and Considerations

Ethical Concerns:
Ensuring responsible use of autonomous agents
Privacy and data security considerations
Limitations:
Current constraints in reasoning capabilities
Need for precise instructions and prompts
Ongoing Research Areas:
Improving long-term memory and learning
Enhancing multi-modal capabilities

Conclusion

LLM agents represent a significant advancement in AI, offering powerful tools for complex problem-solving and automation. As research progresses, we can expect these agents to become increasingly capable and integrated into various aspects of work and daily life.This lecture outline provides a comprehensive overview of LLM agents, covering their core concepts, capabilities, applications, and challenges. It can be expanded with specific examples and case studies to create a full-length lecture on the topic.

Benefits and When to Use

Prompt Engineering:

Benefits: Easy to implement, rapid prototyping, intuitive for guiding LLM behavior.
When to Use: When you need quick and simple control over LLM output, when you don't have a large dataset for fine-tuning, or when you want to experiment with different prompts.

RAG:

Benefits: Access to external knowledge sources, real-time knowledge updates, expanded knowledge base.
When to Use: When you need to provide LLMs with factual information, when you want to leverage external databases or knowledge bases, or when you need to ensure that the LLM's responses are grounded in real-world data.

Fine-tuning:

Benefits: Improved performance on specific tasks, style and tone customization, reduced prompt length.
When to Use: When you need to train an LLM to perform a specific task, when you want to customize the LLM's output style or tone, or when you want to reduce the need for extensive instructions in the prompt.

Agent:

Benefits: Advanced problem-solving: LLM agents can handle complex, multi-step tasks efficiently by breaking them down into manageable subtasks.
When to Use: When tasks require sequential reasoning, planning, and memory. They excel in situations where simple text generation or information retrieval is not sufficient, and more complex problem-solving or decision-making is needed

", "_id": "68340f6f705ef705389463bd" }, { "code": "L104", "title": "Introduction to Embeddings", "type": "Lesson", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

学习目标

- 掌握Embeddings的基本概念及其在自然语言处理、信息检索等领域的应用

- 学习如何生成和使用文本嵌入向量表示语义关系

- 理解不同Embedding模型的工作原理及其对文本表示的影响

- 提升在实际项目中使用Embeddings进行文本分类、相似性搜索等任务的能力

知识点介绍

**Embeddings基础**

- 了解什么是Embeddings，如何将文本或其他数据转化为向量

- 学习Embeddings的核心概念，如语义空间和向量表示

**常见的Embedding模型**

- 掌握常见的Embedding模型，如Word2Vec、GloVe、BERT等的工作原理

- 学习如何选择合适的Embedding模型以满足不同的任务需求

**文本嵌入的生成与应用**

- 学习如何生成文本嵌入，并应用于相似性搜索、分类和聚类等任务

- 理解如何通过嵌入向量表示语义相似性，进行语义搜索和推荐

**模型性能与优化**

- 探索如何评估和优化Embedding模型的性能，确保其生成的向量具有高语义关联性

- 学习如何通过微调Embedding模型提升在特定任务中的表现

**实际应用场景**

- 了解Embeddings在信息检索、自然语言处理和推荐系统中的应用

- 探讨如何在项目中应用Embeddings进行高效的文本处理和语义分析

通过这些知识点，学员将能够理解并应用Embeddings技术，用于各种自然语言处理任务，并通过优化和调优提升模型的表现。

", "_id": "68340fbe705ef70538946523" }, { "code": "L105", "title": "Introduction to Retrieval Augmented Generation (RAG)", "type": "Lesson", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

学习目标

- 掌握Retrieval Augmented Generation (RAG)的基本概念，理解其在生成式AI中的作用

- 学习如何通过RAG结合信息检索与生成模型，提高生成内容的相关性和准确性

- 掌握RAG系统的核心组件，包括文档检索、嵌入生成与生成模型的集成

- 提升在实际项目中构建和优化RAG系统的能力，满足复杂信息生成需求

知识点介绍

**RAG基础概念**

- 了解RAG的架构和工作原理，学习如何通过文档检索增强生成模型的表现

- 探索RAG系统中的主要组件：Document Retrieval、Embedding Generation与Generative Models

**文档检索与生成的集成**

- 学习如何通过RAG系统结合文档检索和生成模型，提升生成内容的上下文相关性

- 理解如何在生成过程中动态调用检索信息，确保生成内容的准确性与完整性

**RAG系统的优化与调优**

- 学习如何优化RAG系统中的检索和生成流程，提高响应速度和生成质量

- 掌握如何通过Prompt Engineering和检索策略的调整，提升RAG系统的效果

**应用场景与案例分析**

- 探讨RAG在知识问答、文档生成、智能客服等应用中的实际案例

- 学习如何根据具体业务需求定制RAG系统，提升系统的智能化和用户体验

通过这些知识点，学员将能够理解并应用Retrieval Augmented Generation (RAG)技术，构建具有高相关性和高准确性的生成系统，并通过优化和调优提升系统性能。

", "_id": "68341000705ef7053894691b" }, { "code": "L106", "title": "Building RAG from Scratch in JavaScript", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

学习目标

掌握如何使用JavaScript从零开始构建一个完整的Retrieval Augmented Generation (RAG)系统
理解RAG系统的核心组件，包括Information Retrieval、Embeddings和Generative Models
学习如何将检索模块与生成模块无缝集成，以处理复杂的文本检索和生成任务
掌握如何在JavaScript中优化RAG系统的性能，确保在实际应用中的高效运行

", "_id": "683410de705ef70538947dbc" }, { "code": "L107", "title": "Tutorial 19 (Azure AI Preparation)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

课程内容：

注册Azure账号，开通Speech Service，开通OpenAI API

具体任务：

学员在导师指导下注册Azure账号，

https://azure.microsoft.com/en-au/free/ai-services

开通Speech Service

https://portal.azure.com/#create/Microsoft.CognitiveServicesSpeechServices

入口文档

https://learn.microsoft.com/en-au/azure/ai-services/speech-service/overview#try-the-speech-service-for-free

开通Open AI API

https://platform.openai.com

https://chatgpt.com

", "_id": "69e329549f9cc30e741970c3" }, { "code": "L108", "title": "Azure AI Service和TTS", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

微软云Azure AI Service 提前注册

课程内容

Icebreaking，导师自我介绍，学员自我介绍
AI 简介
AI是什么葫芦里的什么药
AI是什么药（是什么，能干什么）
AI是什么葫芦（几种实现技术）
传统算法
深度学习
机器学习
大语言模型（机器学习的一种分支）
AI相关的几个典型岗位
Algorithm Engineer (算法工程师 - 大牛)
Hyperparameter tuning engineer （调参侠）
Prompt Engineer （提示工程师 - 调整优化提示）
Application Engineer (应用工程师 - 大部分的程序员，调用AI的API实现商业价值)
AI在澳洲的企业应用
Optus的应用案例
Optus 机器人
Optus 数字人
Service NSW的应用案例
客户输入自然语言的理解
语言之间的翻译
Azure AI Service 的简要介绍
Azure是什么？Azure有什么？
Azure AI Service 是什么？有什么？
演示Azure Protal

课堂实操练习

在Azure Portal上面体验文字转语音和语音转文字
登陆Azure Portal
进入Speech Studio
动手操作文字转语音
动手操作上传语音转文字
动手操作用麦克风录入语音转文字
跟随练习说明，用React写一个最简单的文字转语音（TTS - Text To Speech）Web应用
阅读练习说明，写一个form，包括 input，和 submit，输入文字，用window.speechSynthesis控件播放语音
===============中场休息10分钟==============
Azure API 介绍
Azure API 怎么读
跟随练习说明，用React写一个最简单的语音转文字（STT - Speech To Text）Web应用
写一个form，包括三个按钮：开始录音，暂停录音，停止录音
用microsoft-cognitiveservices-speech-sdk实现实时语音转文字
写一个文本显示框，显示转换之后的文字
讨论 - 练习2 和练习3 的局限和潜在风险
调用云AI服务的text to speech 对比直接用浏览器自带的text to speech 空间的好处和坏处是什么，不同的应用场景
练习3的实际应用中一个重要安全性问题 - 你的API Key会暴露在客户端
介绍另一种验证方式：Token
引入后端，跟随练习说明，用.net写一个获取token的后端
初始化一个Web API
配置好Web API
写一个controller，提供一个API /api/VoiceController/get-speech-token
在这个controller里面调用Azure cognitive 服务获取token并作为Response返回
讨论 - 本次课堂体验小结
实现效果

", "_id": "6834079e705ef7053893368e" }, { "code": "L109", "title": "Integrate Azure AI Service and Streaming", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

完成课程Azure AI Service和TTS

课程内容

Warmup，回顾上一节的练习和下一步练习
回顾后端获取短期token
下一步：前端用token通过Stream 模式和AI Service通讯，
跟随练习说明，写一个React App，调用后端获取token，并进行Stream实现TTS和STT
调用上面的后端获取token
从麦克风录音转换成文字
上传文件转换成文字
文字阅读（文字转语音）
文字阅读的暂停和继续
实现STT和TTS - Pros & Cons ？
讨论：继续优化Azure AI（1）练习的安全性
跟随练习说明更新上一节的 .net 后端应用，提供一个API，接受一个音频文件，调用Azure AI转化成文字，并作为Reponse 返回 -
增加一个API endpoint /api/VoiceController/upload 接受一个webm文件
保存文件并转换成wav
调用SpeechRecognizer 把文件传至Azure识别出文字
返回文字到Response
练习解释：为什么要转换成wav ？

===============中场休息10分钟==============

更新上一节的 React 前端，把录到的语音传给上面的API，获取文字
用react-mic录音
上传文件
Azure Speech Translation （语音翻译）介绍
练习：在Azure Portal 上体验翻译功能
练习：基于上一个练习增加一个API，实现语音翻译成文字功能
练习：基于上一个练习的前端，增加一个按钮，调用新增的翻译API，实现语音翻译成文字功能

讨论：回顾这两天Azure AI的使用体验

", "_id": "6834079e705ef7053893368f" }, { "code": "L110", "title": "Integrate Azure AI and OpenAI", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

完成课程 Integrate Azure AI Service and Streaming

已注册ChatGPT/Open AI并开通Open AI API服务（需要预存5美金）

课程内容

上次课程（Azure语音转文字和翻译）的回顾
Generative AI
几个最常见的Generative AI产品
ChatGPT 和 Open AI 简介
ChatGPT vs OpenAI
Open AI API 简介及其价钱
Open AI Platform
Assistant
Playground
Other
在澳洲企业的实际应用案例（如何玩转Prompt）
Employment Hero - 简历阅读和评判
Service NSW - ChatGPT 与 Azure CLU的PK
练习：Open AI API 初体验 - Open AI Playground 的体验

=============中场休息10分钟===============

基于上一章练习（Azure AI 2）的后端应用，改动后端API，提供同样的语音转文字功能，但背后调用的是Open AI，而不是Azure AI
调用Open AI 的 Rest API 把文件传至OpenAI识别出文字
返回文字到Response
整合上一节应用的前端测试（原则上前端无任何改动，实际上需要有一处小改动）
基于上一节的后端应用，改动后端API，提供翻译功能
调用Open AI 的 Rest API 把文件传至OpenAI翻译出文字
返回文字到Response
前端不需要改动，测试
做一个chatgpt的马甲：基于上一节的后端应用实现语音输入，文字回答
演示：在自己的机器上装一个ChatGPT的大语言模型：Ollama
AI 体验的小结和讨论

", "_id": "683411b9705ef70538948822" }, { "code": "L111", "title": "Project Management Workshop", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Project Management Workshop

", "_id": "69e329559f9cc30e74197138" }, { "code": "L112", "title": "Workshop：前端技术干货分享", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop：前端技术干货分享

", "_id": "69e329719f9cc30e7419787d" }, { "code": "L113", "title": "Workshop：如何使用最新AI工具高效编程", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Workshop：如何使用最新AI工具高效编程

", "_id": "69e329729f9cc30e741978d7" }, { "code": "L114", "title": "5分钟手动部署Web Application 到 AWS S3 静态网站", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

前端App部署基础

\n

介绍如何准备前端应用以便于部署。
指导如何选择合适的部署平台和服务。

\n

创建AWS S3 Bucket

\n

逐步演示如何在AWS S3中创建一个新的Bucket。
讨论Bucket命名规则和配置选项。

\n

编写Bucket策略

\n

学习如何为Bucket编写安全策略。
分析策略语法和关键要素。

\n

Bucket的日常操作

\n

演示如何上传、下载和管理Bucket中的文件。
探索如何监控和维护Bucket。

", "_id": "69e329559f9cc30e7419713d" }, { "code": "L115", "title": "GraphQL 101: 剥离RESTful的银行系统开发实践—Gary Sun", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Gary

\n

内容：

\n

RESTFul与GraphQL对比

\n

探讨两种API设计范式的优缺点。
分析何时使用RESTFul，何时更适合选择GraphQL。

\n

GraphQL的核心概念

\n

详细介绍GraphQL的工作原理和主要特性。
讨论GraphQL如何改善数据获取和管理。

\n

GraphQL查询语言

\n

学习如何构建高效的查询，获取精确的数据。
实践GraphQL的强大灵活性，适应复杂的应用需求。

\n

", "_id": "69e329559f9cc30e74197142" }, { "code": "L116", "title": "AWS Lambda 基础知识", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Shaun

\n

内容：

\n

1. Serverles 基础概念

\n

2. Faas 基础概念 Function-as-a-Service 概念

\n

3. Lambda 如何使用，Lambda 的特点，优缺点

\n

4. Lambda 在匠人学院 App 里的使用

\n

5. 简单的 Lambda Demo

", "_id": "69e329559f9cc30e7419715a" }, { "code": "L117", "title": "Docker Introduction", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Docker 视频学习： https://youtu.be/gAkwW2tuIqE

\n

本节知识点：

\n

docker 原理与介绍
docker 命令行与 gui 的使用
docker 中的端口映射，以及外部调用
如何通过 docker 打包我们的项目
docker compose 一键启动本地开发环境

\n

", "_id": "6834079e705ef70538933688" }, { "code": "L118", "title": "SpringBoot的Production部署到AWS ECS Fargate，如何使用Microservice with docker", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: Xiaokai & Yinhang

\n

内容：

\n

Springboot 的 Docker 部署到 AWS
ECS AWS
ECS 如何进行 CICD
Task 是什么，如何使用
VPC 是什么
Subnet 是什么，如何使用
Microservice 是什么

", "_id": "6834079e705ef70538933694" }, { "code": "L119", "title": "Workshop: 持续集成(CI)/持续部署(CD)的概念以及Jenkins的使用", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Roger

\n

内容：

\n

持续集成(CI)/持续部署(CD)的概念
Jenkins 如何一步一步部署上的
Jenkins 的 Docker Image 如何部署的
如何实现 Nodejs 后端的自动化部署
如何实现 React 前端的自动化部署

", "_id": "6834079e705ef70538933695" }, { "code": "L120", "title": "CI CD基础使用Jenkins和AWS CodePipeline 手把手部署一个Web App", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

\n

内容：

\n

1. Jenkins和AWS Codedeploy的区别是什么，有什么优点好处

\n

2. 代码里的Jenkinsfile逐行解读

\n

3. Jenkins如何开一个新的pipeline部署到Branch上

\n

4. 如何使用AWS CodePipeline部署

", "_id": "69e329569f9cc30e74197170" }, { "code": "L121", "title": "Open AI Huggingface讲解 - Guang", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

OpenAI概览

\n

介绍OpenAI的发展历程、愿景和主要成果。

\n

提示词工程与高级使用

\n

探讨如何精准地使用提示词来提高模型的效果。
分析高级应用技巧和策略。

\n

OpenAI的其他模型

\n

了解OpenAI提供的各种AI模型及其特点和用途。

\n

开源AI模型对比

\n

探讨与OpenAI相似的开源模型，比较它们的优势和局限。

\n

产品和运维中的应用

\n

分析OpenAI在实际产品开发和运维中的应用案例。
探索如何将AI模型融入生产实践。

", "_id": "6834079e705ef70538933697" }, { "code": "L122", "title": "用 Kafka 实践 Event First 设计思维—虎头锤", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 虎头锤

\n

内容:

\n

Kafka简介

\n

介绍Kafka的功能和在现代数据处理中的重要性。
讨论Kafka的主要组件，包括生产者、消费者、主题和分区。

\n

Event First设计

\n

解析Event First设计方法的原则和优势。
分析如何使用Kafka构建事件驱动的系统架构。

\n

Kafka实战应用

\n

演示如何设置和配置Kafka环境。
指导如何创建Kafka主题，发送和接收消息。

", "_id": "69e329579f9cc30e74197185" }, { "code": "L123", "title": "如何准备澳洲大厂开发类岗位面试", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

老师：Xuecong，就职于悉尼 AWS，SDE

内容：

1. 澳洲大厂开发类岗位面试常见流程

2. 如何‘管理'整个面试流程

3. 如何准备面试申请

4. 准备面试，哪些专业能力需要提高

5. 如何准备大厂面试，体现价值观和企业文化

6. 面试当天注意事项

7. 如何接受，拒绝，协商 Offer

", "_id": "6834079e705ef705389336a3" }, { "code": "L124", "title": "求职国内秋招大厂前端开发岗，需要做哪些准备", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

内容：

国内大厂前端岗位如何细分？
获得前端岗位 Offer 所需的几大要素
如何准备面试中的八股文、算法等硬核考点？
怎样的实习经历可以让你在校招求职中脱颖而出？

", "_id": "6834079e705ef705389336a4" }, { "code": "L125", "title": "如何准备国内秋招，才能获得大厂 Offer?", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Chen

内容：

秋招时间规划

解析秋招的主要时间节点，帮助你合理安排准备时间。
讨论如何在学习、实习和求职之间平衡。

准备秋招的步骤

提供详细的秋招准备指南，包括市场调研、目标公司筛选等。
强调技能提升和实战经验积累的重要性。

笔试准备技巧

分析常见的笔试题型和应对策略。
提供实用的学习资源和练习方法。

面试技巧训练

探讨如何在面试中有效展现你的能力和潜力。
分享面试中的常见问题和最佳回答技巧。

", "_id": "69e329579f9cc30e7419719c" }, { "code": "L126", "title": "在澳洲如何找到一份Java Developer的工作 -- 虎头锤", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：虎头锤

\n

内容:

\n

澳洲Java工作市场分析

\n

探索澳洲Java开发岗位的市场需求和主要工作要求。
分析技术技能和行业经验在职场中的重要性。

\n

回答行为面试问题

\n

提供实用的策略和技巧，帮助你准备和回答行为面试中的问题。
分析常见的行为问题及其背后的意图。

\n

简历撰写和个人品牌打造

\n

教你如何撰写一份突出你技能和经验的简历。
讨论如何在简历中有效地展示你的项目经验和技术能力。

\n

", "_id": "6834079e705ef705389336a6" }, { "code": "L127", "title": "澳洲程序员找工作必备哪些后端知识", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 老虎

\n

内容:

\n

澳洲后端开发者必备知识

\n

分析澳洲后端开发职位的常见要求和技能需求。
探讨关键的编程语言（如Java、Python、Node.js）和框架。

\n

数据库技能

\n

介绍常用的数据库技术，包括关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB）。

\n

API开发与RESTful服务

\n

学习如何设计和实现高效的RESTful API。

\n

版本控制和代码协作

\n

强调Git等版本控制系统的重要性，并探索代码协作的最佳实践。

\n

云服务和容器化技术

\n

介绍云计算服务（如AWS、Azure）和容器技术（如Docker、Kubernetes）。

\n

软件工程最佳实践

\n

探讨如何编写可维护、高效的代码，以及软件测试和持续集成的重要性。

\n

", "_id": "6834079e705ef705389336a7" }, { "code": "L128", "title": "在澳洲，IT学生如何准备System Design面试-----Ben", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Ben

内容：

系统设计面试的基本功

概念理解：讲解系统设计面试中经常涉及的关键概念，如可扩展性、可靠性、效率等。
技能要点：强调分析问题、沟通思路、考虑权衡的重要性，并提供实用技巧帮助你在面试中脱颖而出。

面试准备方法

资源梳理：介绍高质量的学习资源和实践工具，帮助你系统地准备系统设计面试。

Monolith架构解析

定义和特点：详细解释Monolith（单体架构）的概念，并探讨其优缺点。

Microservice架构探索

核心理念：深入讲解Microservice（微服务架构）的基本原则和结构。

", "_id": "6834079e705ef705389336a8" }, { "code": "L129", "title": "从0到1打造React/Node 全栈IoT实时应用——Bryan", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

主讲人：Bryan

内容：

IoT概览

介绍IoT的定义、发展历程和关键技术。
分析IoT在不同行业中的应用案例。

IoT架构与最佳实践

讨论IoT系统的典型架构和组件。
探索IoT项目的设计原则和最佳实践。

实时应用与技术栈

解析构建IoT实时应用的技术栈和框架。
分析物联网的数据处理和通信技术。

案例研究和演示

通过具体的项目示例展示IoT技术的应用。
演示如何实现IoT解决方案，并讨论其实际效果。

", "_id": "6834079e705ef705389336a9" }, { "code": "L130", "title": "Google大佬教你，如何突破年薪20w澳币天花板 -- 韭天", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 韭天

\n

内容:

\n

薪资的组成

\n

深入了解薪资的不同组成部分，包括基本工资、奖金、福利等。

\n

提升薪资的方法

\n

探讨如何通过技能提升、职位晋升等方式增加薪资。
分析职业发展中关键的技能和资格认证。

\n

优质雇主的选择

\n

比较不同类型的公司及其提供的薪资水平。
讨论如何选择能够提供更好薪资和职业发展机会的公司。

\n

职业生涯规划

\n

指导如何根据个人目标和市场趋势规划职业生涯。
分析长期职业规划对薪资和职业满意度的影响。

\n

", "_id": "6834079e705ef705389336aa" }, { "code": "L131", "title": "Elastic Search基础知识分享Workshop", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

\n

内容：

\n

Logging Saas 服务商横向比较：Elastic Search，Splunk，Sumo Logic，Datadog，New Relic 等
Elastic Search 是什么，Elastic 的优势是什么
Elastic Search 架构 Log，Beats，Logstash，Elasticsearch，Kibana
Beats 的使用，Beats 的特点
Elastic Search 在匠人的架构，Lambda 如何使用
Elastic Search 的如何创建 Dashboard
Elastic Search 的如何查询 Logging 信息，如何做筛选

", "_id": "6834079e705ef705389336ab" }, { "code": "L132", "title": "LinkedIn & CV", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

LinkedIn & CV

", "_id": "6834079e705ef7053893369a" }, { "code": "L133", "title": "Student Showcase: Stripe Integration in Practice", "type": "Workshop", "isLive": true, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Student Showcase: Stripe Integration in Practice

", "_id": "6834079e705ef705389336ad" }, { "code": "L134", "title": "关于如何解决Error Messages，几个步骤", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

应对error message的几个步骤： 1. 详细阅读一下error message，看报错的内容是什么，是否和自己操作的步骤有关，你是否能从报错的内容中找到出错位置，以及出错原因 2. 如果自己无法理解错误信息，尝试提炼出error message中的关键语句，在google上搜索。这一步很重要。如果全盘复制error message，有可能会因为字符数太多而无法详细匹配到你要找的答案。所以如何精炼错误信息的同时又精准的找到网上的答案，也是锻炼搜索能力的重要一步 3. 尝试从google的搜索结果当中，逐一比较，是否和你的错误信息相关。如果是，可以尝试google提出的解决方案。通常情况下你找到的第一个不一定是能解决你问题的那个一个。有可能需要尝试五六个/六七个不同的方案，才最终能找到你想要的内容 4. 如果google上的内容也无法帮你解决问题，可以截图错误信息，注意截图中要包含你所跑的命令和详细的错误信息，发到群里，大家帮你参考。

", "_id": "6834079e705ef705389336ac" }, { "code": "L135", "title": "澳洲工作职场介绍", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"澳洲公司全景：行业领袖与职业机遇\"

\n

澳洲公司的市场概况：深入介绍澳洲主要行业和领先公司，包括它们的市场定位、企业文化和核心价值。
澳洲公司的职业前景：探讨在澳洲各种类型公司工作的优势和挑战，以及如何在这些环境中发展职业生涯。

\n

\"就业方向解析：产品与咨询服务\"

\n

产品方向的职业机遇：探讨在产品管理、开发和策略等领域的职业路径，以及如何在这些领域成功发展。
咨询服务方向的职业途径：深入分析咨询行业的工作性质、职业晋升路径和必备技能，以及如何在咨询服务领域建立成功的职业。

", "_id": "6834079e705ef7053893369b" }, { "code": "L136", "title": "澳洲企业招聘流程", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"澳洲企业招聘全攻略：三大关键阶段深度解析\"

\n

简历和求职信的制作与提交：学习如何撰写针对澳洲市场的高效简历和求职信，包括格式、内容和展现个人特色的技巧。
面试的全面准备：深入分析招聘过程中的各种面试类型，包括初步面试、在线评估、技术面试和管理层面试。提供准备技巧、常见问题解答和成功策略。
Offer 阶段的策略：探讨如何在收到工作邀约时进行有效的沟通和谈判，包括薪资、福利和其他工作条件。

", "_id": "6834079e705ef7053893369c" }, { "code": "L137", "title": "招聘官挑选简历的标准", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

招聘官在挑选简历时通常会根据以下几个标准进行筛选：

\n

符合职位要求：首先会检查应聘者的教育背景、工作经验、技能和资格是否符合岗位的具体要求。
清晰、专业的简历格式：一份清晰、逻辑性强、格式规范、无拼写错误的简历更容易获得青睐。
关键字匹配：许多公司使用自动跟踪系统（ATS）来筛选简历，这些系统会根据职位描述中的关键字来评估简历的相关性。
成就和成绩：与其仅仅列出职责，招聘官更倾向于看到具体的成就和成绩，例如销售额、成本节约、项目成功实施等量化的结果。
职业发展的连贯性：职业路径中的逻辑发展和进步表明了候选人的职业目标和职业规划。
个性和文化契合度：简历中的个人陈述或兴趣爱好部分可以体现出候选人是否可能与公司文化和团队精神相契合。
职业目标：简历应该传达出候选人的职业目标与申请职位是如何对齐的。
社交媒体和在线存在：有时候招聘官也会查看LinkedIn等专业网络或其他社交媒体来了解候选人的专业背景和行为表现。
推荐信和联系人：提供可以证实候选人能力和表现的推荐人可以是一个加分项。
附加技能：除了基本技能之外，候选人显示的任何额外技能或证书也会让其简历更加突出。

", "_id": "6834079e705ef7053893369d" }, { "code": "L138", "title": "学会撰写IT专业简历", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

学会撰写IT专业简历

", "_id": "69e3295b9f9cc30e741972ea" }, { "code": "L139", "title": "简历常见问题", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"简历制作艺术：重点、加减分项及编写原则\"

\n

简历的重点内容：指导您如何突出简历中的重点内容，包括职业经历、技能、成就和教育背景，确保雇主能够快速抓住您的核心优势。
避免的简历减分项：教您识别和避免简历中的常见错误和不利因素，如过度冗长、格式不当或信息不准确等。
简历的加分元素：提供策略和建议，帮助您在简历中加入能够提升吸引力的元素，如特定技能证明、相关项目经验或突出成就等。
编写简历的基本原则：探讨在编写简历时应遵循的基本原则，包括清晰性、专业性和针对性，以及如何根据目标职位定制简历。

", "_id": "6834079e705ef7053893369f" }, { "code": "L140", "title": "如何利用 ChatGPT 写简历", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"利用 ChatGPT 提升简历撰写技巧：指南与实践\"

\n

ChatGPT 基本使用方法：本节课将介绍 ChatGPT 的基础功能和操作方法，帮助学员快速掌握如何有效使用这一先进的工具。
ChatGPT 在简历撰写中的应用技巧：这部分将指导学员如何充分利用 ChatGPT 在简历撰写中的潜力，包括格式建议、内容生成和优化技巧，以打造一份吸引眼球的简历。
与 ChatGPT 进行个性化交互：教授学员如何与 ChatGPT 进行有效的个性化交互，以获取更加符合职业目标和个人特色的简历内容。
ChatGPT 实例演示：通过实际操作演示，展示 ChatGPT 在简历撰写和改进方面的应用，帮助学员更好地理解和掌握实际操作技巧。

", "_id": "6834079e705ef705389336a0" }, { "code": "L141", "title": "手把手带着运营 LinkedIn", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"LinkedIn 职业建设：完善个人资料与网络拓展\"

\n

维护完整、专业的 LinkedIn 个人资料：指导您如何创建和维护一个展现您职业经历、技能和成就的专业 LinkedIn 资料。这包括头像选择、经历描述、技能展示和获取推荐等关键元素。
加入与行业和兴趣相关的 LinkedIn 群组：教您如何找到和加入与您的职业领域和兴趣相关的 LinkedIn 群组，以便进行行业交流、拓展职业网络和获取行业最新动态。

", "_id": "6834079e705ef705389336a1" }, { "code": "L142", "title": "如何利用 LinkedIn 准备面试", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"求职成功攻略：职位描述解析、面试准备与公司研究\"

\n

这个课程旨在全面指导您如何在求职过程中取得成功。本课程将包括：

\n

职位描述深度解析：教您如何仔细分析职位描述，理解职位要求的核心内容和隐含条件，从而更有效地准备申请材料和面试。
面试准备技巧：提供面试准备的策略，包括如何针对面试描述准备回答问题、展示自己的优势，以及如何应对常见面试问题。
利用 LinkedIn 搜索目标公司：指导您如何有效利用 LinkedIn 平台搜索并研究目标公司，包括公司背景、文化、行业地位等信息，以增强您的求职策略。

", "_id": "6834079e705ef705389336a2" }, { "code": "L143", "title": "Tutorial 16（React Auth, Next.js）", "type": "Tutorial", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

答疑 (30 分钟)

React 身份认证相关问题解答 (15 分钟)回答关于 React 中身份认证的基础知识、JWT 的使用、Context 和 Hooks 在认证中的应用等问题。
Next.js 渲染模式相关问题解答 (15 分钟)解答有关 Next.js 的概述、不同渲染模式（CSR、SSR、SSG）的特点和应用场景的问题。

实践练习 (90 分钟)

练习1: React 身份认证表单实现

任务: 创建一个 React 应用
登录
注册
登出
删除帐户
表单验证:
实现基础前端验证逻辑，
实现检查输入是否为空，格式是否正确等。
模拟 API 调用:
使用 mock service worker（MSW）或其他工具模拟后端 API 响应。
状态管理: 使用 React 的 Context API 来管理用户的登录状态。
创建 Context API
解码 JWT Token
保存用户信息
展示用户信息

练习2: Next.js 分页列表实现 (额外)

任务: 使用 Next.js 创建一个列表应用，该列表包含分页功能。
数据源: 可以使用公开的 API 或静态数据作为列表的数据源。
渲染模式探索: 尝试使用 CSR、SSR 和 SSG 等不同渲染模式，并了解每种模式的特点和适用场景。
分页逻辑: 实现分页组件，允许用户在列表数据间导航。

", "_id": "69e329779f9cc30e74197a23" }, { "code": "L144", "title": ".NET(9): 构建WEB API项目相关技术 - Entity Framework Core，Linq，Sweager，nlog", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

.NET(9): 构建WEB API项目相关技术 - Entity Framework Core，Linq，Sweager，nlog

", "_id": "69e329779f9cc30e74197a30" }, { "code": "L145", "title": ".NET(10): 构建WEB API项目相关技术 - Web API认证与授权（JWT Authentication & RBAC Authorization）", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

.NET(10): 构建WEB API项目相关技术 - Web API认证与授权（JWT Authentication & RBAC Authorization）

", "_id": "69e329789f9cc30e74197a39" }, { "code": "L146", "title": "Tutorial 17（.NET）", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69e329789f9cc30e74197a44" }, { "code": "L147", "title": "手把手教你运营 LinkedIn", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

\"LinkedIn 职业建设：完善个人资料与网络拓展\"

维护完整、专业的 LinkedIn 个人资料：指导您如何创建和维护一个展现您职业经历、技能和成就的专业 LinkedIn 资料。这包括头像选择、经历描述、技能展示和获取推荐等关键元素。
加入与行业和兴趣相关的 LinkedIn 群组：教您如何找到和加入与您的职业领域和兴趣相关的 LinkedIn 群组，以便进行行业交流、拓展职业网络和获取行业最新动态。

", "_id": "68ad66b46c178e09a0e064fa" }, { "code": "L148", "title": "AI in Programming Workshop", "type": "Lesson", "isLive": false, "duration": 150, "steps": [], "labs": [], "learns": [], "description": "

AI in Programming Workshop

", "_id": "68b7eb39dc96666921f1330a" }, { "code": "L149", "title": "AI in Programming Workshop", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

AI in Programming Workshop

", "_id": "68c394f7715ffd88cd012686" }, { "code": "L150", "title": "如何撰写IT专业简历", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

清晰的格式和布局：使用易于阅读的字体和清晰的布局。保持简历的长度适中，通常不超过两页。
个人信息和联系方式：包括你的姓名、职业头衔（如软件工程师、系统管理员等）、联系电话、电子邮箱和 LinkedIn 个人页面链接。
专业摘要或目标声明：简洁地概述你的职业背景、技能和你寻求的职位类型。这部分应该具有吸引力且针对你申请的职位量身定制。
技术技能：明确列出你的技术技能，如编程语言（例如 Java、Python）、框架（如 Spring、React）、数据库（如 MySQL、MongoDB）和工具（如 Git、Docker）。根据求职职位的要求来调整技能列表。
工作经验：按时间顺序列出你的工作经历，包括公司名称、职位、工作时间和职责描述。突出具体成就和使用的技术。
项目经历：如果你有相关的项目经验（包括学校项目、个人项目或自由职业项目），请列出来，说明你的角色、使用的技术和项目成果。
教育背景：提供你的最高学历信息，包括学校名称、学位、专业和毕业时间。如果你是新毕业生，可以更详细地说明你的教育背景。
证书和培训：如果你有相关的行业证书（如 AWS Certified Solutions Architect、Cisco 的 CCNA）或完成了重要的专业培训，务必列出。
其他信息：如语言能力、志愿者经验、获奖情况等，如果它们对你申请的职位有帮助，可以选择性地加入。
定制你的简历：针对每个职位调整你的简历，确保它符合职位描述中的关键字和要求。
校对和审核：在提交前，请仔细校对你的简历，确保没有拼写和语法错误。有可能的话，让你的同事或朋友帮你复查。

", "_id": "68f9d62e3c7f6564ce3e46fd" }, { "code": "L151", "title": "Vibe Coding", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69411cafbc0df65b18928b99" } ] }, { "name": "AI Web全栈班28期Node.js方向", "color": "#f59e0b", "summary": "", "test": { "questions": 0, "passRate": 0, "unlocks": "" }, "lessons": [ { "code": "L01", "title": "课前须知", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

课前须知：

欢迎来到Web全栈开发课程！为了帮助大家更好地投入学习并取得最佳效果，我们特别准备了以下课前须知，请仔细阅读：

预习材料：建议同学们提前自学W3Cschool中的HTML、CSS和JavaScript部分内容，多加练习可以帮助你更好地理解课堂内容。
课堂设备准备：为了提高学习效率，建议大家在上课时使用多个屏幕。你可以通过外接显示器或使用iPad来播放课程视频，同时在电脑端进行代码练习和做笔记，这样的方式将帮助你更好地掌握课程内容。
做笔记的重要性：良好的文档管理能力是成为专业人士的重要技能之一。上课时建议大家积极做笔记，可以在匠人课堂的线上平台完成笔记记录，也可以选择私下整理笔记。
Tutorial 环节：本课程设置了专门的Tutorial环节，旨在为大家解答学习中的疑惑。请充分利用这个时间段，解决你在学习中遇到的问题。
实践至上：学习IT技能的最佳方法就是多加实践。请勇敢迈出编写代码的第一步，只要不断练习和动手操作，你离成功就不远了。
积极提问：由于课程采用线上教学模式，老师不在身边，因此在遇到问题时，请务必通过分享屏幕或截屏的方式向老师提问，这样有助于老师更准确地理解你的问题并提供帮助。

期待大家在这门课程中有所收获，并取得优异的成绩！如果有任何疑问，请随时提问，老师们会在第一时间为你解答。让我们一起努力，迈向成为全栈开发工程师的目标！

", "_id": "68f7497c7c93be3ff4bad76c" }, { "code": "L02", "title": "课前准备", "type": "Information", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

为确保同学们在全栈开发课程中获得最佳学习体验，请参考以下准备指南：

基础知识预习：建议您在正式课程开始前，访问 W3Schools 等在线资源，自学 HTML、CSS 和 JavaScript 等基础知识。多次复习这些基本概念将为您加入全栈班级打下坚实的基础。
课前准备：请务必查阅我们为您准备的 PPT，以便做好充分的课前准备。这将帮助您更好地理解即将学习的内容。
课程笔记和项目：
课程笔记可在此处查看： https://github.com/australiaitgroup/full-stack-bootcamp-wiki
我们的课程包括三个实践项目，您可以在这里了解更多信息：https://github.com/australiaitgroup/jr-full-stack-projects
编辑器工具：您可以根据个人喜好选择任意一款代码编辑器，如 VS Code、Webstorm、Intellij 等。
Node.js 安装：请自行安装 16 版本以上的 Node.js LTS（长期支持）版本。
有 Mac 电脑的同学可以下载 Xcode，并且安装。
CareerMate AI设计：https://scene.zeplin.io/project/6912d1514326499fef4cd161

我们期待着与你在全栈班的旅程中携手前行，并助你成为一名出色的全栈开发者！

", "_id": "68f7497c7c93be3ff4bad76d" }, { "code": "L03", "title": "开营仪式 & 职业路线图：从AI学习者到AI工程师", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

AI Engineer 职业路线图与能力结构
- 拆解 AI Engineer 的“五维能力”：
  - Full-stack 基础（前端/后端/API/数据库/工程协作）
  - Prompt Engineering
  - AI Engineering（LLM 接入、RAG/Agent 工作流）
  - Cloud 部署能力
  - Data Thinking**
- 说明这些能力如何对应澳洲真实岗位与面试要求，帮助你识别自身优势/短板与阶段性重点。
本期项目主线与 Project-Based Learning 方法
- 介绍 CareerMate AI 的最终交付目标与学习路线。
- 强调课堂以“跟着项目一步步交付”为核心；理论知识通过课后录屏/视频补充，确保每节课都有可见代码产出与可展示成果。
- 需要提前准备好ChatGPT Pro或者Claude Pro
Agile & Kanban 学习底座
- 讲清为什么用 Agile 推进复杂项目：拆需求、写 User Story、设定验收标准与 DoD（Definition of Done）。
- 演示 Kanban 学习流程：后续每节课都会拆成任务卡，同学像真实团队成员一样领任务、提交代码/PR、持续迭代。
CareerMate AI设计链接： https://scene.zeplin.io/project/6912d1514326499fef4cd161

", "_id": "68f7497c7c93be3ff4bad76e" }, { "code": "L04", "title": "学习平台使用指南", "type": "Lesson", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

你今天能学到什么

通过这一节，你会掌握：

怎么看课表、找上课入口
怎么快速找到课程资料
怎么看课程回放、补课
平台里还有哪些学习资源能帮你提分/提能力
怎么用 Jobpin AI 简历生成器做一份专业简历（用于找实习/工作）

", "_id": "68f7497c7c93be3ff4bad76f" }, { "code": "L05", "title": "HTML&CSS的奥秘", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

网页的心跳:网页如何呈现给用户

网页旅程:探究一个网页如何从服务器传输到你的屏幕的背后原理。
HTML标签揭秘:网络的基石。熟悉最常用的标签并理解它们的功能。

深入HTML的构架

HTML结构:学习HTML的基本框架和其重要性。
头部(Head)解析:头部标签里包含了什么?为什么它是如此重要?
HTML的观众:HTML是为了人类还是机器而创建的？或者两者兼而有之？
元素之间的区别:什么是Block元素?什么是Inline元素?为什么需要区分?
常用标签探讨:深入了解和实践常用的HTML标签。
标签的语义性:为什么选择正确的标签很重要？如何提高代码的可读性和无障碍访问性。

HTML的其他要素

HTML注释的艺术:为什么注释是重要的，以及如何正确地使用它们。
跨浏览器的兼容性:在不同的浏览器上，为什么同一代码会显示不同的样子？如何确保你的代码对所有用户都是友好的？

现代HTML5新增特性

新的语义标签:如<article>, <section>, <nav>, <header>, <footer>等。
多媒体标签:如何使用<audio>和<video>标签嵌入音频和视频。

表单与用户互动

表单基础:输入类型、标签和属性的详细介绍。
数据验证:如何使用HTML自带的验证功能确保用户输入的数据有效。

网页的布局基础

Box Model:详细解析边距、边框、填充和内容如何共同作用。
Position:学习static、relative、absolute和fixed定位的基本知识。

响应式Web设计入门

Viewport:什么是Viewport？为什么它对移动设备如此重要？
Media Query:基础介绍，如何根据不同的设备和屏幕尺寸应用不同的CSS样式。

与其他技术的交互

嵌入JavaScript:简单介绍如何在HTML中使用JavaScript增强互动。

布置第一个作业：registration_form

", "_id": "68f7497c7c93be3ff4bad770" }, { "code": "L06", "title": "HTML&CSS的奥秘: Assignment 01", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

创建Registration Form

作业背景：

网页表单是任何交互性网站的核心部分，无论是注册、登录、提问还是购物，表单都扮演了关键角色。为了强化你对HTML和基础CSS的理解，我们为你设计了这个作业，让你从实践中学习。

作业要求：

表单结构：你的表单应该至少包含以下字段：

First Name (text input field)
Last Name (text input field)
Email Address (appropriate input type)
Password (password input field with appropriate attributes to ensure security)
Confirm Password (password input field)
Date of Birth (date picker)
Gender (radio buttons: Male/Female/Other)
About Me (textarea)
Choose Your Profession (dropdown list with options like \"Web Development\", \"Data Analytics\", \"UI/UX Design\", etc.)

布局和样式：

使用CSS为你的表单元素添加基本样式，如边框、背景颜色、文本颜色等。
确保所有元素在各种设备和屏幕尺寸上都有清晰的布局和良好的可读性。
考虑元素间的间距，确保表单整体布局美观。

交互：

为提交按钮添加hover效果。
使用HTML5验证功能确保在提交之前填写了所有必需字段。
确保电子邮件和密码字段有适当的格式限制。

代码清晰性：确保你的代码结构清晰，HTML和CSS均应有合适的注释说明。

作业提交：

方式一：GitHub链接提交

将你的HTML和CSS 文件上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

将你的HTML和CSS代码保存在一个名为 \"Registration_Form\" 的文件夹中；
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。

请确保提交的代码结构完整、清晰，并能够正常运行。

参考UI

", "_id": "68f7497c7c93be3ff4bad771" }, { "code": "L07", "title": "HTML&CSS (Part 2)", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

CSS概念

定义：CSS(级联样式表)是用来装饰和布局网页的语言。
作用：让网页内容更加美观，为HTML元素设置样式。

Emmet语法

定义：一个高效的编码快捷工具，帮助快速编写HTML/CSS。
示例：输入ul>li*5后，可快速展开为5个列表项的无序列表。

选择器的种类及其作用

标签选择器：针对特定HTML标签应用样式。
类选择器：一个或多个HTML元素的自定义样式。例如，.classname。
类选择器多类名使用：一个元素可以应用多个类名，例如<div class=\"class1 class2\">。
ID选择器：针对特定ID的HTML元素应用样式。例如，#idname。
通配符选择器(``)：选取所有元素应用统一样式。

CSS字体与文本属性

字体属性：如font-family,font-size,font-weight等。
复合属性：例如font:12px Arial,sans-serif;可以一次性设置多个字体相关的属性。
文本样式：如text-align,text-decoration,text-transform等用于控制文本的显示效果。

CSS样式表的种类

内部样式表：直接在HTML文件的<head>中使用<style>标签。
行内样式：直接在HTML元素上使用style属性。
外部样式表：通过.css文件链接到HTML，使样式与内容分离。

选择器的进阶使用

后代选择器：如div p选择所有div内的p元素。
子元素选择器：如div>p只选择div的直接子元素p。
并集选择器：例如h1,h2,h3可以同时为多个标签设置样式。

链接伪类选择器

如:hover,:active,:visited等，用于定义链接或其他元素在不同状态下的样式。

元素显示模式

行内元素：如span，不独占一行。
块元素：如div，独占一行。
元素模式转化：使用display属性，如display:block;或display:inline;。

背景属性(background)

如background-color,background-image,background-repeat等，用于设置元素的背景。

CSS的三大特性

层叠性：当有多个相互冲突的样式规则时，哪一个会生效。
继承性：某些样式会被子元素继承。
优先级&权重叠加：如!important,选择器的权重等。

CSS盒模型(Box Model)

包括：内容(content),填充(padding),边框(border),外边距(margin)。

边距的特性

Margin水平居中：如margin:0 auto;可以使块元素在容器中水平居中。
Margin合并塌陷：当两个垂直边距相遇时，它们将形成一个边距。

Flex布局

介绍：一个为设计复杂布局而生的模型，主要用于调整元素在不同设备和屏幕大小上的显示。
基本概念：如flex-container,flex-item,justify-content,align-items等。

Flex属性

如flex-grow,flex-shrink,flex-basis等，用于控制flex容器内元素的大小和排列。

", "_id": "68f7497c7c93be3ff4bad772" }, { "code": "L08", "title": "HTML&CSS (Part 2): Assignment 02", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业背景：

卡片式设计（Card UI Design）是现代Web设计中常见的一种模式，广泛用于产品展示、新闻摘要、个人资料等。此次作业，你将会获得一些预先设计好的Card UI Design图。你的任务是使用HTML和CSS来实现这些设计，将其从静态图像转变为实际的Web元素。

选择一个提供的UI设计，完成作业。

参考图一：

参考图二：

作业要求：

精确还原：尽量确保你的代码实现与给定的UI设计图在视觉上相匹配，包括颜色、尺寸、字体和间距。

响应式设计：尽管设计图可能是针对特定的屏幕尺寸，但你需要确保你的卡片设计在各种设备和屏幕尺寸上都能正常显示。

使用选择器和属性：你应该在CSS中应用至少以下选择器和属性：

标签选择器、类选择器、ID选择器。
文本样式、背景属性、padding、margin、flexbox。

代码清晰性：代码应该是清晰的、整洁的，并且有适当的注释。

交互效果：考虑为你的卡片添加一些基本的交互效果，如hover状态。

作业提交：

方式一：GitHub链接提交

将你的HTML和CSS 文件上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

将你的HTML和CSS代码保存在一个名为 \"Card_UI_Implementation\" 的文件夹中；确保所有必要的资源（如图片、字体）都已包含在此文件夹中，并使用相对路径链接到你的HTML中。
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。

请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "68f7497c7c93be3ff4bad773" }, { "code": "L09", "title": "Lab(1)：使用Chrome Debugger和实现Responsive List", "type": "Lab", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

掌握 Chrome Debugger

介绍 Chrome Debugger: 简要介绍 Chrome Debugger 的功能和它在前端开发中的重要性。
基本操作:
打开和导航 Chrome DevTools。
学习使用 Elements 面板来检查和修改 HTML/CSS。
使用 Console 面板进行 JavaScript 调试。
断点调试:
设置和管理断点。
使用 Watch 表达式监视变量。
了解调用栈和事件监听器。
网络和性能分析:
使用 Network 面板分析资源加载情况。
使用面板进行页面渲染性能分析。

实现响应式有序列表页面

页面设计要求:
设计一个有序列表，展示主题内容。
列表应具备基本的样式美化。
实现响应式特性:
为不同屏幕尺寸实现不同的布局和样式。
测试和调试:
使用 Chrome Debugger 测试页面在不同设备上的表现。
调整媒体查询和 CSS 以修复任何响应式问题。

", "_id": "68f7497c7c93be3ff4bad775" }, { "code": "L10", "title": "CSS & Sass", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Card Design作业评议与SVG编辑

回顾与讨论学生提交的card design作业。
如何编辑SVG图像以增强设计效果。

box-sizing的实际应用

解释box-sizing属性如何影响元素的宽高计算。
展示content-box与border-box之间的区别。

CSS长度单位探讨

绝对单位：如px, pt, cm等。
相对单位：如em, rem, vw, vh等。

文本溢出处理

了解`word-wrap`和`word-break`属性如何帮助控制文本溢出。

伪类与伪元素的使用

如:hover, ::before, ::after等。
演示如何使用它们增强页面样式和效果。

float的应用技巧

介绍float属性的常见用途，如创建多列布局或水平菜单。

选择器的特异性 (specificity)

讲解如何计算选择器的权重，以及为何某些样式没有被应用。

响应式设计基础

为什么响应式设计是必要的。
如何使用媒体查询创建适应不同屏幕大小的布局。

Bootstrap与Semantic UI

简介Bootstrap，展示如何使用Bootstrap实现响应式设计。
介绍Semantic UI框架并比较其与Bootstrap的异同。

CSS预处理器简介:

什么是Sass、Less等预处理器？为什么它们在现代网页开发中很有用？

CSS的挑战与Sass解决方案

讨论在大型项目中CSS可能面临的问题。
介绍Sass (SCSS) 如何简化CSS编写，以及如何使用变量、嵌套等功能。

深入Flexbox

了解Flexbox如何解决传统布局问题。
探索`flex`, `flex-grow`, `flex-shrink`等属性的使用。

UI设计原则与组件库

学习创建出色UI的基本原则。
介绍流行的组件库，如Material-UI或Ant Design。
展示个人网站设计案例，启发学生的设计灵感。

作业指导

要求使用本节课学到的技能完成四个Card布局。

", "_id": "68f7497c7c93be3ff4bad776" }, { "code": "L11", "title": "Lab(2):使用Grid和Flexbox实现卡片布局", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

CSS Grid 布局基础

构建网格系统:

创建一个简单的网格布局，定义列和行。
探索 grid-template-areas 和 grid-template-columns 的使用。

响应式网格:

使用媒体查询调整网格布局。
实践如何在不同屏幕尺寸下重新排列网格项。

Flexbox 卡片布局

创建卡片组件:

设计一个简单的卡片组件，包含图片和文本。
应用 Flexbox 创建卡片的标题、内容和动作区域。

卡片布局的响应式设计:

使卡片在不同设备上以不同方式排列（如单列或多列布局）。
调整卡片内容的排列，确保在所有设备上都易于阅读。

", "_id": "68f7497c7c93be3ff4bad777" }, { "code": "L12", "title": "JavaScript 入门", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

JavaScript的奇幻之旅：

跟随时间的轨迹，了解JavaScript如何从一个小小的脚本语言成为Web的重要组成部分。
理解其如何成为Web的核心语言。
体验Node.js的魅力，看看如何轻松地在这个环境中运行你的JS代码。

探索js的秘密：

深入了解JavaScript的独特Data Types，感知数据的生命力。
认识变量命名背后的Naming Conventions，并感受到Hoisting带来的惊喜。

动态的数据操作：

学习Operators的秘密语言，看它们如何让数据生动起来。
了解==与===的精确差异
深入探讨JavaScript的Type Conversion，体验其动态特性。
揭示数字计算中的Precision问题，学会安全的数据处理技巧。

数组的神秘世界：

从创建到访问，全方位认识Arrays。
探索数组的神奇方法，无论是sort还是filter，并学会使用break和continue来调控循环的行为。

控制代码的流程：

体验如何使用Conditional Statements让代码做出决策。
利用Loops让魔法反复施放，直到完成神奇的任务。

Dive into Functions:

学习如何将神奇的咒语封装成Functions，随时随地召唤。
定义和调用函数，了解Scope和参数传递的机制。
介绍Strict Mode，为什么它是良好编程实践的一部分。

Objects：模型化复杂的现实世界

深入了解Objects，看它们如何代表复杂的事物。
体验Objects和Arrays的冒险，了解它们在JavaScript世界中的地位。

最佳实践和注意事项：

深入了解Strict Mode，掌握其在现代JavaScript开发中的重要性。
认识一些常见的JavaScript陷阱，并学会如何避免它们。

", "_id": "68f7497c7c93be3ff4bad778" }, { "code": "L13", "title": "JavaScript Assignment 03", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业目标:

通过这次的作业，你将会练习JavaScript中的基本数据类型、数组、对象、条件语句、循环语句和函数的应用。

作业要求:

数据与变量：

创建一个购物清单数组，例如:

数组应用：

向购物清单中添加两样物品，并输出更新后的清单。

从购物清单中删除最后一项物品，并输出结果。

条件与循环：

创建一个函数，当购物清单中的物品超过5项时，在控制台输出\"你的购物车满了\"。

使用循环语句遍历购物清单，将每一项物品在控制台上以编号的形式输出。例如：

函数与对象：

创建一个函数，该函数接受物品名称作为参数，并返回该物品是否在购物清单中。

创建一个购物物品对象，其中包括物品名称、价格和数量。例如:

作业提交：

方式一：GitHub链接提交

将你的JavaScript 文件（如：ShoppingList.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

方式二：ZIP文件提交

请将你的代码保存在一个名为 \"ShoppingList\" 的文件夹中；
将文件夹压缩为 ZIP 文件；
上传zip文件，点击“确认提交”，提交成功。

请确保提交的代码结构完整、清晰，并能够正常运行。

", "_id": "68f7497c7c93be3ff4bad779" }, { "code": "L14", "title": "Lab(3):创建Responsive定价卡片", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Lab: 创建响应式定价卡片

设计定价卡片:

分析上传的定价表格设计。
创建基础的 HTML 结构。

实现基础样式:

应用基础 CSS 样式来模仿上传的设计。
使用 Flexbox 或 Grid 系统来对卡片进行布局。

增加响应式特性:

使用媒体查询创建多个断点，以适配不同的屏幕尺寸。
调整定价卡片的布局，使其在小屏幕上堆叠，在大屏幕上并排显示。

交互式元素:

为购买按钮添加 :hover 和 :active 伪类样式。
实现简单的 JavaScript 逻辑，模拟购买过程的响应。

", "_id": "68f7497c7c93be3ff4bad77b" }, { "code": "L15", "title": "Git Introduction", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

探索版本控制的魔法

为什么我们都爱版本控制？
分布式(Distributed) vs 集中式(Centralized)：Git的独特之处。
什么是分布式版本控制系统
主流的 git 系统介绍

开启你的Git旅程

一步步引导你安装和配置Git。
为Git设定你的身份：告诉Git你是谁。
初始化Git空间: **git init**的魔力。
mkdir：快速创建你的项目目录。

创建并驾驭你的代码宝库（Repository）

初始化你的第一个Git仓库。
如何管理和跟踪你的代码变更。

保护与跟踪你的代码

如何安全地保存你的代码更改？
了解**add**, **commit**以及它们如何帮助你管理更改。
深入理解**git log**：用美化的log追溯你的代码历史。
.gitignore：掌握哪些文件不应纳入版本控制。
探索日常工作中使用Git的标准流程。
远程仓库(Remote Repository)的创建与管理：掌握**clone**, push, pull。

Sourcetree：让Git操作可视化

为什么需要图形化工具？
如何使用Sourcetree提高工作效率。

出错了怎么办：撤回与修复

掌握reset, revert, amend：让你的代码时光倒流。
checkout和stash：两种保存和切换的策略，它们的不同之处。

更进一步：分支管理与合作

学习如何merge、处理代码冲突。
rebase：为什么和何时使用它。
pull request与代码审查：如何高效、规范地合作。

当代码世界相撞：冲突(Conflict)解决大师

当代码出现纷争，我们该如何和平解决？
使用rebase与merge的策略，成为解决冲突的高手。

Git的小贴士和技巧

介绍神奇的.gitignore文件：让某些文件“隐形”。
快速、有效地查看你的代码历史。

Git遇见GitHub：开放的代码舞台

GitHub: 一个开发者的乐园。
如何在GitHub上展示你的才华，与全球开发者共舞。

Links:

Git client: https://git-scm.com/
SourceTree: https://www.sourcetreeapp.com/
Visualizing Git: http://git-school.github.io/visualizing-git/#free
Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup
Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

", "_id": "68f7497c7c93be3ff4bad77c" }, { "code": "L16", "title": "Git Introduction Assignment 04", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Git 简答作业
Git 练习作业

作业提交：

在你的GitHub上面创建一个仓库，上传GitHub仓库链接，点击“确认提交”，提交成功。

", "_id": "68f7497c7c93be3ff4bad77d" }, { "code": "L17", "title": "Lab(4): Git实践练习", "type": "Lab", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Git 基础

安装 Git:

确保所有学员都安装了 Git。
通过运行 git --version 来验证安装。

配置 Git 环境:

设置用户的名字和电子邮件地址。

创建本地仓库

初始化仓库:

使用 git init 创建一个新的本地 git 仓库。

文件操作:

创建新文件，学习 git status 命令的用法。
使用 git add 将文件添加到暂存区。

提交更改:

使用 git commit 提交暂存区的更改。

分支管理

创建和合并分支:

学习如何使用 git branch 创建分支。
使用 git checkout 切换分支。
通过 git merge 将分支更改合并回主分支。

解决冲突:

故意制造文件冲突，练习冲突解决。

远程仓库的使用

连接到远程仓库:

设置一个远程仓库，如 GitHub 或 GitLab。
学习 git remote 和 git push 命令。

从远程仓库拉取:

使用 git pull 或 git fetch 与 git merge 从远程仓库获取更新。

使用 .gitignore 文件

配置 . gitignore:

创建一个 .gitignore 文件并配置它以忽略特定文件。

标签和日志

使用标签:

学习如何使用 git tag 为提交打标签。

查看提交历史:

使用 git log 查看详细的提交历史。

", "_id": "68f7497c7c93be3ff4bad77e" }, { "code": "L18", "title": "探索现代JavaScript —— ES6 (ECMAScript 2015)之魅力", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

闪回与展望: ES6简介

老师自我介绍
ES6 / ECMAScript 2015：现代前端的基石
ES5与ES6：旧时魔法与新时力量
谁在使用ES6？浏览器与Node.js的亲密拥抱

重新定义\"变量\"：let, const

为何var不再流行？
const: 不仅仅是常量

文字游戏: 模板字符串 (Template Literals)

无痛多行与字符串嵌入 Seamless multi-line support & string interpolation
动态字符串制造器 • Dynamic string generation

赋值艺术: 解构 (Destructuring)

数组、对象，一切尽在掌握
函数参数的魔法展示
从对象和数组中轻松提取信息，让数据处理变得更高效

对象的新姿态: 增强的对象字面量

简洁、直观、强大
动态属性：令人惊叹的新技巧

函数进化论: 箭头函数 (Arrow Functions)

this 的革命
简洁与力量的完美结合

展开与收纳: 扩展操作符 (Spread & Rest)

数组、对象的新演绎
收纳与释放的双重魔法

可选与默认: 参数默认值

告别undefined
动态、简洁、高效

异步的新篇章: Promises

回调地狱不再有
编程的艺术与优雅

数据的新世界：Set & Map

集合与映射：新玩家的加入
高效、强大、无与伦比

遍历与创新: 迭代器 (Iterators) 与生成器 (Generators)

数据的流动与控制
迭代的未来与创新

", "_id": "68f7497c7c93be3ff4bad77f" }, { "code": "L19", "title": "ES6 Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

作业1. Let, Const 和 Var

任务: 将以下代码重写为使用 let 和 const 代替 var。解释为什么在每种情况下 let 或 const 更合适。

作业2. 箭头函数 (Arrow Functions)

任务: 将以下函数转换为箭头函数。然后解释箭头函数如何与常规函数不同地处理 this 关键字。

作业3: 模板字面量 (Template Literals)

任务: 使用模板字面量重写以下字符串拼接代码。在字符串中添加一个新行。

作业4.解构赋值 (Destructuring)

任务: 使用解构赋值从 person 对象中提取 name 和 age 属性。然后编写一个函数，在参数列表中解构对象的属性。

作业5. 默认参数（Default Parameters）

任务：编写一个计算机行面积的函数。如果没有提供高度，假设它是一个正方形。使用默认参数为高度设置默认值。

作业6. Rest/Spread 运算符

任务: 使用 Rest 运算符创建一个函数，能够将任意数量的参数相加。然后使用 Spread 运算符合并两个数组。

作业提交：

将你的JavaScript 文件（如：Homework_ES6.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "68f7497c7c93be3ff4bad780" }, { "code": "L20", "title": "ES6进阶技巧与实践", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Promises & Async/Await：轻松应对异步挑战！

深入了解Promises：利用then()精简代码、用catch()处理异常，以及finally()的应用。
实际场景中的Promise链式调用
异步编程新姿势：使用async/await实现更简洁、易读的代码。
👇随堂练习

Destructuring（解构赋值）：一步到位，快速提取值！

从对象和数组中轻松提取信息，让数据处理变得更高效。
👇随堂练习

Spread & Rest Operators（展开和剩余操作符）：更便捷地操作数据！

如何利用...操作符展开数组和对象。
如何收集函数参数。
👇随堂练习

Enhanced Object Literals（增强的对象字面量）：定义对象，更佳清晰！

简化属性和方法的定义。
动态属性名。
👇随堂练习

Iterators & Generators（迭代器和生成器）：掌控数据流！

什么是Iterators？如何自定义迭代。
创造自己的生成器函数，了解其强大之处。
👇随堂练习

New Data Structures：Map&Set—探索新的数据结构！

了解Map和Set的应用，它们与传统对象和数组的差异。
高效地存储唯一值。
👇随堂练习

Modules（模块化）：组织和重用代码的新方式！

ES6模块化的基本概念。
如何import和export模块。
👇随堂练习

Symbols & Well-Known Symbols

Symbol的高级应用
内置Symbols的实用性
👇随堂练习

", "_id": "68f7497c7c93be3ff4bad782" }, { "code": "L21", "title": "ES6 (Part2) & TypeScript Assignment", "type": "Assignment", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Post-Lesson Exercise: Practicing Callbacks, Promises, and Async/Await

Objective: This exercise is designed to help students reinforce their understanding of asynchronous programming in JavaScript by practicing callbacks, promises, and async/await.

Part 1: Callbacks

Exercise Task:

Create a function fetchData that simulates fetching data from a server. This function should take two arguments: a url (string) and a callback function. Use setTimeout to simulate a delay of 2 seconds before calling the callback function with the fetched data.

Instructions:

The fetchData function should print \"Fetching data from [url]...\" when it starts.
After 2 seconds, it should call the callback function with the data: \"Data from [url]\".

Part 2: Promises

Exercise Task:

Refactor the fetchData function to return a promise instead of using a callback.

Instructions:

The function should still simulate a 2-second delay before resolving the promise with the data: \"Data from [url]\".
If the url is empty or not provided, reject the promise with an error message: \"Invalid URL\".

Part 3: Async/Await

Exercise Task:

Refactor the code to use async/await to fetch data and handle errors.

Instructions:

Create an async function named loadData that calls fetchData with a given url.
Use try/catch to handle any errors that occur during the data fetching process.

After-Class Homework: Learning the Basics of TypeScript

Objective:

This homework is designed to help students get started with TypeScript, a strongly typed superset of JavaScript. Students will learn about basic TypeScript concepts, including types, interfaces, classes, and functions.

Part 1: Setting Up TypeScript

Exercise Task:

Install TypeScript on your machine and set up a new TypeScript project.

Instructions:

Use npm (Node Package Manager) to install TypeScript globally
Create a new project directory and initialize it with a tsconfig.json file
Create a new TypeScript file called index.ts in the project directory.

Part 2: Basic Type Annotations

Exercise Task:

Write a function in index.ts that takes two numbers as parameters and returns their sum. Use TypeScript to annotate the types of the parameters and the return value.

Instructions:

Define the function add with type annotations.
Compile the TypeScript file to JavaScript using the tsc command and run the resulting JavaScript file.

Part 3: Working with Interfaces

Exercise Task:

Define an interface Person with properties name (string) and age (number). Create a function greet that takes a Person object as a parameter and prints a greeting message.

Instructions:

Define the Person interface and use it to type the parameter of the greet function.
Create a Person object and pass it to the greet function.

作业提交：

将你的JavaScript 文件（如：Homework_ES6.js）上传到 GitHub 仓库，确保项目结构清晰且完整；
上传可访问的仓库链接，点击“确认提交”，提交成功。

", "_id": "68f7497c7c93be3ff4bad783" }, { "code": "L22", "title": "Lab(5):构建一个JavaScript天气应用", "type": "Lab", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

目标概述:

介绍实验室的目标：构建一个能够展示选定城市天气的应用。

HTML 布局:

创建一个表单以接收用户输入的城市名。
定义显示天气信息的元素。

CSS 样式化:

应用样式以匹配您提供的设计。
确保应用是响应式的，能在不同设备上良好显示。

JavaScript 交互:

编写 JavaScript 来处理表单提交，并阻止默认行为。
使用 fetch 函数从天气 API 获取数据。

数据处理与展示:

解析 API 返回的 JSON 数据。
将天气数据更新到页面上。

", "_id": "68f7497c7c93be3ff4bad784" }, { "code": "L23", "title": "Lab(6):使用Promise和ES6创建进度条", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

进度条 UI

HTML 结构:

创建进度条的基础 HTML 结构，包括步骤指示和前进/后退按钮。

CSS 样式化:

应用样式以匹配您提供的设计，包括圆形步骤指示器和连接线。

动态样式:

使用 CSS 类来定义进度条的不同状态，例如当前步骤、完成步骤和待完成步骤。

JavaScript 逻辑

设置 Promise:

编写 JavaScript 函数来模拟异步操作，返回一个 Promise。
使用 setTimeout 来模拟操作延迟。

连接 UI 和 Promise:

当用户点击“Next”时，启动一个异步操作，更新进度条状态。
当 Promise 解决时，进度条更新为下一个步骤。
当用户点击“Prev”时，进度条回退到上一个步骤。

", "_id": "68f7497c7c93be3ff4bad785" }, { "code": "L24", "title": "Technical SEO基础知识", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. SEO是什么，SEO是怎么工作的，影响SEO由哪四大要素影响

2. SEO用什么工具查看

3. Technical SEO具体如何进行有优化

4. 网页的结构应该如何进行优化

5. 面对SEO规则，HTML里如何进行优化，如何使用Canonical，301等

6. 怎样进行提升网站，Page Speed如何提升

", "_id": "68f7497c7c93be3ff4bad786" }, { "code": "L25", "title": "Node.js如何安装", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

To install Node.js, you can follow these general steps. The exact process may vary slightly depending on your operating system:

Windows or macOS

Download the Installer:
Go to the Node.js website.
Choose the version you need. The LTS (Long Term Support) version is recommended for most users, as it's more stable.
Run the Installer:
After downloading, run the installer.
Follow the installation prompts, including agreeing to the license agreement and choosing the installation location.
The installer typically includes Node.js and npm (Node Package Manager).
Verify Installation:
Open a command prompt (Windows) or terminal (macOS).
Type node -v and press Enter. This should display the Node.js version, confirming it's installed.
Type npm -v to check npm's version.

Linux

The process can vary based on the Linux distribution. Here are the steps for Ubuntu:

Update Package Index:

sudo apt update

Install Node.js:
You can install Node.js from the Ubuntu repository:

sudo apt install nodejs

For the latest version, you might prefer using a PPA (Personal Package Archive):

curl -sL <https://deb.nodesource.com/setup_16.x> | sudo -E bash -

sudo apt-get install -y nodejs

Verify Installation:
Check Node.js version:

node -v

Check npm version:

npm -v

Remember to replace 16.x with the version you want if you're using the PPA method. For other Linux distributions, the process will be similar but might require different commands to update packages or add repositories.

", "_id": "68f7497c7c93be3ff4bad789" }, { "code": "L26", "title": "React如何安装", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 安装、配置及创建项目教学文档

1. 环境要求

首先，确保您的开发环境包括以下：

Node.js：React 需要 Node.js 环境。请访问 Node.js 官网下载并安装最新版本。
npm（Node 包管理器）：通常会与 Node.js 一起安装。

2. 安装 Create React App

Create React App 是一个官方支持的方式，用于创建单页 React 应用程序。它提供了一个现代化的构建设置，无需配置。

在终端或命令提示符中运行以下命令来安装 Create React App：

npx create-react-app my-app

这将在当前目录下创建一个名为 my-app 的新目录。

3. 进入项目目录

安装完成后，进入项目目录：

cd my-app

4. 启动开发服务器

在项目目录中，运行以下命令启动开发服务器：

npm start

此命令将启动一个本地服务器，并在默认浏览器中打开 http://localhost:3000。当您对代码进行更改时，页面将实时重新加载。

5. 编辑 React 组件

打开项目文件夹，您会看到一些预创建的文件。最重要的是 src/App.js，这是您的 React 应用程序的主要组件。

您可以开始编辑 src/App.js，并在浏览器中看到您的更改。例如，尝试更改文本并保存文件，您的更改将立即反映在浏览器中。

6. 构建和部署

当您准备好将应用程序部署到生产环境时，运行以下命令以构建应用程序：

npm run build

这将在 build 目录中创建一个优化的生产构建。

7. 后续步骤

学习 React 基础：建议浏览 React 官方文档，了解更多关于 React 的知识。
组件编写：实践通过编写不同的组件来构建复杂的 UI。
状态管理：学习使用 React 的状态管理，例如使用 Hooks。
路由：如果您的应用需要导航，尝试使用如 react-router-dom 等库。

", "_id": "68f7497c7c93be3ff4bad78a" }, { "code": "L27", "title": "React项目快速上手", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React 框架的起源与版本演进历程：

介绍 React 框架的起源和发展历程，包括重要版本的发布和主要特性的改进。

快速上手 React：

配置开发环境：指导学生安装 Node.js 和 VS Code，以便开始 React 应用程序的开发。
快速上手 create-react-app：介绍 create-react-app 工具，以及如何使用它来快速创建 React 项目的基本结构。
体验 React 核心概念：通过编写简单的示例代码，让学生体验 JSX 语法以及 useState 和 useEffect 等 React 核心概念的使用。
拆分组件：引导学生学习如何将 React 应用程序拆分为可维护的组件，提高代码的复用性和可维护性。

", "_id": "68f7497c7c93be3ff4bad78b" }, { "code": "L28", "title": "React组件基础", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

组件基础：

用 SASS 与 Bootstrap 构建组件的外观：介绍如何利用 SASS 预处理器和 Bootstrap 框架来快速构建组件的外观和样式。
强大的模板语法 JSX：深入了解 JSX 语法的特点和优势，以及如何在 React 组件中编写 JSX 代码。
Props & State：解释组件中的 props 和 state 的概念，以及它们分别用于什么目的。
Props 与 State 的区别和联系：对比 props 和 state 的区别，以及它们之间的联系和作用范围。
组件间通讯：讨论不同组件之间如何进行通讯，包括父子组件通讯和兄弟组件通讯等方式。
综合实例：构建一个结构复杂的页面，通过实际例子来理解 React 切分组件的思想，以及如何合理组织组件结构和通讯。

", "_id": "68f7497c7c93be3ff4bad78c" }, { "code": "L29", "title": "React Router", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

快速上手 React Router:

探索 React Router，这个强大的库可让你构建单页应用程序的导航系统，快速开始你的路程。

嵌套路由:

深入了解嵌套路由，通过分层结构创建复杂的页面布局和导航。

HashRouter 与 BrowserRouter:

对比 HashRouter 和 BrowserRouter，了解它们之间的区别，以及何时使用哪一个来管理 URL。

React Router 运行机制:

深入理解 React Router 的内部机制，从路由匹配到组件渲染，掌握它如何使一切无缝运转。

", "_id": "68f7497c7c93be3ff4bad78d" }, { "code": "L30", "title": "React表单处理", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

非受控表单:

了解非受控表单，它们是表单元素的一种处理方式，适用于简单的表单，但缺乏状态控制和验证。

受控表单:

探索受控表单，这种表单通过React组件状态来控制表单元素的值和行为，使数据流更可控。

表单校验 (Form Validation):

学会如何对表单进行校验，确保用户输入的数据满足特定的要求，提高数据的有效性和安全性。

", "_id": "68f7497c7c93be3ff4bad78e" }, { "code": "L31", "title": "React服务端交互", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

典型交互方式：

探讨与服务器通信的经典方式，包括 Ajax、Fetch 和 Axios，并介绍它们各自的用途和优势。

快速上手 Axios：

学习如何迅速上手 Axios，了解其基本用法和常见配置，以及如何发起 HTTP 请求并处理响应。

拦截器处理通用操作：

了解如何使用 Axios 拦截器来处理通用的操作，如请求和响应的日志记录、身份验证、错误处理等。

封装可复用的 Axios 服务：

学会将 Axios 封装为可复用的服务，以便在整个应用程序中共享和维护一致的 HTTP 请求配置，提高代码的可维护性和可扩展性。

React 组件的生命周期：

理解 React 组件的生命周期方法，包括挂载、更新和卸载阶段，并学会如何在组件的生命周期中处理各种操作。

VDOM：

简要介绍虚拟 DOM（VDOM）的概念，以及其在 React 中的作用和优势，理解 VDOM 的工作原理。

类组件与函数式组件：

对比类组件和函数式组件的特点和用法，并解释为什么函数式组件越来越受欢迎。

复合组件：

学习如何使用复合组件将多个组件组合在一起，以构建更复杂和灵活的 UI。

高阶组件：

介绍高阶组件的概念和用法，以及如何使用高阶组件来增强组件的功能和复用性。

开源组件库与企业业务组件库：

探讨开源组件库的特点和优势，以及如何选择和使用适合项目需求的组件库；同时，讨论企业业务组件库的重要性和设计原则。

动态生成页面与 React 低代码：

简要介绍动态生成页面的概念和 React 低代码的特点，了解如何利用 React 技术栈实现动态页面和低代码开发。

", "_id": "68f7497c7c93be3ff4bad78f" }, { "code": "L32", "title": "React Hooks", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

React Hooks：

介绍 React 内置的 Hooks，如 useState 和 useEffect，并解释它们的作用和用法。
深入理解 useState Hook，包括如何在函数组件中管理状态并进行状态更新。
深入理解 useEffect Hook，包括如何处理副作用、订阅和取消订阅等操作。
学习如何自定义 Hooks，以便在应用程序中共享和重用状态逻辑。

用 useTranslation 钩子实现组件的 i18n：

探讨如何使用第三方库中提供的 useTranslation 钩子来实现组件的国际化（i18n），以支持多语言应用程序的开发。

状态管理：

理解状态管理的基本概念，包括状态、单一数据源、不可变性等。
介绍 React 内置的 Context API，以及如何使用 Context 在组件之间共享状态。
简要介绍 React Redux，作为一种常用的状态管理中间件，以及其与 Context 的区别和优势。

自动化测试：

学习如何进行单元测试，包括安装配置 Jest 测试框架和详解 Jasmine 语法。
学习如何进行集成测试，包括安装配置 Cypress 测试框架和运行集成测试用例。

", "_id": "68f7497c7c93be3ff4bad790" }, { "code": "L33", "title": "React基础(1) - 代码质量", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

代码规范的重要性
课堂实践：写出可读性高的代码 - Income Tax Calculator
写出符合人类思维方式的代码
代码质量的核心概念：可读性、可维护性、可扩展性
SOLID 原则
小练习：写出一个高质量的 getFlightsStops 函数

", "_id": "68f7497c7c93be3ff4bad791" }, { "code": "L34", "title": "React基础(2) - 为什么需要 React", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

传统开发 vs 组件化开发
React 的核心概念（声明式 UI、组件化、单向数据流）
用 JS 操作 DOM vs 用 React 渲染 UI（对比体验）

", "_id": "68f7497c7c93be3ff4bad793" }, { "code": "L35", "title": "利用AWS部署前端spa项目", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

利用AWS部署前端spa项目

", "_id": "68f7497c7c93be3ff4bad796" }, { "code": "L36", "title": "开发环境与工具", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

什么是打包工具？(Webpack)
Babel 介绍：JSX 如何转换成 JavaScript？
什么是脚手架？
创建第一个 React 项目（Vite）
小练习：用 Vite 启动一个 React 应用环境

", "_id": "68f7497c7c93be3ff4bad798" }, { "code": "L37", "title": "Lab(7):使用React和Hooks创建分页应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目初始化和组件结构

项目设置:

创建一个新的 React 应用。
设置项目的文件结构，包括组件和样式文件。

组件规划:

规划所需的组件，包括分页控件和文章列表。

构建静态组件

静态博客列表:

创建一个博客列表组件，该组件包含静态的文章数据。
应用基础的样式来匹配提供的截图设计。

分页控件:

创建一个分页控件组件，包括页码按钮。
样式化分页控件以提供反馈，如当前激活的页码。

添加动态功能

状态管理:

使用 useState Hook 来管理文章列表和当前页码的状态。

分页逻辑:

实现分页逻辑，以便在点击分页按钮时更新显示的文章列表。
使用 useEffect Hook 来处理组件的副作用，如 API 调用或数据过滤。

文章加载:

若有可用的 API，使用 fetch 来动态加载文章数据。
若没有 API，可以在本地状态中模拟一组文章数据。

", "_id": "68f7497c7c93be3ff4bad79a" }, { "code": "L38", "title": "React基础(3) - 开发环境与工具", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

什么是打包工具？(Webpack)
Babel 介绍：JSX 如何转换成 JavaScript？
什么是脚手架？
创建第一个 React 项目（Vite）
小练习：用 Vite 启动一个 React 应用环境

", "_id": "68f7497c7c93be3ff4bad79b" }, { "code": "L39", "title": "React基础(4) - 组件 & JSX 语法", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

JSX 语法规则
React 组件
如何在 JSX 里写 JavaScript？
组件的 Props（属性传递）
小练习：编写一个简单的 Button 组件，支持不同文本

", "_id": "68f7497c7c93be3ff4bad79c" }, { "code": "L40", "title": "Lab(8):使用React和localStorage构建笔记卡片应用", "type": "Lab", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

项目初始化和组件结构

项目初始化:

创建一个新的 React 应用并设置项目结构。
定义笔记卡片组件和笔记输入组件。

组件规划:

规划应用中的状态管理逻辑。
确定哪些组件需要内部状态，哪些需要应用范围的状态。

构建静态组件

笔记输入组件:

实现一个文本输入框，允许用户输入笔记内容。
添加一个“保存”按钮，用户点击后可以保存笔记。

笔记卡片组件:

创建一个显示笔记内容的卡片。
每个卡片上应有一个“删除”按钮，允许用户删除笔记。

添加动态功能

状态管理与 Hooks:

使用 useState Hook 管理笔记内容的状态。
使用 useEffect Hook 来监听 localStorage 中数据的变化。

实现笔记保存逻辑:

在用户点击“保存”按钮时，将新笔记保存到 localStorage。
保存后，自动在页面上展示新添加的笔记。

实现笔记删除逻辑:

当用户点击“删除”按钮时，从 localStorage 和页面上移除对应的笔记。

", "_id": "68f7497c7c93be3ff4bad79e" }, { "code": "L41", "title": "Node.js (1): 引领现代后端的黑马", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Node.js与JavaScript的闪耀时刻

为什么JavaScript不仅仅是浏览器的语言？
从浏览器到后端：Node.js的崛起与它的创始故事。

了解Node.js的特性与架构

事件驱动(Event-driven)、非阻塞I/O与高并发：Node.js的三大法宝。
事件循环(Event Loop)与异步编程：实现高效运行的秘密。

熟悉Node.js开发环境

如何配置一个高效的Node.js开发环境。
探索Node.js的命令行界面及其功能。
Node.js的版本和nvm
验证你的安装：编写你的第一个Node.js脚本。

Node.js中的模块系统

CommonJS规范简介。
如何在Node.js中使用require和module.exports。

熟悉Node.js的核心模块

文件系统fs：如何与服务器上的文件进行交互。
HTTP模块：启动你的第一个Node.js服务器。
其他内置模块：探索Node.js的强大生态系统。

搭建一个简单的webserver

创建一个简单的Node.js服务器，它可以返回\"Hello, World!\"到任何请求它的客户端。
加入一个路由，让服务器可以响应/aboutURL，返回\"About Us\"信息。

碰到bug如何解决

遇事不决consolelog
如何开启Debug模式

实践练习：HelloNode!

任务：基于我们刚刚创建的webserver和关于fs的使用，尝试写一个notetakingapp，只需要支持写入和读取两种功能

", "_id": "68f7497c7c93be3ff4bad79f" }, { "code": "L42", "title": "MongoDB面试真题: Weather App项目介绍", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目背景：

这个项目的灵感来源于MongoDB的面试题。在现代互联网应用中，与远程API的交互成为了一个关键技能。为了提高你的API交互技巧，我们为你设计了这个挑战：创建一个天气预报应用。

原始 MongoDB 面试项目题

The coding exercise we’d like to work on is building an app where you can input a city name to show the current weather in that city area and the forecast for the upcoming 3 days. You may use www.weatherapi.com, which provides a free API to query weather data. It does require signing up to generate an API key but there is an - https://www.weatherapi.com/api-explorer.aspx - that makes it easy to check the response.

You are free to use any frontend libraries to build this web application. Once you have built the application please send the code back to us in a .zip file (without any modules that can be fetched from the internet) so that we can clone the repository and check its functionality locally on our machine. Please provide some instructions on how to run it locally in the readme. Feel free to comment on the readme any design decisions or assumptions that were made while you built this application.

We will spend some time discussing your solution during the programming interview. Please treat this task like a feature you would build as an engineer using developer best practices and deploy in a production ready state.

Please ensure add some unit test & e2e test if possible.

项目要求：

核心功能：

允许用户输入城市名称。
显示该城市当前的天气情况。
提供未来三天的天气预报。

数据来源：请使用www.weatherapi.com。它提供了一个免费的API来查询天气数据。需要https://www.weatherapi.com/api-explorer.aspx 可以轻松检查响应。

技术栈选择：你可以自由选择任何前端库来构建此网络应用。

项目提交：

请将代码上传到github中（不包括可以从互联网获取的模块）并提交，这样我们可以Clone repo并在我们的机器上本地检查其功能。
在readme中提供关于如何在本地运行的说明。
在readme中，你可以评论在构建此应用程序时做出的任何设计决策或假设。

代码质量：我们希望你像处理真正的工程任务那样对待这个任务，使用开发者的最佳实践，并确保它处于生产就绪状态。

测试：请确保添加一些单元测试和e2e测试（如果可能的话）。

项目目标：

提高与API的交互能力。
熟悉前端框架和库的使用。
加强代码组织和架构设计技能。
提高测试驱动开发的能力

", "_id": "68f7497c7c93be3ff4bad7a0" }, { "code": "L43", "title": "Node.js (2) : API和RESTful API", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

深入理解URL结构

URL的组成部分与意义。
默认端口
query param
hashtag

HTTP请求与响应

HTTP请求/响应的基本结构。
HTTP方法概览：GET, POST, PUT, DELETE。
HTTP中的常用Header：Content-Type、**Cookie**等。
了解常见的HTTP状态码：200, 404, 500等。

数据传输格式 - JSON

什么是JSON
为什么用JSON

API与RESTful API

什么是API
RESTful 的含义与原则。
为什么 RESTful API 是构建现代 Web 应用的首选？
Restful API 设计规范
除了restful api，业界还有哪些常见的通讯方式

API中涉及到的authentication和authorization

什么是authentication和authorization
什么是token
token如何传递

Postman：API 开发者的利器

为什么我们需要Postman？
Postman的基本使用：发送请求、查看响应、组织你的测试API
环境变量
收藏夹功能

实践练习：调用第三方API

任务：运用postman来调用第三方API （newsapi和pocketmon）
学会阅读api文档和掌握postman的使用

", "_id": "68f7497c7c93be3ff4bad7a2" }, { "code": "L44", "title": "Working with API", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

一些网站的拥有者使用API，也就是应用程序编程接口，以便于数据提取。API充当了客户端（如你的计算机）与服务器之间的桥梁，使它们能够进行通信。客户端通过这座桥发送请求，服务器则以所需的数据进行响应。

想象一下这种用处：设想有两家公司，匠人学院和一个招聘网站，正在寻求合作。如果匠人学院想与招聘网站共享有关学生学习进度的最新信息，他们可以使用API。这样，招聘网站可以直接从匠人学院的服务器获取最新的学生数据。

这个过程涉及两个主要步骤：API请求和API响应。招聘网站通过API向匠人学院的服务器发送请求，之后服务器会以数据进行响应。

要将像OpenAI的GPT这样的基础模型集成到你的产品中，你需要连接OpenAI的API。这一连接对于发送请求和接收OpenAI服务的响应至关重要，让你可以在应用中使用他们的基础模型。掌握API的使用是AI开发者和工程师必备的另一项重要技能。

", "_id": "68f7497c7c93be3ff4bad7a3" }, { "code": "L45", "title": "Lab(9):使用React构建收支管理应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目初始化和规划

项目设置:

使用 create-react-app 初始化一个新的 React 应用。
设置项目结构，包括组件、上下文和 reducer 文件。

组件设计:

规划应用所需的组件，如余额显示、收支摘要、历史记录列表和新增交易表单。

构建静态组件

余额组件:

创建一个显示当前余额的组件。

收支摘要组件:

实现两个显示收入总额和支出总额的组件。

交易历史组件:

创建一个列表组件来展示历史交易记录。

新增交易组件:

实现一个表单，让用户能够输入交易名称和金额，并选择是收入还是支出。

实现应用逻辑

状态管理:

使用 useReducer 来处理应用状态的复杂逻辑。
定义一个 reducer 函数来处理添加和删除交易的动作。

上下文管理:

创建一个 Context 来跨组件共享状态。
使用 useContext Hook 在各组件中访问和更新状态。

交易逻辑:

在表单组件中处理新增交易的逻辑。
确保交易被添加到列表中，并更新余额和摘要。

", "_id": "68f7497c7c93be3ff4bad7a5" }, { "code": "L46", "title": "Node.js (3) : NPM and Express.js", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

NPM与Node.js的关系

什么是NPM？为什么每个Node.js开发者都应该了解它？
如何选择一个可靠的npmpackage
其他类似于npm的工具

使用npm

npm是如何安装一个package的
npm是如何管理package的
几种不同的依赖方式
package的版本管理

探索常用的npm包

lodash：JavaScript实用工具库，提供模块化、性能高效、功能丰富的方法。
dayjs：日期和时间的解析、验证、操作和格式化。
axios：基于promise的HTTP客户端，用于浏览器和node.js。

Express.js：Web开发的新时代

为什么选择Express.js作为我们的授课框架？
有哪些基于express的高阶框架

了解Express的路由

学习基础路由概念以及处理不同的HTTP请求。
一个http请求有哪些携带数据的方式
不同场景下该如何获取这些数据

Express中的中间件：工作流的灵魂

什么是中间件？为何它在Express中起到核心作用？
了解中间件的执行顺序

", "_id": "68f7497c7c93be3ff4bad7a6" }, { "code": "L47", "title": "Express和RESTful API实践", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Hands-on Practice实践：

构建一个简单的Express项目，
实现Restful API路由
运用postman和debugger进行调试
并借助npm包与中间件优化你的代码逻辑

", "_id": "68f7497c7c93be3ff4bad7a7" }, { "code": "L48", "title": "Lab(10):使用Node.js和Express构建天气查询后端服务器", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目设置和 Express 基础

初始化项目:

使用 npm init 创建一个新的 Node.js 项目。
安装 Express 作为项目依赖。

创建基本服务器:

设置一个简单的 Express 服务器。
添加一个路由，响应根路径 (/) 的 GET 请求。

添加天气路由

设置路由:

创建一个新的路由处理器，专门用于天气数据查询。
这个路由应该能够接受城市名作为参数。

集成天气 API:

如果有可用的第三方天气 API，编写代码来查询它。
如果没有 API，可以创建一个模拟数据作为响应。

处理 API 响应:

从天气 API 获取数据后，处理并格式化数据。
将格式化后的数据发送回前端应用。

", "_id": "68f7497c7c93be3ff4bad7a9" }, { "code": "L49", "title": "Node.js (4) : Build express server with industry standard", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

express项目的文件结构

如何把不同文件、模块按职责划分
不同项目如何扩展现有的结构

日志

为什么要记录日志
相关的package - winston和morgan

API 安全与限速

Helmet的使用
了解 Rate Limiting：为什么和如何？
用中间件进行API限速。
CORS问题及其解决策略。

API文档和版本控制

API文档的重要性。
使用工具如Swagger生成动态API文档。
API版本控制的方法和最佳实践。

", "_id": "68f7497c7c93be3ff4bad7aa" }, { "code": "L50", "title": "Node.js (5): MongoDB", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

初探MongoDB

MongoDB的简介：为何它与Node.js成为绝配？
数据模型：文档型数据库与传统关系型数据库的对比。
CRUD: 针对MongoDB的CRUD
练习

数据之间的关联和MongoDB进阶

如何定义你的数据结构与关系。
什么是indexing，aggregation和transaction。

", "_id": "68f7497c7c93be3ff4bad7ac" }, { "code": "L51", "title": "Node.js (6) : Mongoose & Authorization and Authentication", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

身份验证与授权的必要性

为什么我们需要身份验证？
区分身份验证（Authentication）和授权（Authorization）。

本地身份验证实战

进行本地身份验证：如何存储和验证密码。
加密的重要性：了解如何使用bcrypt为用户密码加密。

JWT：无状态身份验证

JSON Web Tokens(JWT)介绍。
使用JWT进行身份验证的优点。
实践：如何在Express.js中生成和验证JWT。

OAuth2.0与第三方身份验证

什么是OAuth2.0？
Google,Facebook,Twitter等第三方身份验证是如何实现的。

Session管理与Cookie安全

了解Session与session：存储和使用。
和jwt比有什么不同

Role-Based Access Control(RBAC)

什么是RBAC？
如何设计和实现基于角色的访问控制。

连接MongoDB：开始Node.js与数据库的对话

利用Mongoose：更高效、更简洁地与MongoDB进行交互。
设计模型：如何定义你的数据结构与关系。

CRUD操作实战与最佳实践

使用Mongoose进行的数据操作：创建、读取、更新和删除。
高效查询：利用Mongoose进行数据查询的技巧与优化。
修改与删除的保护性思路：确保数据操作的安全性。
为应用实现JWT身份验证，确保只有登录的用户可以进行某些操作。

", "_id": "68f7497c7c93be3ff4bad7ae" }, { "code": "L52", "title": "React基础(5) - 条件渲染 & 列表渲染", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

if / 三元运算符 ? : / && 渲染组件
数组 .map() 生成组件列表
为什么 key 很重要？
小练习：渲染一个 Todo List

", "_id": "68f7497c7c93be3ff4bad7b0" }, { "code": "L53", "title": "课后补充知识：什么是SSR，CSR，SSG", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

服务器端渲染（SSR）

介绍SSR的工作原理和主要特点。
探索SSR的优势，如更快的首屏加载时间和更好的SEO。

客户端渲染（CSR）

讲解CSR如何在浏览器端动态生成页面内容。
分析CSR的优点，例如更丰富的交互和更好的用户体验。

静态站点生成（SSG）

说明SSG的概念和生成静态网页的过程。
探讨SSG的使用场景，如博客、文档站点等。

选择最适合的渲染技术

根据不同的项目需求和目标，讨论如何选择最合适的渲染方式。

", "_id": "68f7497c7c93be3ff4bad7b1" }, { "code": "L54", "title": "Lab(11):使用React, Hooks和Redux Toolkit构建图书馆应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目初始化和规划

项目设置:

使用 create-react-app 初始化一个新的 React 应用。
安装 Redux Toolkit 和 React-Redux。

组件设计:

规划应用所需的组件，如添加书籍表单和书籍列表。

构建静态组件

添加书籍组件:

创建一个表单组件，允许用户输入书名和作者名。
添加一个提交按钮，用于提交新书籍。

书籍列表组件:

创建一个列表组件，用于展示添加的书籍。
每本书旁边都有一个删除按钮。

集成 Redux Toolkit

设置 Redux Store:

使用 Redux Toolkit 配置 store。
创建一个 books slice 来管理书籍的状态。

添加书籍逻辑:

在添加书籍组件中实现 dispatch 功能，以提交新书籍到 store。

删除书籍逻辑:

在书籍列表组件中实现删除书籍的功能。

", "_id": "68f7497c7c93be3ff4bad7b3" }, { "code": "L55", "title": "Agile方法论: 解锁团队的协作潜力", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

1. Agile敏捷开发：历史与哲学探究

从传统瀑布模型到敏捷方法的革命性变革。
敏捷哲学：为什么它如此强大？
Agile 哲学：为什么\"Agile\"变得如此重要？

2. 深入Agile Manifesto (敏捷宣言)

敏捷的四个核心价值观：从\"个体与互动\"到\"响应变化\"。
十二条开发原则的解析：如何将价值观付诸实践？

3. Scrum、Kanban：敏捷的支柱

Scrum 框架的各个流程概述，“3355”方法论
Scrum：迭代开发、自组织团队的奇妙之处。
Kanban：可视化工作流、持续改进的精髓。

4. 深入Scrum

Product Backlog：需求的生命线。
Sprints：高效迭代与交付的秘密。
日常站立会议 (Daily Standups)：团队默契的塑造。
Sprint Retrospectives：持续改进的动力。
结合实际工作讲解各个流程：scrum planning，daily standup，scrum board，scrum review meeting，spring retrospective meeting

5. 用户故事与验收标准：需求的精髓

打造高质量用户故事的策略。
Acceptance Criteria：确保交付符合预期的关键。
怎样写 backlog，怎样写用户故事：“完成”的定义，故事拆分和故事估算

6. 实践出真知：构建自己的敏捷看板

使用现代工具 (如Trello、JIRA) 建立工作流程。
实际操作：从构建产品积压到完成冲刺。

7. 敏捷在企业中的演进

大型组织的敏捷转型：成功的案例分析。
避免常见陷阱：敏捷实施中的挑战与解决。
怎样改进流程、提高效率，为什么企业需要 T 型人才

8. 敏捷的未来展望

敏捷开发不断演进的趋势。
如何将敏捷原则融入日常工作。

", "_id": "68f7497c7c93be3ff4bad7b4" }, { "code": "L56", "title": "Workshop: Agile Project Management", "type": "Workshop", "isLive": true, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Workshop: Agile Project Management

", "_id": "68f7497c7c93be3ff4bad7b5" }, { "code": "L57", "title": "什么是Agile SDLC, Waterfall, Agile介绍", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

1. Agile 的由来、开发宣言、原则、主要关注点

1.1 Agile 的由来（为什么会出现）

背景：90年代的软件项目普遍失败：

需求变更频繁，但传统方法假设需求稳定
大项目周期长，交付晚，客户等到最后才看到结果
文档多、审批慢，团队士气低
做完才发现“做错了/不需要”

Agile 出现的核心原因：

软件开发是“高不确定性 + 高变化”的工作，需要一种能持续适应变化、快速验证方向的方式。

1.2 Agile Manifesto（敏捷开发宣言的四句话）

敏捷宣言强调：

个体和互动 高于流程和工具
可工作的软件 高于完备的文档
客户协作 高于合同谈判
响应变化 高于遵循计划

不是说右边不重要，而是“左边更重要”。

1.3 Agile 12 个原则（讲课时可分 3 组）

A. 价值与交付

最优先的是持续交付有价值的软件
频繁交付（几周到几月）
可工作的软件是进度的首要度量

B. 变化与协作

欢迎需求变化
业务方与开发者每天合作
通过面对面沟通效率最高
建立信任、赋能团队

C. 团队与改善

团队自组织
持续关注技术卓越和良好设计
简化（只做必要的事）
定期反思并调整

1.4 Agile 的主要关注点（3 个关键词）

价值（Value）
反馈（Feedback）
适应（Adaptation）

1.5 什么是“价值”（Value）？

在 Agile 里，价值不是“我们做了多少功能”，而是：

用户真的用了吗？
解决了用户什么痛点？
对业务产生什么结果？

价值 = 用户价值 + 业务价值（可衡量）

举例：

❌ 做了一个“高级搜索页面” = 功能
✅ 让用户找内容时间减少 50% = 价值

2. 传统项目管理怎么做？（用悉尼歌剧院 / 悉尼轻轨讲）

这些是典型“传统/瀑布式”工程项目，适合需求稳定的大型基建。

2.1 传统项目管理核心思路

一次性做完整规划
需求与范围先锁死（Scope Fixed）
依靠详细文档与阶段审批
“按计划交付”优先于“按价值调整”

2.2 悉尼歌剧院（经典案例）

特征：

初期计划无法准确估算复杂度
设计持续变化
最终严重超预算、超工期
但仍被当作“工程奇迹”

课堂引导点：

在极高不确定性项目中，“先定死计划”是危险的
传统方法常把“变化”视为失败来源，但变化本身不可避免

2.3 悉尼轻轨（Sydney Light Rail）

特征：

涉及多方利益/政策/施工风险
审批链路长
需求/范围变化导致延期
最终也出现预算与时间偏差

课堂引导点：

传统方法在复杂系统中应对变化成本极高
这类“长期、多方、变化多”的项目其实更像软件开发

3. SDLC（Software Development Life Cycle）是什么？

3.1 定义

SDLC = 软件从“想法 → 交付 → 运维”的完整生命周期模型
它解决的是：

软件开发到底要经历哪些阶段？

3.2 SDLC 常见阶段（你可以画一个环）

Requirement Analysis（需求分析）
- 明确用户/业务要解决什么问题
Design（系统/架构/交互设计）
- 选择技术方案、数据流、UI草图
Implementation（开发）
- 写代码、集成模块
Testing（测试）
- 单元/集成/E2E/验收
Deployment（部署交付）
- 上线到 staging / production
Maintenance（维护迭代）
- 修Bug、性能优化、新功能

Agile 与 Waterfall 的差异，主要就是“怎么组织这些阶段”。

4. SDLC-Waterfall 和 V-Model 是什么？

4.1 Waterfall（瀑布模型）

阶段线性：需求 → 设计 → 开发 → 测试 → 交付
每个阶段结束后基本不回头
适合需求稳定的项目

问题：

反馈太晚（到测试才发现错）
变化成本高
交付周期长

4.2 V-Model（V字模型）

V-model 是 Waterfall 的加强版：
左边是开发阶段，右边是对应测试阶段：

需求 ↔ 验收测试
系统设计 ↔ 系统测试
架构设计 ↔ 集成测试
模块设计 ↔ 单元测试

优势：

强调“每个阶段都有对应验证”
更适合高可靠行业（医疗、航天、军工）

局限：

仍然是“计划驱动 + 变化昂贵”

5. Project Management Methodologies 有哪些？

你可以按 “适用领域” 讲：

5.1 Predictive（预测式/计划驱动）

Waterfall
PRINCE2
PMBOK / PMP 体系
Critical Path Method (CPM)
适用：需求稳定、大型工程、强合规场景

5.2 Adaptive（适应式/变化驱动）

Agile / Scrum / Kanban
XP（极限编程）
DSDM / Crystal 等
适用：软件、互联网产品、创业团队

5.3 Hybrid（混合式）

需求大框架固定 + 研发用 Agile
适用：大企业数字化转型、政府项目

6. Lean Startup 是什么？

6.1 一句话定义

Lean Startup = 用最小成本验证商业价值的创业方法论。

6.2 核心循环：Build–Measure–Learn

Build（做最小可用产品 MVP）
Measure（收集真实用户数据）
Learn（学习并调整方向）

6.3 Lean Startup 与 Agile 的关系

Agile：解决“怎么高效开发软件”
Lean Startup：解决“我们开发的软件是否值得存在”

Lean Startup 更偏“方向正确性”，Agile 更偏“交付效率”。

7. 为什么使用敏捷？什么是敏捷？和 Waterfall 有什么区别？

7.1 为什么要 Agile

因为软件项目具备：

需求不稳定
技术与市场变化快
用户反馈只能通过“用过才知道”

Agile 用短周期交付来解决这些不确定性。

7.2 什么是敏捷开发

敏捷开发 = 以用户价值为中心的迭代式交付方法

小步快跑
频繁反馈
持续改进
团队自组织

最重要结论：

Agile 不是“更快”，是“更能应对变化”。

8. Agile 价值观 / Manifesto / 12 原则

这一段你可以做成“背诵式重点”，让学生面试能答。

8.1 Agile 价值观（四值观）

个体和互动 > 流程和工具
可工作的软件 > 完备文档
客户协作 > 合同谈判
响应变化 > 遵循计划

8.2 Agile Manifesto 是什么

就是这一套价值观 + 原则的总称，2001年由一群软件工程师提出，用来对抗当时过度重流程的开发方式。

8.3 12 原则（建议分组记忆）

你可以让学生记三类：

“交付价值”
“拥抱变化 & 业务协作”
“团队自组织 & 持续改进”

", "_id": "68f7497c7c93be3ff4bad7b6" }, { "code": "L58", "title": "Agile Methodologies", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

1. 敏捷开发采用的具体方法：Scrum / Kanban 是什么？

1.1 Agile 是什么（一句话）

Agile = 用短周期迭代、持续反馈，快速交付可用价值。
不是“快点写完代码”，而是“早交付、早验证、早调整”。

1.2 Scrum 是什么

Scrum 是一种 迭代式敏捷框架，核心是：

把工作切成固定周期的 Sprint（通常 1–2 周）
每个 Sprint 交付一个 可演示的增量（Increment）
用一系列事件（Planning / Daily / Review / Retro）来保证节奏与透明度

关键思想：

先交付最重要、最有价值的东西，再逐步完善。

1.3 Kanban 是什么

Kanban 是一种 可视化 + 持续流（Continuous Flow） 的工作管理方法：

不强调固定 Sprint
任务按“流动”方式从待做 → 进行中 → 完成
用 WIP Limit（在制品限制） 防止多任务并行导致堵塞

关键思想：

让工作流更顺畅、更可预测，持续交付。

2. 结合实际工作讲解 Scrum 流程与会议

2.1 Scrum Planning（Sprint Planning）

目的：

决定本 Sprint 做什么（Sprint Goal）
把 Backlog 切成 Sprint Backlog
让团队对目标形成共识

真实项目怎么做：

PO 给出优先级最高的 Backlog
Dev Team 讨论可行性、拆任务、估算
根据团队 Capacity（本周可投入的工时）选入 Sprint
明确 Definition of Done（DoD）

产出：

Sprint Goal
Sprint Backlog（含估算）

2.2 Daily Standup（每日站会）

目的：
同步进度 + 暴露阻塞（Blockers），不是汇报给老板。

经典三问：

我昨天做了什么？
我今天打算做什么？
我遇到了什么阻碍？

原则：

站着说，15分钟内
只讲和 Sprint Goal 有关的

2.3 Scrum Board（看板）

Scrum Board 是 Sprint 期间的任务可视化工具，常用列：

To Do
In Progress
Code Review / Testing
Done

使用方法：

每日站会更新卡片状态
卡片必须指向一个 User Story 或 Task
任何阻塞要贴 “Blocked” 标签

2.4 Scrum Review Meeting（评审会）

目的：
向 Stakeholders 展示增量成果，收集反馈，决定是否调整 Backlog。

应该发生什么：

Dev Team Demo
PO 验收
Stakeholders 给反馈
PO 更新 Backlog 优先级

2.5 Sprint Retrospective（回顾会）

目的：
聚焦“怎么让团队下个 Sprint 更好”，而不是追责。

典型结构：

What went well?（做得好的）
What didn’t go well?（问题）
Action items（具体改进动作）

要求：

每次 Retro 必须产出 1–3 个可执行改进项
下一 Sprint 要跟进

3. Kanban 的几个阶段 & 意义

常见列（可按团队自定义）

Backlog / To Do
- 等待开始的需求池
Ready
- 已澄清、可开发
In Progress
- 正在开发
Review / Testing
- 代码审查、测试验证
Done / Deployed
- 完成并上线/交付

每列的意义：

让团队知道卡片卡在哪
发现瓶颈（比如 Review 堵住）
用 WIP 限制防止“开太多坑不填”

4. Scrum 在敏捷开发中的定义

Scrum 是 Agile 的一种实现框架，提供：

角色（Roles）
制品（Artifacts）
事件（Events）
规则（Rules）

它让敏捷从“理念”变成“可落地的工作节奏”。

5. Scrum 的 Roles / Artifacts / Events

5.1 Roles（角色）

Product Owner
Scrum Master
Development Team

5.2 Artifacts（制品）

Product Backlog
Sprint Backlog
Increment（可交付增量）

5.3 Events（事件）

Sprint
Sprint Planning
Daily Scrum
Sprint Review
Sprint Retrospective

6. Scrum 的 “3355 原则” & Value Propositions

不同机构的“3355”说法略有差异，但在教学中常用的解释是：
3 个角色、3 个制品、5 个事件、5 个价值观/原则

6.1 3 Roles

PO / SM / Dev Team

6.2 3 Artifacts

Product Backlog / Sprint Backlog / Increment

6.3 5 Events

Sprint / Planning / Daily / Review / Retro

6.4 5 Values（Scrum Values）

Commitment（承诺）
Courage（勇气）
Focus（专注）
Openness（开放）
Respect（尊重）

6.5 Value Propositions（价值主张）

Scrum 能带来的价值：

提前交付可用产品
快速验证方向
降低需求变更风险
增强团队透明度与协作
持续提升效率（通过 Retro）

7. Retrospective meeting 主要用来做什么？

一句话：
Retro = 团队的持续改进引擎。

核心目的：

找到流程/协作中的“根因问题”
制定下一 Sprint 立刻能做的小改进
让团队越来越像一个“高效机器”

8. Scrum Team Roles 详解

8.1 Product Owner（PO）

负责价值最大化的人。

职责：

管理 Product Backlog（排序 + 澄清）
定义需求目标
验收 Increment
与 Stakeholders 对齐方向

不该做的：

指挥 Dev Team 怎么写代码
把所有任务塞满 Sprint

8.2 Development Team（开发团队）

负责交付 Increment 的人。

职责：

估算与承诺 Sprint Backlog
自组织（自己决定怎么做）
对交付质量负责

特征：

跨职能（前端/后端/DevOps/测试）
对结果共同负责，而非“谁写的谁背锅”

8.3 Scrum Master（SM）

负责维持 Scrum 运转的人（服务型领导）。

职责：

保障 Scrum 流程正确落地
清理团队障碍（Blockers）
教练 PO 与 Dev Team 理解 Scrum
保护团队不被外界干扰

9. Kanban 的具体步骤是什么？

可视化工作流（画看板）
定义每列状态的“进入/退出标准”
设置 WIP Limit
任务按优先级拉取（Pull）
监控 Lead Time / Cycle Time
发现瓶颈，持续优化流程

10. 怎么写 Backlog / User Story / DoD / 拆分 / 估算

10.1 Backlog 是什么？

产品需求池，按优先级排序。
Backlog 必须满足：可理解、可拆分、可估算、可排序。

10.2 User Story 拆分方式

常见拆分逻辑：

按用户流程拆
按功能拆
按复杂度拆（先简单后复杂）
按风险拆（高风险先做 PoC）

10.3 Definition of Done（完成定义）

定义“什么才算真的完成”，例子：

代码合并到主分支
单元测试通过
E2E 测试通过
PO 验收
已部署到 staging / production

DoD 不清楚会导致：

“看起来做了，但其实没交付”。

10.4 估算（Estimation）

常用方法：

Story Points（相对估算）
Planning Poker
T-shirt Size（S/M/L/XL）

估算维度：

工作量
技术难度
不确定性/风险

11. User Story 是什么？怎么写？

11.1 定义

User Story 是从用户价值角度描述需求的最小单元。

11.2 标准模板

As a [用户角色], I want [需求/功能], so that [价值/目的].

例子：
As a student, I want to save my quiz progress, so that I can continue later without losing data.

11.3 好 Story 的标准（INVEST）

Independent：可独立交付
Negotiable：可讨论，不是死需求
Valuable：有用户价值
Estimable：可估算
Small：够小能在 Sprint 内完成
Testable：可验证

12. Sprint Planning 是什么？

Sprint Planning 是 Scrum 节奏的起点，解决两件事：

Why：为什么做这些？
- Sprint Goal（本 Sprint 的价值目标）
What + How：做什么？怎么做？
- 选 Backlog 进入 Sprint
- 拆任务 + 估算
- 确定交付路径

成功的 Planning 标志：

每个人都知道这个 Sprint 的目标
每个 Story 都有清晰 DoD
团队觉得“可交付、可完成”

", "_id": "68f7497c7c93be3ff4bad7b7" }, { "code": "L59", "title": "Agile Case研究：微软Microsoft Case Study", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

来自微软曾获得MVP的Ray老师，讲述以微软Windows交付使用Agile的流程

1. 微软是如何使用Agile的，如何使用Agile敏捷开发以及采用DevOps文化

2. Windows的发布周期

3. Waas是什么，Windows as a Service，其中Rings是什么

4. 微软的开发团队分布

5. Windows开发具体的周期

6. Up-front Planning开发，Code Test Stabilize 过程

7. Windows的开发流程如何转型的，如何提升效率和成功率的

8. Agile在项目开发中的好处是什么

", "_id": "68f7497c7c93be3ff4bad7b8" }, { "code": "L60", "title": "P3职业孵化器介绍", "type": "Information", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

项目背景

\n

在现实世界中，创业公司通常需要快速开发产品并应对市场的变化。这个项目将模拟一个创业公司的实际情景，让你和你的团队合作，创建一个创新的软件产品。

\n

\n

项目任务

\n

你将加入到一个由你的同学组成的团队中，该团队将一起创建一个新的Web Application。你的任务是在团队中发挥作用，贡献你的技能，共同推动项目的成功。

\n

\n

项目要求

\n

项目选题: 你的团队可以自由选择一个创新的项目主题，但它必须包括以下要素：

\n

前端：使用React，Redux，Nextjs，Styled-Components等。
后端：使用Node.js，Express.js，Koa，Passport.js等。
数据库：Mongodb，PostgreSQL，DynamoDB等，选择合适的数据库来存储和管理数据。
部署：将你的应用部署到云端，如AWS、Azure等。

\n

敏捷开发: 使用敏捷开发方法，将项目拆分成多个迭代，并定期交付新的功能。使用敏捷工具（如Trello或JIRA）来跟踪任务和进度。

\n

协作与沟通: 团队协作和沟通至关重要。定期召开站会（stand-up meetings）以更新团队成员，确保每个人都了解项目的状态和任务分配。

\n

Quality and Testing: 保证你的应用程序质量良好。编写单元测试和端到端测试，并确保每个功能都经过充分测试。

\n

Documentation: 创建清晰的文档，包括项目计划、需求文档、系统架构和部署说明。这些文档对于团队成员和潜在用户都非常重要。

\n

Presentation and Demonstration: 在项目结束时，团队需要准备一个演示，展示你的应用程序功能和亮点。这也是你展示你的项目成果的机会。

\n

\n

项目交付

\n

项目完成后，你的团队需要准备一个综合性的项目报告，其中包括以下内容：

\n

Detailed project description, including the theme and objectives.
Project plan and progress reports, documenting various phases and completion status.
System architecture and technology stack of the application.
Deployment documentation, explaining how to deploy your application on a cloud platform.
Testing reports, including the results of unit tests and end-to-end tests.
Materials for project presentation and demonstration, including screenshots or demo videos of the user interface.

\n

\n

项目评估

\n

项目将根据以下标准进行评估：

\n

项目完成度：项目是否按计划完成，是否满足了项目要求。
代码质量：代码是否整洁、可维护，并遵循最佳实践。
功能实现：应用程序是否实现了所需的功能和特性。
文档质量：项目文档是否详尽清晰，便于他人理解。
团队协作：团队协作和沟通是否良好。
演示与展示：演示是否能够生动地展示项目的价值。

", "_id": "68f7497c7c93be3ff4bad7b9" }, { "code": "L61", "title": "P3职业孵化器 Bootstrap", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Project 3：创造、展示、协作的新篇章

课程概述

欢迎踏入新的阶段，一个专注于实践、创新和团队协作的全新教育体验！在这里，你不仅学习技术，更将参与到真实的项目中，与团队一起创造有意义的作品。我们的目标是培养能够独立思考、卓越创新的匠人，让每位学员在技术路上更进一步。

1. 匠人培训 5.0 的含义

实践与创新：超越传统理论教学，强调通过实际项目的开发来掌握和应用技术。
团队协作：重视团队合作，通过小组项目培养沟通和协作技能。
持续成长：不仅提供知识，更注重培养学习和解决问题的能力。

2. 项目展示

最终展示：每个项目组会在课程末尾线上展示他们的作品，全面介绍项目成果和学习体验。

3. 项目分组与导师组

项目如何分组：学员将根据兴趣和技能分入不同的项目组，每组承担一个独特的项目。
导师组与自拟项目组：导师组由经验丰富的老师领导，指导项目实施；自拟项目组则更加自由，学员可以根据自己的想法创建和实施项目。

4. 项目组规定的重要性

规定的目的：确保每个成员都能在公平、有序的环境中学习和贡献。
遵守的必要性：有助于提升团队效率，保证项目顺利完成。

加入我们的匠人培训5.0，开启你的技术创新之旅，与我们一起成长！

在这个课程中，每一步都充满了挑战和机遇。我们期待看到你的参与和你的作品，一起来创造令人惊叹的项目！

", "_id": "68f7497c7c93be3ff4bad7ba" }, { "code": "L62", "title": "React基础(6) - 组件的状态", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

React 组件是如何保存状态的？
useState 的基本用法
事件处理（onClick、onChange）
状态提升（Lifting State Up）
小练习：制作一个带开关的灯泡组件（点击按钮切换亮/灭）

", "_id": "68f7497c7c93be3ff4bad7bb" }, { "code": "L63", "title": "Lab(12):使用React和Express构建图像上传应用", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

项目设置和规划

项目初始化:

使用 create-react-app 初始化一个新的 React 应用。
创建一个新的 Express 服务器项目。

组件设计:

规划前端的组件，包括文件选择器和上传按钮。

构建前端组件

图像选择组件:

创建一个允许用户选择图像文件的组件。
确保组件能够显示用户选择的文件名。

上传按钮:

实现一个上传按钮，用户点击后将文件发送到服务器。

上传状态指示:

设计并实现一个进度条，显示上传进度。

实现后端逻辑

设置 Express 服务器:

设置路由来处理图像上传的 POST 请求。
使用中间件如 multer 处理文件上传。

文件存储:

配置服务器以将上传的图像保存到一个文件夹。

响应处理:

在文件上传后，服务器应响应一个包含图像 URL 的消息。

前后端集成

集成测试:

使用 React 的 fetch 或 axios 库来从前端发送文件到服务器。
测试完整的上传流程，确保图像可以成功上传，并在前端显示。

", "_id": "68f7497c7c93be3ff4bad7bd" }, { "code": "L64", "title": "Node.js (7): Build a CRUD server (1)", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

数据的验证

Mongoose中的数据验证。
专门用于数据验证的package - joi。

错误处理

如何抛出一个错误。
如何处理一个错误。
有哪些常见的错误需要注意。

结合之前课程所学的内容，搭建一个全新的应用

讲解新server的应用场景
数据结构设计与关联

", "_id": "68f7497c7c93be3ff4bad7be" }, { "code": "L65", "title": "Node.js (8): Build a CRUD server (2)", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

项目搭建

从主要资源出发，搭建单一资源的CRUD endpoint
数据的分页和实现基于查询参数的数据过滤
扩展到多个集合的数据处理
集合与集合的数据关系和逻辑关系

", "_id": "68f7497c7c93be3ff4bad7bf" }, { "code": "L66", "title": "Node.js (9): Build a CRUD server (3)", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

完成项目

完成项目主体功能
讲解单边绑定
性能优化话题讨论
为部署做准备

", "_id": "68f7497c7c93be3ff4bad7c1" }, { "code": "L67", "title": "Node.js (10) : Testing and Deploy", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

不同类型的测试

unit test
integration test
e2e test

Node.js中的测试

单元测试的重要性：为什么我们需要它？
使用jest：编写第一个单元测试。
使用jest 进行mock
使用supertest编写integration test

部署的A至Z

从开发环境到生产环境：关键的区别。
使用PM2进 Node.js应用的进程管理。
部署策略与最佳实践：持续集成与持续部署 (CI/CD)。
将我们的server部署到aws elastic beanstalk

备份与灾难恢复

数据备份的重要性与实施。
灾难恢复策略：怎么做才能确保最小的业务中断？

", "_id": "68f7497c7c93be3ff4bad7c2" }, { "code": "L68", "title": "React基础(7) - React 组件生命周期 & 使用 API 获取数据", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

React 组件的生命周期（挂载、更新、卸载）
useEffect 介绍
清理副作用（避免内存泄漏）
小练习：制作一个自动倒计时的组件
如何使用 fetch 请求 API
处理加载中 & 错误状态
小练习：请求 GitHub API 并显示用户信息

", "_id": "68f7497c7c93be3ff4bad7c4" }, { "code": "L69", "title": "React 进阶(1) - Thinking in React", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React
Step 3: Identify The Minimal (but complete) Representation Of UI State
Step 4: Identify Where Your State Should Live
Step 5: Add Inverse Data Flow
And That’s It

", "_id": "68f7497c7c93be3ff4bad7c6" }, { "code": "L70", "title": "React 进阶(2) - 测试和 a11y", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

测试金字塔
Unit Test
vitest
react testing lib
js-dom
accessibility

", "_id": "68f7497c7c93be3ff4bad7c7" }, { "code": "L71", "title": "Next.js", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

Next.js

", "_id": "68f7497c7c93be3ff4bad7c8" }, { "code": "L72", "title": "The Four Prototyping Patterns: Prompting, Fine-Tuning, RAG, Agents", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

The Four Prototyping Patterns: Prompting, Fine-Tuning, RAG, Agents

BY THE END OF THE SESSION

• Prompting \"giving the LLM more context\" Prompting = asking questions in a better way with better context

• Fine Tuning \"teaching the LLM how to act\" 3 types: task training, constraining I/0 schema, and language training

• RAG \"giving the LLM access to new knowledge\" Retrieval Augmented Generation = Dense Vector Retrieval + In-Context Learning

• Agents

\"giving the LLM access to tools\"

Agents = reasoning, action, repeat

• Prompting \"giving the LLM more context\" Prompting = asking questions in a better way with better context

• Fine Tuning \"teaching the LLM how to act\" 3 types: task training, constraining I/0 schema, and language training

• RAG \"giving the LLM access to new knowledge\" Retrieval Augmented Generation = Dense Vector Retrieval + In-Context Learning

• Agents

\"giving the LLM access to tools\"

Agents = reasoning, action, repeat

Prompting

Prompt is nothing but what you said to AI.

Prompt Engineering is the art of crafting effective prompts that elicit desired responses from LLMs. It's the foundation of interacting with these models, and its effectiveness can significantly impact the quality and relevance of the output.

A typical prompt can be broken down into several key components:

Priming: This sets the context for the LLM, providing information about the desired task, persona, or style. For example, you might prime the model by saying, \"You are a friendly chatbot that helps users with their travel plans.\"
Instructions: These guide the LLM on how to handle specific aspects of the task, such as the tone of voice, the format of the output, or how to handle edge cases. For example, you might instruct the model to \"use a conversational tone\" or \"provide a bulleted list of recommendations.\"
User Inquiry: This is the dynamic content of the prompt, the specific question or request that the user provides. It's the input that changes with each interaction.
Output Formatting: This specifies the desired format of the LLM's response. It could be plain text, a structured format like JSON, or even a specific template.

Example:

Priming: You are a helpful and informative chatbot that answers questions about history.

Instructions: Provide concise and accurate answers, using bullet points to list key facts.

User Inquiry: What were the major causes of World War II?

Output Formatting: A bulleted list of key causes.

Another famous the COSTAT:

The COSTAR Framework Explained:

Context : Providing background information helps the LLM understand the specific scenario.

Objective (O): Clearly defining the task directs the LLM’s focus.

Style (S): Specifying the desired writing style aligns the LLM response.

Tone (T): Setting the tone ensures the response resonates with the required sentiment.

Audience (A): Identifying the intended audience tailors the LLM’s response to be targeted to an audience.

Response (R): Providing the response format, like text or json, ensures the LLM outputs, and help build pipelines.

Benefits of Prompt Engineering:

Control over Output: Prompt Engineering allows you to guide the LLM's behavior and ensure that the output aligns with your specific needs.
Customization: You can tailor prompts to specific tasks, audiences, and contexts.
Efficiency: Well-crafted prompts can reduce the need for extensive fine-tuning, saving time and resources.

Limitations of Prompt Engineering:

Context Window: LLMs have a limited context window, meaning they can only process a certain amount of text at a time. This can limit the complexity of prompts and the amount of information that can be provided.
Lack of Factual Grounding: LLMs are trained on massive datasets of text, but they don't store specific facts. They predict the most likely word based on the context, which can lead to inaccuracies or inconsistencies.

=========================================

Fine-Tuning

Fine-tuning is a powerful technique that allows you to customize the behavior of an LLM by training it on a specific dataset of examples. This process adjusts the LLM's internal parameters, enabling it to perform better on tasks related to the training data.

How Fine-tuning Works:

Training Data: A dataset of prompt-completion pairs is created, where each pair consists of a prompt and the desired response. This data represents the specific task or style that you want the LLM to learn.
Model Training: The LLM is trained on the provided dataset, adjusting its internal parameters to better predict the desired responses for the given prompts.
Evaluation: The fine-tuned model is evaluated on a separate dataset to assess its performance and ensure that it has learned the desired behavior.

Example:

Imagine you want to fine-tune an LLM to write product descriptions in a specific style.

Training Data: You create a dataset of product descriptions written in your desired style, along with the corresponding product names.
Model Training: The LLM is trained on this dataset, learning to generate product descriptions that match the style and tone of the training data.
Evaluation: You evaluate the fine-tuned model by providing it with new product names and assessing the quality of the generated descriptions.

Benefits of Fine-tuning:

Improved Performance: Fine-tuning can significantly improve the LLM's performance on specific tasks, such as writing in a particular style, generating creative content, or answering questions in a specific domain.
Style and Tone Customization: Fine-tuning allows you to bake in your desired style, tone, and formatting into the LLM's output.
Reduced Prompt Length: Fine-tuning can reduce the need for extensive instructions in the prompt, allowing for a larger context window and more complex outputs.

Limitations of Fine-tuning:

Data Requirements: Fine-tuning requires a dataset of examples, which can be time-consuming and resource-intensive to create.
Overfitting: If the training data is too small or not representative of the desired behavior, the model may overfit to the training data and perform poorly on unseen examples.
Cost and Resources: Fine-tuning can be computationally expensive, requiring significant resources and time.

RAG

RAG addresses the limitations of prompt engineering by incorporating external knowledge sources into the LLM's decision-making process. It allows LLMs to access and utilize factual information from databases, websites, or other sources, enhancing their ability to provide accurate and relevant responses.

How RAG Works:

Database Setup: A database is created containing relevant information, which can be text from websites, documents, or internal knowledge bases. This information is then split into smaller chunks, such as paragraphs or sections, to ensure that related text is kept together.
Embedding Generation: Each chunk of text is converted into a vector representation called an embedding. Embeddings capture the semantic meaning of the text, allowing for efficient comparison and retrieval.
Retrieval: When a user inquiry is received, it is also converted into an embedding. This embedding is then compared to the embeddings in the database using a vector search algorithm. The most similar chunks of text are retrieved.
Prompt Augmentation: The retrieved information is then incorporated into the prompt, providing the LLM with the necessary context to answer the user's question.

Example:

Imagine a user asks, \"How do I fix a leaky faucet?\"

Retrieval: The user's inquiry is converted into an embedding and compared to the embeddings in a database containing a plumber's handbook. The most relevant section, \"Fixing Common Leaks,\" is retrieved.
Prompt Augmentation: The retrieved section is added to the prompt, providing the LLM with the necessary information to answer the question.

Benefits of RAG:

Factual Accuracy: RAG allows LLMs to access and utilize factual information from external sources, improving the accuracy and reliability of their responses.
Real-time Knowledge Updates: The database can be updated in real time, ensuring that the LLM has access to the latest information.
Expanded Knowledge Base: RAG enables LLMs to access a much larger knowledge base than what is available within their training data.

Limitations of RAG:

Database Setup and Maintenance: Creating and maintaining a comprehensive and accurate database can be time-consuming and resource-intensive.
Retrieval Accuracy: The accuracy of the retrieved information depends on the quality of the database and the effectiveness of the vector search algorithm.
Context Window: The retrieved information is still subject to the LLM's context window limitations.

Agents

Agent is nothing but a fancy RAG

Introduction to LLM Agents

LLM agents represent the next frontier in artificial intelligence, moving beyond simple text input-output models to interactive, reasoning-capable systems.

What are LLM Agents?

Definition: Systems that use Large Language Models (LLMs) as their core for reasoning and planning, enabling interaction with external environments.
Key difference from traditional LLMs: Ability to observe, plan, and take actions in diverse environments.

Components of LLM Agents

Agent/Brain/Core:
Core LLM for processing and understanding language
Customizable prompts and personas
Planning:
Ability to create and execute plans for complex tasks
Memory:
Short-term memory: Temporary storage for ongoing conversations
Long-term memory: Persistent storage for learning and recall
Tool Use:
Integration with external tools and APIs
Ability to leverage specialized knowledge bases

Capabilities of LLM Agents

Advanced Problem Solving:
Executing complex tasks efficiently
Generating project plans, writing code, creating summaries
Self-Reflection and Improvement:
Analyzing and critiquing their own output
Continuous enhancement through learning
Multi-Agent Collaboration:
Interaction and cooperation between multiple agents
Division of tasks and specialization
Environment Interaction:
Web browsing, API usage, physical world interaction (in robotics)
Multi-modal input processing (text, images, sensory data)

Applications of LLM Agents

Software Development:
Code generation and debugging
Project planning and management
Workflow Automation:
Task planning and execution in business processes
Intelligent personal assistants
Research and Analysis:
Information gathering and synthesis
Report generation and data analysis
Customer Service:
Advanced chatbots and virtual assistants
Multi-step problem resolution

Frameworks and Tools for LLM Agents

LangChain and LangGraph:
Open-source frameworks for building LLM applications
Components for agent creation, memory management, and tool integration
Agentic Search:
Enhanced search capabilities for agents
Retrieval of multiple answers in agent-friendly formats

Challenges and Considerations

Ethical Concerns:
Ensuring responsible use of autonomous agents
Privacy and data security considerations
Limitations:
Current constraints in reasoning capabilities
Need for precise instructions and prompts
Ongoing Research Areas:
Improving long-term memory and learning
Enhancing multi-modal capabilities

Conclusion

LLM agents represent a significant advancement in AI, offering powerful tools for complex problem-solving and automation. As research progresses, we can expect these agents to become increasingly capable and integrated into various aspects of work and daily life.This lecture outline provides a comprehensive overview of LLM agents, covering their core concepts, capabilities, applications, and challenges. It can be expanded with specific examples and case studies to create a full-length lecture on the topic.

Benefits and When to Use

Prompt Engineering:

Benefits: Easy to implement, rapid prototyping, intuitive for guiding LLM behavior.
When to Use: When you need quick and simple control over LLM output, when you don't have a large dataset for fine-tuning, or when you want to experiment with different prompts.

RAG:

Benefits: Access to external knowledge sources, real-time knowledge updates, expanded knowledge base.
When to Use: When you need to provide LLMs with factual information, when you want to leverage external databases or knowledge bases, or when you need to ensure that the LLM's responses are grounded in real-world data.

Fine-tuning:

Benefits: Improved performance on specific tasks, style and tone customization, reduced prompt length.
When to Use: When you need to train an LLM to perform a specific task, when you want to customize the LLM's output style or tone, or when you want to reduce the need for extensive instructions in the prompt.

Agent:

Benefits: Advanced problem-solving: LLM agents can handle complex, multi-step tasks efficiently by breaking them down into manageable subtasks.
When to Use: When tasks require sequential reasoning, planning, and memory. They excel in situations where simple text generation or information retrieval is not sufficient, and more complex problem-solving or decision-making is needed

", "_id": "68f7497c7c93be3ff4bad7c9" }, { "code": "L73", "title": "Introduction to Embeddings", "type": "Video", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

学习目标

- 掌握Embeddings的基本概念及其在自然语言处理、信息检索等领域的应用

- 学习如何生成和使用文本嵌入向量表示语义关系

- 理解不同Embedding模型的工作原理及其对文本表示的影响

- 提升在实际项目中使用Embeddings进行文本分类、相似性搜索等任务的能力

知识点介绍

**Embeddings基础**

- 了解什么是Embeddings，如何将文本或其他数据转化为向量

- 学习Embeddings的核心概念，如语义空间和向量表示

**常见的Embedding模型**

- 掌握常见的Embedding模型，如Word2Vec、GloVe、BERT等的工作原理

- 学习如何选择合适的Embedding模型以满足不同的任务需求

**文本嵌入的生成与应用**

- 学习如何生成文本嵌入，并应用于相似性搜索、分类和聚类等任务

- 理解如何通过嵌入向量表示语义相似性，进行语义搜索和推荐

**模型性能与优化**

- 探索如何评估和优化Embedding模型的性能，确保其生成的向量具有高语义关联性

- 学习如何通过微调Embedding模型提升在特定任务中的表现

**实际应用场景**

- 了解Embeddings在信息检索、自然语言处理和推荐系统中的应用

- 探讨如何在项目中应用Embeddings进行高效的文本处理和语义分析

通过这些知识点，学员将能够理解并应用Embeddings技术，用于各种自然语言处理任务，并通过优化和调优提升模型的表现。

", "_id": "68f7497c7c93be3ff4bad7ca" }, { "code": "L74", "title": "Introduction to Retrieval Augmented Generation (RAG)", "type": "Video", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

学习目标

- 掌握Retrieval Augmented Generation (RAG)的基本概念，理解其在生成式AI中的作用

- 学习如何通过RAG结合信息检索与生成模型，提高生成内容的相关性和准确性

- 掌握RAG系统的核心组件，包括文档检索、嵌入生成与生成模型的集成

- 提升在实际项目中构建和优化RAG系统的能力，满足复杂信息生成需求

知识点介绍

**RAG基础概念**

- 了解RAG的架构和工作原理，学习如何通过文档检索增强生成模型的表现

- 探索RAG系统中的主要组件：Document Retrieval、Embedding Generation与Generative Models

**文档检索与生成的集成**

- 学习如何通过RAG系统结合文档检索和生成模型，提升生成内容的上下文相关性

- 理解如何在生成过程中动态调用检索信息，确保生成内容的准确性与完整性

**RAG系统的优化与调优**

- 学习如何优化RAG系统中的检索和生成流程，提高响应速度和生成质量

- 掌握如何通过Prompt Engineering和检索策略的调整，提升RAG系统的效果

**应用场景与案例分析**

- 探讨RAG在知识问答、文档生成、智能客服等应用中的实际案例

- 学习如何根据具体业务需求定制RAG系统，提升系统的智能化和用户体验

通过这些知识点，学员将能够理解并应用Retrieval Augmented Generation (RAG)技术，构建具有高相关性和高准确性的生成系统，并通过优化和调优提升系统性能。

", "_id": "68f7497c7c93be3ff4bad7cb" }, { "code": "L75", "title": "Building RAG from Scratch in JavaScript", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

学习目标

掌握如何使用JavaScript从零开始构建一个完整的Retrieval Augmented Generation (RAG)系统
理解RAG系统的核心组件，包括Information Retrieval、Embeddings和Generative Models
学习如何将检索模块与生成模块无缝集成，以处理复杂的文本检索和生成任务
掌握如何在JavaScript中优化RAG系统的性能，确保在实际应用中的高效运行

", "_id": "68f7497c7c93be3ff4bad7cc" }, { "code": "L76", "title": "Tutorial (Azure AI Preparation)", "type": "Video", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

课程内容：

注册Azure账号，开通Speech Service，开通OpenAI API

具体任务：

学员在导师指导下注册Azure账号，

https://azure.microsoft.com/en-au/free/ai-services

开通Speech Service

https://portal.azure.com/#create/Microsoft.CognitiveServicesSpeechServices

入口文档

https://learn.microsoft.com/en-au/azure/ai-services/speech-service/overview#try-the-speech-service-for-free

开通Open AI API

https://platform.openai.com

https://chatgpt.com

", "_id": "68f7497c7c93be3ff4bad7cd" }, { "code": "L77", "title": "Azure AI Service和TTS", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

微软云Azure AI Service 提前注册

课程内容

Icebreaking，导师自我介绍，学员自我介绍
AI 简介
AI是什么葫芦里的什么药
AI是什么药（是什么，能干什么）
AI是什么葫芦（几种实现技术）
传统算法
深度学习
机器学习
大语言模型（机器学习的一种分支）
AI相关的几个典型岗位
Algorithm Engineer (算法工程师 - 大牛)
Hyperparameter tuning engineer （调参侠）
Prompt Engineer （提示工程师 - 调整优化提示）
Application Engineer (应用工程师 - 大部分的程序员，调用AI的API实现商业价值)
AI在澳洲的企业应用
Optus的应用案例
Optus 机器人
Optus 数字人
Service NSW的应用案例
客户输入自然语言的理解
语言之间的翻译
Azure AI Service 的简要介绍
Azure是什么？Azure有什么？
Azure AI Service 是什么？有什么？
演示Azure Protal

课堂实操练习

在Azure Portal上面体验文字转语音和语音转文字
登陆Azure Portal
进入Speech Studio
动手操作文字转语音
动手操作上传语音转文字
动手操作用麦克风录入语音转文字
跟随练习说明，用React写一个最简单的文字转语音（TTS - Text To Speech）Web应用
阅读练习说明，写一个form，包括 input，和 submit，输入文字，用window.speechSynthesis控件播放语音
===============中场休息10分钟==============
Azure API 介绍
Azure API 怎么读
跟随练习说明，用React写一个最简单的语音转文字（STT - Speech To Text）Web应用
写一个form，包括三个按钮：开始录音，暂停录音，停止录音
用microsoft-cognitiveservices-speech-sdk实现实时语音转文字
写一个文本显示框，显示转换之后的文字
讨论 - 练习2 和练习3 的局限和潜在风险
调用云AI服务的text to speech 对比直接用浏览器自带的text to speech 空间的好处和坏处是什么，不同的应用场景
练习3的实际应用中一个重要安全性问题 - 你的API Key会暴露在客户端
介绍另一种验证方式：Token
引入后端，跟随练习说明，用.net写一个获取token的后端
初始化一个Web API
配置好Web API
写一个controller，提供一个API /api/VoiceController/get-speech-token
在这个controller里面调用Azure cognitive 服务获取token并作为Response返回
讨论 - 本次课堂体验小结
实现效果

", "_id": "68f7497c7c93be3ff4bad7ce" }, { "code": "L78", "title": "Integrate Azure AI Service and Streaming", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

完成课程Azure AI Service和TTS

课程内容

Warmup，回顾上一节的练习和下一步练习
回顾后端获取短期token
下一步：前端用token通过Stream 模式和AI Service通讯，
跟随练习说明，写一个React App，调用后端获取token，并进行Stream实现TTS和STT
调用上面的后端获取token
从麦克风录音转换成文字
上传文件转换成文字
文字阅读（文字转语音）
文字阅读的暂停和继续
实现STT和TTS - Pros & Cons ？
讨论：继续优化Azure AI（1）练习的安全性
跟随练习说明更新上一节的 .net 后端应用，提供一个API，接受一个音频文件，调用Azure AI转化成文字，并作为Reponse 返回 -
增加一个API endpoint /api/VoiceController/upload 接受一个webm文件
保存文件并转换成wav
调用SpeechRecognizer 把文件传至Azure识别出文字
返回文字到Response
练习解释：为什么要转换成wav ？

===============中场休息10分钟==============

更新上一节的 React 前端，把录到的语音传给上面的API，获取文字
用react-mic录音
上传文件
Azure Speech Translation （语音翻译）介绍
练习：在Azure Portal 上体验翻译功能
练习：基于上一个练习增加一个API，实现语音翻译成文字功能
练习：基于上一个练习的前端，增加一个按钮，调用新增的翻译API，实现语音翻译成文字功能

讨论：回顾这两天Azure AI的使用体验

", "_id": "68f7497c7c93be3ff4bad7cf" }, { "code": "L79", "title": "Integrate Azure AI and OpenAI", "type": "Video", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

前置条件

完成课程 Integrate Azure AI Service and Streaming

已注册ChatGPT/Open AI并开通Open AI API服务（需要预存5美金）

课程内容

上次课程（Azure语音转文字和翻译）的回顾
Generative AI
几个最常见的Generative AI产品
ChatGPT 和 Open AI 简介
ChatGPT vs OpenAI
Open AI API 简介及其价钱
Open AI Platform
Assistant
Playground
Other
在澳洲企业的实际应用案例（如何玩转Prompt）
Employment Hero - 简历阅读和评判
Service NSW - ChatGPT 与 Azure CLU的PK
练习：Open AI API 初体验 - Open AI Playground 的体验

=============中场休息10分钟===============

基于上一章练习（Azure AI 2）的后端应用，改动后端API，提供同样的语音转文字功能，但背后调用的是Open AI，而不是Azure AI
调用Open AI 的 Rest API 把文件传至OpenAI识别出文字
返回文字到Response
整合上一节应用的前端测试（原则上前端无任何改动，实际上需要有一处小改动）
基于上一节的后端应用，改动后端API，提供翻译功能
调用Open AI 的 Rest API 把文件传至OpenAI翻译出文字
返回文字到Response
前端不需要改动，测试
做一个chatgpt的马甲：基于上一节的后端应用实现语音输入，文字回答
演示：在自己的机器上装一个ChatGPT的大语言模型：Ollama
AI 体验的小结和讨论

", "_id": "68f7497c7c93be3ff4bad7d0" }, { "code": "L80", "title": "Docker Introduction", "type": "Information", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

Docker 视频学习： https://youtu.be/gAkwW2tuIqE

", "_id": "68f7497c7c93be3ff4bad7d1" }, { "code": "L81", "title": "AWS基础", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

老师：Michel Su

公司：Atlassian

职位：SRE

内容：

1. AWS的基础知识，已经AWS是什么，为什么使用Cloud云计算服务

2. 云计算的优势是什么，云计算的种类，为什么要用AWS

3. IAM是什么，如何定义IAM，Users，Groups，Roles分别是什么，如何进行实施

4. s3的基本操作，如何创建S3的bucket

5. ec2是什么，如何启用ec2。ec2 ，ecs，lambda区别是什么，如何设计

6. Load Balancer是什么，Application Load Balancer用来做什么的。Network的协议是什么

7. AWS考试以及证书是什么

8. API gateway的实施

9. 使用老师提供的项目build一个Serverless的Web Application

", "_id": "68f7497c7c93be3ff4bad7d2" }, { "code": "L82", "title": "Workshop: AWS IAM的基本用法和高级使用", "type": "Workshop", "isLive": true, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Workshop 分享人： Henry

内容：

AWS IAM 创建账户
IAM 的 policy 如何设置
IAM 的 role 如何设置
当用户的 Policy 抵达上限，如何解决
IAM 如何设置 boundary，如何限制 User 只能使用悉尼地区服务
针对 Non-production 和 Production 如何配置权限

", "_id": "68f7497c7c93be3ff4bad7d3" }, { "code": "L83", "title": "AWS Lambda基础知识", "type": "Workshop", "isLive": true, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

分享人：Shaun

内容：

1. Serverles 基础概念

2. Faas 基础概念 Function-as-a-Service 概念

3. Lambda 如何使用，Lambda 的特点，优缺点

4. Lambda 在匠人学院 App 里的使用

5. 简单的 Lambda Demo

", "_id": "68f7497c7c93be3ff4bad7d4" }, { "code": "L84", "title": "Workshop：如何利用mediasoup实现多人视频会议", "type": "Workshop", "isLive": true, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Workshop：如何利用mediasoup实现多人视频会议

", "_id": "68f7497c7c93be3ff4bad7d5" }, { "code": "L85", "title": "5分钟手动部署Web Application到AWS S3静态网站", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

前端App部署基础

介绍如何准备前端应用以便于部署。
指导如何选择合适的部署平台和服务。

创建AWS S3 Bucket

逐步演示如何在AWS S3中创建一个新的Bucket。
讨论Bucket命名规则和配置选项。

编写Bucket策略

学习如何为Bucket编写安全策略。
分析策略语法和关键要素。

Bucket的日常操作

演示如何上传、下载和管理Bucket中的文件。
探索如何监控和维护Bucket。

", "_id": "68f7497c7c93be3ff4bad7d6" }, { "code": "L86", "title": "GraphQL101: 剥离RESTful的银行系统开发实践—Gary Sun", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Gary

内容：

RESTFul与GraphQL对比

探讨两种API设计范式的优缺点。
分析何时使用RESTFul，何时更适合选择GraphQL。

GraphQL的核心概念

详细介绍GraphQL的工作原理和主要特性。
讨论GraphQL如何改善数据获取和管理。

GraphQL查询语言

学习如何构建高效的查询，获取精确的数据。
实践GraphQL的强大灵活性，适应复杂的应用需求。

", "_id": "68f7497c7c93be3ff4bad7d7" }, { "code": "L87", "title": "SpringBoot的Production部署到AWS ECS Fargate，如何使用Microservice with docker", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: Xiaokai & Yinhang

内容：

Springboot 的 Docker 部署到 AWS
ECS AWS
ECS 如何进行 CICD
Task 是什么，如何使用
VPC 是什么
Subnet 是什么，如何使用
Microservice 是什么

", "_id": "68f7497c7c93be3ff4bad7d8" }, { "code": "L88", "title": "Workshop: 持续集成(CI)/持续部署(CD)的概念以及Jenkins的使用", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Roger

内容：

持续集成(CI)/持续部署(CD)的概念
Jenkins 如何一步一步部署上的
Jenkins 的 Docker Image 如何部署的
如何实现 Nodejs 后端的自动化部署
如何实现 React 前端的自动化部署

", "_id": "68f7497c7c93be3ff4bad7d9" }, { "code": "L89", "title": "CI/CD基础:使用Jenkins和AWS CodePipeline手把手部署一个Web App", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

内容：

1. Jenkins和AWS Codedeploy的区别是什么，有什么优点好处

2. 代码里的Jenkinsfile逐行解读

3. Jenkins如何开一个新的pipeline部署到Branch上

4. 如何使用AWS CodePipeline部署

", "_id": "68f7497c7c93be3ff4bad7da" }, { "code": "L90", "title": "Open AI Huggingface讲解 - Guang", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

OpenAI概览

介绍OpenAI的发展历程、愿景和主要成果。

提示词工程与高级使用

探讨如何精准地使用提示词来提高模型的效果。
分析高级应用技巧和策略。

OpenAI的其他模型

了解OpenAI提供的各种AI模型及其特点和用途。

开源AI模型对比

探讨与OpenAI相似的开源模型，比较它们的优势和局限。

产品和运维中的应用

分析OpenAI在实际产品开发和运维中的应用案例。
探索如何将AI模型融入生产实践。

", "_id": "68f7497c7c93be3ff4bad7db" }, { "code": "L91", "title": "用Kafka实践Event First设计思维—虎头锤", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 虎头锤

内容:

Kafka简介

介绍Kafka的功能和在现代数据处理中的重要性。
讨论Kafka的主要组件，包括生产者、消费者、主题和分区。

Event First设计

解析Event First设计方法的原则和优势。
分析如何使用Kafka构建事件驱动的系统架构。

Kafka实战应用

演示如何设置和配置Kafka环境。
指导如何创建Kafka主题，发送和接收消息。

", "_id": "68f7497c7c93be3ff4bad7dc" }, { "code": "L92", "title": "手把手带你打造高质量IT人的LinkedIn主页", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

手把手带你打造高质量IT人的LinkedIn主页

", "_id": "68f7497c7c93be3ff4bad7dd" }, { "code": "L93", "title": "LinkedIn & CV", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

1. 校招和社招的要求，entry level vs junior level vs mid level

\n

2. 职场规划，沟通能力的重要性，team match 的重要性

\n

3. 澳洲公司情况，产品方向 vs 咨询方向

\n

4. 找工作网站的区别、建议

\n

5. 工作类型，permanent vs contractor，薪资期待，福利待遇

\n

6. 获取工作的方式：meetup、猎头、内推，如何区分和利用猎头，内推的作用

\n

7. 如何经营 linkedin：提高 SEO 和可读性、扩大人脉、利用 open network、写好 profile

\n

8. 招聘流程，怎样投简历，怎样说未来计划，怎样说 notice period

\n

9. 怎样写简历，LMS 简历制作功能，怎样罗列自己的技能，怎样把项目经历写进简历

\n

10. 求职信的作用，怎样写求职信

", "_id": "68f7497c7c93be3ff4bad7de" }, { "code": "L94", "title": "澳洲工作职场介绍", "type": "Video", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

\"澳洲公司全景：行业领袖与职业机遇\"

\n

澳洲公司的市场概况：深入介绍澳洲主要行业和领先公司，包括它们的市场定位、企业文化和核心价值。
澳洲公司的职业前景：探讨在澳洲各种类型公司工作的优势和挑战，以及如何在这些环境中发展职业生涯。

\n

\"就业方向解析：产品与咨询服务\"

\n

产品方向的职业机遇：探讨在产品管理、开发和策略等领域的职业路径，以及如何在这些领域成功发展。
咨询服务方向的职业途径：深入分析咨询行业的工作性质、职业晋升路径和必备技能，以及如何在咨询服务领域建立成功的职业。

", "_id": "68f7497c7c93be3ff4bad7df" }, { "code": "L95", "title": "澳洲企业招聘流程", "type": "Video", "isLive": false, "duration": 30, "steps": [], "labs": [], "learns": [], "description": "

\"澳洲企业招聘全攻略：三大关键阶段深度解析\"

\n

简历和求职信的制作与提交：学习如何撰写针对澳洲市场的高效简历和求职信，包括格式、内容和展现个人特色的技巧。
面试的全面准备：深入分析招聘过程中的各种面试类型，包括初步面试、在线评估、技术面试和管理层面试。提供准备技巧、常见问题解答和成功策略。
Offer 阶段的策略：探讨如何在收到工作邀约时进行有效的沟通和谈判，包括薪资、福利和其他工作条件。

", "_id": "68f7497c7c93be3ff4bad7e0" }, { "code": "L96", "title": "招聘官挑选简历的标准", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

招聘官在挑选简历时通常会根据以下几个标准进行筛选：

\n

符合职位要求：首先会检查应聘者的教育背景、工作经验、技能和资格是否符合岗位的具体要求。
清晰、专业的简历格式：一份清晰、逻辑性强、格式规范、无拼写错误的简历更容易获得青睐。
关键字匹配：许多公司使用自动跟踪系统（ATS）来筛选简历，这些系统会根据职位描述中的关键字来评估简历的相关性。
成就和成绩：与其仅仅列出职责，招聘官更倾向于看到具体的成就和成绩，例如销售额、成本节约、项目成功实施等量化的结果。
职业发展的连贯性：职业路径中的逻辑发展和进步表明了候选人的职业目标和职业规划。
个性和文化契合度：简历中的个人陈述或兴趣爱好部分可以体现出候选人是否可能与公司文化和团队精神相契合。
职业目标：简历应该传达出候选人的职业目标与申请职位是如何对齐的。
社交媒体和在线存在：有时候招聘官也会查看LinkedIn等专业网络或其他社交媒体来了解候选人的专业背景和行为表现。
推荐信和联系人：提供可以证实候选人能力和表现的推荐人可以是一个加分项。
附加技能：除了基本技能之外，候选人显示的任何额外技能或证书也会让其简历更加突出。

", "_id": "68f7497c7c93be3ff4bad7e1" }, { "code": "L97", "title": "如何撰写 IT 专业简历", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

清晰的格式和布局：使用易于阅读的字体和清晰的布局。保持简历的长度适中，通常不超过两页。
个人信息和联系方式：包括你的姓名、职业头衔（如软件工程师、系统管理员等）、联系电话、电子邮箱和 LinkedIn 个人页面链接。
专业摘要或目标声明：简洁地概述你的职业背景、技能和你寻求的职位类型。这部分应该具有吸引力且针对你申请的职位量身定制。
技术技能：明确列出你的技术技能，如编程语言（例如 Java、Python）、框架（如 Spring、React）、数据库（如 MySQL、MongoDB）和工具（如 Git、Docker）。根据求职职位的要求来调整技能列表。
工作经验：按时间顺序列出你的工作经历，包括公司名称、职位、工作时间和职责描述。突出具体成就和使用的技术。
项目经历：如果你有相关的项目经验（包括学校项目、个人项目或自由职业项目），请列出来，说明你的角色、使用的技术和项目成果。
教育背景：提供你的最高学历信息，包括学校名称、学位、专业和毕业时间。如果你是新毕业生，可以更详细地说明你的教育背景。
证书和培训：如果你有相关的行业证书（如 AWS Certified Solutions Architect、Cisco 的 CCNA）或完成了重要的专业培训，务必列出。
其他信息：如语言能力、志愿者经验、获奖情况等，如果它们对你申请的职位有帮助，可以选择性地加入。
定制你的简历：针对每个职位调整你的简历，确保它符合职位描述中的关键字和要求。
校对和审核：在提交前，请仔细校对你的简历，确保没有拼写和语法错误。有可能的话，让你的同事或朋友帮你复查。

", "_id": "68f7497c7c93be3ff4bad7e2" }, { "code": "L98", "title": "简历常见问题", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"简历制作艺术：重点、加减分项及编写原则\"

\n

简历的重点内容：指导您如何突出简历中的重点内容，包括职业经历、技能、成就和教育背景，确保雇主能够快速抓住您的核心优势。
避免的简历减分项：教您识别和避免简历中的常见错误和不利因素，如过度冗长、格式不当或信息不准确等。
简历的加分元素：提供策略和建议，帮助您在简历中加入能够提升吸引力的元素，如特定技能证明、相关项目经验或突出成就等。
编写简历的基本原则：探讨在编写简历时应遵循的基本原则，包括清晰性、专业性和针对性，以及如何根据目标职位定制简历。

", "_id": "68f7497c7c93be3ff4bad7e3" }, { "code": "L99", "title": "如何利用 ChatGPT 写简历", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"利用 ChatGPT 提升简历撰写技巧：指南与实践\"

\n

ChatGPT 基本使用方法：本节课将介绍 ChatGPT 的基础功能和操作方法，帮助学员快速掌握如何有效使用这一先进的工具。
ChatGPT 在简历撰写中的应用技巧：这部分将指导学员如何充分利用 ChatGPT 在简历撰写中的潜力，包括格式建议、内容生成和优化技巧，以打造一份吸引眼球的简历。
与 ChatGPT 进行个性化交互：教授学员如何与 ChatGPT 进行有效的个性化交互，以获取更加符合职业目标和个人特色的简历内容。
ChatGPT 实例演示：通过实际操作演示，展示 ChatGPT 在简历撰写和改进方面的应用，帮助学员更好地理解和掌握实际操作技巧。

", "_id": "68f7497c7c93be3ff4bad7e4" }, { "code": "L100", "title": "手把手带着运营 LinkedIn", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"LinkedIn 职业建设：完善个人资料与网络拓展\"

\n

维护完整、专业的 LinkedIn 个人资料：指导您如何创建和维护一个展现您职业经历、技能和成就的专业 LinkedIn 资料。这包括头像选择、经历描述、技能展示和获取推荐等关键元素。
加入与行业和兴趣相关的 LinkedIn 群组：教您如何找到和加入与您的职业领域和兴趣相关的 LinkedIn 群组，以便进行行业交流、拓展职业网络和获取行业最新动态。

", "_id": "68f7497c7c93be3ff4bad7e5" }, { "code": "L101", "title": "如何利用 LinkedIn 准备面试", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

\"求职成功攻略：职位描述解析、面试准备与公司研究\"

\n

这个课程旨在全面指导您如何在求职过程中取得成功。本课程将包括：

\n

职位描述深度解析：教您如何仔细分析职位描述，理解职位要求的核心内容和隐含条件，从而更有效地准备申请材料和面试。
面试准备技巧：提供面试准备的策略，包括如何针对面试描述准备回答问题、展示自己的优势，以及如何应对常见面试问题。
利用 LinkedIn 搜索目标公司：指导您如何有效利用 LinkedIn 平台搜索并研究目标公司，包括公司背景、文化、行业地位等信息，以增强您的求职策略。

", "_id": "68f7497c7c93be3ff4bad7e6" }, { "code": "L102", "title": "如何准备澳洲大厂开发类岗位面试", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

老师：Xuecong，就职于悉尼 AWS，SDE

内容：

1. 澳洲大厂开发类岗位面试常见流程

2. 如何‘管理'整个面试流程

3. 如何准备面试申请

4. 准备面试，哪些专业能力需要提高

5. 如何准备大厂面试，体现价值观和企业文化

6. 面试当天注意事项

7. 如何接受，拒绝，协商 Offer

", "_id": "68f7497c7c93be3ff4bad7e7" }, { "code": "L103", "title": "求职国内秋招大厂前端开发岗，需要做哪些准备", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

内容：

国内大厂前端岗位如何细分？
获得前端岗位 Offer 所需的几大要素
如何准备面试中的八股文、算法等硬核考点？
怎样的实习经历可以让你在校招求职中脱颖而出？

", "_id": "68f7497c7c93be3ff4bad7e8" }, { "code": "L104", "title": "如何准备国内秋招，才能获得大厂Offer?", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Chen

内容：

秋招时间规划

解析秋招的主要时间节点，帮助你合理安排准备时间。
讨论如何在学习、实习和求职之间平衡。

准备秋招的步骤

提供详细的秋招准备指南，包括市场调研、目标公司筛选等。
强调技能提升和实战经验积累的重要性。

笔试准备技巧

分析常见的笔试题型和应对策略。
提供实用的学习资源和练习方法。

面试技巧训练

探讨如何在面试中有效展现你的能力和潜力。
分享面试中的常见问题和最佳回答技巧。

", "_id": "68f7497c7c93be3ff4bad7e9" }, { "code": "L105", "title": "在澳洲如何找到一份Java Developer的工作 -- 虎头锤", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：虎头锤

内容:

澳洲Java工作市场分析

探索澳洲Java开发岗位的市场需求和主要工作要求。
分析技术技能和行业经验在职场中的重要性。

回答行为面试问题

提供实用的策略和技巧，帮助你准备和回答行为面试中的问题。
分析常见的行为问题及其背后的意图。

简历撰写和个人品牌打造

教你如何撰写一份突出你技能和经验的简历。
讨论如何在简历中有效地展示你的项目经验和技术能力。

", "_id": "68f7497c7c93be3ff4bad7ea" }, { "code": "L106", "title": "澳洲程序员找工作必备哪些后端知识", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 老虎

内容:

澳洲后端开发者必备知识

分析澳洲后端开发职位的常见要求和技能需求。
探讨关键的编程语言（如Java、Python、Node.js）和框架。

数据库技能

介绍常用的数据库技术，包括关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB）。

API开发与RESTful服务

学习如何设计和实现高效的RESTful API。

版本控制和代码协作

强调Git等版本控制系统的重要性，并探索代码协作的最佳实践。

云服务和容器化技术

介绍云计算服务（如AWS、Azure）和容器技术（如Docker、Kubernetes）。

软件工程最佳实践

探讨如何编写可维护、高效的代码，以及软件测试和持续集成的重要性。

", "_id": "68f7497c7c93be3ff4bad7eb" }, { "code": "L107", "title": "在澳洲，IT学生如何准备System Design面试-----Ben", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Ben

内容：

系统设计面试的基本功

概念理解：讲解系统设计面试中经常涉及的关键概念，如可扩展性、可靠性、效率等。
技能要点：强调分析问题、沟通思路、考虑权衡的重要性，并提供实用技巧帮助你在面试中脱颖而出。

面试准备方法

资源梳理：介绍高质量的学习资源和实践工具，帮助你系统地准备系统设计面试。

Monolith架构解析

定义和特点：详细解释Monolith（单体架构）的概念，并探讨其优缺点。

Microservice架构探索

核心理念：深入讲解Microservice（微服务架构）的基本原则和结构。

", "_id": "68f7497c7c93be3ff4bad7ec" }, { "code": "L108", "title": "从0到1打造React/Node 全栈IoT实时应用——Bryan", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

主讲人：Bryan

内容：

IoT概览

介绍IoT的定义、发展历程和关键技术。
分析IoT在不同行业中的应用案例。

IoT架构与最佳实践

讨论IoT系统的典型架构和组件。
探索IoT项目的设计原则和最佳实践。

实时应用与技术栈

解析构建IoT实时应用的技术栈和框架。
分析物联网的数据处理和通信技术。

案例研究和演示

通过具体的项目示例展示IoT技术的应用。
演示如何实现IoT解决方案，并讨论其实际效果。

", "_id": "68f7497c7c93be3ff4bad7ed" }, { "code": "L109", "title": "Google大佬教你，如何突破年薪20w澳币天花板 -- 韭天", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人: 韭天

内容:

薪资的组成

深入了解薪资的不同组成部分，包括基本工资、奖金、福利等。

提升薪资的方法

探讨如何通过技能提升、职位晋升等方式增加薪资。
分析职业发展中关键的技能和资格认证。

优质雇主的选择

比较不同类型的公司及其提供的薪资水平。
讨论如何选择能够提供更好薪资和职业发展机会的公司。

职业生涯规划

指导如何根据个人目标和市场趋势规划职业生涯。
分析长期职业规划对薪资和职业满意度的影响。

", "_id": "68f7497c7c93be3ff4bad7ee" }, { "code": "L110", "title": "Elastic Search基础知识分享Workshop", "type": "Video", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

分享人：Kevin

内容：

Logging Saas 服务商横向比较：Elastic Search，Splunk，Sumo Logic，Datadog，New Relic 等
Elastic Search 是什么，Elastic 的优势是什么
Elastic Search 架构 Log，Beats，Logstash，Elasticsearch，Kibana
Beats 的使用，Beats 的特点
Elastic Search 在匠人的架构，Lambda 如何使用
Elastic Search 的如何创建 Dashboard
Elastic Search 的如何查询 Logging 信息，如何做筛选

", "_id": "68f7497c7c93be3ff4bad7ef" }, { "code": "L111", "title": "关于如何解决Error Messages，几个步骤", "type": "Information", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

应对error message的几个步骤：

1. 详细阅读一下error message，看报错的内容是什么，是否和自己操作的步骤有关，你是否能从报错的内容中找到出错位置，以及出错原因

2. 如果自己无法理解错误信息，尝试提炼出error message中的关键语句，在google上搜索。这一步很重要。如果全盘复制error message，有可能会因为字符数太多而无法详细匹配到你要找的答案。所以如何精炼错误信息的同时又精准的找到网上的答案，也是锻炼搜索能力的重要一步

3. 尝试从google的搜索结果当中，逐一比较，是否和你的错误信息相关。如果是，可以尝试google提出的解决方案。通常情况下你找到的第一个不一定是能解决你问题的那个一个。有可能需要尝试五六个/六七个不同的方案，才最终能找到你想要的内容

4. 如果google上的内容也无法帮你解决问题，可以截图错误信息，注意截图中要包含你所跑的命令和详细的错误信息，发到群里，大家帮你参考。

", "_id": "68f7497c7c93be3ff4bad7f0" }, { "code": "L112", "title": "Student Showcase: Stripe Integration in Practice", "type": "Workshop", "isLive": true, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

Student Showcase: Stripe Integration in Practice

", "_id": "68f7497c7c93be3ff4bad7f1" }, { "code": "L113", "title": "HTML入门实战：从空白到CareerMate网页框架", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

这是项目开发正式启动的第一节技术课。你将从零搭建 CareerMate AI 的 Landing Page 基础网页结构，完成一个可在浏览器打开、具备真实页面骨架的静态页面，为后续 CSS 布局、JavaScript 交互和 React 重构打下基础

本节课目标

理解 HTML 在真实产品中的作用：结构层（Structure Layer）。
能独立写出 CareerMate Landing Page 的 页面骨架与主要区块结构。
建立“先搭结构 → 再做样式 → 再加交互”的工程化开发顺序。

核心内容

HTML 基础与工程化写法
- HTML 文档结构：doctype / head / body
- 常见标签与语义化（Semantic HTML）：header / nav / section / article / footer
- 页面结构分层思维：每一块页面 = 一个可维护的 section
CareerMate Landing Page 信息架构
- 解析 Landing Page 需要的核心模块（按真实产品信息流）：
  - Hero Section（产品一句话定位 + CTA）
  - Features Section（核心功能亮点）
  - How It Works / Workflow（用户使用流程）
  - Testimonials / Social Proof（可先留占位）
  - Footer（版权、链接、联系方式）
- 用 HTML 先把这些模块 按顺序搭成页面框架
从空白到可运行页面
- 新建项目目录与文件结构：
  - index.html
  - assets/（图片占位）
  - styles/（先留空，CSS 下节课做）
- 浏览器打开并验证页面结构正确
代码规范与可读性
- 缩进、注释、层级命名
- 每个 section 先写结构和占位文案（后面再逐步替换）

", "_id": "691abd061e1fa03b57b0faca" }, { "code": "L114", "title": "CSS基础与产品风格打造：让页面“有感觉”", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

上一节我们完成了CareerMate AI网页的HTML结构搭建，本节你将正式“点亮”整个页面：加入色彩、排版、组件样式和响应式能力，为页面赋予专业、统一且可扩展的视觉风格。

这是你第一次从视觉角度“做出一个产品的感觉”。

本节课目标

学会用CSS变量统一管理颜色、间距、阴影等视觉参数
为按钮、卡片等核心组件添加专业风格的样式
掌握网页布局的基础排版、留白与分区设计
建立初步响应式布局能力，适配不同屏幕宽度

核心内容

全局样式与设计变量（Design Tokens）

使用 :root 设置全局CSS变量（颜色、边框圆角、阴影、最大宽度等）
配置基础字体大小、行高、背景色、链接样式等
实现统一的视觉基调和清晰的页面节奏感

💡 例如：你只需改一个变量，就能全站换色、统一间距！

核心组件美化

按钮 Button：
- 主按钮（实心）：背景色 + 白色字体
- 次按钮（描边）：透明背景 + 有边框 + hover 效果
卡片 Card：
- 白底、圆角、有阴影，看起来干净整洁
大号CTA横幅：
- 使用渐变背景（蓝→紫），文字居中，突出视觉焦点

所有组件都会对照原型截图效果，完成“像产品”的还原。

页面分区布局美化

每个 <section> 添加恰当的上下内边距（padding）
设置最大宽度容器（居中），让内容不“贴边”
统一区块标题样式，增强视觉层次
适当加上浅色背景、分割线等辅助元素

基础响应式设计

移动优先 开发（Mobile-first）
用媒体查询（@media）添加断点（如768px、1024px）
内容列在小屏上垂直堆叠，避免横向滚动
字体、卡片、按钮在手机上依旧可读易点

小贴士

把网页想象成一本杂志，好的留白、对齐和分区让读者“看得舒服”。
样式变量就像是调色板和尺子，既节省时间又让设计专业统一。

", "_id": "691abf4d1e1fa03b57b15c44" }, { "code": "L115", "title": "JavaScript交互入门：让网页“动起来", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

写网页，不只是堆静态内容。本节课我们正式开启前端开发的“灵魂”：JavaScript，让你的CareerMate AI网页从静态页面变成真正“会动、能互动”的Web应用。

你将动手实现网页中的浮动按钮、用户表单交互、验证逻辑、接口请求等常见交互功能，完成从“展示型网页”向“可交互应用”的进阶。

本节课目标

掌握如何用原生JavaScript为网页添加交互行为
能独立实现常见交互功能（按钮显示/隐藏、表单验证、数据提交）
理解事件绑定、条件渲染、用户输入校验等JS基础核心概念
为后续学习React中的“状态管理”和“组件逻辑”打下基础

核心内容

悬浮按钮浮出与回顶功能

添加一个「回到顶部」浮动按钮（右下角）
当页面下滑一段距离后按钮才出现，点击后平滑滚动回到顶部（或跳转至Hero CTA）
自动适配移动端，确保不遮挡主要内容

✨ 常见于电商官网或文档页的「Back to Top」，这节你也能自己实现！

联系表单功能开发

让已有的表单（Name / Email / Message）动起来
通过点击提交按钮收集数据，并反馈提交状态
提交前校验字段内容是否填写完整、格式是否正确

前端表单校验逻辑

校验规则：
Email 必须是合法格式
Message 长度不少于一定字符
所有字段为必填
校验失败：贴近字段显示错误提示
校验通过：允许发送请求

🎯 这是实际开发中 90% 表单交互的核心逻辑，掌握即能通吃大部分业务需求！

模拟提交请求（Mock API）

使用 JavaScript 的 fetch 或 setTimeout 模拟“表单已发送”的请求流程
成功：清空表单，弹出绿色成功提示
失败：弹出红色错误提示，且保留输入内容以便修改重试

💡 学会用 fetch 模拟接口请求，是后续开发任何功能（登录/注册/搜索/上传）的基础。

学习小贴士

JavaScript 不是背语法，而是学“怎么让网页回应用户”
表单功能 = 用户输入 → 校验 → 反馈 → 发送 → 响应，这一整套流程理解后能套用到几乎所有功能
想象你是网页的“灵魂控制器”：用户点击，你来决定网页做什么

完成这节课，你的CareerMate网页就不再只是“能看”，而是“能用、能反馈”的真正产品雏形。欢迎进入JavaScript的世界，从此网页开始动起来了！

PPT： https://www.canva.com/design/DAG7pygSHKA/bMpu6GVYsOXJtCjxdWUTCw/edit?utm_content=DAG7pygSHKA&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

", "_id": "691ac1c71e1fa03b57b1b68a" }, { "code": "L116", "title": "Git 版本管理的第一步：掌握Git并上传你的项目", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

探索版本控制的魔法

为什么我们都爱版本控制？
分布式(Distributed) vs 集中式(Centralized)：Git的独特之处。
什么是分布式版本控制系统
主流的 git 系统介绍

开启你的Git旅程

一步步引导你安装和配置Git。
为Git设定你的身份：告诉Git你是谁。
初始化Git空间: **git init**的魔力。
mkdir：快速创建你的项目目录。

创建并驾驭你的代码宝库（Repository）

初始化你的第一个Git仓库。
如何管理和跟踪你的代码变更。

保护与跟踪你的代码

如何安全地保存你的代码更改？
了解**add**, **commit**以及它们如何帮助你管理更改。
深入理解**git log**：用美化的log追溯你的代码历史。
.gitignore：掌握哪些文件不应纳入版本控制。
探索日常工作中使用Git的标准流程。
远程仓库(Remote Repository)的创建与管理：掌握**clone**, push, pull。

Sourcetree：让Git操作可视化

为什么需要图形化工具？
如何使用Sourcetree提高工作效率。

出错了怎么办：撤回与修复

掌握reset, revert, amend：让你的代码时光倒流。
checkout和stash：两种保存和切换的策略，它们的不同之处。

更进一步：分支管理与合作

学习如何merge、处理代码冲突。
rebase：为什么和何时使用它。
pull request与代码审查：如何高效、规范地合作。

当代码世界相撞：冲突(Conflict)解决大师

当代码出现纷争，我们该如何和平解决？
使用rebase与merge的策略，成为解决冲突的高手。

Git的小贴士和技巧

介绍神奇的.gitignore文件：让某些文件“隐形”。
快速、有效地查看你的代码历史。

Git遇见GitHub：开放的代码舞台

GitHub: 一个开发者的乐园。
如何在GitHub上展示你的才华，与全球开发者共舞。

Links:

Git client: https://git-scm.com/
SourceTree: https://www.sourcetreeapp.com/
Visualizing Git: http://git-school.github.io/visualizing-git/#free
Windows Terminal: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
Powerline for Windows Terminal: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup
Windows Subsystem for Linux: https://docs.microsoft.com/en-us/windows/wsl/install-win10

", "_id": "691aed701e1fa03b57b815d1" }, { "code": "L117", "title": "GitHub Action + CICD自动部署上线：让你的CareerMate网页全球可见", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

CICD自动部署上线：让你的CareerMate网页全球可见

", "_id": "691aefcb1e1fa03b57b89a53" }, { "code": "L118", "title": "网页布局与响应式：Flex + Grid 打造专业结构", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "

本节课，你将正式掌握如何用现代 CSS 布局系统（Flexbox + Grid）构建出一个既美观又实用的网页结构。你会手把手完成 CareerMate AI 的各大核心页面区域，从导航栏、Hero 区、功能展示卡片到 Testimonials 和 Footer，用专业手法打造真正“像产品”的页面。

本节课目标

掌握 Flexbox 与 CSS Grid 的基本语法与常见应用场景
能根据设计图，搭建页面各区域结构并保持良好对齐
实现页面在不同设备尺寸下自动适配的响应式布局
理解开发中“移动优先”布局策略

核心内容拆解

顶部导航栏布局（Flexbox）

左边：品牌 Logo
中间：功能导航链接（如 Features / Docs）
右边：登录按钮 + “Get Pro” CTA
使用 Flex 控制三栏对齐，确保横向缩放时元素自动换行或堆叠整齐

🧠 小技巧：用 justify-content: space-between + align-items: center 实现主流导航布局

Hero 区块排布（Flex + Grid）

中心大标题 + 描述文字 + 横向 CTA 按钮组
下方是三张 preview 预览卡片（横向排列，移动端自动堆叠）

举例说明：PC 看起来像三张卡片横着排队站好，手机上则乖乖一个个叠起来，适应不同屏幕。

“Still Struggling…” 对比区块（Grid）

左侧：痛点 bullet list（如“简历没人看”）
右侧：右边是渐变色 promo 卡片（吸睛的视觉引导）

使用 Grid 实现两栏对比展示，大屏并排、小屏自动垂直堆叠。

Feature 功能卡片展示（Grid）

展示四大功能（AI 模拟面试、简历分析等），用 2×2 网格排布
移动端自动变成一列，提升可读性
控制卡片等高，保持整洁视觉效果

AI Demo 互动示意（Grid + Flex）

左边模拟“使用流程”步骤（小图 + 说明）
右边模拟 AI 聊天窗口 Demo（图形或文字区域）
加一个悬浮按钮作为交互元素，位置固定不遮挡内容

这个模块是网页的“高光片段”，不仅功能清晰，布局也要稳定、灵活。

Testimonials 与 Footer 区域（Grid）

用户评价卡片横向排布 + 自适应响应式结构
Footer 部分结构清晰，Logo + 链接 + 联系方式合理排布

注意统一的间距（padding/margin）与视觉平衡，提升页面“高级感”。

响应式技巧穿插讲解

所有布局均采用“移动优先”开发方式
设置断点（768px、1024px）控制布局切换
避免横向滚动条、文字挤压、元素错位等常见错误

完成这节课，你将能熟练运用 Flex 和 Grid 两大排布神器，把之前搭好的结构“排得漂亮、看得舒服、改得方便”。你的 CareerMate 网页也将真正从“搭起来”进入“设计感 + 专业度兼具”的阶段。

💬 一句话总结：布局学得好，页面不会“乱跑”。

", "_id": "691af0131e1fa03b57b89ee9" }, { "code": "L119", "title": "React起步：从零创建你的第一个前端应用&SOLID", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691c3da683c15bc97842e7cb" }, { "code": "L120", "title": "登录界面开发：打造你的第一个可交互前端系统", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691c3de683c15bc97842f1f1" }, { "code": "L121", "title": "注册界面开发：组件切换与复用逻辑", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691c451483c15bc9784488b5" }, { "code": "L122", "title": "表单验证与用户体验优化", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691c455283c15bc978449220" }, { "code": "L123", "title": "前端生产部署：S3 + CloudFront 静态托管", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691c45ac83c15bc9784499b2" }, { "code": "L124", "title": "初识后端世界：Express 与 RESTful API 概念", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691d669983c15bc9785e3944" }, { "code": "L125", "title": "连接数据库：让CareerMate的数据真正存起来", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691d66c783c15bc9785e3edf" }, { "code": "L126", "title": "注册API开发：从前端输入到数据库存储,登录API开发：实现可验证的用户身份系统", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691d671883c15bc9785e42a6" }, { "code": "L127", "title": "用户认证与权限保护：安全地管理用户状态", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "691d673883c15bc9785e43d6" }, { "code": "L128", "title": "用户Dashboard设计与信息展示", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920340783c15bc97894f71c" }, { "code": "L129", "title": "用户信息编辑与更新API", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920342783c15bc9789503ad" }, { "code": "L130", "title": "删除与安全：实现账号删除功能", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69e329759f9cc30e74197964" }, { "code": "L131", "title": "文件上传与头像管理功能", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69e329759f9cc30e7419796e" }, { "code": "L132", "title": "AWS入门：从本地到云端的后端部署", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920347a83c15bc978951a0d" }, { "code": "L133", "title": "全栈项目云端整合与测试", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920349283c15bc978951ff7" }, { "code": "L134", "title": "AI模块导入与OpenAI API初体验 & Prompt Engineering：让AI更懂你", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "692034b683c15bc978952a69" }, { "code": "L135", "title": "前端聊天UI设计与Streaming显示", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "692034cd83c15bc978952f76" }, { "code": "L136", "title": "引入记忆与上下文：打造有思考的AI", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "692034e683c15bc9789534af" }, { "code": "L137", "title": "Vector Database与RAG检索增强", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "692034fe83c15bc9789539ac" }, { "code": "L138", "title": "从项目到产品：生产思维与上线规划", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920351b83c15bc978953f4f" }, { "code": "L139", "title": "安全与稳定性：保护你的AI服务", "type": "Lesson", "isLive": false, "duration": 150, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920353383c15bc9789545d7" }, { "code": "L140", "title": "性能与体验：优化AI响应速度", "type": "Lesson", "isLive": false, "duration": 150, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920354f83c15bc978954b29" }, { "code": "L141", "title": "项目回顾与上线验收", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6920356d83c15bc978955231" }, { "code": "L142", "title": "Tutorial (Git)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6927c369fd4d3eb9181cbe39" }, { "code": "L143", "title": "HTML基础测试", "type": "Quiz", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "

This quiz is designed to check your fundamental understanding of HTML before we move into CSS, JavaScript, and project development.
It covers core concepts such as document structure, common tags, semantic elements, attributes, lists, forms, and basic HTML rules.

", "_id": "692bcfc778a923b9d419cb0e" }, { "code": "L144", "title": "Build Weather App", "type": "Lab", "isLive": false, "duration": 60, "steps": [], "labs": [], "learns": [], "description": "", "_id": "692c08f1200cd2c7adda19e6" }, { "code": "L145", "title": "Tutorial (html, css, js)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "

在完成了前几节基础课程之后，你已经动手搭建了 CareerMate AI 的基础页面结构、样式和交互功能。这次 Tutorial 是一个“集中答疑 + 老师帮你看代码”的环节，帮助你：

解决你在 HTML / CSS / JS 实战中遇到的技术卡点
帮你Review代码，优化你的结构与写法
通过对比其他同学的问题，拓展思路、少走弯路

这堂课不会讲新知识点，而是由老师现场解答你提交的问题，并手把手分析你写的代码。欢迎带着“具体问题 + 具体代码”来提问！

", "_id": "692d46920c0e8cfa69b20663" }, { "code": "L146", "title": "Github Page: Static Website Deployment", "type": "Roadmap", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "693f5574ae10f7af22f2ba69" }, { "code": "L147", "title": "Vibe Coding", "type": "Lesson", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69411b72bc0df65b189276f1" }, { "code": "L148", "title": "AI 模型对比参考", "type": "Information", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "696f1780120fcc1591163322" }, { "code": "L149", "title": "Tutorial (React)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "697aef3dc8f1f94b64764f4b" }, { "code": "L150", "title": "Tutorial (Node)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6982e47d7711f8c9cc8d670e" }, { "code": "L151", "title": "Tutorial (React & Node)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "698950de69b2be043c1f5745" }, { "code": "L152", "title": "页面路由和 React Context", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69894af37b20036344bc1e53" }, { "code": "L153", "title": "用户注册和登陆，调用后端 API 并保存状态", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69894b427b20036344bc3d30" }, { "code": "L154", "title": "CI/CD, 静态代码检查和单元测试", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69894b907b20036344bc4f50" }, { "code": "L155", "title": "用户 Dashboard 页面开发: React 哲学训练", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69894d7d69b2be043c1b942a" }, { "code": "L156", "title": "用户 Dashboard 页面开发: useEffect 获取 API 数据", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69894dc169b2be043c1bde2f" }, { "code": "L157", "title": "前端产品上线，控制环境变量", "type": "Lesson", "isLive": false, "duration": 180, "steps": [], "labs": [], "learns": [], "description": "", "_id": "69894ea369b2be043c1cd3f5" }, { "code": "L158", "title": "Tutorial (React & Node)", "type": "Tutorial", "isLive": false, "duration": 120, "steps": [], "labs": [], "learns": [], "description": "", "_id": "6982e70c7711f8c9cc8ddcf1" } ] } ], "program": { "_id": "6982e2367711f8c9cc8cfbff", "slug": "ai-engineer-全栈项目班30期", "name": "AI Engineer 全栈项目班30期", "programPhase": 30, "commenceCourseDate": "2026-04-12T00:00:00.000Z", "completeDate": "2026-07-29T00:00:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2026-04-05T00:00:00.000Z", "studentCount": 2 }, "programs": [ { "_id": "6982e2367711f8c9cc8cfbff", "slug": "ai-engineer-全栈项目班30期", "name": "AI Engineer 全栈项目班30期", "programPhase": 30, "commenceCourseDate": "2026-04-12T00:00:00.000Z", "completeDate": "2026-07-29T00:00:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2026-04-05T00:00:00.000Z", "studentCount": 2 }, { "_id": "699e5cff66bd6c9af80ac5dc", "slug": "ai-engineer-全栈项目班29期-英文班", "name": "AI Engineer 全栈项目班29期（英文班）", "programPhase": 29, "commenceCourseDate": "2026-03-29T00:00:00.000Z", "completeDate": "", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2026-03-22T00:00:00.000Z", "studentCount": 19 }, { "_id": "68590ca7e676e200f4a2cbf5", "slug": "ai-web全栈班28期ai-engineer方向", "name": "AI Web全栈班28期AI Engineer方向", "programPhase": 28, "commenceCourseDate": "2025-11-30T00:00:00.000Z", "completeDate": "2026-04-05T00:00:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2025-11-23T00:00:00.000Z", "studentCount": 19 }, { "_id": "68429846c551510013b33361", "slug": "ai-web-27-net", "name": "AI Web全栈班27期.NET方向", "programPhase": 27, "commenceCourseDate": "2025-08-03T09:30:00.000Z", "completeDate": "2025-12-30T09:30:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2025-07-27T09:30:00.000Z", "studentCount": 3 }, { "_id": "6800b5d87f3232008c946e7c", "slug": "ai-web-27-node-js", "name": "AI Web全栈班27期Node.js方向", "programPhase": 27, "commenceCourseDate": "2025-08-03T08:05:56.000Z", "completeDate": "2025-12-30T08:03:36.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2025-07-27T08:03:36.000Z", "studentCount": 0 }, { "_id": "67244bd6ea33cf003687af94", "slug": "ai-web-26-net", "name": "AI Web全栈班26期.NET方向", "programPhase": 26, "commenceCourseDate": "2025-04-01T08:30:00.000Z", "completeDate": "2025-07-20T08:30:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2025-03-16T08:30:00.000Z", "studentCount": 0 }, { "_id": "672448ecea33cf003687af93", "slug": "web-25-nodejs-ai", "name": "Web全栈班25期暑假特别班（NodeJS+AI）", "programPhase": 25, "commenceCourseDate": "2024-12-17T08:30:00.000Z", "completeDate": "2025-04-06T08:30:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2024-12-17T08:30:00.000Z", "studentCount": 0 }, { "_id": "65efbf8ca66528006770d4dc", "slug": "web-24-nodejs-1", "name": "Web全栈班24期NodeJS方向", "programPhase": 24, "commenceCourseDate": "2024-10-27T08:30:00.000Z", "completeDate": "2025-02-09T08:30:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2024-10-13T08:30:00.000Z", "studentCount": 0 }, { "_id": "6638754167e6a60037a163ee", "slug": "web-23-net", "name": "Web全栈班23期.NET方向", "programPhase": 23, "commenceCourseDate": "2024-08-04T09:30:00.000Z", "completeDate": "2024-11-16T09:30:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2024-07-21T09:30:00.000Z", "studentCount": 0 }, { "_id": "65ae17ae32b918002c416076", "slug": "web-22-nodejs", "name": "Web全栈班22期 NodeJS方向", "programPhase": 22, "commenceCourseDate": "2024-04-07T09:30:00.000Z", "completeDate": "2024-07-15T09:30:00.000Z", "cohortStatus": "", "tuition": 5900, "promoTuition": 5360, "earlyBirdDueDate": "2024-04-07T09:30:00.000Z", "studentCount": 0 }, { "_id": "64fad71929aa9f001324cee8", "slug": "web-21-nodejs", "name": "Web全栈班21期 NodeJS方向", "programPhase": 21, "commenceCourseDate": "2023-12-03T09:30:00.000Z", "completeDate": "2024-04-03T09:30:00.000Z", "cohortStatus": "", "tuition": 6900, "promoTuition": 5900, "earlyBirdDueDate": "2023-12-03T09:30:00.000Z", "studentCount": 0 }, { "_id": "646c406ba3904380af7c9330", "slug": "web-20-nodejs", "name": "Web全栈班20期 NodeJS方向", "programPhase": 20, "commenceCourseDate": "2023-07-30T09:30:00.000Z", "completeDate": "2023-12-03T09:30:00.000Z", "cohortStatus": "", "tuition": 6900, "promoTuition": 5900, "earlyBirdDueDate": "2023-07-30T09:30:00.000Z", "studentCount": 0 }, { "_id": "646c4142a3904380af7c9331", "slug": "web-20-java", "name": "Web全栈班20期 Java方向", "programPhase": 20, "commenceCourseDate": "2023-07-30T09:30:00.000Z", "completeDate": "2023-12-03T09:30:00.000Z", "cohortStatus": "", "tuition": 6900, "promoTuition": 5900, "earlyBirdDueDate": "2023-07-30T09:30:00.000Z", "studentCount": 1 }, { "_id": "63d364a17bba23ff32e9554b", "slug": "web-19-nodejs", "name": "Web全栈班19期 NodeJS方向", "programPhase": 19, "commenceCourseDate": "2023-03-19T08:00:00.000Z", "completeDate": "2023-06-30T05:44:01.000Z", "cohortStatus": "", "tuition": 6600, "promoTuition": 5900, "earlyBirdDueDate": "2023-03-19T05:44:01.000Z", "studentCount": 0 }, { "_id": "63293cf52734a87ca079a6d5", "slug": "web-18-java", "name": "Web全栈班18期 Java方向", "programPhase": 18, "commenceCourseDate": "2022-11-27T09:00:00.000Z", "completeDate": "2023-03-31T04:09:25.000Z", "cohortStatus": "", "tuition": 6600, "promoTuition": 0, "earlyBirdDueDate": "2022-11-18T04:09:25.000Z", "studentCount": 0 }, { "_id": "63293bff2734a87ca079a6d4", "slug": "web-18-nodejs", "name": "Web全栈班18期 NodeJS方向", "programPhase": 18, "commenceCourseDate": "2022-11-27T04:05:50.000Z", "completeDate": "2023-03-31T04:05:19.000Z", "cohortStatus": "", "tuition": 6600, "promoTuition": 0, "earlyBirdDueDate": "2022-11-18T04:05:19.000Z", "studentCount": 0 }, { "_id": "627c48dddaca15867a44ecea", "slug": "web-17-java", "name": "Web全栈班17期·Java方向", "programPhase": 17, "commenceCourseDate": "2022-07-31T09:00:00.000Z", "completeDate": "2022-11-30T12:00:00.000Z", "cohortStatus": "", "tuition": 6600, "promoTuition": 0, "earlyBirdDueDate": "2022-07-23T14:00:00.000Z", "studentCount": 0 }, { "_id": "627c4a32daca15867a44eceb", "slug": "web-17-nodejs", "name": "Web全栈班17期 NodeJS方向", "programPhase": 17, "commenceCourseDate": "2022-07-31T09:00:00.000Z", "completeDate": "2022-11-30T12:00:00.000Z", "cohortStatus": "", "tuition": 6600, "promoTuition": 0, "earlyBirdDueDate": "2022-07-23T14:00:00.000Z", "studentCount": 0 }, { "_id": "61e8e92f57f9a4d05d5d80fb", "slug": "web-16-nodejs", "name": "Web全栈班16期 NodeJS方向", "programPhase": 16, "commenceCourseDate": "2022-03-20T04:46:39.000Z", "completeDate": "2022-06-19T04:46:39.000Z", "cohortStatus": "", "tuition": 6600, "promoTuition": 0, "earlyBirdDueDate": "2022-03-13T04:46:39.000Z", "studentCount": 0 }, { "_id": "6153d5391a23b9885575c7f1", "slug": "web-15-java", "name": "Web全栈班15期·Java方向", "programPhase": 15, "commenceCourseDate": "2021-12-04T02:53:45.000Z", "completeDate": "2022-03-31T02:53:45.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2021-11-28T02:53:45.000Z", "studentCount": 0 }, { "_id": "6153d4941a23b9885575c7f0", "slug": "web-15-nodejs", "name": "Web全栈班15期·Nodejs方向", "programPhase": 15, "commenceCourseDate": "2021-12-04T02:51:00.000Z", "completeDate": "2022-03-31T02:51:00.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2021-11-28T02:51:00.000Z", "studentCount": 0 }, { "_id": "612331fecf0a40cf192b8f63", "slug": "web-14-5", "name": "Web全栈班第14.5期", "programPhase": 14.5, "commenceCourseDate": "2021-09-25T23:32:04.000Z", "completeDate": "2021-11-29T23:32:04.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2021-09-24T23:32:05.000Z", "studentCount": 0 }, { "_id": "60ab30e1c9ec202331ed03a8", "slug": "web-14-nodejs", "name": "Web全栈班14期·Nodejs方向", "programPhase": 14, "commenceCourseDate": "2021-07-17T04:51:45.000Z", "completeDate": "2021-12-01T04:51:45.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2021-07-16T04:51:45.000Z", "studentCount": 0 }, { "_id": "60e55cba53480b05fd98f949", "slug": "web-14-java", "name": "Web全栈班14期·Java方向", "programPhase": 14, "commenceCourseDate": "2021-07-07T07:50:18.000Z", "completeDate": "2021-12-01T07:50:18.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2021-07-07T07:50:18.000Z", "studentCount": 0 }, { "_id": "5ffcff6a7e3761127306835f", "slug": "web-13-java-and-nodejs", "name": "Web全栈班13期·Java&Nodejs方向", "programPhase": 13, "commenceCourseDate": "2021-03-27T01:46:18.000Z", "completeDate": "2021-08-31T01:46:18.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2021-03-20T01:46:18.000Z", "studentCount": 30 }, { "_id": "5f4d8f40b6a5ba72344d5dc6", "slug": "web-12-java", "name": "Web全栈班12期·Java方向", "programPhase": 12, "commenceCourseDate": "2020-12-06T00:01:04.000Z", "completeDate": "2021-05-10T00:01:04.000Z", "cohortStatus": "", "tuition": 5100, "promoTuition": 0, "earlyBirdDueDate": "2020-12-06T00:01:04.000Z", "studentCount": 30 }, { "_id": "5f4d8f01b6a5ba72344d5dc5", "slug": "web-12-nodejs", "name": "Web全栈班12期·Nodejs方向", "programPhase": 12, "commenceCourseDate": "2020-12-06T00:00:01.000Z", "completeDate": "2021-05-11T00:00:01.000Z", "cohortStatus": "", "tuition": 5800, "promoTuition": 0, "earlyBirdDueDate": "2020-12-06T00:00:01.000Z", "studentCount": 0 }, { "_id": "5e93d6e97962836b4bb42774", "slug": "web-nodejs-and-react-11", "name": "Web全栈班Nodejs&React第11期", "programPhase": 11, "commenceCourseDate": "2020-08-29T03:05:13.000Z", "completeDate": "2021-02-28T03:05:13.000Z", "cohortStatus": "", "tuition": 5500, "promoTuition": 0, "earlyBirdDueDate": "2020-08-31T03:05:13.000Z", "studentCount": 14 }, { "_id": "5e93d7b47962836b4bb42775", "slug": "web-10-5", "name": "Web全栈班第10.5期", "programPhase": 10, "commenceCourseDate": "2020-08-12T13:59:59.000Z", "completeDate": "2021-02-20T03:08:36.000Z", "cohortStatus": "", "tuition": 5500, "promoTuition": 0, "earlyBirdDueDate": "2020-09-05T03:08:36.000Z", "studentCount": 0 }, { "_id": "5e93d82d7962836b4bb42776", "slug": "web-java-and-react-11", "name": "Web全栈班Java&React第11期", "programPhase": 11, "commenceCourseDate": "2020-08-12T03:10:37.000Z", "completeDate": "2021-06-03T03:10:37.000Z", "cohortStatus": "", "tuition": 5500, "promoTuition": 0, "earlyBirdDueDate": "2020-08-12T03:10:37.000Z", "studentCount": 0 }, { "_id": "5e167a9b5486ff6f40292712", "slug": "web-java-and-react-10", "name": "墨尔本Web全栈班Java&React第10期", "programPhase": 10, "commenceCourseDate": "2020-04-01T00:58:03.000Z", "completeDate": "2020-06-22T00:58:03.000Z", "cohortStatus": "", "tuition": 5400, "promoTuition": 0, "earlyBirdDueDate": "2020-02-17T00:58:03.000Z", "studentCount": 0 }, { "_id": "5e09563ce2e1404966a34594", "slug": "web-16", "name": "布里斯班Web全栈班第10期", "programPhase": 10, "commenceCourseDate": "2020-03-31T01:43:24.000Z", "completeDate": "2020-06-30T01:43:24.000Z", "cohortStatus": "", "tuition": 5500, "promoTuition": 0, "earlyBirdDueDate": "2020-03-17T01:43:24.000Z", "studentCount": 0 }, { "_id": "5e0d5a37e2e1404966a345c1", "slug": "web-17", "name": "悉尼Web全栈第10期", "programPhase": 10, "commenceCourseDate": "2020-03-28T02:49:27.000Z", "completeDate": "2020-06-30T03:49:27.000Z", "cohortStatus": "", "tuition": 5500, "promoTuition": 0, "earlyBirdDueDate": "2020-03-01T02:49:27.000Z", "studentCount": 0 } ], "generatedFrom": "training-outlines" }