Amazon Q Developer Workshop

Module 2: Creating a Basic Web Application

In this module, you'll use Amazon Q Developer to create a Basic Web application. You'll learn how to leverage Amazon Q to generate code, explain concepts, and help you build a functional web application.

Prerequisites

• Completed Module 1: Setting Up Amazon Q Developer

Step 1: Amazon Q Developer CLI

1. Input prompt to create Sudoku web application in Terminal

create simple html sudoku web application

2. Press t or y to allow Q execute the command to create file

3. Amazon Q Developer CLI will able to
• 3.1 Create html file which you can see in Project Explorer.
• 3.2 Describe the application details and usages.

4. Open html file and click on Show Preview

5. You will able to see web page and able to play Sudoku

6. Delete all files

!rm -rf *

7. Exit Q chat

# Exit Q chat
/quit

# Re-enter Q Chat
q chat

Step 2: Amazon Q Developer IDE

1. Input prompt to create Sudoku web application in VSCode IDE

create simple html sudoku web application

2. Amazon Q will start planing and generating the web applicaiton

3. Amazon Q Developer CLI will able to
• 3.1 Create html file which you can see in Project Explorer.
• 3.2 Describe the application details and usages.

4. After Amazon Q finished generate the file. You can open html file, click on Show Preview. You will able to see web page and able to play Sudoku

Step 3: Generate Documentation (README)

1. In IDE, we will use Q Developer agentic capabilities to create documentation by typing /doc in IDE

/doc

2. Select Create a README

3. Accept the file to create

3. Review the result

/context add *

Could you create a README file for this application?

(Optional) Step 4: Testing and Debugging with Amazon Q

1. Open your index.html file in a web browser to test your Sudoku application
2. If you encounter any issues, use Amazon Q in VS Code or in the terminal to help debug:

"Why isn't this code working as expected?"

describe your issue...

3. Use Amazon Q's suggestions to fix any bugs or improve functionality

(Optional) Step 5: Adding Final Touches

1. Use Amazon Q to help you add final touches to your application:

Ask Amazon Q:

"How can I improve the user experience of my Sudoku game?"
"Can you help me add a timer feature to my Sudoku game?"
"How can I save the game state so users can continue later?"

2. Implement the suggestions that you find valuable

(Optional) Example Prompts for Amazon Q

Here are some example prompts you can use with Amazon Q to help with specific aspects of your Sudoku application:

• "How do I generate a valid Sudoku puzzle in JavaScript?"
• "Write a function to check if a Sudoku solution is valid"
• "How can I highlight conflicting numbers in my Sudoku grid?"
• "Create a function to save the current game state to localStorage"
• "How do I implement different difficulty levels for my Sudoku game?"