Menu
Going from requirements to prototype with Gemini Code Assist

GCP – Going from requirements to prototype with Gemini Code Assist

,

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

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
<ListValue: [StructValue([(‘title’, ‘$300 in free credit to try Google Cloud developer tools’), (‘body’, <wagtail.rich_text.RichText object at 0x3eb09a316c70>), (‘btn_text’, ‘Start building for free’), (‘href’, ‘http://console.cloud.google.com/freetrial?redirectPath=/welcome’), (‘image’, None)])]>

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 0x3eb09a3163a0>)])]>

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 0x3eb09a316a60>)])]>

5. Gemini will provide a summary of the application features and technical requirements as in the following screenshot:

1

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 0x3eb09a316d30>)])]>

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:

2

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 0x3eb09a316490>)])]>

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 0x3eb09a316ee0>)])]>

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 0x3eb09a316b20>)])]>

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 0x3eb09a316b50>)])]>

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 venvrnsource venv/bin/activate’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3eb09a316370>)])]>

15. Install dependencies:

code_block
<ListValue: [StructValue([(‘code’, ‘pip install -r requirements.txt’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3eb09a2dc610>)])]>

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 0x3eb09a2dc2b0>)])]>

17. If everything works, flask will start a local server on your machine, you should get an output similar to the one below:

3

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 0x3eb09a2dc5e0>)])]>

19. If the application runs correctly, check if the main features have been implemented, as, for the example app:

    1. create idea

    2. list ideas

    3. vote

    4. add comment

    5. sort by vote/score

    6. 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 0x3eb09a2dce50>)])]>

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 0x3eb09a2dc4f0>)])]>

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:

4

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:

Read More for the details.

Related Posts