Source URL: https://cloud.google.com/blog/topics/developers-practitioners/from-requirements-to-prototype-with-gemini-code-assist/
Source: Cloud Blog
Title: Going from requirements to prototype with Gemini Code Assist
Feedly Summary: Imagine this common scenario: you have a detailed product requirements document for your next project. Instead of reading the whole document and manually starting to code (or defining test cases or API specifications) to implement the required functions, you want to see how AI can shorten your path from the requirements document to a working application prototype.
In this article, we’ll show you an example of how you can use Gemini Code Assist to access a requirements doc without leaving your code editor through Google Docs integration, part of Gemini Code Assist tools, and get from requirements to a working application using a few natural language prompts.
Prerequisites
A Google Cloud project with Gemini Code Assist enabled for your user account
Gemini Code Assist integration with Google Docs enabled and set up with your Google account.
VS Code with Gemini Code Assist plugin installed
Preparation
Start from a requirement analysis doc to create your application. This can be any requirements analysis document. For this example, imagine you have an app to generate ideas for weekend plans.
If you want to follow the same example, you can download this doc and open it with Google Docs in your Google Drive in order to save it as a Google Doc, otherwise you can use any other doc containing functional requirements for an application.
The document details the functional specifications for a weekend ideas application that lets users submit, browse, vote on, and comment on ideas for spending the weekend. It features category-based filtering, real-time voting updates, and dynamic ranking based on scores and votes.
aside_block
Code your app
1. Open VS Code
2. Create an empty folder and open it in a workspace in VS Code
3. Find the doc using the Gemini Code Assist GoogleDocs integration: open the Gemini Chat module in VSCode and type (in case you are using a copy of the above document):
code_block
<ListValue: [StructValue([(‘code’, ‘@GoogleDocs find the doc relating to Weekend Ideas Application’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaaa30>)])]>
4. Get the application requirements from the doc, use your doc name if using a different one:
code_block
<ListValue: [StructValue([(‘code’, ‘@GoogleDocs extract requirements from doc Weekend Ideas Application – Requirements’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa880>)])]>
5. Gemini will provide a summary of the application features and technical requirements as in the following screenshot:
6. We’re using Python, Flask and SQLAlchemy to get from requirements to a working prototype, you can choose different languages and frameworks, in that case your steps will be slightly different. Now let’s ask Gemini Code Assist to generate code from your doc, try something as:
code_block
<ListValue: [StructValue([(‘code’, ‘Generate the project structure and all the code for each file to implement all the requirements and functions described in the Weekend Ideas doc with a Python Flask application using SQLlite for persisting data’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa250>)])]>
Gemini should propose you a project structure, and also include the content of each file in the response, this is the structure i got for the example application:
Check the structure proposed and have a look at the content of each file, check that main classes and attributes have been implemented as described in the requirements summary (as in case of this example application: ideas, comments, votes, categories), check for things as macroscopic evidence of circular import issues or that the templates folder is in the same folder as your routes.
If you notice something missing you can ask Gemini to regenerate code with the missing piece, as, for example:
code_block
<ListValue: [StructValue([(‘code’, “The code you proposed doesn’t implement categories for ideas, regenerate it to properly implement the required categories (Hiking, Eating, Museum)"), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa6a0>)])]>
Focus on important things that will probably require a schema change in the database. You will not be able to find any possible issue in this stage, if any will arise when you test the application you can fix it later. Things such as ui aspects can be easily fixed at a later stage.
7. Now try to automate the creation of the whole project structure:
code_block
<ListValue: [StructValue([(‘code’, ‘Create a bash script that will create the whole project structure and all the needed files including all the code you generated’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaafd0>)])]>
8. Check the created script and the instructions provided, if you think the content is correct, follow the instructions and copy the bash script content in a new file in your empty folder, make the script executable and run the script.
9. In most cases the script has created a new folder inside the folder you created (as “weekend_ideas” in the picture above) , move inside that folder in your shell prompt. Check the folder structure, check if anything is missing.
10. Close the bash script because you shouldn’t need it anymore.
11. In case requirements.txt is missing, ask Gemini:
code_block
<ListValue: [StructValue([(‘code’, ‘Can you generate a requirements.txt file so i can install all the required dependencies with a single command ?’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaad90>)])]>
12. Typically, the output from the script execution or from the previous prompt should also give instructions on how to run the application locally using a virtual environment, check that and follow the instructions provided.
13. If Gemini didn’t provide instructions to create a virtual environment, ask:
code_block
<ListValue: [StructValue([(‘code’, ‘How can i generate a virtual environment to run the application locally ?’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa910>)])]>
14. Follow the instructions provided to create and activate a virtual environment, on Linux or Mac these typically will be:
code_block
<ListValue: [StructValue([(‘code’, ‘python3 -m venv venv\r\nsource venv/bin/activate’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa2b0>)])]>
15. Install dependencies:
code_block
<ListValue: [StructValue([(‘code’, ‘pip install -r requirements.txt’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa400>)])]>
16. Run the application as instructed by the script or in the response to the previous prompt when you asked to generate all the code, this typically would require to run the main application file as:
code_block
<ListValue: [StructValue([(‘code’, ‘python run.py #or whatever is the main application file’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa640>)])]>
17. If everything works, flask will start a local server on your machine, you should get an output similar to the one below:
18. If you get any error, ask Gemini how to fix it, as, for example:
code_block
<ListValue: [StructValue([(‘code’, ‘When running python run.py i get the followiing error: "File "/Users/galloro/python-scratch/weekend_ideas/forms.py", line 2, in <module> from flask_wtf import FlaskForm ModuleNotFoundError: No module named \’flask_wtf\’"’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa8e0>)])]>
19. If the application runs correctly, check if the main features have been implemented, as, for the example app:
create idea
list ideas
vote
add comment
sort by vote/score
filter by category
20. If something is missing you can ask Gemini to fix it as, for example:
code_block
<ListValue: [StructValue([(‘code’, "You didn’t implement the possibility to filter ideas by category in the ui, fix the code to implement this capability."), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa610>)])]>
21. Building an application with the help of an AI assistant is typically an iterative process, not everything works exactly as expected at the first step all the time. If something doesn’t satisfy your requirements, ask Gemini to fix it providing details and context.
One thing I wanted to do in my experiment was to make the ui look better, here is a prompt you can try if your UI wasn’t satisfying from the beginning:
code_block
<ListValue: [StructValue([(‘code’, ‘Modify the html templates to use Bootstrap style components to create a clean and responsive layout.’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e019ceaa490>)])]>
22. Gemini will propose updated files in the responses, you should be able to compare what is proposed to existing file using the <-> button, as in the example below:
23. If the changes seem working, accept them, repeat this for all the files for which Gemini propose changes.
24. After you have completed the changes stop and restart the application and check if they work as expected. UI can be subjective, you may need to reiterate to get to your desired result.
25. You have a running prototype of your application!
Get started
If you want to continue to test Gemini Code Assist, check the following resources:
Set up Gemini Code Assist Standard and Enterprise
Supercharge your development workflow with Gemini Code Assist Codelab
AI Summary and Description: Yes
Summary: The text outlines a practical guide on how to leverage Gemini Code Assist for creating a prototype application based on a product requirements document. It highlights the integration of AI into development workflows, demonstrating an innovative approach to software development that could significantly streamline the transition from requirements to application.
Detailed Description:
The document provides a detailed, step-by-step approach to using Gemini Code Assist within Google Cloud and VS Code to transform a requirements analysis document into a working application prototype. This procedure illustrates the use of generative AI tools in software development, making it relevant for professionals seeking to optimize their development processes through AI integrations.
Key Points:
– **Overview of Gemini Code Assist**:
– Gemini Code Assist is presented as a powerful tool that integrates with Google Docs and VS Code, enhancing the coding experience by allowing developers to interact directly with project requirements.
– **Required Setup**:
– A Google Cloud project must be established with Gemini Code Assist enabled.
– Integration with Google Docs and installation of the Gemini Code Assist plugin in VS Code.
– **Step-by-step Implementation**:
– Start by drafting a requirement analysis document that serves as the foundation for the project.
– Instructions for accessing the requirements through Google Docs from within VS Code are provided.
– **Generating Code from Requirements**:
– The document explains how to generate application code using natural language prompts that are interpreted by Gemini Code Assist.
– It emphasizes reviewing, regenerating, and iterating on generated code to ensure it meets specified requirements.
– **Automating Project Structure Creation**:
– Users are guided to create a bash script to automate the creation of a project structure and necessary files.
– **Dependency Management**:
– Instructions on generating a `requirements.txt` file for dependency management facilitate a cleaner setup process.
– **Testing and Iteration**:
– After the application is up and running, the document encourages testing main features and iteratively modifying the code with the AI’s assistance to refine functionality and UI design.
– **Conclusion**:
– The article concludes with encouragement to leverage AI further, promoting a cycle of continuous improvement in software development workflows using tools like Gemini Code Assist.
In summary, this resource serves as a foundational guide for developers looking to enhance their coding efficiency and quality through AI-assisted tools and methodologies. It emphasizes not only the technical aspects but also the iterative nature of software development, showcasing the transformative potential of integrating AI into programming tasks.