AI

ACE AI Startup Bootcamp

Development (complete functionality with AI)

πŸ“– View Session 7 practice lesson plan ← Return to Curriculum page
Day 7 Development (complete functionality with AI) Video + AI chatbot learning

Development (Completing functions with AI) Learning assistant

Just because a screen is created does not mean the service will work. When a user presses a button, the functions to save, view, and modify data must work together. In particular, in this session, we map events to static markup using Codex Client Workspace (Task 01), verify and supplement user movements that are disconnected such as filter loss using session storage (Task 02), and verify functions that block repeated button presses and date boundary errors (Task 03) to assemble a fully operational service.

Target audience: Students who have completed the screen skeleton design
What you need: Laptop, VS Code, web browser
Composition: 2 hours theory / 3 hours practice / 1 hour sharing
πŸ“– Go to Session 7 teaching plan

πŸš€ Day 7 Practice MVP Tasks Roadmap

Go to the entire Task board β†’
TASK 1
Integration

Task 1. Connect functions

Blocks the membership registration form submission action and implements local storage loading and screen switching.

Task 1 Entry to the lab
TASK 2
Scenario

Task 2. Verify user scenario

Set up a temporary session backup guard that resolves filter reset disconnection when returning to the search list.

Task 2 Entry to the lab
TASK 3
Validation

Task 3. Find functional errors

Blocks input defects such as insertion of duplicate data by multiple clicks and abnormal time registration in the past.

Task 3 Entry to the lab
MISSION 1
Review

Mission 1. Check AI and service completeness

Receive comprehensive quality diagnostics that include handling of missing loading feedback (Spinner) and storage exceptions.

Mission 1 Lab Entry
MISSION 2
E2E Scenario

Mission 2. Try it from start to finish

We demonstrate an E2E scenario that can be completed by reflecting the movement feedback of the novice user persona.

Mission 2 Lab Entry

Day 7 lecture video

YouTube Recommended Lectures
This is a list of recommended YouTube lectures corresponding to the core topics of the Day 7 curriculum (MVC, hierarchical architecture, Express.js, CRUD API, DB integration). (Constructed of free lecture videos that allow external sharing and playback.)
πŸ“š Full list of lectures (5)
  • β–Ά
    1. WEB3 - Express - 1. Class Introduction (Life Coding)
    5:12
  • β–Ά
    2. WEB3 - Express - 5.1. Detailed Page Implementation 1 - Route Parameter (Life Coding)
    6:45
  • β–Ά
    3. WEB3 - Express - 6. Page creation implementation (life coding)
    8:30
  • β–Ά
    4. WEB3 - Express - 7. Page modification implementation (life coding)
    7:15
  • β–Ά
    5. WEB3 - Express - 8. Implementation of page deletion (life coding)
    6:20

Key takeaway notes

Day 7 Summary

Today's Key Goals

On Day 7, you will understand how the API called from the front end is processed on the server, and implement an actual CRUD API based on Express.js-based MVC and 4-layer structure.

  • Express.js project configuration: Server environment and routing settings for RESTful API setup
  • Layered architecture design: Route -> Controller -> Service -> Repository structure separation
  • Database CRUD implementation: Create data CRUD logic using ORM or raw SQL
  • Develop RESTful API endpoints: Completion of REST API that complies with URI design guidelines
  • Exception handling and middleware enforcement: Configuring business errors and global error handlers
Study tip: Ask the AI ​​chatbot on the right, β€œHow do you divide the roles of Controller and Service in a hierarchical architecture?” or β€œHow do I configure a global error handler middleware in Express.js?” Ask the same question.