DEV Community: Ro

How to Create a Weather App in 5 mins

Ro — Thu, 28 Oct 2021 19:14:32 +0000

Introduction

Weather is something that greatly affects our life. Wherever we are if we know what is coming like snow or rain, we can make inform decisions. Undoubtedly, people find weather forecasting helpful to know about the weather conditions which explains why the need for weather app is growing. Weather applications make sure that users are informed to be prepared for the weather conditions.

So if you're planning to create you own weather application you're in the right place. By the end of this article, you’d have learned how to build a Weather App using Appsmith. We’re going learn the following concepts-

Connecting to the GraphQL API
Writing queries to fetch data from API
Binding query data to widgets
Writing Javascript in Appsmith
Sharing your application and managing permissions

Now you’ve got a good overview of what we’re going to be building, so let’s get started!

Why to use Appsmith

Coding a weather app is difficult and time consuming. To make our development easier and faster we'll be using Appsmith.

Appsmith is an open-source platform that lets you create powerful apps, admin panels, dashboards quickly using a simple drag and drop interface. You can also connect your app to various Datasources like Firestore, REST APIs, MySQL, Postgres, MongoDB and many more.

So now head over to appsmith.com and sign in.

Creating the Application

We're going to build a simple weather app so lets start creating our app. We want our weather app to display details like weather description, wind speed, temperature, weather icon and many more.

For this application we're using GraphQL weather API. You can checkout the api here. Its free and gives accurate weather conditions.

We’re going to be creating a new application, so click on the create new button. This will redirect you to our newly created application. Rename the application as Weather App by simply double-clicking on the existing name.

Building UI and Accessing Widget Properties

To build our beautiful UI we'll be using a Container widget, so that we can group our other widgets inside this.

We want a Image Widget and eight Text Widgets. Click on the + icon next to the Widgets from entity explorer. You’ll find a list of UI widgets that you can use to build the applications. Drag and drop a Text widget inside the container and add their associated names like:

Temperature
City Name
Humidity
Min Temp
Max Temp
Wind Speed
Description
Visibility

To make our UI look great we'll set the styling properties of Text Widgets as follows:

Cell Background Color: #2E3D49
Text Color: #FFF
Border Color: #FFF
Text Size: #Heading2
Text Align: Center
Border Width: 1px

So our basic UI is done, now lets create our first API.

Connecting with GraphQL

To establish a new connection, follow these steps:

Make a connection to API by clicking the plus icon under API section or you can even use CURL import.
Lets rename our query to FetchWeather.
We’ll write a POST request and use GraphQL query to list down all weather details.
Next, paste the URL of GraphQL weather API that I mentioned earlier.
We’ll have to set headers in order to access the API. Set content-type to application/json.
Now, we’ll have to write a GraphQL query in the request body to list all the database games. This will require an object with query as key and the GraphQL query value associated with it to.

Copy-paste the below code snippet in request body-

{{
JSON.stringify({
    variables: {
            city: cityName.text
    },
    query: `
        query ($city: String!){
            getCityByName(name: $city){
   name
   country
   coord {
     lon
     lat
   }
   weather {
     summary {
       title
       description
       icon
     }
     temperature {
       actual
       min
       max
     }
     wind {
       speed
       deg
     }
     clouds {
       all
       visibility
       humidity
     }
     timestamp
   }
 }
        }
    `
})
}}

Here we have to give the city name in the query to fetch weather info. We are taking the city name from our app UI and accessing it here using cityName.text

Now, hit the Run button to run the query. You should see a the weather details in a JSON format in the response tab.

And we're done fetching weather details. Lets head to the next section to complete our app.

Completing onClick action for Submit Button

Now, we'll see how to load data from API to our main page app after click the submit button.

Inside the property pane of Submit Button, we’ll find a onClick Action, and here we’ll have to bind the data from FetchWeather API. Use the moustache syntax and add the below code snippet-

{{FetchWeather.run()}}

With this the data is fetched lets bind this data with our main page app. We have eight text widgets as follows-

Temperature
City Name
Humidity
Min Temp
Max Temp
Wind Speed
Description
Visibility

Now head to the property pane of Humidity Text widget and set the text property to the following-

Humidity
{{FetchWeather.data.data.getCityByName.weather.clouds.humidity}}%

Below is the screenshot of how the response looks like:

Great, we can now see our data from the GraphQL API on our Text widget; similarly, let’s set the Text property of other text widgets to show the contents from the API:

Wind speed text widget set the Text property to:

Wind Speed
{{FetchWeather.data.data.getCityByName.weather.wind.speed}} mps

Min Temp text widget set the Text property to:

Min Temp
{{Math.round(FetchWeather.data.data.getCityByName.weather.temperature.min - 273.15)}} °C

Temperature fetched from API is in Kelvin to convert it into degree celsius we're subtracting the value from 273.15 and using Math.round() to round the value.

Max Temp text widget set the Text property to:

Max Temp
{{Math.round(FetchWeather.data.data.getCityByName.weather.temperature.max - 273.15)}} °C

Similarly setting other text values.

In the API we also get a weather icon, but these are codes like 50d or 200 and we cannot use them to display image. So set the image property with the following:

{{ `http://openweathermap.org/img/w/`+`${FetchWeather.data.data.getCityByName.weather.summary.icon}`+`.png`
}}

Here we're concatenating openweather's url with our api code "FetchWeather.data.data.getCityByName.weather.summary.icon" this will give us image of the corresponding code. Below image shows response-

Complete Weather App

Here's how our completed App looks like-

Wrapping Up

Deploy your application and share it with friends. And thats it, we're done!

In this tutorial we learn how to connect our app to a GraphQL API and how to create and read data. We also learned to use Image, Text widget and how to customize them for our purposes.

If you found this tutorial helpful, checkout their Appsmith Github page for more such blogs.

Build a Cryptocurrency Price Tracker - Appsmith

Ro — Thu, 28 Oct 2021 08:06:36 +0000

Building Cryptocurrency Price Tracker
What you'll learn
Building main page UI
Fetching data from API
Binding Data to Widgets
Completing onRowSelected action
Conclusion

Building Cryptocurrency Price Tracker

As the digital currency industry is increasing with newcomers joining every day, several companies are creating unique tools to help traders obtain decent returns. The best Cryptocurrency Price Tracker can help traders to improve trading and take it to the next level. Coding such a tracker feels difficult, but Appsmith makes it easy.

Appsmith is a low code platform that makes creating Admin Panels, Dashboards and more 10x faster. This tutorial assumes you have basic knowledge of Appsmith, if you're new checkout their documentation page here

What you will learn

Building two page application with Appsmith.
Using API as Datasources.
Connecting data fetched from API to application widgets.
How to navigate to next page on Table row select.
How to use Table, Image and other widgets.

Building main page UI

Now let's start with building our main page application. This page will contain a table that displays Market Rank, Current Price, Market Cap and other details. On selecting a row the user should be redirected to a new page and give some more details of the selected digital currency.

If you are new to Appsmith, its free to use so go ahead and create your account. After you log in you might be redirected to Appsmith Dashboard.

Follow the below steps to create UI:

Click on Create New button on the right hand side. This will redirect to our newly created app.
Our app now has a default name as Untitled Application 1.
Rename the app as Cryptocurrency Price Tracker.
On the left hand side menu under Widgets section, drag and drop the Table widget. We'll use this Table to show all details about each digital currency. The Table will have some default values, go into the property pane of Table and delete the default values. Later we'll load data from API.
To give title to our app use Text widget and rename the Label as Today's Cryptocurrency Prices by Market Cap. You can resize the Text widget or change its text color as per your choice. You can see how our Page1 looks in the below image-
On the left sidebar click on + icon next to Pages section. This will create new page that we'll navigate to whenever a row is clicked on the Table.
This page will have default name as Page2.
Drag and drop a Container Widget on the canvas of Page2. Inside this container we'll create one Image widget and 8 Text fields like Market Rank, Mkt cap and other details. Rename Text fields as follows:
- Coin Price
- Market Cap
- 24h Low /24h High
- Trading Volume
- Market Cap Rank
- All-Time High
- All-Time Low

With this we are done building UI for both pages.

Fetching data from API

In this section, we'll learn to integrate API with our application. The API used in this app to get realtime and accurate data is taken from CoinGecko. CoinGecko provides analysis of crypto market. The API is publicly available, reliable and provides data for over 1,000+ coins such as Bitcoin, Ethereum and more.

So now lets see how to connect API to Appsmith.

At the left hand side menu, click on the + icon besides Datasources. This will show all the Datasources that Appsmith can connect to, you have to click on the CURL Import option under API section. Copy paste the CURL import below:

curl -X 'GET' \
 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h%2C24h%2C7d' \
 -H 'accept: application/json'

After importing you'll see the Headers of the GET request already set. The CURL import sets the Headers for us. The GET request has a default name as "Api1", let us rename this as Fetch.

Now click on the Run Button and this will show all the data in JSON format in the Response Section. You can see the response in the image below.

And its done, you see how easy it is to integrate Api with Appsmith.

Binding Data to Widgets

Now that we are done fetching data, we have to connect it with our Table widget. Under the Table property pane you can see Table details, it contains default data so you have to delete that and copy paste below code snippet.

{{
    {{Fetch.data.map(val => ({
        "Rank": val.market_rank,
        "Symbol":val.symbol,
        "Image":val.image,
        "Coin":val.name,
        "1h":val.price_change_percentage_1h_in_currency,
        "24h":val.price_change_percentage_24h_in_currency,
        "7d":val.price_change_percentage_7d_in_currency,
        "Mkt Cap":val.market_cap,
    }))}}
}}

This will now show all details in our Table widget. You can see how our Page1 looks in the below image.

Awesome! our Main page is complete but we want to navigate our user to Page2 whenever a row on the Table is clicked. Lets see how to do this in the next section.

Completing onRowSelected action

In this section we'll learn how to navigate to next Page when a Table row is clicked. We'll also pass details from our Page1 Table to Page2.

When you go into the property pane of Table, you'll see list of Actions. Choose navigateTo() option under onRowSelected Action. Or you can even choose to write Javascript code and copy-paste below snippet-

{{navigateTo('Page2',Table1.selectedRow)}}

navigateTo method takes 2 arguments:

First where to redirect(like Page2, Page3...)
Next, queryparams that will provide info on Page2. Here we are passing the selected row's details to next page.

Now lets fill in the values in our Image and Text widgets-

Image - appsmith.URL.queryParams.image
Coin Price - appsmith.URL.queryParams.image
Market Cap - appsmith.URL.queryParams.image
24h Low / 24h High - appsmith.URL.queryParams.low_24h / appsmith.URL.queryParams.high_24h
Trading Volume - appsmith.URL.queryParams.total_volume
Market Cap Rank - appsmith.URL.queryParams.market_cap_rank
All-Time High - appsmith.URL.queryParams.ath
All-Time Low - appsmith.URL.queryParams.atl

appsmith.URL.queryParams gives the value that we passed with navigateTo() method. With this our complete Page2 looks like this-

And we're done! here is how the complete application looks like-

Conclusion

You've seen how easy it is to build a Cryptocurrency Price Tracker with Appsmith. So if you want to create a app and have zero coding knowledge consider creating it with Appsmith. I hope you learned something useful here. Now, it is your turn. Go ahead and create a application with Appsmith.

How to work with GraphQL on Appsmith

Ro — Tue, 26 Oct 2021 17:20:39 +0000

Getting started with Appsmith

Appsmith is a opensource framework that helps us build CRUD apps, Dashboards, Admin Panels and many more much faster. We can also connect to Datasources and APIs to create complex workflows. You can learn more about Appsmith here.

Building A Demo Application

We will learn to integrate Appsmith with GraphQL and also build our demo application. I've created a book database, hosted it on Hasura and exported it as GraphQL API. Below is an image showing some of the attributes of the dataset.

In the above screenshot we can see I have executed a Graphql query in the Hasura console and the response consists of a list of books in a JSON format. Next, we’ll use Appsmith to utilise this database and build a Book Search App by writing different GraphQL queries.

Building a simple UI

To start building our application we need to signup to Appsmith(it's free!). In this tutorial, we'll create a Book Search application. To do this, follow the below steps:

Click on the Create New button under your organisation.This will redirect to the configuration page of the newly created app.
Note that the app is created with a default name Untitled Application 1. We'll rename it to Book Search App by double-clicking on the default name.
On the sidebar to the left side drag and drop the List widget on the canvas. This list will be displaying all the books that we'll fetch from database.
Next add some Text widget on the List to display the book details. This Text widget has many styling properties like Text Color, Text Size etc. to choose from.

So our basic UI is done, now lets create our first API.

Connecting to the Database and Fetching Data to Appsmith

To connect to our GraphQL backend server, follow these steps:

On the sidebar to the left side click on the + icon next to Datasources. You’ll see a list of Datasources that Appsmith can connect to. Click on Create new API under the APIs section
Now rename the API to FetchBooks. We can use this query name in UI to access the query results.
We'll create a POST request to fetch all books from the database
Next, enter the URL of your Graphql endpoint (e.g. https://mock.hasura.app/v1/graphql)
Inorder to access the database we need to set content-type and x-hasura-admin-secret headers.
In the request body we have to write Graphql query to list down all books from the database.

{{
JSON.stringify({
    variables: null,
    query: `
        query {
            book_list { Name, Author, Genre, Image }
        }
    `
})
}}

Click on the Run button or hit cmd + enter to execute a query. You'll see a list of books in JSON format in the Response tab.

Lets connect this query to our UI and fetch all books to our List widget. Click on the List's property pane to update the data with the query results.Inside property pane, you'll find List Items property. Use the moustache syntax and add the below code snippet:

{{FetchBook.data.data.book_list}}

this will display our data in the form of a list.

We now have our list of books fetched from Graphql endpoint and displayed on our UI. Next, we’ll create a form where we can add new books to the database.

Inserting new book to database from Appsmith

In this section, we'll see how we can insert a new book from our UI to the database. For this we'll create a simple form on Appsmith.

Drag and drop a form widget on to the canvas. In this form widget, we'll add input widgets that accept necessary fields to add new book.
Open property pane of input widgets and name the input fields so we can reference them in our Graphql query. Also select Data type for each input field according to the type of data to be stored in database. Below is how we’ll have to name the input widgets.
- Name - nameInput
- Author - authorInput
- Image - imageInput
- Genre - genreInput

Below is how the form will look like.

So now we have are UI ready; lets create API to add new book to database. Follow the same steps we did to create fetchBook API and create another POST request. Rename the API to InsertBook and paste the below code snippet in the request body of Graphql query.

{{
JSON.stringify({
    variables: {
        book: {
            Name: nameInput.text,
            Author: authorInput.text,
            Image: imageInput.text,
            Genre: genreInput.text
        }
    },
    query: `
        mutation ($book: book_list_insert_input!) {
  insert_book_list_one(object: $book) {
    Name
    Author
    Image
    Genre
  }
}
    `
})
}}

Here we have an object with query key that holds the Graphql query and a variable key with all the variables that need to be posted to the database.
To fetch the values from the input widgets, use the names of the input widgets and the .text method is used to pick the text that's written in the input widgets. (e.g. nameInput.text)
The insert_book_list_one in the mutation lets us add one book to the database.
Now that our api is ready, lets connect this to our UI so that whenever the Submit button on form is clicked we can add a book. As you can see in the above image, open the property pane of Submit button and set the onClick action with the code snippet below.

{{
    InsertBook.run(
      () => FetchBook.run(),
      () => showAlert('Error','error'))
}}

Here we're calling the InsertBook API using .run() method that takes two arguments. On successfully running the API we call FetchBook.run() to display the updated list of books and on error shows an alert message.

onSuccess action - FetchBook.run()
onError action - showAlert('Error','error')

Awesome, now that we have our POST request ready, we can try adding a new book using the form we’ve created.

Updating the book details on database

In this section, we'll learn how to update the book details from Appsmith and save the changes on database.
For this we'll create a simple modal that will open whenever user selects a list item.

Open the property pane of List widget, set the onListItemClick action to Open Modal and then click on New Modal to create a new modal.
Drag and drop all necessary input widgets to display the Book Details. We have to name all input widgets and also provide the default text based on item that is selected.
- Name Input: editName & Default Text: List1.selectedItem.Name
- Author Input: editAuthor & Default Text: List1.selectedItem.Author
- Image Input: editImage & Default Text: List1.selectedItem.Image
- Genre Input: editGenre & Default Text: List1.selectedItem.Genre

Now, whenever we made changes in the input widgets and hit update details button, the associated book details should be updated in the database. For this, let’s write a new update API that’ll help us update the values. Follow the same steps as fetchBook API and paste below code in body of Graphql query.

{{
JSON.stringify({
    variables: {
        book: {
            Name: editName.text,
            Author: editAuthor.text,
            Image: editImage.text,
            Genre: editGenre.text
        }
    },
    query: `mutation ($book: book_list_set_input) { update_book_list_by_pk(_set: $book, pk_columns: {Name:"${List1.selectedItem.Name}"}) { Name, Author, Image, Genre} }
    `})
}}

Here we have an object with query key that holds the Graphql query and a variable key with all the variables that need to be posted to the database.
We use the .text to fetch data from input widgets of modal.
The update_book_list_by_pk in the mutation lets us update a book by providing primary key Name
Lastly, for the Update Details button, set the onclick property to Call the EditBook API. We should now be able to update the book details by editing the necessary input widgets and clicking on the update button.

Paste the below code in onclick property of update button in modal

{{
    EditBook.run(() => {
        FetchBook.run();
        closeModal('EditModal');
    })
}}

The closeModal('EditModal') method helps us to close the modal after successfully running the query.

Deleting a book on database from Appsmith

For the delete option, let's add a new button and name it as Delete so that we see a new delete button on each List Item. Now let's go ahead and create a new Delete API.

Create a new API and name it as DeleteBook. This query method helps us delete a book in the database from Appsmith.
Copy the same content-type and x-hasura-admin-secret headers to access the database on Hasura from the previous FetchBook API.
Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the body:

{{
JSON.stringify({
    query: `mutation {delete_book_list_by_pk(Name: ${this.params.Name} ) { Author } }
    `})
}}

The query needs primary key Name to find the corresponding book and delete its entry from database.
We have to take this primary key of the selected List Item from the UI and access it in the request body using this.params.Name
When the user clicks on the delete button we want to delete the book and then call the FetchBook API to update the List Items. For this, we have to add custom JS in the button's onclick property:

{{
    DeleteBook.run(
      () => FetchBook.run(),
      () => {},
      {Name: `${List1.selectedItem.Name}`})
}}

Each query object has a run function that is used to execute the query. This function takes three arguments separated by comas:
- onSuccess functions - In this case, its FetchBook.run()
- onError function
- params object - {Name: ${List1.selectedItem.Name}}

And we done with our application. Below is the image of the final application.

Conclusion

So now you have seen how easy it is to create applications on Appsmith. In this how-to guide we have learned to create an application and connect it with Graphql, also to create, read, update, delete data. We have also seen how to work with widgets. I hope you enjoyed this how-to guide. For more such tutorials you can refer to Appsmith docs.

DEV Community: Ro

How to Create a Weather App in 5 mins

Introduction

Why to use Appsmith

Creating the Application

Building UI and Accessing Widget Properties

Connecting with GraphQL

Completing onClick action for Submit Button

Complete Weather App

Wrapping Up

Build a Cryptocurrency Price Tracker - Appsmith

Table of Contents

Building Cryptocurrency Price Tracker

What you will learn

Building main page UI

Fetching data from API

Binding Data to Widgets

Completing onRowSelected action

Conclusion

How to work with GraphQL on Appsmith

Getting started with Appsmith

Building A Demo Application

Building a simple UI

Connecting to the Database and Fetching Data to Appsmith

Inserting new book to database from Appsmith

Updating the book details on database

Deleting a book on database from Appsmith

Conclusion