This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

×

This site uses cookies. Continue to use the site as normal if you are happy with this, or read more about cookies and how to manage them.

×

From idea to website in 24 hours

My wife was away on a hen-do last weekend. So naturally I immediately went to my local night time discoteche (my lounge) and drank champagne (wrote some code).

I had an idea, and I wondered how quickly I could turn this into a functioning website. It turns out, really quickly, and really easily... and it's great fun.

The idea was simple, which made it a perfect candidate to try this out:

A web page that tells you the time you will save by taking the M6 toll.

There are digital signs as you approach the M6 toll exit that tell you that the toll road is clear, but they omit the most valuable piece of information to help you decide if the cost of the toll is worth the benefit of time saved: How much time will it save me?

I set out some simple goals:

  • The page should be as simple as possible
  • The information should be easily readable at a glance
  • The response time should be as fast as possible
  • The payload should be as small as possible - it's likely to be used by passengers on the M6 with patchy phone signal
  • The web-page will call a JSON endpoint to retrieve the north/south time saved - keeping external calls, and processing work on the client to a minimum

Here's how it all worked out:

Thursday

20:00-22:00

  • Started API research. Google provide a directions API that includes traffic information.
    • It's a RESTful endpoint providing a JSON response - excellent.
  • Acquired API key from Google.
  • Established the API calls I will need to make and sanity checked the response.
    • North to South on the M6
    • North to South on the Toll
    • South to North on the M6
    • South to North on the Toll

Friday

20:30 - 01:30

  • Started work on web-page.
  • Generated Angular seed project.
  • Quickly back-tracked on this because one of the goals was to keep the payload small.
    • Introducing utility libraries and framework would only increase the payload and complexity, for very little benefit on such a simple web-app.
  • Established that no utility libraries would be used for the web page; no CSS and no JavaScript.
  • Established that all CSS and JS would be included in the web page, to ensure a maximum of only 2 requests would be required.
  • Spent the next few hours on the web-page working to this principle - index.html.
  • I used a hard-coded object to represent what the JSON response will be.

Saturday

10:00 - 13:30

  • Started work on the server component.
  • Used Mac OS Spring Boot CLI init command to create a Java/Maven seed project.
    • This created a fully functional Hello world project built by maven.
  • Added a controller that will supply the endpoint for the north/south toll saving durations.
  • Added a test class for the controller and retrieved a sample response for each of the calls to the Google API I'll need.
  • Spent an hour or so checking and perfecting the calls I'd actually need to make.
  • Mocked the responses from Google using the sample data in the test class.
  • Wrote enough code to ensure that the server will successfully make the calls to the Google API and process the response.

I then realised I should probably go to gym before it shuts, get food, cook food and eat food.

15:00 - 18:00

  • Finished the server side code - getting my controller test to pass!
  • Included the web-page in the server code - simply creating a 'static' folder in resources and copying in the index.html page.
  • Updated the web page to call the service.
  • Made some additional tweaks to the web page now that it's calling the actual server.

Realised I should cook and eat my food.

19:00-22:00

  • Played around and tested the web page, making a few more changes.
  • Moved the code that calls the Google API and calculates the durations from the controller to a service (by this point the controller was doing too much work).
  • 4 calls to Google are required; each time durations need to be calculated; doing this every time the page is loaded could easily blow the Google API quotas. So I added a cache to ensure calls to the Google API would only be made every 60 seconds.
    • This turned out to be much easier than I imagined.
    • I added @Cacheable annotation to the service method to get the durations.
    • Added Google guava to the project, which contains a cache implementation.
    • Added a configuration bean to set the cache time-to-live to 1 minute.
  • The server and web-page were then complete enough for me to stop messing around and actually deploy the code! ''Real artists ship'' after all.
  • Drank a beer
  • It turns out it's really easy to deploy spring-boot aps!
  • I had a Heroku account from years ago that I never did anything with. I downloaded the Heroku tool-belt for mac OS using homebrew (a set of command line tools for interacting with Heroku).
    • Following the Heroku instructions
    • Ran heroku login (fortunately I could remember my password!)
    • Initialised a git repository and made initial commits
    • Ran heroku create
    • Deployed the code by running git push heroku master
    • Checked the Heroku URL for the app... it didn't work! Oh no :(
    • Realised I had to created a 'Procfile' (a single line file detail the command to run the application)
    • Created the procfile
    • Re-deployed
    • IT RAN!!!! 3 commands and I've deployed my application.
    • Drank another beer.
  • Checked the availability and cost of a domain name... £8 for two years!
  • Registered a domain name and pointed it to the Heroku app.

At around 22:00 on Saturday I was finished - http://www.sittt.co.uk/ was live, and my wife was able to use it for her journey back on Sunday. With a payload of 3kb, the response time should be fast enough to load the page as a passenger on the M6 with patchy phone signal.

And finally

It turns out you can go from an idea to a functioning web page really quickly (provided you set some sensible constraints to your initial idea up-front). Platforms like Heroku make it really easy to deploy applications. Domain names are cheap, easily available and very quick to set-up.

Not using common Javascript libraries, for albeit a small amount of JavaScript, was freeing. I got to use some of the fundamental features of JavaScript that would otherwise just occur under the hood of libraries like JQuery.

It's never been easier to go from idea to webpage, and it's really fun to do.