Building a Weather App with AI Tools – Part 3 – v0.dev

hello everybody this is Jim from Augusto
digital and today we’ll be on part three
of our series of AI powered application
development tools um in this series
we’re reviewing these amazing tools that
allow you develop by using AI so in
overview what we’re going to do we’re
going to review the tools we’re going to
do a live demo and build a weather
application that uses third party API
tools like the weather app insights
we’re going to talk about the insights
and the strengths of each tool and we’re
going to have some practical takeaways
for developers startups and
businesses so what is the role of AI
development we’re seeing this happen a
lot now with new tools coming out almost
every day and these tools help us
accelerate development from code
generation to automation it helps us
reduce the time to Market quick
iterations testing of new ideas it also
enhances efficiency like suggestions for
optimization and performance and lastly
there’s that business aspect of it where
you can do rapid prototypes that really
gets us out to the early Market
stage um in these comparisons we’re
going to talk about the ease of use of
the tool the speed and the performance
what features are available the overall
quality how well that app that is
created works and then the text stack
along with cost so the current um
iteration we’re on here part three we’ve
already looked at bolt. new we’ve looked
at lovable dodev and today we’re going
to look at versals called vo and very
similar to the other um systems we’ve
done right you can go in here and
quickly build your prompt to build out
an app and you can see here they’re kind
of showcasing apps that other people
have made so we’re going to go ahead and
um we’re going to go ahead and do our
prompt our prompt we’ve used this for
the first two parts and we’ll use the
exact same prompt we’re going to build a
weather application it’s uh the goal is
to build a response weather application
called the austo AI demo weather app
it’s going to be a modern responsive app
called the austo AI weather app um we’ll
work on desktop and mobile and we want
it to display a form with required
fields of your name your zip code and a
header that basically tells you to enter
your name and zip code in we’re going to
try and use the browser’s
geolocation or if it’s a mobile app
their location from the mobile app if it
doesn’t work we’ll fall back to use the
ZIP code
and I’d say the only technical part in
my prompt is that I’m telling it to use
this a um open Weather API to go and get
the weather now I’ve seen that in some
of the tools if you don’t tell it what
to use it’ll suggest one um I’m just
doing it for the sake of speed here in
this video because I know I want to use
open Weather API I gone ahead already
and signed up for a free account I’ve
got an API key that we use and then I’m
really telling it to get the latitude
and longitude and then pull back the
weather um once we do that in the app
once we submit our name and our ZIP code
um we’re going to tell the app here to
um show the welcome message telling the
person’s name and then display the
current weather info and I’m purposely
leaving this blank I’m saying the
temperature and the conditions I want
this tool this AI tool to come back with
what’s available to me and let me see
that the last thing I’m doing is I’m
setting a dynamic prompt um a dynamic
background I mean for the weather so if
the weather comes back with snow I’d
like to see a background with snow or
Haze or drizzle or whatever that is
couple notes it say make the app
responsive so it’s mobile friendly have
a clean and modern look to it and choose
the best technology I’d like to see what
these applications provide us um if
you’re a non-developer um you’re going
to get what the system gives to you if
you’re a developer you might tell it you
want certain elements for example like
the stylesheets you like or the
Frameworks you want to use so and also
I’m adding one additional requirement
that this is more technical that I’d
like this to be what’s called a jam
stack so I can host it on cloud FL Pages
what I’m going to do at the end here is
I’m going to go back to each of these
applications I built I’m going to deploy
them all into Source control and I’m
going to deploy them into um Cloud flare
pages so people can look at these all
right with that let me just copy
everything and I will go right to my
chat and we’re just going to paste it in
now as with all the other tools um you
know the system works on prompts and
tokens um
in versal here vo I’ve not purchased
account so we’re only using a free
account um in every one of the videos
I’ve done I’ve had another account
already logged in but you can do almost
all of this without purchasing
it all right so on the other side it’s
showing my prompt um it’s telling me
it’s thinking so this one’s nice it’s
actually telling me it thought 5 seconds
and it will tell me what it did while I
was thinking so it’s going to build a
modern
responsive weather application it looks
like it’s going to use next.js with an
app router and it’s going to use a
framework of Tailwind right so it’s
really being pretty open with what it’s
doing I’m going to go close this up and
it’s telling me what it’s used similar
to the other apps I’ve got a chat window
on the left I’ve got code window on the
right here um I’ve got a preview window
as well as I’ve got looks like got some
option to deploy share it and I can Fork
the code so really great
let’s watch it build out what it’s doing
and all right so a couple things in both
systems I’ve had to enter my API key you
can see right here that it’s telling me
it’s missing an environment variable and
it’s telling me it needs to be entered
here is the won’t function unless I give
it an API key that’s great that means
the tool is thinking of me as it’s
building the app um let’s go see what
it’s
done all right so features this app is
responsive design using using Tailwind
CSS that’s a great platform it’s going
to take the input of what I’ve asked it
for a name and a zip code it’s going to
try and use geolocation but if not we’ll
fall back it’s going to use open weather
it’s going to get it from the geoc
coding and then it’s going to show me a
dynamic weather right so a message and a
dynamic background it’s going to inject
air handling and messaging and so it’s
telling me how to set it up I need to
run this locally deploy some
dependencies so and then sign up for
open weather and create a key so this is
great um it’s telling me right here I’m
going to have to put that in that system
it’s creating a background that’s
Dynamic so and then here’s how you
deploy it it’s got the commands to run
and deploy directly to Cloud flare and
some technical considerations it’s
telling me that it’s server versus
client the app is doing client
components um it’s tell me it’s got to
put the key it needs to be prefixed this
is great um so let me go ahead and put
this key in here and submit it and let’s
see what happens when we quickly deploy
and preview it all right I put my key in
it stored it in its environment
variables it’s
rebuilding so it says great now that
you’ve added the key to the environment
variable in your project the weather app
will be able to make API calls out
that’s great so here we go let’s take a
look at what it comes back
with we weren’t very explicit in our
design we said modern and um uh fluid so
here we go it’s got our name of our app
it’s asking for an input it’s got the
weather um before we go any further
here’s the code very similar to other
ones it’s laid out um this one is using
next.js so let’s do gy let’s do my ZIP
code here I’m in Grand
Rapids great tells me it’s 33°
Fahrenheit and 1° CS I did not tell
either one of the systems what um what
type of you know metric or Fahrenheit or
how we want to do that so it uh it shows
both it looks like it’s showing me the
humidity feels like and pressure and
it’s got an option to start over what I
don’t see is my Dynamic background so
we’re going to go tell it we can adjust
let’s start over looks like that button
didn’t work as
well looks like it’s in a little bit of
a hiccup here uh
yeah it didn’t like it so let’s tell it
what’s going on so
after I
hit I
clicked the
restart link the page went
white and won’t display let’s see what
it does so it should take my prompt
there you go it notice that it uh it’s
obviously did something to restart the
app or it’s going to fix the issue with
the reset functionality that’s causing
it
nice um the problem was likely do with
how we handle the page reload right so
it’s handling that and refactoring based
on that
issue I’m going to let it finish this oh
yeah here we go the issue’s been fixed
it’s got a window. Reload option and
somehow it looks like it’s trying to
reload it right now there we go let’s do
a different zip code two
90210 all right and now it’s bever Hills
this icon is kind of strange start over
and that works okay so now let’s follow
up with I want the page background to be
dynamic and showcase an image based on
the weather um please add a full page
Dynamic
background image that is based on the
weather
conditions example
um
snow
image of
snow if it is
snowy and
whoops and
Sun if
Sunny use that pattern let’s see what it
says
looks like please add a full page
background great I’ll enhance the app
with the full page dnamic
background based on the weather
conditions to make the app more visually
appealing that’s exactly what we’re
looking for so um notice that it’s very
similar to what we happened with lovable
that the it didn’t know how to handle
that Dynamic background so I had to go
back and promp to it give it some QA
couple nice things here while we’re is
one it is a private app you can have
some of these be public to share up here
on the top I’m on version 4 right the
first version was deployed I think we
added a um API key the third one was the
adjustment for the reset and we’re now
on the fourth one here to um fix this
background all right now let’s give it a
run let’s go to gym four and thought I
had Hawaii ZIP code here let’s grab one
why not we all want to go to Hawaii in a
day like
today great current weather in Hawai
area is 80 Dees 27 wind speed I still
don’t see a background
um oh here we go interesting when the
weather data is received the weather
conditions clear then it looks up the
corresponding background images for
mapping um let’s see please use a free
image service to find
corresponding
images based on the
weather conditions right so this tool
might not be able to find uh open source
tool out there like UPS spash or some of
the others so it’s asking me in this
code here is to go ahead and put a
couple images up there that it um it can
use um I’m really looking to find
something that that is more Dynamic hey
looks like it’s doing it right here it’s
going out to up spash it’s grabbing a
photo based on the weather types great
so it understood at the second time I
told it I needed
that it’s doing some refactoring here
we’re on version five again we can see
the code as it’s going we have a preview
let’s see the options to Fork this code
and share it wonder what share does
we’re not quite there add the code base
and I can download the zip so really
quickly I can pull down the files that
we have here and deploy this the very
first prompt I believe it told me
exactly what I need to do it run it
locally which is great because then I
can also deploy it to website like Cloud
flare all right let’s see what happens
here we will do another zip
code so
gy let see what this brings
back there we go we got our Dynamic
background here and we’ll back up to to
where I’m
located Grand Rapids area and we are
cloudy so it looks like I tried to
represent cloudy here um in this Grand
Rapids com stock Park so overall um this
versal tool let’s go and do a deploy
like we’ve done in all the other apps
Also let’s quick click here I’m just in
the the preview version again so it
didn’t take the key um mainly because I
didn’t pop it in I was trying to do it
in a oh it’s opening in a new tab
I wanted to see if we could view this as
a mobile app doesn’t look like there’s
an option in this one as we do in the
other um systems let’s go ahead and
deploy there’s a risk because it’s
probably got my API key inside of it so
let’s see what it does it’s really nice
that it noticed that um if you remember
on lovable and bolt I hadn’t put the API
key in environment variable that’s not
exposed and so in this case it look like
it’s building it out really quick let’s
see what it’s going to do in Eric Cur
sensitive information again the
sensitive information was my API key so
it’s fixing it by moving the API key to
let me see if I can scroll down
here there we go to server side code the
error occurs because we’re exposing the
AP key directly to a client component
that’s fine it’s going to create a route
to do
that we like it when it handles security
for us let’s give this the moment to
complete
all right it’s completed let’s make sure
it works gym and here’s our ZIP code
again from all right the Hawaiian
Paradise Park that sounds like a nice
place to be let’s go ahead and
deoy security risk I feel like it fixed
that I wonder why it’s going to do it
again let’s go with the fix and see what
happens so this time it’s saying the
route that it created it’s interesting
as an issue as well let’s Let It build
out and see what
happens oh let’s even got a little
keemer the issue is that we’re still
using an environment variable um in our
prefix so let’s fix it again so these
tools learn as they go I wouldn’t say
learning is the right right course it
just did not take into account that what
it fixed it didn’t completely
fix and while we’re doing that let’s let
it
load still loading and now it’s needs to
take the key like it did the very first
time so let’s go do that I’m grabbing
that from a different
window all right the key has been added
and it looks like it’s trying to deploy
or quickly
um regenerate
here all right it’s testing that’s
interesting testing the deployed
application thoroughly
right all right let’s go
looks like since it made it server side
it’s not calling the API route
appropriately when necessary it needs to
refactor the code to take into account
the your API key all right we’re back
now couple things to note is we’ve spent
a couple of moments here trying to make
it so I can deploy this app we have a
fully functioning app I could spend more
time
Twizzlers with I’m calling that out
because I have one free message
remaining in my free series of prompts
um I won’t let’s quickly see if this
corrects our
issue
and did not like my ZIP
code there we go that worked so now
we’re going to try to deploy and
hopefully it’s corrected all of its
issues there we go let’s let this run
and just like both bolt and lovable I’ve
created an app using prompts I’ve
adjusted it we made sure it’s got some
security conf confirmation
and I am deploying it so let’s see what
happens in this case um I’m using the
free account got one more message left
if we would have had an issue I would
have probably consumed that last uh
message to fix
it all right we’re back it looks like
it’s taking probably about two or 3
minutes to deploy this so it’s giving me
a deployment gives me a URL
and let’s see if it kept my key in there
and we’ll do comto Park here we go let’s
see what happens perfect it’s working so
we’ve successfully deployed to um versal
or vo um I’ll come back and we’ll put
this in the blog post and I’ll have my
ratings of each one this was pretty e
easy to use it took a little longer to
build out the app we wanted it to I
think the Design’s pretty good um I
noticed it did throw some copyrights
where the image came from so that was
thoughtful and it did fix few security
issues so I’ll upload this and we’ll
share it if youve got questions please
leave a message in the post and thank
you