Create a Weather Application in Svelte

Jangwook Kim

·

Follow

Published in

JavaScript in Plain English

·

6 min read

·

Feb 14, 2020

--

Listen

Share

I heard Svelte is simple and fast. So I decided to learn Svelte by building something.

Prerequisites

I’m using node version 12.13.1

I will use OpenWeatherMap API for getting information about weather. Sign up and remember API key.

If you don’t know how to use API, read MDN web docs about Fetch API.

Before start project

I’ll write hash value after each section. If you want to get source code of that versions, please execute this following commands.

Create new project using template

Svelte offers templates to programmers who want to create new project using Svelte. We can clone template source code through just one line command.

If you want to check how initial template code works, run this command on your project's root directory and access to http://localhost:5000 using browser.

hash value: be32f0e

Design app simply

Before write some code, I design app simply. It’ll be helpful during this project.

1. App should have one input form to enter city name.
2. App should have one button to add weather card.
3. City name, icon of the weather, current temperature(celsius degree) should be displayed on the weather card.
4. If user click weather card over 1.5 seconds, delete modal will be displayed.
5. If user click delete modal, weather card will be removed.

It’s the simple UI which I thought before create application .

Install SASS pre-processor

I decided to use svelte-preprocess-sass to use sass.

To use this package, I modified /rollup.config.js file.

Through this modifying, I can use scss syntax in the style of components.

To test SASS preprocessor is working, I modified /src/App.svelte file.

If you can see changed font color on your browser, it works!

hash value: cdae25d

Add header

I’ll create header for app but before create that, I have to modified /public/global.css file.

Let’s create /src/Header.svelte component.

After create component, I add this component to my /src/App.svelte.

I could add component easily using import statement.

hash value: a865e3d

Add store

In official document, they define a svelte/store module like this.

A store is an object that allows reactive access to a value via a simple store contract.

To access value from any component, I should add store to my app. I added /src/store.js file.

I import writable that allows both updating and reading by subscription. The writable has three method to control data.

First method is subscribe. This method is used for notifying value changes to subscribers. Second method is set. This method is for setting value to store. It replace store value because this method receive just only new_value as a parameter. Third method is update. This method is also for setting value to store. But it receive function as a prameter. So if I want to change store value partially, I should use this method.

See my /src/store.js file again. I export weatherList and this has also three methods. First one is subscirbe that I already explained. Second one is add that is for adding weather information. Third one is remove that is for removing weather information from the store using city name. I used update what I explained before to define add and remove methods.

hash value: e10b3b5

Add search form

Before create search form, set key of the OpenWeatherMap API to my application. I set key using js file because this application is test application and it doesn't have any server or database. I created /src/key.js file.

To add weather card to my app, I have to create search component that has input and button elements to retrieve weather information. I make /src/Search.svelte file.

To use store in component, I import weatherList. And I defined function to add weather information into store. In this file, you should see detaily these following things.

1. To bind cityName variable to value of input element, I used bind:value={cityName} statement.
2. To bind addWeatherInfo function to click event of button element, I used on:click={addWeatherInfo} statement.
3. In addWeatherInfo function, I used weatherList.add method to update store.

Add Search component to /src/App.svelte.

hash value: ba5925e

Modify store(It’s my fault)

I realized my weatherList.remove method is not appropriate when I start to implement WeatherCard. Why that's not proper? Because I can get index without calculate. So I modified remove method.

hash value: 2dc0b3d

Add weather card

If I entered city name in input element and clicked button element, I can retrieve weather information. This information is just text data type of json, I need to create weather card to get easily that data.

This is the structure of the data.

First, I create board component that is for listing of the weather cards. I created /src/Board.svelte file.

And add board component to /src/App.svelte file.

If you search city, stringified weather information will be displayed on the board component. And then, I create weather card component using this information. Create /src/WeatherCard.svelte.

In this file, I recommend you should see detaily about mouse event. To satisfy my simple specification, I had to implement mouse event.

Check duration of the click event, if duration is over then 1.5 seconds, delete section is displayed.

Modify /src/Board.svelte after implement weather card component.

Show I didn’t write properties name. Svelte support short statement. The {weather} statement completely equals to weather={weather}.

My first svelt application is completed!

hash value: e3a9f85

2020.02.18 Get API key from ENVIRONMENT VARIABLES

Managing API key as the file is very dangerous. If I made mistake so pushed API key to github, all people can use my API key.

So I modified some of my code(Actually my boss modified).

First, I installed replace plugin. Replace plugin replace strings in files while bundling.

npm install @rollup/plugin-replace --save-dev

Second, I modified my src/key.js file as shown below.

export const key = 'API_KEY';

Third, I applied replace plugin by set configuration on my /rollup.config.js file.

import replace from '@rollup/plugin-replace';
...plugins: [
    replace({
        'API_KEY': process.env.API_KEY
    }),
],
...

Now, we can run application with ENVIRONMENT_VARIABLE. Run this below command.

API_KEY=<api-key> npm run dev

hash value: a212007

Conclusions

Svelte is quite simple and official document is cool. Need to study more!

Change Log

1. 2020.02.18 Get API key from ENVIRONMENT VARIABLES
2. 2020.03.04 I published this application to my GitHub pages.
   Input your API key and search!

A note from JavaScript In Plain English

We are always interested in helping to promote quality content. If you have an article that you would like to submit to JavaScript In Plain English, send us an email at submissions@javascriptinplainenglish.com with your Medium username and we will get you added as a writer.

We have also launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!