This post was inspired by my colleague Matheus, who has used the aws spinning wheel (see blog post here) to help make running re:Cap's a little more interesting and fun.
That is a really neat solution, but I didn't want to use that project as it was a little more comprehensive than I needed. As it is the new year, and I am starting to get hands on with all the really cool new features in Amazon Q Developer announced at re:Invent 2024, I thought I would create a simpler version.
The code generated by Amazon Q Developer can be found in this GitHub repo.
1. Creating the data model
When I think about what I want to create, I can articulate my data model as such:
Create a data model for a spinning wheel application. The spinning wheel will be a graphical wheel which has a number of different categories that be can be defined within the data model. Each category will have a unique name. Each category will be of equal value. A set of categories can be organised as a group called "wheels". Generate this as SQL that will work with sqlite.
I review the output, and create a file called "spinning-wheel.sql" in a new folder called "data".
2. Setting up some scaffolding
I like to create scaffolding to help Amazon Q Developer provide more consistent output, aligned to what I want. I create the following assets in a new folder called "project" called "project-scaffold.md"
When creating new Python code, use the following guidance
- Use Flask
- Generate code using the following structure and layout
├── static/
├── models/
├── routes/
├── templates/
3. Using /dev to generate the core of the code
I am now ready to use Amazon Q Developer Agent for software development (/dev) to generate the code of the code. This is the prompt I use.
/dev Build a simple Spinning Wheel application using Python Flask framework.
- Use the data mode in the sql/spinning-wheel.sql
- Generate a web application that can be used in a browser
- Users can create a new Spinning Wheel and assign it a name, and add categories they want that spinning wheel to have
- Users can "Spin the Wheel" by clicking on a button
- The Spinning Wheel will be displayed graphically, will be circular, and have equal sized segments for each category, with the text of that category displayed along the segment
- When the "Spin the Wheel" is clicked, the Spinning Wheel will rotate and stop at a random category
- As the Spinning Wheel turns, it will play the audio sound in the audio directory
- Once the Spinning Wheel has stopped it will display the selected category
- There should be a "Play Again" link to allow the Users to do another spin
- The homepage should display available Spinning Wheels that are available to be played
- Provide a simple web design that can be updated easily using CSS
- Review project layout details in project-scaffold.md
After a few minutes I can see that it has started to review the files already created, and is now generating code for this application.
After about 8 minutes, it has finished.
It has created the bulk of the application, and this is what I now have to work with.
├── app.py
├── data
│ ├── spinning-wheel.db
│ └── spinning-wheel.sql
├── models
│ ├── category.py
│ └── wheel.py
├── project-standards
│ └── project-scaffold.md
├── routes
│ └── main.py
├── static
│ ├── audio
│ │ └── spin-sound.mp3
│ ├── style.css
│ └── wheel.js
└── templates
├── base.html
├── category_form.html
├── index.html
├── wheel.html
└── wheel_form.html
As you can see, it has tried to stick to the scaffolding that I had in the project workspace before invoking /dev.
4. Run and debug issues
After installing dependencies (which I ask Amazon Q to help me with), the application runs, but I encounter my first issue. When creating a new Spinning Wheel (fine), I can add categories (all good) but as soon as I click on the "Back to homepage" link, I get an error.
I wrote up about how to use Amazon Q Developer to help optimise debugging/fixing errors a few weeks ago (Amazon Q Developer Tips: No.23 Debugging with Amazon Q) and so I follow the tips outlined, making sure that I have the right context and files open, before using Amazon Q Developer chat interface to help me.
The output looks good, although it seems to have made some errors, specifically with the name of the Flask templates created. I alert Amazon Q Developer to this.
And after apologising (no need to really, I appreciate your help!) it provides me with updated instructions.
When I now go back, the application is working and I can create spinning wheels, add categories and take them for a spin.
5. Improve the application and add new features
The app is working great, but this is where I now use Amazon Q Developer to help me iterate and quickly add new features. Specifically there is something I want to change, and something I want to add.
I ask Amazon Q Developer to help me change how the winning category is displayed, and very quickly I have a nice animation that was way better than before.
I then ask it to change the audio so that it changes and responds in relation to the velocity of the spinning wheel. Again, another easy fix for Amazon Q Developer which would have taken me probably way more time that is useful.
Finally, I want to add a new feature to be able to delete spinning wheels, and in a few minutes I now have this feature.
6. Go check it out yourself
I have uploaded the code to this GitHub repository so you can check this out for yourself. Here is the spinning wheel in action.
Try Amazon Q Developer today, and claim your free Builder ID
I hope you found this quick post interesting. I hope by sharing how I am using Amazon Q Developer in my day to day activities, it will inspire many of you to try and see how you get on. Please do share your own experiences, both good and bad. I will be eagerly waiting to read them.
You can try Amazon Q Developer for free today, by signing up for a Builder ID. You can also check out my other posts on community.aws, as I have been sharing a lot of tips and use cases of how I am using Amazon Q Developer. You can also keep up to date with all the new features and improvements of Amazon Q Developer by checking out the changelog.
Made with ♥ from DevRel
Top comments (1)
Just a few items in postscript. 1/ From start to finish, this took around 90 minutes - this is way way quicker than if I had tried to do this from scratch. I estimate that this easily saved me six, seven, or even more hours. 2/ Amazon Q Developer does not generate the audio files - I had this already in the repo, and when running /dev, it automatically referenced the file.