fac-u / take-me-away

Travel

Take Me Away (aka Keep Me at Home)

Resources

• Weather api: http://api.wunderground.com/api/
• News api: https://newsapi.org/v1/articles

Project goals

Core

• build a simple hapi app
• consider user stories in the design phase
• use test driven development (using the techniques and server.inject method)
• query at least two APIs on the backend
• use the retrieved data to populate a handlebars template
• use server-side rendering to display on the front-end
• weather icons from the 80s

Stretch

• high test-coverage on front-end and back-end
• host the project on heroku
• images of user location from image api
• use basic ES6 syntax in this project:
  • const for all variables whose values will never be re-assigned.
  • let for all variables whose values will be re-assigned.
  • (arg1, arg2) => {} arrow functions whenever you use callbacks.
  • template ${literals} whenever you use strings that require concatenation: i.e. 'string 1 ' + 'string 2'.

How to run

App

1. Clone the repo to a local directory
2. Run npm install from the root folder to install dependencies
3. Run nodemon from the terminal to start the server through nodemon npm run devStart, or npm start without nodemon
4. Add a new file called 'api-keys.env' to the root folder and request keys from FAC-U team
5. Access the front end by visiting http://localhost:4000

Tests

1. Run npm test to execute tape tests

• test/main.test.js: these are the server, route and handler tests
• run coverage to run Istanbul & Codecov
• Back-end tests are written using Tape and run through Tap-spec
• At this stage there are no QUnit tests

Key files

• src/server.js: core server functionality
• src/news.js: sends requests to and processes responses from newsapi.org
• src/weather.js: sends requests to and processes responses from wunderground.com
• views/layout/layout.html: top-level structure of homepage with template for content in body
• views/index.html: second-tier page structure, pulling in core page elements
• views/partials/weather.html: first page element
• views/partials/news.html: second page element
• public/main.css: main stylesheet

Dependencies

• Env2
• Handlebars
• Hapi
• Inert
• Request
• Vision
• xmlhttprequest

Dev dependencies

• Tape
• Tap-spec
• Eslint semi-standard
• Nodemon
• Codecov
• Istanbul

Project history

Initial idea - abandoned

Our initial idea was to build an app for the following user story: 'I am a busy professional. I want to get out of town this weekend because I want to explore.'

Our plan was to use the Skyscanner api to get cheap flights from the user's destination and present three of these with weather in that destination and some points of interest from an api like Yelp or Factual.

Due to major issues with our chosen apis, we abandoned this project at midday on Tuesday.

Key learning

It's clear to us that we should have set milestones for our project. For next time, we need to establish how long we have for planning and testing dependencies (such as apis). We will set a timeframe ahead of the next stage to check in on whether things are tracking to our plan, or whether we need to redesign or rethink in order to meet the agreed deadlines.

take-me-away's Issues

Modularise server.js further - create handler.js

handler.js to contain 2 functions:

• processWeatherObject
• processArticles

Error handling

You're passing your errors back to your callbacks nicely but you don't seem to be doing anything with them? Functions like processWeather take an error parameter but then just ignore it.

Also when you're passing your error back here you might want to pass something useful back to the callback in the case of a bad status code.

if (err || response.statusCode !== 200) {
  cb(err);
 } else {
  ...

If there is no error but the statusCode is something other than 200, the callback will just be passed undefined as an error, which is falsy - so the callback would think there was no error.

Weather api request uses the geolocation of the server

Background image does not update with location

Call another API for a background picture

Write README - (contains plan which is still debatable)

Readme laying out:

• USER STORY
• Key Features of app
• Which API's?
• Tools & UnderTheHood (Hapi, handlebars!)
• Working technique (eg. TDD)
• Stretch goals

anything else?

No installation instructions ;)

getArticles and getWeather are inconsistent

getArticles required from news.js while getWeather is implemented in server.js.

Slightly confusing order for your functions

Here you are calling functions that you only declare later in the file.

Hoisting means that this works fine, but I find it bit counterintuitive to read - why not just have the functions declared in the order that they're used?

Add CSS to news articles

Write Weather API request function

What I love about your project!

• Well structured.
• Clear javascript implementation.
• Using a template of templates, and not adding too much html 👍 .

Change syntax to ES6 throughout

Opening up links in a new tab in html

by setting target="_blank" you can keep the browser tab of your website open and open up a new tab for the external link

<a href="url" target="_blank">...</a>

Modularise - wunderground

Expression at 'Weather today in' does not render the city name

index.js file name

its not clear its the server.start file

Get weather icon working

Readme missing!

😮 Oh no!

Add 'more' news articles button & function

Set up dependencies

Development dependencies:

• Tape
• ESLint - semistandard
• Nodemon

Production dependencies:

• Hapi
• Vision
• Inert
• Handlebars

TAPE TESTING SUITE - foundations

populate the test files ready for testing and TDD

Create - Folder Structure

'var', 'let' and 'const' used inconsistently

Add resources to README.md

Fix typo "top" = "temp"

Tape testing

The path to api-keys should be corrected to const {wundergroundKey} = require('../../api-keys.js'); in the test/src folder in order for the tests to run.

Handle errors in server.js

Write Skyscanner API request function

Write first tests

• Server starts
• Server handles static file requests
• Server handles dynamically generated pages (ie. views)
• Server handles 404s
• getNextWeekend function should take a date and return the next weekend
• getFlights should take a range of dates (ie. weekend) and return an array of three partially-complete city objects including flight info
• getCityInfo should call getCity, getNextWeekend, getWeather and getPOIs in parallel
• getCity function should return a 'city' object with city name and flight details
• getWeather function should take a city name and dates and return weather information
• getPOIs should take a city name and return information of places to visit
• getImage should take a city name and return an image

Connect codecov

Coming up with issue atm:

Please provide the repository token to upload reports via `-t :repository-token`

Need to fix this before the badge can be added to the readme

Responsiveness

When you resize the window, the weather and news divs start to overlap (on Chrome). When viewed on mobile, text is too small to be readable (using Chrome mobile view).

weather.js

I can't work out what this file is doing - not exporting anything and not running any code itself except requiring other files...

LINKS TO APIS

which apis?

Initiate HAPI server

Build basic Hapi back-end. Eg server

Add Tape tests to check for rendered HTML, and for response from the API

Weather icons from 1980s ;)

Let/var/const

Not sure your use of these is totally consistent.

Here you use let for variables that don't seem to ever be re-assigned, and in the same file you also use var and const. As far as I can see everything in that file could be a const.

Not a big deal and probably won't break anything but why not be consistent :)

Write Factual API request function

Add picture of city as webpage backgroun

Heroku

Hi - I see that you are having problems with Heroku. I can try and help you out if you like as I had lots of problems with ours but got it working.

Name variables in processWeatherObject to improve readability