Skip to content
πŸŽ“ Optimaliseer toegankelijkheid en performance van een bestaand project
Branch: master
Clone or download
Pull request Compare This branch is 52 commits ahead of cmda-minor-web:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
tasks
views
.gitignore
README.md
package-lock.json
package.json
server.js

README.md

Project 2 @cmda-minor-web Β· 2018-2019 βš™οΈ

This is my repo the Mirabeau Smart Office project.

Project 2 screenshot

Homepage

Table of Contents πŸ—ƒ

To Do πŸ“Œ

This is a list of things I want to do in this project:

  • Create a server side app using Node.js
  • Use optimization technics like minify, compression and caching.
  • Make the app work without Javascript.
  • Display a offline page using a service worker.

Description πŸ“

The description of the project is as follows:

We would like to see what you, as a T-shaped front-end developer, can build from scratch to make the life of Mirabeau people better! You are encouraged to be creative in what this will be. We provide you with the measurement data. Build a creative web-application that gives insights into these measurements.

The data used is from MiraRooms. MiraRooms show which meeting rooms are booked, booked but available, not booked and available, and not booked but unavailable. This makes it easier for Mirabeau people to quickly see where they can have a meeting or a call.

My app shows the rooms based on their occupation status, the amount of noise and the amount of light. Users have the ability to filter the rooms and show the room with the least noise or light based on the users needs.

Installing πŸ”

To install this application enter the following into your terminal:

git clone https://github.com/BasPieren/project-2-1819.git

cd project-2-1819

npm install

npm run server

Packages and Technologies

This project makes use of the following packages and technologies:

API πŸ’

I made use of the following API for this project:

The API uses the following online endpoint, thanks to Dennis Wegereef:

http://mirabeau.denniswegereef.nl/api/v1/rooms

The JSON structure looks like this:

{
   "data":[
      {
         "timestamp":1553765484.630674,
         "hwaddr":"00:0b:57:be:54:0d",
         "room_name":"Lippershey",
         "measurements":{
            "bapLevel":1149337663,
            "temperature":22834,
            "batt":100,
            "mic_level":2564,
            "ambient_light":13641,
            "humidity":19329,
            "co2":438,
            "occupancy":true,
            "uv_index":0,
            "voc":1280
         }
      }
   ],
   "error":null
}

How It Works πŸ› οΈ

Here I explain the core features of this project.

Clean Data

First whe clean the data using .filter, .map, and .sort. First whe remove Desk Area 1 and 2 from the data because this aren't real meeting rooms using .filter. Then we .map over the data to return only the things we need into a new object. Here we also use Math.round to convert the mic_level into readable decibel units. Finally we .sort the data based on the occupancy status.

function cleanData(e) {
  let allData = e.data,
      filterData = allData.filter(e => {
        if (e.room_name !== 'Desk area 1' && e.room_name !== 'Desk area 2') {
          return true
        }
      }),
      mapData = filterData.map(e => {
        return {
          timestamp: e.timestamp,
          room_name: e.room_name,
          measurements: {
              mic_level: Math.round(e.measurements.mic_level / 100),
              ambient_light: e.measurements.ambient_light,
              occupancy: e.measurements.occupancy
          }
        }
      }),
      sortOccupancy = mapData.sort((a, b) => {
        return (a.measurements.occupancy === b.measurements.occupancy) ? 0 : a.measurements.occupancy ? 1 : -1
      })

  return sortOccupancy
}

Filter Data

Then when the user wants to filter the rooms, based on either the lowest noise or light value, we use the filterHomePage() function. The function gets called when there's an .post request. Here we also use .filter and .sort and use if else statements to see when to return true based on the filterValue.

function filterHomePage(req, res) {
  request('http://mirabeau.denniswegereef.nl/api/v1/rooms', (error, response, body) => {
    console.log('error:', error)
    console.log('statusCode:', response && response.statusCode)
    // console.log('body:', body)

    let filterValue = req.body.filter,
        data = JSON.parse(body),
        cleanedData = cleanData(data),
        filterData = cleanedData.filter(e => {
          if (filterValue === 'geluid' && e.measurements.occupancy === false) {
            return true
          } else if (filterValue === 'licht' && e.measurements.occupancy === false) {
            return true
          }
        }),
        sortData = filterData.sort((a, b) => {
          if (filterValue === 'geluid') {
            return a.measurements.mic_level - b.measurements.mic_level
          } else if (filterValue === 'licht'){
            return a.measurements.ambient_light - b.measurements.ambient_light
          }
        })

    // console.log(filterData)

    res.render('pages/filter.ejs', {data: sortData, filterValue: filterValue})
  })
}

Sources πŸ“š

This is a list of all the sources I used during this project:

Honourable Mentions

Licence πŸ”“

MIT Β© Bas Pieren

You can’t perform that action at this time.