Article

computer-screen

Category: Expert stories

Exploring AI's capability for app development

 

In this article, software developer & emagineer explores the possibilities of building an application prototype with ChatGPT. In a step-by-step guide, he takes us through the process of building an app leveraging ChatGPT, showcasing the benefits and challenges of today's AI solutions.

Konrad Kaliciński, software developer, Wroclav

Many web developers at various stages of their careers create various 'drawer' projects - sometimes for educational purposes, other times to build a specific application.

Unfortunately, it seems very challenging to divide one's time between professional work and projects we work on 'for ourselves', often only after working hours. Because of this, many such projects never see the light of day or are not developed to the extent they were intended.

However, for some time now we've had a tool that can overcome the initial difficulties in building a project prototype. That tool is AI, which - in the right hands - can become a very useful tool for developers.

 

Assumptions

My specialization is mainly in front-end and Angular, but I also have some experience in backend applications. I won't try to build something using tools I'm not familiar with, so I choose typescript / nestjs / neo4j / graphql / angular as the technological stack.

computer-screen

Technology

The entire project will be set up as a monorepo using nx. I will use queries in the English language (although GPT has no problem with the Polish language).

I will try not to write my own code and rely solely on GPT - I will do it only if necessary to continue. I will use GPT 4 (ChatGPT July 20 Version) and the Code GPT plugin for Webstorm IDE.

Finally, I will skip tests or adhering to SOLID/KISS/DRY, and similar principles, following the two rules below:

  • As long as it's completed it doesn't need to be perfect
  • Fake it till you make it

Business requirements

The next challenge is choosing the application itself. Because we are trying to build something resembling a real application, we will create a knowledge base of supplements, their ingredients, interactions, and how they relate to each other. The application should:

  • Allow adding new UI elements (for administrators)
  • Allow anonymous data browsing
  • Enable the viewing of supplements along with their ingredients and interactions

 

  In the right hands, AI can be a very useful tool for developers.

 


Preparation

We want to find out what the latest versions of our libraries/frameworks are that are indexed by GPT.

I need applications/frameworks/libraries version numbers you're aware of: nx, angular, nodejs, typescript, nestjs, neo4j.

Ai-dla-aplikacji-1

Since the publication of the above versions, many things have changed, so we need to keep that in mind:

How to start an Nx monorepo with multiple applications, using the Angular preset? I only need CLI commands for creation.

Ai-dla-aplikacji-2

The last step is redundant; however, we can create the project using the following command (a slightly modified version):

npx create-nx-workspace@latest ai-suple --preset=angular --style=scss --appName=app

And we choose the options as follows:

Ai-dla-aplikacji-3

Now we want to add a backend application.

How to install and add a NestJS application named 'api' to an existing Nx monorepo?

Ai-dla-aplikacji-4

I run the above commands, everything works. The last element of the structure is the database. Here we have three options:

  • docker image
  • Neo4j Desktop
  • AuraDB (cloud service)

Each is fine, I will be using Neo4j Desktop, but often we also have Docker. We will need a script in the package.json to start the database.

I need to start a Docker image with exposed ports for the Neo4j database, and I need to create a 'start:db' command in package.json to start the database.

Ai-dla-aplikacji-5

Now, I want to start our project with a single command.

I need a script in package.json to start my Nx applications named 'app' and 'api.' I also want to create a command that, with 'concurrently,' will start both of those apps in the same process, naming them 'app' and 'api,' and giving them different colors: #2571c7 and #e0234e.

Ai-dla-aplikacji-6

I'm installing 'concurrently,' making some script modifications (changing 'start:both' to 'start'), and then running it - everything's fine. The applications are running on ports 4200 and 3000.

Ai-dla-aplikacji-7

Database Modeling

Now that all components of our system are working, we can proceed to build our model. If you want to learn more about Neo4j, I encourage you to check out the article Neo4j is revolutionising information management, linked above.

Using arrows.app, I've created a data model for Neo4j. Visualization of dependencies will help you better understand this model. It's worth noting the clarity of the model - relationships between individual nodes are visible at first glance, which cannot be said for relational databases.

Ai-dla-aplikacji-8

Propose a data model for @neo4j/graphql of the supplements, where:

  • supplements may have multiple ingredients
  • ingredients can support or inhibit various processes
  • supplements can be compatible/incompatible with other supplements
  • supplement can have a brand (make 2 way relationship)
  • supplement can be sold in a store (make 2 way relationship
  • supplement, ingredient and process may be mentioned in the publication

The generated model looks good; we will add the necessary fields to it in the later part. Now we need to add this model to our backend application in the Nx monorepo. The application is called 'api,' and we'll add it as a Nest library located in 'libs/api/...'


 

  GPT encountered challenges - several attempts at generating a GraphQL module have failed.

 


Unfortunately, several attempts to generate a correctly working GraphQL module have failed. GPT encountered a significant challenge and couldn't provide a working configuration despite many attempts and query changes. So, I used the configuration I created for this article.

The model was generated for an older version of @neo4j/graphql, so we need to make a few changes to make everything work correctly:

  • Change the '@relation' directive call to '@relationship.'
  • Mark relationships as required (use '!'), so instead of 'ingredients: [Ingredient],' you should use 'ingredients: [Ingredient!].'
  • Change the relationship name - use 'type' instead of 'name.'
  • Install the APOC library, and restart the Neo4j server if it's missing.
Ai-dla-aplikacji-9

After this, our module works correctly. We check our model in the toolbox application, and here is the result:

MicrosoftTeams-image (50)

I created this query in toolbox with the help of syntax autocomplete. Let's see if GPT can handle such a task:

having the @neo4j/graphql model defined as below, create a GraphQL mutation that will create a supplement with: name, brand, 2 ingredients, publication, and store.

The database is empty, so all nodes need to be created. <pasted model>

Ai-dla-aplikacji-10

When we look at the previous example, we can notice that this time the mutation is not correct, but we are checking it in the toolbox.

Ai-dla-aplikacji-11

Let me suggest a correction:

wrap all create content in {node}, so it will look like: {create: {node: {...} }

Ai-dla-aplikacji-12

Now everything looks fine.

 

Summary

I was able to test the capabilities of GPT in the context of building a web application. It seems that AI is a useful tool that can significantly speed up the process of creating a prototype application.

However, not everything went smoothly - I encountered issues that required manual intervention. I haven't addressed the topic of authorization yet (I'll leave that for integration with the front-end), but GPT certainly has outdated data, and the generated model will be incorrect - I've checked.

To ensure the answers are as accurate and complete as possible, I asked some questions multiple times to clarify details - it didn't take much time, but it's worth mentioning from a research standpoint. A critical perspective proved to be crucial when leveraging GPT.

Nevertheless, I was able to achieve the intended goal. That's all for the first part of the article. In the second part, we will focus on building the interface for the web application, which will be added to the existing application.


 

  We need to be mindful of GPT's outdated data, which leads to incorrectly generated models.

 


Ready to find out more?

Ask us how we can help you succeed.

Blog

Explore our blog

left-arrow
right-arrow

Henrik Timm
Projects & Implementation
Succeed as a consultant

The project manager in the era of AI

The advent of artificial intelligence (AI) has sparked discussions across various industries about its potential impact on traditional roles and responsibilities. The field of project management is not exempt from these considerations, and as a project manager, it is only natural to ask yourself: How will AI affect my work? 

Project manager at a meeting with his team.
Projects & Implementation
Succeed as a consultant

Key considerations for aspiring project managers

This article serves as a guide to all aspiring project managers, discussing important considerations and essential skills needed to excel in this dynamic career.

Projects & Implementation
Succeed as a consultant

From risks to requirements: Project initiation from A to Z

As the first step in the project lifecycle, project initiation is critical in determining the ultimate success of a project. Learn the best practices and key considerations for successful project initiation.

Succeed as a consultant

How to build a unique LinkedIn profile

In this article, our hiring manager and recruiter shares his tips on setting up a compelling LinkedIn profile to help you stand out on the job market.

Code
Expert stories
Succeed as a consultant

Seven mistakes every tester should avoid in QA

Written by a Test Team Leader and emagineer, this article dives into seven key pitfalls within software testing. Discover how to steer clear of these traps, strengthen your strategies, and lead your team toward testing excellence.

Case: Tech & development
Expert stories
Succeed as a consultant

Nx for Angular: A reliable tool simplifying the work with IT projects

Front-end developer explores how Nx can benefit Angular projects and its compatibility with other technologies like React & Node.

Expert stories
Succeed as a consultant

Tips from a consultant: How to optimize your workflow as an IT specialist

Front-end specialist shares his advice on how to become more efficient in your work as an IT consultant, incorporating habits that will sharpen your expertise and act as a gateway to securing better projects

IT specialist working from home.
Expert stories
Succeed as a consultant

Non-functional requirements in the Application Development Process

Within the development process, non-functional requirements emerge as a pivotal factor. The challenge lies in effectively gathering and processing these requirements, ensuring clarity and direction for every member of the IT team. The ultimate goal: crafting a distinctive and dependable end product that offers a seamless experience to the end user.

Expert stories
Succeed as a consultant

Snapshot testing in front-end applications

In today’s fast-paced software development landscape, maintaining application consistency is of utmost importance. One approach that has gained popularity is snapshot testing, and emagineer Kamil Naja is here to take us through the ins and outs.

Code
Expert stories
Succeed as a consultant
Tech & Development

Effective ways to work with Backend

In the realm of front-end solutions, the vital role of back-end applications cannot be overstated. In this article, emagineer Kamil Naja delves into the world of backend development, uncovering effective methods to optimize the process.

Data & Analytics
Expert stories
Succeed as a consultant

AI support in the development of front-end solutions

Gain valuable insights into the evolving landscape of front-end development as we explore the transformative applications of AI technologies. This article delves into three prominent AI tools: ChatGPT, GitHub Copilot, and GitHub Copilot Chat, and how they can be leveraged by front-end developers.

A consultant meeting two managers at a job interview.
Succeed as a consultant

Consultant interview from A to Z: Cheat sheet for landing your next job

A practical guide to land your next job. The consultant interview is a good opportunity to make a lasting impression. Here you can learn how to navigate your next job interview and land the job.

Succeed as a consultant

LinkedIn optimizations: Make your profile stand out

Six easy gains – you can use them today! In this article, you will learn six straightforward tips on upgrading your LinkedIn profile quickly and efficiently – these changes might make all the difference.

Senior consultant with beard looking self assured
Staff augmentation
Succeed as a consultant

Five characteristics of successful consultants

What makes a good consultant? While there is no step-by-step guide or a fixed formula to lead you to the top of the game, some characteristics are prevalent in all of expert consultants. Let us take you through five of the most prominent components contributing to success.

An experienced consultant smiling in a meeting with two others
Succeed as a consultant

Freelance 101: How to start as an independent IT consultant

Are you an IT expert with several years of experience, and do you dream of working independently and being your boss? It’s not that complicated to start, and we’ve made it easier for you. As a new freelancer, you have many opportunities, but you also face challenges. Check what is required and how to get started.