Building a Weather App with AI Tools – Part 2 – Loveable.dev

Hello everybody. This is Jim from Austo
Digital and this is part two of our AI
powered application development series
where we’re evaluating AI powered
development tools. Um let’s move on next
here to just talk through what we’re
doing. We’re going to go and do an
overview of AI powered development
tools. We’re going to do a live demo and
we’re going to build a weather app that
uses a thirdparty API. We’re going to
get some insights to the strength and
weaknesses of each tool. And we’ll leave
here with some practical takeaways for
developers, startups, and businesses.
Um, with that said, one of the reasons
we’re evaluating and looking at all
these AI tools is they’re very powerful
to help accelerate development, reduce
time to market, enhance efficiency, and
lastly, which I think is very powerful
for business owners like myself or a
software development company like
myself, we can help businesses validate
their concepts faster using rapid
prototypes. So each tool we look at,
we’re going to look at the ease of use,
the speed and performance, the features
that that tool offers, the overall
quality, how well did it create an
application, including the tech stack,
and lastly, the cost. With that said,
we’re going to move on to the second
tool in our series called
lovable.dev. Now, uh, let me move here
really quick to lovable. The website is
lovable.dev. And you can see here I’m
logged in. And before we get to that,
let’s here’s the screen. It’s same as
the uh previous application we looked
at. It let you attach an image, import
from Figma, or in this case, just start
typing your prompts. So, let’s do this
with the prompt as we did last time.
We’ll be creating a weather application.
Um, the goal is to build a responsive
weather app called the Austo AI demo
weather app. Our prompt is we want a
modern responsive app. It’s going to be
called the Gusto AI demo weather app
that works on a desktop and mobile. The
features are going to be we want a form
on the first screen with an input text
of name and we also want it you to enter
your zip code and then we have a little
title on that that says enter your name
and zip code. The first technical thing
I’m going to ask it and again this is
conversational prompts is try to use the
browser’s geol location or the mobile
app to get their location. If it’s
unavailable or it’s declined, fall back
to using a zip code. And then you can
see here I’m going to use the open
weather API to retrieve the current
weather. I’m telling it that first of
all get the latitude and longitude and
then from the latitude and longitude go
ahead and get the weather. Um once we’ve
put our zip code in or the machine’s
picked up our location, we want to get
the weather data. So after submission,
show a welcome message with the user’s
name, the current weather information,
and very clearly here, I’m not saying
very detailed, I want this information
or look this way. I’m just telling it
display the current weather info, the
temperature, and whatever is returned
from the API. We’re going to evaluate
how smart these tools are and what they
actually bring back and choose to bring
back. And then lastly, I’d like the
background to be dynamic. Um, so if it’s
snowing out, I want it to match the
snow. If it’s clear, I want clear and
hazy and hazy. I have a couple notes
that I’ve added in here. The first one
is, please make the app responsive, so
it’s mobile. It works well on a mobile
device. Have it be a clean and modern
UI. And then choose the best technology.
I’m not picking. I want to see what it
does for me. And then lastly, this is
more, this is a technical addition. I’d
like it, if possible, they make this app
so it can work with the jam stack. In
particular, I want it to be hosted on
Cloudflare pages. I’ll do a follow-up
video for each one of these where I
deploy it not in the applications native
system but into Cloudflare pages where
it’s going to cost effective and useful
tool. So without anything else, let me
grab this whole prompt. I’m going to
copy
it and I’m going to paste it right in
lovable just as we did with the previous
ones and I’ll hit return. Now I’m going
to move this over very similar to the
previous tools. On the left hand side is
our chat window where I can add
attachments or edit things. And on the
right hand side, it’s starting to do a
preview and give me some feedback. So,
Lovable tells me it’s going to create a
beautiful responsive weather app. Um,
inspired by a minimalist design
principles that work seamlessly across
all devices. That’s great. It listened
to me. They’re going to title it the
Austo AI demo weather app. And it’s
going to be a clean, minimal interface.
It’s going to have a subtle backdrop
here and change based on weather
conditions. It’s going to be responsive
by design and it’s going to use a couple
different effects um as it builds. The
features I’ll implement first are
geoloccation with the fallback to zip
code, the weather fetching from open AI,
dynamic background, smooth animations,
that’s a new feature, and a responsive
design that’s mobile first. And in the
design, you can tell this this tooling
is a little bit more focused on design.
It’s going to use soft whites and some
light grays. And it’s telling me what
it’s going to do. So, let’s start by
building it. And you can see over here,
um, as I’ve been talking, it’s built
out, in this case, it looks like some
stylesheets. It’s using Tailwind, and
it’s building all the different
components. Um, unlike the previous
tool, it hasn’t told me like what
technology it’s kind of using. I can
tell really quick. Looks like it’s using
a bit of React and TypeScript in
addition to Tailwind. um land and it’s
going. All right, here we go. It’s come
back
now. It’s still waiting on it. So, as it
builds, we’ll see this go. I’ll come
back in a moment. It’s still building.
You can see right there. I just came
back and had some more files. So, let’s
see. I’ve created a beautiful responsive
weather application. Uh oh. Looks like
we’ve got an error message. Um, we’ll
we’ll go fix that here in a minute. Um,
with a minimalist design, you’ll need to
enter your Weather API key in here.
That’s great. It tells me the file where
I need to put that before I can use it.
So, it’s actually aired out because I
didn’t put that file in there. Um, the
app works perfectly on mobile and
desktop. So, what’s next? Refine it.
Master the prompting. Use clear and
detailed prompts. Expand the background.
It wants me to connect to Superbase,
very similar to Bolt. Um, it’s got
GitHub to sync it and it’s got some
debugging. We can we can activate this
chat mode to do some troubleshooting and
more some knowledge. So, I think what we
need to do next is we need to store and
add the API key. So, I will go over here
and we want to go into a spot where I
can change that. So, give me a moment to
change the code
view. And the file it told me I needed
to edit
was was in here a moment
ago. Weather utils. So I’ll go ahead and
do that. So I went ahead and was going
to enter in the um API key, but if you
it’s read only until I connect it to
GitHub. Now I have I could really
quickly connect it to GitHub, but I like
to see what it does um by me prompting
it. It said please use I asked it to
please use a secure location to store
the open weather API key. and let’s see
what it does. Um, it should prompt me to
enter it now outside of it and then
store it locally. Now, one of the things
we’ll do as we continue is I will
connect this to GitHub and you’ll see
that very quickly this application can
be deployed to my git source control and
we can have change management. That’s
probably something I should have done
right away, but um, we’ll do that here
as we
progress. Now, I was going to head and
to hit GitHub, but you can see it ran
into an error. It was build unsuccessful
and I clicked over here what the errors
were. It looks like it’s got some coding
errors in here. So I clicked on a button
that said fix the errors. So the prompt
it gave was for the code present I get
the error below. Please think step by
step in order to resolve it. And I can
click on here and show the error. But it
looks like it it’s going to go ahead and
restore and see what this error is.
Again I have another error that’s shown
up. Um, the issue has been fixed by
converting the JSX code in the weather
utils. All right, let’s try and get this
one fixed as well. While it’s doing
that, I’m going to again try and connect
to
GitHub. So, I’m going to connect to
GitHub here. I’m going to use my own
account. We’ll wait for this to
complete. All right, two things here.
First is I am connecting out of my
GitHub. It has created a repo called
Sunny Skipper Weather. It’s the name it
gave it, so that’s nice to have. And
two, it’s now prompting me. So, it’s got
this blue background. Um, the first
thing it’s going to do is ask me for my
API key. Um, I’m going to put that in
there. And then I’ll hit next so we
don’t share that for the internet. All
right, it’s stored it. So, just like the
other application, let’s enter my name,
Jim. Let’s put a zip code in here. And
let’s see what we get. You can tell very
quickly it came back. It called the API
behind the scenes. Um, it’s got the
Austo AI weather. The background I guess
is
gray, right? We wanted the background to
be um, it’s got a little powered by the
weather API down here. It’s got feels
like humidity, pressure, wind. Um, it
says I’m in Walker, Michigan. That’s
correct. Um, there’s really u, it’s got
even has an option to search
again. So, let’s try this. gym 2 and
I’ll go to Beverly Hills
90210. All right, there we go. Now it
says Beverly Hills, USA and it’s clear.
But what I don’t like is the background.
So let’s see.
Um let um
please adjust the app to have a
background
um that
corresponds with the
weather. As an
example, if it is sunny, show a sunny
background.
do this for all weather patterns and use
free images. Let’s see what it does. Um,
each one of these tools as you have a
conversation with it or prompt it um,
utilize different technologies. So, in
this case, it looks like it’s going to
update it based on the weather condition
and it’s going to modify the appropriate
files. So, let’s see what it does.
While it’s building it out, I want to
run through it. So, let’s click on this
little icon. This is what it looks like
on a mobile app. You can see here it’s
got mobile and web. It also has a
similar to what we had in the previous
tool, Bolt. I can publish this. We’ll do
this once the app is at a good space and
we’ve got a similar app to what we did
last time. All right. So, it refactored
it. So, now based on the weather, it
looks like it came with a nice
background inside of that box. Um, so in
Beverly Hills, it looks like that’s kind
of the weather it is. Let’s look at
um, let me find another zip code. All
right, we’re going to use a zip code
from Hawaii. Let’s see what we get
here. All right, so it’s in Pearl City.
It’s got a wave. It’s got light rain.
Um, I would like that background color
to be the entire background page, not
the um, focus box. So the
background image is good. Can we use
that on the full page
background and keep the focused box
um a corresponding
color? All right, let’s see what it
does. So I’m hoping that I can pivot
this background to be the entire
background of the app and not just in
that window.
Let’s see what it
does. It’s going to update the app to
use the weather background of the image
of full page while keeping a
colorcoordinated box for the content.
Great. It must have recognized what I
was looking
for. One nice thing about lovable is I
can go back and look at the history of
what I’ve done while it’s going. Um, you
can see that I can hide that window and
go full screen with what we’re building.
And over here there’s a code viewer. Um,
again, all the code’s in here now that
I’ve um set up GitHub sync. I guess I
actually have to turn on sync in here
somehow, but I should be able to edit
this. Let’s go back to the
preview. All right, so let’s see what
happens now. We’ll do gym. Let’s go back
to Grand Rapids or
Walker. Actually, let’s do
Fortnite. This would be Holland,
Michigan.
got the weather and it looks like it
spread that image in the background of
um clouds. Nice. Let’s do it one more
time. Let’s do it in um
90210. And again, we got a nice image to
kind of correlate. Great. It looks like
we have a comparable app. Let’s go ahead
and use the publish feature. So, it
looks like it’s going to publish this um
publish. I could connect it to a custom
domain. So, if you had, you know, if
this was a real application, you wanted
it to be the Austo AI demo weather app,
we could use our custom domain to go
there. All right, let’s see what it
did. Oh, right here is what it did.
Here’s the URL it created for me. Nice.
Now, before it will use this URL, I have
to put my API key in again. So, let me
do that. All right, I’ve entered the
key. Um, let’s put another zip code in
here. Let’s get the weather. Nice. We’re
in Commtock Park. I’ve got this image. I
don’t like it how it blurred it out. See
how it’s got the clearness there? Let’s
go back and um let’s go back to Lovable
and solve that. So, um the
background looks
fuzzy or
um over has an overlay.
Please remove that
and show the image. Let’s see what
happens. All right, let’s go back. It
removed the backdrop blur. I guess
that’s what it was called. So, we’ll do
gym
test 4. And there we go. We have a nice
looking image now in the back. So, I
think overall we probably spent 10
minutes building this app. I would say
it’s usable. Let’s go back and check
some error handling. Let me put uh way
too many letters in here or numbers.
Yep. So, it checks that it’s got a valid
zip code. Um it does try and use my
location. However, that’s not enabled.
Um let’s see what our options are for uh
building a mobile app. Um help
me. So, I’d say right now the app’s
complete. We could deploy this. We’ve
built a great demo if we needed it. We
could launch it and share it with
clients or customers. add other features
if we needed to. Um, before I leave
though, let’s test the options to build
a mobile app. Um, please make this a
mobile app for
iOS and see what
happens. So, it looks like it’s going to
use capacitor dependencies here to build
a file let you run as a native
application. They fixed the TypeScript.
So, it’s added a check for components.
So, here’s the steps for me to actually
deploy if we need to export a GitHub,
which I could do right from here. Um, I
need to run these commands. So, I would
need to do an npm install locally. It
would look like it would run cap. I
think it’s capacitor to run iOS. It
would update it, build, and then would
load into a simulator. Pretty great. So,
I’ll stop this video now. If you have
questions on this, please post it in the
comments. Um, appreciate it.