Create Technical Apps With AI (Without Knowing How To Code)
I like to keep myself out of the conversation whether that is a good or bad development. Because I don’t know enough about it yet.
They say AI is using a lot of energy and it can take away lot’s of jobs which can be seen as bad. But building energy sources to power the AI and upgrading the infrastructure create also jobs.
It’s a tough discussion.
Before the tractor was invented, around 55% of the population in developed countries worked in agriculture. Globally, that figure was around 75%.
Now, after 125 years of mechanisation and automation of agriculture, around 3% of the population in developed countries works in agriculture. Globally, that figure is around 27%.
That is a huge difference.
This shows that big changes in how we work and live have happened before, and people have always adapted.
Changes create new types of jobs and opportunities along the way.
I now think that this will be the same with AI.
So, I’m now leaning towards the “AI will be good” side and I’m keen to use AI more as a tool.
You learn something the fastest by doing.
That’s why I gave coding with AI a go.
I'm a mechanical engineer. Not a software engineer. So I know things about steel structures and pipework but not about code language.
I'm also not a "prompt expert" who knows exactly what to tell the AI to get the best results.
Despite this, I've managed to create a pretty cool app, if I do say so myself. All by writing simple prompts and letting AI do its thing.
If I can do it, you can do it too.
The great thing about it is that building the app was free!
Let me explain how I did it.
The Unit Converter
I thought it would be fun to vibe code a unit converter that can convert between different units and from metric to imperial.
Vibe coding means describing what you want in simple terms to an AI, and it writes the code for an app or website for you.
I need to convert units in my engineering work quite often and it’s a simple tool to start with.
You probably think there are already plenty of these kinds of tools on the internet.
That is correct, but they're sometimes littered with ads that annoy me and I like one in my style.
The tool I created with basic prompts looks and works great! I'm impressed by how fast it came together.
Here's the process I followed, along with the (fairly average) prompts I used. Feel free to copy them and use them as a template to build your own tool.
1. Google AI Studio
Go to https://aistudio.google.com/
Make sure you are logged in and go to Build.
2. Prompt 1
I wrote out the following prompt in order to test if my idea would even work. I thought I can always add or modify the app later.
Prompt
Can you build me an app that can very easily calculate distances, areas or volume from metric to imperial? For example, I fill in a measurement in millimeters and it calculates what it is in inches, feet, yards, etc. But also show the rest of the measurements in metric like meters, kilometers, etc.
Result
3. Prompt 2
I was impressed that the AI already created a fairly decent looking and working app! I decided I wanted to add speed to the converter as well.
Prompt
I really like it, but can you also add a speed option? So m/s, miles per hour, km/h, etc.
Result
4. Prompt 3
I did not like the dark grey box where you type in the value. So I asked AI if he could make it clearer.
Prompt
I don’t really like the grey box where you type in the number. Can you make it clearer? Maybe white?
Result
5. Prompt 4
I often engineer irrigation systems for growers around the world, so I decided I wanted to add the volume flow rate units to the converter as well.
Prompt
Can you also add a volume flow rate option? So m3/h, liters a second, liters a minute, etc.
Result
6. Prompt 5
I'm happy with what the tool can do, but I want to make it match my branding. So I gave AI my colours and font.
Prompt
I really like it. But can you make it more suit my branding guidelines? Here is some of my branding, keep the modern look you have now.
Header text colour: #000000
Small text colour: #4d4d4d
Background: #ffffff
Buttons: #436499
Light grey background for columns: #f5f5f5
Roboto as font
Result
7. Deploy
If we are happy with how the tool looks, we deploy it.
The first time you deploy an app, you have to follow some steps in order to get the app live. But after that, you can deploy it straight away.
8. Functional App
A functional app is created: The Unit Converter Pro
This is the link to the unit converter app:
https://unit-converter-pro-1085622194231.us-west1.run.app
Conclusion
That's how easy it is to build a functional app with AI, even if you don't know how to code.
No ads.
Free.
Personalised.
The whole process took me less than 15 minutes, and most of that was just tweaking the design to match my branding.
Give Google AI Studio a try if you are curious to see what you can create.
Start small, like I did with this unit converter, and see where it takes you. You don't need to be a software engineer or a prompt expert. You just need an idea and the willingness to experiment.
Who knows? You might surprise yourself with what you can create.
If you created something cool or need help, feel free to reach out!
