Can we combine OutSystems and ChatGPT to build our next app faster than before? Let’s build a weather app in 10 minutes or less without writing one single line of code.
What is ChatGPT?
ChatGPT, the incredible AI-powered program that responds to user prompts, has taken over social media in recent days! It’s been composing Shakespearean poetry, having deep philosophical discussions, and even identifying bugs in computer code.
The team behind it made ChatGPT available to the public for testing last month, and it’s been an absolute hit! In just its first week, the program drew over a million users and sparked a renewed interest in the effort to replicate human intelligence. And of course, it’s also sparked some controversy over potential bias and free speech limits.
Created by the brilliant team at OpenAI, ChatGPT is a chatbot that uses an algorithm to select words based on lessons learned from scanning billions of pieces of text from the internet. It’s truly amazing to see what it’s capable of!
What is OutSystems?
OutSystems is a low-code platform that allows businesses to develop and deploy custom software applications quickly and easily. The platform uses a visual drag-and-drop interface to make it easy for users to create and customize their applications without needing to write a lot of code. It also includes a range of pre-built components and integrations that can be used to speed up the development process. OutSystems is often used to create web and mobile applications, as well as to automate business processes and integrate systems.
Fun fact: the last paragraph about OutSystems was written by ChatGPT! 😄
So let’s put them together and see what happens!
I asked ChatGPT if it was willing to help me build a webpage/app, and it promptly said ‘Sure’.
So, I’ve created and prepared an OutSystems app that will use code suggested by ChatGPT and hopefully in the end, we’ll have a simple yet working OutSystems weather application coded by myself and my code companion ChatGPT.
I created a simple screen, with a small card that will show an icon and the temperature of the current weather in my location.
This is the bare-minimum that we need to prove that we can work together with ChatGPT while building this weather app. The icon image and the temperature HTML span are just placeholders that will be replaced with data coming from an API call response.
So I told ChatGPT what I wanted:
I would like it to be a weather forecast page.
It will have a card on top of the page showing the current temperature and
an icon with the current weather status.
Then the next section will have the forecast for the next 5 days.
The information needs to be retrieved via API, and user location should be
used.
Surprisingly, ChatGPT responded with some steps to create our application and an actual snippet of JavaScript code to get the user location, make an API call, handle the response and place the results on screen:
Great! To get started, you will first need to set up the HTML structure for
your webpage. This will include creating the main container elements,
such as the <body> and any <div> elements that you will use to organize
the layout of your page. You can use the <h1> and <p> tags to add headings
and paragraph text, and the <img> tag to add an image for the current weather
icon.
Once you have the basic structure in place, you can use CSS to add styles
to your page. This will involve selecting the elements that you want to
style and defining the styles that you want to apply. For example, you
might use the font-size and color properties to style your headings and
paragraphs, and the width and height properties to control the size of
your weather icon image.
To retrieve the weather data, you will need to use a weather API. There are
many different weather APIs available, and they will typically provide
instructions on how to use their API to retrieve the weather data that you
need. Once you have retrieved the data, you can use JavaScript to extract
the relevant information and display it on your webpage.
To get the user's location, you can use the navigator.geolocation object in
JavaScript. This will allow you to access the user's latitude and longitude,
which you can then use to query the weather API and retrieve the weather
data for their location.
Here is an example of how you might use JavaScript to retrieve the weather
data and display it on your webpage:
// Get the user's location
navigator.geolocation.getCurrentPosition(function(position) {
// Query the weather API using the user's latitude and longitude
fetch(`https://api.weather.com/v1/geocode/${position.coords.latitude}/${position.coords.longitude}/observations.json`)
.then(function(response) {
return response.json();
})
.then(function(data) {
// Extract the current temperature and weather icon from the API response
const temperature = data.observation.temp;
const icon = data.observation.icon;
// Update the page with the current temperature and weather icon
document.getElementById('temperature').innerHTML = temperature;
document.getElementById('icon').src = icon;
});
});
As we can see in the ChatGPT snippet, we need to have two HTML DOM ids to hold the API response values, one for the temperature and another one for the weather icon/image. And isn’t beautiful that the code comes already commented? 🤯
But I also want to have a 5-day weather forecast in our page, so I asked ChatGPT for that:
Can you give me now the snippet that will fetch the forecast for the next 5
days?
At this point, we shouldn’t be surprised that ChatGPT is here to help… And we can confirm that as we see it again, responding with the following:
Sure, here is an example of how you might retrieve the forecast for the
next 5 days using JavaScript:
// Get the user's location
navigator.geolocation.getCurrentPosition(function(position) {
// Query the weather API using the user's latitude and longitude
fetch(`https://api.weather.com/v1/geocode/${position.coords.latitude}/${position.coords.longitude}/forecast/daily/5day.json`)
.then(function(response) {
return response.json();
})
.then(function(data) {
// Loop through the forecast data for the next 5 days
for (let i = 0; i < data.forecasts.length; i++) {
// Extract the date, temperature, and weather icon for each day
const date = data.forecasts[i].date;
const temperature = data.forecasts[i].day.temp;
const icon = data.forecasts[i].day.icon;
// Update the page with the forecast data for each day
document.getElementById(`date-${i}`).innerHTML = date;
document.getElementById(`temperature-${i}`).innerHTML = temperature;
document.getElementById(`icon-${i}`).src = icon;
}
});
});
In this code, we are using the fetch function to query the weather API and
retrieve the forecast data for the next 5 days. We are then looping through
the forecast data and extracting the date, temperature, and weather icon
for each day. Finally, we are using the innerHTML and src properties to
update the page with the forecast data.
Note that this code is just an example and may need to be adapted to work
with your specific weather API and HTML structure. Also, be sure to replace
api.weather.com with the URL for the weather API that you are using.
I hope this helps! Let me know if you have any other questions or need
additional help.
Again, full working code, commented and with a brief explanation on what it does!
You can see in the ChatGPT response notes, that it states api.weather.com should be replaced with our specific weather API. So I asked ChatGPT to do that for me. At this point, I’m too lazy to do it!
can you replace api.weather.com with an actual free weather api?
It not only replaced the endpoint, but also suggested a list of other free weather APIs available for use!
Sure, there are many free weather APIs that you can use in your JavaScript
code. Some examples include:
OpenWeatherMap: https://openweathermap.org/api
AccuWeather: https://developer.accuweather.com/
Weatherbit: https://www.weatherbit.io/api
Dark Sky: https://darksky.net/dev
Each of these APIs will provide documentation and examples on how to use
their API to retrieve the weather data that you need. For example, the
OpenWeatherMap API provides the following example for retrieving the
current weather data for a given latitude and longitude:
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`)
.then(function(response) {
return response.json();
})
.then(function(data) {
// Extract the current temperature and weather icon from the API response
const temperature = data.main.temp;
const icon = data.weather[0].icon;
// Update the page with the current temperature and weather icon
document.getElementById('temperature').innerHTML = temperature;
document.getElementById('icon').src = `https://openweathermap.org/img/wn/${icon}@2x.png`;
});
As you can see, the API provides a URL that you can use with the fetch
function to retrieve the weather data, and the response includes the
current temperature and weather icon. You can then use this information
to update your webpage.
Be sure to check the documentation for the specific API that you choose
to use, as the exact syntax and format of the API requests and responses
may vary. Also, be sure to register for an API key if the API requires one,
as this will typically be required in order to access the API.
I hope this helps! Let me know if you have any other questions or need
additional help.
It’s impressive how detailed ChatGPT responses are… It not only responds to our requests while at the same time it gives explanations on the response.
By now, we have everything we need to tie together and see if we can:
- Get user location
- Call openweathermap.org API
- Update screen information according to the API response
Let’s grab the JavaScript provided by ChatGPT and add it to the screen OnReady event and pass the HTML DOM IDs.
We need to add two parameters that will hold the icon and temperature span IDs, and replace them in the snippet by changing ‘temperature’ to $parameters.temperature_id and ‘icon’ to $parameters.icon_id. I’ve also grabbed a free openweathermap.org API Key and added it to the code provided by ChatGPT.
With this in place, I can now publish our app and check in the browser if the image and temperature placeholders are replaced with actual data.
Browser will ask for permission to access my current location, which is being requested in the JavaScript code.
After allowing the browser to access my current location, the API call is made using my current coordinates and our app HTML is updated with the response data coming from the API call.
We can now move to the next part, where we show the 5-day weather forecast using again the JavaScript code provided by ChatGPT.
We need to add another JavaScript node in our screen OnReady action, that will call the forecast API endpoint. Add some HTML elements to our page to hold the 5-day forecast information, tie everything together, tweak here and there and let’s see if it works:
And we have a fully functional weather app that displays the current and 5-day weather information, while we didn’t have to write a single line of JavaScript... Because ChatGPT did it for us!
While this is not a production ready weather app, with insanely good UX/UI and a beautiful design, it shows how far we’ve come either in low-code tools like OutSystems and artificial intelligence chatbots like ChatGPT.
This took me no more than 10 minutes to build, and not a single line of JavaScript was written by me. While ChatGPT is far from fully replace developers, it can already be used as your code companion, that can come up with code snippets, can help you debug parts of the code or even help with code explanations.
In case this is the first time you are hearing/reading about OutSystems, here’s the link to the free trial. You just need to follow the steps to set up your environment in the cloud and download the IDE.
The full source code is also available for download here.
Top comments (0)