Let's Get Weather Part 1

A simple training weather hybrid app that the user can look up the weather based on a postcode that they enter.


Status: In progress

Type: App

Client: Planet Wide City

Purpose: A simple training weather hybrid app that the user can look up the weather based on a postcode that they enter. To be an addition to Planet Wide City’s app portfolio.

Technologies/Libraries/Frameworks used: Cordova, JQuery, JavaScript, HTML, CSS and Materalise

Notes: My first experience building an app.

Stage 1

Features

  • The user can add a new postcode

This was just a basic build using JavaScript, HTML and CSS. Functionality was more important than aesthetics at this stage.

Lgw1

  • Text field for entering the postcode that you want to get the weather of
  • Text field for entering the name that you want to reference the postcode
  • Weather result output
  • Button that saves the information provided in the text fields
  • Button that gets the weather based on the information provided in the text fields

Stage 2

Features

  • The user can add a new postcode or clear all postcodes

Michael drew a visual spec of what he wanted the app to roughly look like.

Drawing

  • Slide out menu (mobile feature)
  • Input card for entering a postcode
  • Tabs which hold the weather for each saved location
  • The tabs component was dropped because we could have the locations saved in the menu which is easily accessible.

In the meantime, Vincent had come across a responsive front-end framework called Materalize which we all really like, it is very easy to use and as you can see there is a massive improvement to the aesthetics.

Lgw ss1

Lgw ss2

Lgw ss3

Stage 3

Features

  • The background image changes to reflect the weather result
  • The user can add a new postcode or clear all postcodes
  • A function was added so the user could log in with a name which appeared on the menu (this was later removed from the app because it was unnecessary since data is stored locally)

Lgw ss4

Lgw ss5

Stage 4

Features

  • The background image changes to reflect the weather result
  • The user can add a new postcode or clear all postcodes
  • There is an option in the menu which can retrieve the users current location using GPS
  • Asynchronous date and time component

Another drawn spec from Michael but this time how he wants the weather result to look like.

Lgw ss6

The completed screens:

Lgw ss7

Lgw ss8

Lgw ss9

Categories
General