Building a Weather App with AI Tools – Part 4 – Replit

hello everybody this is Jim from Augusto
digital and today we’re talking about AI
powered application development this is
uh part four of our Series where we’re
looking at different tools to help with
development around the AI platform um in
this video we’ll be looking at repet the
uh tooling and then again the overview
of what we’re doing we’re looking at AI
power development tools we’ll be doing a
live demo of a weather app and we’re
using a thirdparty API we’ll talk about
the insights and the strength and
weaknesses of each of the tools and as
well we’ll take away some um practical
understandings for developers startups
and businesses just as a quick reminder
you know what’s the role of AI in app
development as a software development
company we’re looking closely at the
tools that are provided to us and what
we can do with them so Ai and
development you can do some acceleration
of this development code generation
automation it also helps reduce time to
Market quick iterations and testings it
definitely adds efficiencies we’ve seen
it where you can do some optimizations
streamline the workflows and lastly
where we’re seeing value at a high level
is validating business Concepts working
with leaders working with Innovation
teams to help provide rapid prototypes
getting into early Market testing with
that said let’s let’s talk through how
we’re going to evaluate our comparison
and this will come out when I’m done
with the videos I’ll have it posted
we’re going to go through the ease of
use on each platform the speed in
performance what features are available
the overall quality well the app works
right what how’s the creation that was
done stand up the tech stack that was
used and the cost so with that said
let’s Jump Right In to repet and here we
go it’s the interface very similar to
the other tools we’ve used on the left
you’ve got the idea to create an app
your login your credentials on the right
hand side you’re going to start with
really quick like what do you want to
make it has options here to do some
scanning you have got some other things
you can upload you can edit maybe some
recent things that could be done so with
that said I’m going to go ahead and take
our standard prompt we’ve created a
prompt here of this demo weather
application the goal we’re going to
build a responsive weather application
named the Augusto AI demo weather app
and then the prompt we’re going to use
and again the prompts are used to
actually verbally tell the system what
you’re going to build you know instead
of a typical development cycle where
somebody sits down and they start coding
it from scratch we’re starting here with
a prompt we’re telling it what we make
so we want to create a modern and
responsive app called the austo AI demo
weather app it’s going to work on a
desktop and a mobile device it’s going
to display a form with two Fields we’re
going to ask what their name is what
their zip code is and then when you
enter that zip code you’re going to hit
the current weather I’m giving it some
instructions I would like it to try and
use the browser or the mobile apps
location if it’s unavailable fall back
to use that zip code that they entered
um I’d also like it to use the open
Weather API now I am kind of
preemptively telling it what API to use
some of the systems would come back and
recommend one I’m telling it and then
I’m saying let’s get latitude and
longitude and then let’s go ahead and
get the weather I will have to provide
an API key and again I will do this as
we’re walking it through once we enter
that information and the uh form has
been submitted we want to show a welcome
message around the user’s name and then
we also want to display the current
weather and again and I’ve left this vag
I’ve just said the temperature and
conditions the API comes back with a lot
of data we’re going to let these tools
determine what’s relevant maybe ask us
questions so we can see how they work
with maybe not the most detailed
information and then lastly I want to
get here I want that background when the
app provides the weather back I’d like
the appg ground the background image to
show weather conditions right the
background should be visibly visibly
match the weather conditions such as
clear or cloudy or hazy or Misty I’ve
put a few notes to tell it make the app
responsive and mobile friendly use a
clean and modern UI I’m not giving it
much instructions let’s see what happens
and then I’d like it to choose the best
Technologies when I’ve done this for us
in prototyping I typically told it what
technologies I’d like here we’re being
pretty vague and let’s see what the
systems come back with and we’ll compare
and then lastly if possible prepare the
app to be deployed to a gy stack which
hosts on pages like Cloud flare Pages
I’d like to come back with all of the
apps I’ve completed put put them out
there in Cloud flare so some people can
see how they work all right with that
said let’s take our prompt and again as
we do this we’re going to be working in
the system going back and forth with it
and the goal is to build this
application and compare it we’ll take
we’ll measure how long it actually takes
so you can see here really quick that it
pulled a few things it pulled really
quick back the open Weather apis it
allows me to add some screenshots some
other information but let’s just start
building all right
let’s give it a
moment so it came back and said we are
building a weather wizard I like that
it’s a good terminology we’re going to
start getting information back from it
just like every other system it took my
initial prompt here and then it came
back with I’ll help you analyze this
project objective and create a plan for
building it it took the title obviously
and it’s going to help us organize the
requirements and propose uh MVP
so right here it’s building out the
initial prototype and it already sensed
in this tool maybe some questions that I
didn’t give it in its prompt so rep’s
done a good job of hearing what I’m
asking for and coming back and asking
more questions I’ve noticed in the other
tools that I can do that I can ask the
system what you recommend or how you
would do it but here the originally out
of the gates it’s asking me would you
like any additional features and we can
also make changes leather for example
the weather forecast for upcoming days
save a favorite location weather alerts
and notifications and additional metrics
like pressure and humidity as you saw in
my previous demos I’ve always gone back
and asked for additional weather metrics
let’s go ahead and do that up front it
would be nice to get the uh forecast for
the upcoming days but let’s just proceed
with this so we’re comparable with the
other systems I do like that feature of
kind of upfront work pre-planning before
you build the app very similar to what
we would do in our development
process let’s see it’s going to start
the initial prototype it look like it’s
using it’s building the
AI all right we’re back you can see as
it’s building the page so we’ve got a
title we’ve got the form that we’ve
asked for it throw some icons on here it
has a button to use your current
location right so it’s adhering to my
request to uh to gather that let’s see
it’s still progressing here at the
bottom the interface while we’re waiting
is very similar to the other one right
I’ve got the left-and side with my agent
conversation I’ve got the right hand
side that shows some type of a preview
other tool Suites that allow us to to
either one share the code probably do a
deployment which we’ll do here at the
end very good interface so far I like
the way that this tool communicates back
and
forth I’m still over here watching it
build as you can see we’ve got a couple
things that have happened here one the
um interfaces is fully being built out
behind the scenes it’s got an agent
working to do creation you can see here
that it’s created my pages of an index
an app and now it’s creating the
homepage so it’s working through
building out the components needed
inside of the application thing to note
as it’s building out the system the page
is getting repainted redesigned as it
goes the you can see here they’ve
reached that re um designed the page
that we had out front it’s configured a
few different things here really quick
it’s actually talking about the
integration to how it works with the
open Ai and then lastly it came back
said I built the responsive weather
application that displays the current
weather based in your location created
the data model and schemes schema it
implemented a backend API for routes it
developed the front end with the
homepage weather display information
added location
detection and it looks like it created a
dynamic condition so how does the
weather app look in function can you
enter a zip code does the current um so
a couple things I
liked that when it originally started
had a background color so I think I’m
just going to tell it um please add
a modern
back background color if um location is
not
detected for the homepage right I’d like
to go back to what it was a moment ago
so cuz yeah it’s hard to see the title
now that this design has changed a
little bit I do like the allow or no
thanks you know at taking the location
the the issue here is my machine I’ve
turned that off so if I click it you
know so that’s interesting it Xs my name
in a form suppos versus me putting it
here interesting I added a IR background
color the location is not let me modify
the necessary files all right so it’s
currently deploying that let’s see what
it looks like when it’s done all right
said I’ve added a modern background
color the location is not detected there
we go that looks good they updated the
Styles sheets so we’re back to kind of
what it looked like before so we do know
this is going to fail because I have not
entered in my API key so I’m interested
to see fail to connect location
coordinates please check your zip code
and try again right so I believe in my
my case here that this isn’t actually
working because I haven’t provided it
with the API key in the previous systems
we’ve had it’s kind of
um encouraged me to say let’s put it in
early and often so let’s see what this
comes back with as it’s troubleshooting
what it’s
doing so it’s working here to clean up
it did mention that it’s trying to clean
up a few let me go back said it’s let’s
do some air air State handling it found
some JavaScript errors let me see if I
can show
it updated the St let’s do the location
detector and then there say there’s some
jsx or style errors in the council let’s
remove inline styles that are causing
this so it’s creating a few more
components to help fix that problem so
we’re still generating some of those
components what I do like in the
background as it was doing this it was
showing me components that it was
working on it showed me the background
it worked
on let’s see got what’s it telling me it
did here created a new background
gradient applied the background when the
location’s denied fixed styling issues
and added a transition all right that’s
nice I still need to ask it um let’s
just ask it where it should put the API
key
where can I add the
API key for
open Weather
API so where can I add my API key for
open Weather API let’s see what it says
can add a database where can I it just
it immediately came back with a message
but it looks like it’s taking it to an
agent we need to add the AP I key to
your application that’s correct let me
help you set up an environment variable
that’s great we’ve done that on the
other ones so it’s going to take a
secret in the window here and then it
will inject it in my environment I’m
going to go ahead grab that and paste it
in here all right I’ve saved my API key
and would you like to save the secret to
your account secret so you can easily
access it from other apps I don’t think
so I only need this in this particular
application I’m
building it looks like repet smart
enough to ask me hey is this something
that’s going to be reused across apps we
build again over here on the right hand
side it’s showing me what it’s doing
right now it’s restarting that
application and building out the
information so it’s adding in the API
key great I do like that it um isn’t
actually showing it here that’s nice so
it’s restarting the application let’s
see what happens um as I watch this it
looks like it’s it’s using a couple of
things in the back end
Express and it’s doing a
build so it took a screenshot initially
that’s awfully nice all right on the
left it states I have updated your open
Weather API key it added it it updated
the server routes and it restarted my
application let’s see what happens let’s
try the app and we’ll put in a
all right put a zip code in here and get
weather you the name let’s see please
enter your information to see WEA it
looked like it didn’t like that let’s
try it again we’ll do
90210 I believe that’s Beverly
Hills so no weather data um please enter
your information so let’s tell it what’s
happening um after I
submit a zip code is returning
no WEA data help
troubleshoot and
fix great it looks like it’s I can see
from the logs the API requests are
turning 200 which means they’re
successful there must be an issue with
processing or display
it’s running a couple curl requests
to interesting it’s running it to the
local system versus going out to the
actual open Weather API
we’ll continue to see what it does all
right it looks like it came back it’s um
added some debugging to help identify
the API calls are working
correctly and let’s see what we do here
now one thing I do want to look at I’d
like to look at what code is being
generated I think I need
to look inside of what I can do from the
system so here’s obviously the code that
it’s created it’s some regenerating here
but let’s find out if it’s calling the
right
apis all right it came back some fixes
it added some logging and State
Management so let’s see what happens
again so gym and we’ll do another zip
code that we got and get the
weather all right it looks like it
worked so welcome JY it’s got the
weather talks about wearing located
Walker feels like humidity wind speed
and then the pressure that’s great
weather forecast data is available for
premium users I like how they uh threw
that in there so let’s do Bob and Bob is
in
90210 now similar to other apps what I’d
like to see now is a dynamic background
with um let’s see please add a
dynamic background
that
displays an image based on the weather
conditions example if Sunny show a sunny
photo or if
cloudy photo cloudy image match this I
match the image based on the conditions
this
image let’s leave it at that we should
specify like this image should be the
full background or expand all the way
but I’d like to see how the system
handles this in the other ones we had
the exact same problem with one of the
tools where we did not get a dynamic
image but when it was completed the
dynamic image actually showed up in a
different window so I’m intentionally
being vag um right now just so we can
see how these tools work at a very base
level I do know if I start adding please
put in things like use cases or tests or
run a test before you deploy it the
system will take that into account but
let’s see what it comes
back one thing I’m noticing already is
it looks like it told me it’s going to
create Dynamic images here so it’s
creating assets for clear for clouds and
it actually said I’ll create Dynamic
images with the weather conditions it’s
looks like it’s creating them and
putting them in a folder based on that
so it’s got cloudy and clear
what’s interesting here is it’s going
ahead and generating this pre uh
predetermined before it goes out and
gets the weather information the other
applications did something similar
however what they did is they went out
and used a third party tool it was aware
enough to go and grab some photos from
like a splash or some other open areas
that cre images to be used so let’s see
what the outcome
is all right it’s still generating
images it’s up to thunderstorms I can
see what’s happening here is this um an
agent must be going out generating these
images and then coming back and saving
them all right it looks like it’s uh
come back so it’s done a couple things
it generated these um series of images
based on weather conditions they’ve
updated the weather info and the
background component on both the weather
Pages here let’s
see upgraded the comp let’s see what is
that the weather info page as well as
applied the dynamic backgrounds so let’s
see what happens when it restarts starts
the
app one thing I will notice is repet
seems to be very thorough in the agent
that runs and the execution it does it
is a bit slower than the other tools so
we will see as we go how long this app
took to create all right it’s finishing
up uh compiling it took us let’s see
here enter your name and zip code it
actually looks like it updated the
background of this this page even though
I didn’t necessarily want that so let’s
go gym let’s do I wish I knew Hawaii so
I don’t remember off the top of my head
let’s do
another let’s do 504 that should be
Grand
Rapids well it changed it’s cloudy
scattered clouds I would I would agree
that’s a dynamic background of clouds
let’s do Bob from
90210 hopefully that’s Sunny let’s
see
whoops 210
all right it’s sunny so it did create a
dynamic um background not necessarily
what I was thinking of I wasn’t very
explicit in what I told it um let’s go
back to app it said looks like you must
have a subscription to continue using
I’ve reached my free usage so a couple
things I just noticed on this one I did
have a lot of interaction with repet to
get to where we are but we have a fully
executing application here it looks the
way we want um the one thing I’d like to
do I’d like to see if I could this um a
reserve virtual
machine Auto scale static Pages it
doesn’t look like it’s going to let me
choose those and look like I have to
upgrade to deploy where the other tools
I was able to quickly you know deploy it
or um gain access what can I do here I
can invite someone can
I download
it yeah just trying to see what options
I have all right well
we’ve successfully oh here we go this
whole time I didn’t actually if I look
over here here’s all the code in there
that’s great to see so very a little
different than the other ones I can add
a folder I can um gr it but what a great
I kind of like this interface code files
on the one side and um the agent editors
here so good to see all right we have
just built our weather app in repet I’m
going to go ahead and actually get an
account so I can deploy this and then
we’ll work on the next phase hope you
enjoyed the video if you have any
questions hit us up in the comments
thank you again