Elm, Geocoding & DarkSky: Pt. 1 – Setup Elm & Proxy Servers
Info
Summary | In Part 1 we will begin building a small weather forecast app using Elm, Google's Geocoding API and the DarkSky API. |
---|---|
Shared | 2017-07-22 |
This is part 1 of a multipart series where we will be building a small weather forecast app using Elm, Google’s Geocoding API and the DarkSky API. Instead of doing everything in one massive post, I’ve broken the steps down into parts of a series. Here is the series plan:
- Pt. 1 – Setup Elm & Proxy Servers
- Pt. 2 – Geocoding an Address
- Pt. 3 – Fetching the Current Weather
- Pt. 4 – Extracting Our Elm Code
Overview
This post will cover setting up Elm, a geocoding proxy, and a DarkSky proxy. We’ll need all of these things set up in order to get our weather app to work and not sacrifice our API keys.
By the end of this post, you will have a “Hello, world!” Elm app with a simple ./build
command, and you should be able to cURL
both your geocoding and DarkSky proxies to receive response data that we will use in the coming lessons.
Project Source Code
The project we’re making will be broken into parts here (branches will be named for each part): https://github.com/rpearce/elm-geocoding-darksky/. Be sure to check out the other branches to see the other parts as they become available.
The code for this part is located in the pt-1
branch: https://github.com/rpearce/elm-geocoding-darksky/tree/pt-1.
Pre-requisites
This tutorial assumes that you already have installed Node.js (I use NVM for managing Node versions and am using v8.3
).
Once you’ve got Node installed, we can begin.
Project Setup
From your favorite project folder, let’s create a new project folder named elm-geocoding-darksky
and change the current working directory to be the new folder:
λ mkdir elm-geocoding-darksky
λ cd elm-geocoding-darksky
Elm
Installing Elm
You can install elm via any of the methods on the elm install page or by one of these methods:
- Homebrew:
brew install elm
- Node.js:
npm i elm -g
for a global binary ornpm init -y && npm i elm
to create apackage.json
file and installelm
to it; you’ll have to run this latter method vianpx elm
, as it’ll be looking for the binary in your./node_modules/.bin/
directory)
elm-format
I’ve found that having a tool re-format my Elm code to an agreed-upon format makes me more efficient and makes it easier for others to read my code. Check out these projects for more on how to do this:
Adding Elm to a Webpage
Our goal here is to compile our elm project to an elm.js
file and include that on a webpage (which we’ll make in a minute).
First, let’s create a src/
directory to house our source code and a Main.elm
file within it:
λ mkdir src
λ touch src/Main.elm
Next, we want to install Elm’s HTML package so that so that we can access its HTML-related functions:
λ elm package install elm-lang/html
Within the Main.elm
file, add the following:
module Main exposing (..)
import Html exposing (text)
main =
text "Hello, world!"
Here, we import the Html
package that we installed, specifically expose the text
function from it and then use that function to tell Elm that we want some HTML-friendly text.
Note: to learn more about the Elm language and syntax, check out the Elm Tutorial, the EggHead.io Elm course, subscribe to DailyDrip’s Elm Topic, James Moore’s Elm Courses or check out Elm on exercism.io.
We can then compile this and output it to elm.js
:
λ elm make src/Main.elm --output=elm.js
You should now have a (quite large) file, elm.js
, in your project’s root. We’re almost done!
Finally, create a new file, index.html
, and add the following to it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weather</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript" src="elm.js"></script>
<script>
(function(global) {
var node = document.createElement('div')
document.body.appendChild(node)
var app = Elm.Main.embed(node)
global.app = app
})(window)
</script>
</body>
</html>
If you run λ open index.html
, you should be able to view the file in the browser and see Hello, world!
. Congrats! You’re primed and ready to start building.
Creating a Build File
If you’re lazy like me, you can create an executable file, build
, that will perform our elm make ...
command for us:
λ touch build
λ chmod +x build
λ cat <<EOF > ./build
#!/bin/bash
elm-make src/Main.elm --output ./elm.js
EOF
This executable can now handle whatever build options and processes we’ll add for the future (such as JavaScript minification & uglifying):
λ ./build
Success! Compiled 1 module.
Successfully generated ./elm.js
Proxies
In order to not expose our API keys for geocoding and weather forecasts, we’ll be using a separate proxy server for each service. I wrote recently wrote a post entitled Node.js Geocoding Proxy with Paperplane where you can see a full explanation of what we’re doing and how to do it. If you don’t care about the how and why about setting up these little servers, then just continue on!
Setting Up Your Geocoding Proxy
First, you’ll need to get a Google Maps API Key from here: https://developers.google.com/maps/documentation/geocoding/start#get-a-key.
Once you’ve done that, go ahead and clone or download the geocoding-proxy project on GitHub and follow the directions to get set up. Given you’ve got Node installed, you’ve copied over the .env
file and set your API key in there, then running λ node index.js
should start the server. From another command-line tab, run this and see if you get a similar result:
λ curl localhost:5050/geocode/Auckland
{"results":[...]}
If so, congrats! If you get stuck, create an issue on the geocoding-proxy issues page, and I’ll see if I can help.
Setting Up Your DarkSky Proxy
(This is almost exactly like the geocoding proxy setup.)
First, you’ll need to get a DarkSky API Key from here: https://darksky.net/dev/.
Once you’ve done that, go ahead and clone or download the DarkSky-proxy project on GitHub and follow the directions to get set up. Given you’ve got Node installed, you’ve copied over the .env
file and set your API key in there, then running λ node index.js
should start the server. From another command-line tab, run this and see if you get a similar result:
λ curl http://localhost:5051/forecast/37.8267,-122.4233
{"latitude":37.8267,"longitude":-122.4233,...}
If so, congrats! If you get stuck, create an issue on the DarkSky-proxy issues page, and I’ll see if I can help.
Wrapping Up
Thank you for reading this far! Now that we’ve got our Elm app build process set up and your proxy servers ready to work, we can start constructing our application piece-by-piece in the next article in the series.
If you’d like to be notified of when articles are published, subscribe!
Until next time,
Robert