add geolocation weather example

+ requires api token for weather site
+ can provide an ip addr to test with

SPIN_VARIABLE_TEST_IP_ADDR=<some ip> SPIN_VARIABLE_WAQI_API_TOKEN=<some token> spin up

Signed-off-by: Michelle Dhanani <[email protected]>

Author: michelleN

samples/geolocation-weather-application/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+target
+.spin/
+build/

samples/geolocation-weather-application/.npmrc

@@ -0,0 +1 @@
+KNITWIT_SOURCE=./config/knitwit.json

samples/geolocation-weather-application/config/knitwit.json

@@ -0,0 +1,14 @@
+{
+  "version": 1,
+  "project": {
+    "worlds": [
+      "spin-http"
+    ]
+  },
+  "packages": {
+    "@fermyon/spin-sdk": {
+      "witPath": "../../bin/wit",
+      "world": "spin-imports"
+    }
+  }
+}

samples/geolocation-weather-application/package-lock.json

@@ -0,0 +1,25 @@
+{
+    "name": "geolocation-weather-application",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "build": "knitwit --out-dir build/wit/knitwit --out-world combined && npx webpack --mode=production && npx mkdirp dist && npx j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/geolocation-weather-application.wasm",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "mkdirp": "^3.0.1",
+        "ts-loader": "^9.4.1",
+        "typescript": "^4.8.4",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "@fermyon/knitwit": "0.3.0"
+    },
+    "dependencies": {
+        "@fermyon/spin-sdk": "^3.0.0",
+        "itty-router": "^5.0.18"
+    }
+}

samples/geolocation-weather-application/package.json

@@ -0,0 +1,26 @@
+spin_manifest_version = 2
+
+[application]
+authors = ["John Doe <[email protected]>"]
+description = ""
+name = "geolocation-weather-application"
+version = "0.1.0"
+
+[variables]
+waqi_api_token = { required = true }
+test_ip_addr = { default = "63.65.232.194" }
+
+[[trigger.http]]
+route = "/..."
+component = "geolocation-weather-application"
+
+[component.geolocation-weather-application]
+allowed_outbound_hosts = ["https://api.waqi.info", "https://ip-api.io"]
+source = "dist/geolocation-weather-application.wasm"
+exclude_files = ["**/node_modules"]
+[component.geolocation-weather-application.build]
+command = ["npm install", "npm run build"]
+watch = ["src/**/*.ts"]
+[component.geolocation-weather-application.variables]
+waqi_api_token = "{{ waqi_api_token }}"
+test_ip_addr = "{{ test_ip_addr }}"

samples/geolocation-weather-application/spin.toml

@@ -0,0 +1,31 @@
+const getClientAddressFromRequest = (req: Request): string | null => {
+    const clientAddress = req.headers.get("spin-client-addr");
+    if (clientAddress) {
+      return clientAddress;
+    }
+    return req.headers.get("true-client-ip");
+};
+
+const cleanupIpAddress = (input: string): string => {
+    const ipv4Regex = /^(\\d{1,3}\\.){3}\d{1,3}:/;
+    const ipv4RegexWithPort = /^(\d{1,3}\.){3}\d{1,3}:\d+$/;
+    const ipv6Regex = /^([a-fA-F0-9:]+)$/; // not perfect TODO
+    const ipv6WithPortRegex = /^\[([a-fA-F0-9:]+)\]:\d+$/;
+  
+    if (ipv4RegexWithPort.test(input)) {
+      return input.split(':')[0];
+    } else if (ipv6WithPortRegex.test(input)) {
+      const match = RegExp(ipv6WithPortRegex).exec(input);
+      return match ? match[1] : input;
+    } else if (ipv4Regex.test(input) || ipv6Regex.test(input)) {
+        return input;
+    } else {
+      console.log("Invalid IP address", input);
+      return input;
+    }
+};
+
+export {
+    getClientAddressFromRequest,
+    cleanupIpAddress
+};

samples/geolocation-weather-application/src/helpers.ts

@@ -0,0 +1,98 @@
+// For AutoRouter documentation refer to https://itty.dev/itty-router/routers/autorouter
+import { AutoRouter } from 'itty-router';
+import { getClientAddressFromRequest, cleanupIpAddress } from "./helpers";
+import { Variables } from "@fermyon/spin-sdk";
+
+
+let router = AutoRouter();
+
+// Route ordering matters, the first route that matches will be used
+// Any route that does not return will be treated as a middleware
+// Any unmatched route will return a 404
+router
+    .get("/", getWeather);
+
+//@ts-ignore
+addEventListener('fetch', async (event: FetchEvent) => {
+    event.respondWith(router.fetch(event.request));
+});
+
+async function getWeather(request: Request): Promise<Response> {
+  console.log("Request received", request.headers.get("spin-client-addr"));
+
+  const clientAddress = getClientAddressFromRequest(request);
+  if (!clientAddress) {
+      return new Response("Could not determine client ip address", { status: 500 });
+  }
+
+  let ip = cleanupIpAddress(clientAddress);
+  console.log(`Client IP: ${ip}`);
+  ip = ip === "127.0.0.1" ? Variables.get("test_ip_addr") ?? ip : ip;
+
+  let longitude, latitude;
+  try {
+      [latitude, longitude] = await getGeolocation(ip);
+  } catch (error) {
+    if (ip == "127.0.0.1") {
+      return new Response("Unable to get geolocation data for localhost, try using test_ip_addr variable", { status: 500 });
+    }
+    return new Response("Failed to get geolocation data", { status: 500 });
+  }
+
+  
+  let endpoint = "https://api.waqi.info/feed/geo:";
+  let token = Variables.get("waqi_api_token"); //Use a token from https://aqicn.org/api/
+  let html_style = `body{padding:6em; font-family: sans-serif;} h1{color:#f6821f}`;
+
+  let html_content = "<h1>Weather 🌦</h1>";
+
+  endpoint += `${latitude};${longitude}/?token=${token}`;
+  const init = {
+    headers: {
+      "content-type": "application/json;charset=UTF-8",
+    },
+  };
+
+  const response = await fetch(endpoint, init);
+  console.log("response", response.status);
+  if (response.status !== 200) {
+    return new Response("Failed to get weather info", { status: 500 });
+  }
+  const content = await response.json();
+
+  html_content += `<p>This is a demo using geolocation data. </p>`;
+  html_content += `You are located at: ${latitude},${longitude}.</p>`;
+  html_content += `<p>Based off sensor data from <a href="${content.data.city.url}">${content.data.city.name}</a>:</p>`;
+  html_content += `<p>The temperature is: ${content.data.iaqi.t?.v}°C.</p>`;
+  html_content += `<p>The AQI level is: ${content.data.aqi}.</p>`;
+  html_content += `<p>The N02 level is: ${content.data.iaqi.no2?.v}.</p>`;
+  html_content += `<p>The O3 level is: ${content.data.iaqi.o3?.v}.</p>`;
+
+  let html = `
+    <!DOCTYPE html>
+    <head>
+      <title>Geolocation: Weather</title>
+    </head>
+    <body>
+      <style>${html_style}</style>
+      <div id="container">
+      ${html_content}
+      </div>
+    </body>`;
+
+  return new Response(html, {
+    headers: {
+      "content-type": "text/html;charset=UTF-8",
+    },
+  });
+}
+
+async function getGeolocation(ip: string): Promise<[number, number]> {
+  console.log("Fetching geolocation data for", ip);
+  const response = await fetch(`https://ip-api.io/json/${ip}`);
+  if (!response.ok) {
+      throw new Error(`Failed to fetch geolocation data: ${response.status}`);
+  }
+  const data = await response.json();
+  return [data.latitude, data.longitude];
+}

samples/geolocation-weather-application/src/index.ts

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "noImplicitAny": true,
+        "module": "es6",
+        "target": "es2020",
+        "jsx": "react",
+        "skipLibCheck": true,
+        "lib": [
+            "ES2020",
+            "WebWorker"
+        ],
+        "allowJs": true,
+        "strict": true,
+        "noImplicitReturns": true,
+        "moduleResolution": "node"
+    }
+}

samples/geolocation-weather-application/tsconfig.json

@@ -0,0 +1,38 @@
+const path = require('path');
+const SpinSdkPlugin = require("@fermyon/spin-sdk/plugins/webpack")
+
+module.exports = {
+    entry: './src/index.ts',
+    experiments: {
+        outputModule: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        path: path.resolve(__dirname, './build'),
+        filename: 'bundle.js',
+        module: true,
+        library: {
+            type: "module",
+        }
+    },
+    plugins: [
+        new SpinSdkPlugin()
+    ],
+    optimization: {
+        minimize: false
+    },
+    performance: {
+        hints: false,
+    }
+};