web-sys: Weather report

This example makes an HTTP request to OpenWeather API{target="_blank"}, parses response in JSON and render UI from that JSON. It also shows the usage of spawn_local function for handling asynchronous tasks. _ [wasm-bindgen Guide]

[web-sys: Weather report]

The original example asks us to add our api key in get_response() before running this application.

Let's use [open-meteo] instead. Open-Meteo is an open-source weather API and offers free access for non-commercial use. No API key required.

Our crate will be called meteo. We'll keep it simple to avoid noise in our code that distract us from the aim of this example.

setup the project

cargo new meteo --lib
cd meteo
mkdir -p www/js www/html
cargo add wasm-bindgen js-sys wasm-bindgen-futures
cargo add gloo json reqwest serde -F "reqwest/json, serde/derive"

edit Cargo.toml to add crate-type & dependencies

[lib]
crate-type = ["cdylib",]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
gloo = "0.11.0"
json = "0.12.4"
reqwest = { version = "0.11.23", features = ["json"] } # reqwest with JSON parsing support
serde = { version = "1.0.193", features = ["derive"] }
wasm-bindgen = "0.2.90"
wasm-bindgen-futures = "0.4.40"

Also add web-sys in a separate dependency. Here is a hack to save on typing.

First genarate an entry as a dev dependency

cargo add --dev web-sys -F "Document Element HtmlSelectElement Window"

Next edit the [dev.dependencies] block to [dependencies.web-sys]

[dependencies.web-sys]
version = "0.3.67"
features = [
  'Document',
  'Element',
  'HtmlSelectElement',
  'Window',
]

in www/html/index.html we have

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>weather-report: meteo </title>
    <style>
        body {
            display: grid;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
  </head>
  <body>
    
    <script type="module" src="../js/index.js"></script>
  </body>
</html>

and in www/js/index.js

import init from "../pkg/meteo.js"

async function run() {
    const wasm = await init().catch(console.error);
}

run();

Rust/wasm side

#![allow(unused)]
fn main() {
// src/lib.rs
use serde::{Deserialize, Serialize};
use wasm_bindgen::prelude::*;
use web_sys::{Document, Element,};
use gloo::events::EventListener;
use reqwest::Error; 
use wasm_bindgen_futures::spawn_local;


#[derive(Serialize, Deserialize)]
struct Current {
    interval: i32,       //900
    temperature_2m: f32, //20.0
    time: String,        //"2024-01-02T18:15"
    wind_speed_10m: f32, //21.3
}

#[derive(Serialize, Deserialize)]
struct CurrentUnits {
    interval: String,       //"seconds"
    temperature_2m: String, //"°C"
    time: String,           //"iso8601"
    wind_speed_10m: String, //"km/h"
}

#[derive(Serialize, Deserialize)]
struct OpenMeteo {
    current: Current,
    current_units: CurrentUnits,
    elevation: f32,                //1252.0
    generationtime_ms: f32,        //0.032067298889160156
    latitude: f32,                 //-18.875
    longitude: f32,                //47.5
    timezone: String,              //"GMT"
    timezone_abbreviation: String, //"GMT"
    utc_offset_seconds: u8,        //0
}

struct CountryData {
    name: String,
    capital: String,
    lat: f32,
    lon: f32
}

fn sample() -> Vec<CountryData> {
       vec![
        CountryData { 
            name: "Madagascar".to_string(),
            capital: "Antananarivo".to_string(),
            lat: -18.91368, 
            lon: 47.53613
        },
        CountryData { 
            name: "Nepal".to_string(),
            capital: "Kathmandu".to_string(),
            lat: 27.70169, 
            lon: 85.3206
        },
        CountryData { 
            name: "Oman".to_string(),
            capital: "Muscat".to_string(),
            lat: 23.58413,
            lon: 58.40778
        },
        CountryData { 
            name: "Peru".to_string(),
            capital: "Lima".to_string(),
            lat: -12.04318,
            lon: -77.02824
        },
        CountryData { 
            name: "Quatar".to_string(),
            capital: "Doha".to_string(),
            lat: 25.28545,
            lon: 51.53096
        },
        CountryData { 
            name: "Rwanda".to_string(),
            capital: "Kigali".to_string(),
            lat: -1.94995, 
            lon: 30.05885
        },
        CountryData { 
            name: "Singapore".to_string(),
            capital: "Singapore".to_string(),
            lat: 1.28967, 
            lon: 103.85007
        },
     ]

}

// Called by our JS entry point to run the example
#[wasm_bindgen(start)]
async fn run() -> Result<(), JsValue> {
    let country_list = sample();

    // Use `web_sys`'s global `window` function to get a handle on the global
    // window object.
    let window = web_sys::window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");

    // mk City list
    let select_city_list = mkcity_list(&document);
    body.append_child(&select_city_list).unwrap();

    //
    let val = document.create_element("div")?;
    val.set_id("country_temp");
    body.append_child(&val).unwrap();

    //
    let select_country = document.get_element_by_id("country_list")  // -> Option<Element> 
        .unwrap()                                                    // We need to cast Element
        .dyn_into::<web_sys::HtmlSelectElement>()                    // into HtmlSelectElement
        .unwrap();    
    let select_country_hello = select_country.clone();
    let mut index: usize =0;
    
    let on_click = EventListener::new(&select_country, "click", move |_event| {
        let val = val.clone();

        // detect selection        
        index = select_country_hello.selected_index() as usize;
        web_sys::console::log_2(&"Country Index:%s".into(), &index.into());
        // get selected country lat lon data
        let target_info = &country_list[index];
        let target_capital = target_info.capital.clone();        

        // get city data
        let city_data = get_temp(target_info.lat, target_info.lon);//-18.879190, 47.507904).await?;

        spawn_local(async move {
            let target = city_data.await.unwrap();
            //display result
            val.set_inner_html(&format!("{} \ntemp:{}{}", 
                            target_capital.as_str(),
                            target.current.temperature_2m,          
                            target.current_units.temperature_2m));
        });//^-- spawn

    }); //^-- on_click

    
    on_click.forget();

    Ok(())
}


fn mkcity_list(document: &Document) -> Element {
    let select_box = document.create_element("select").unwrap();
    select_box.set_id("country_list");
    let _ = document.body().unwrap().append_child(&select_box);
    //
    for country in [
        "Madagascar",
        "Nepal",
        "Oman",
        "Peru",
        "Quatar",
        "Rwanda",
        "Singapore",
    ] {
        let option = document.create_element("option").unwrap();
        option.set_text_content(Some(country));
        let _ = select_box.append_child(&option);
    }

    select_box
}



async fn get_temp(lat: f32, lon: f32) -> Result<OpenMeteo, Error> { // 47.507905
    let url = format!("https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lon}&current=temperature_2m,wind_speed_10m"); //latitude=-18.879190&longitude=47.507904

    let selection =  reqwest::get(url).await?.json::<OpenMeteo>().await?;

    Ok(selection)
}
}

build and serve

wasm-pack build --target web --no-typescript --out-dir www/pkg

http www

open index.html

firefox http://localhost:8000/html/

weather api

What's next?

<-- The fetch API
web-sys: canvas hello world -->