Sample app: Room Booking

by Marcelo Sarquis
November 5, 2018

Hi there. On this post, I have created a sample iOS app of a room booking system that uses data provided by the API hosted under an URL. Here are the detailed task instructions:

Task

Usecase

An important feature of access management systems is room booking. It allows employees to see which rooms are available and to book them whenever they need them. A good room booking system has to be very easy to use from any device so that employees can use it frequently without losing time. If implemented right, it enables the company to release a large number of rooms for use by all employees on an as-needed basis. This means that real estate can be used much more efficiently and that employees always work in the environment in which they are the most productive at their current task.

Task

Your task is to create a simple prototype app of such a room booking system that uses data provided by the API hosted under the URL you are viewing this document from (https://challenges.1aim.com/roombooking_app/). You can use whatever languages and frameworks you like as long as the final result is a truly native, “non-web” app and you are not using the second backend of your own to process the data provided by the API.

Design

There are (almost) no design requirements and you can rearrange the elements in any way you like. It’s your task to create a design and corresponding interface elements that you think are the most intuitive and easy to use for the users of the system. You can also decide if you opt for a tablet or phone optimized design We encourage you to use animations when suitable and to create highly interactive and responsive interface elements accordingly (Think about how unintuitive it is to enter the time via a long dropdown compared to the way Apple did it on iOS). In order to match our corporate design, please use the following colors and variations of them (lighter, darker, etc) whenever you can.

00A0DB #362A83 #A01F80 #E40274 #E31E2F #EC7B23 #FFE900 #9ABD36 #009547

Functional Requirements

The following mockups are only illustrative and do not represent an actual design you have to follow.

Search

Upon opening the app all rooms that are available for the user today should be loaded and displayed to him. As soon as he selects or enters a new date, the list is refreshed.

The user should be able to filter the results by different parameters. Implement at least two filters: a room name search and a way to find rooms that are available during the next hour. You can also add more filters if you want (equipment, capacity, size, etc). The list should always update itself instantly when working with filters.

Room Information

The most important data provided by the API is the current booking schedule. It contains a list of times during which the room has been booked. All rooms are only available between 7 AM and 7 PM and can be booked in 15min steps. We want you to create a new visual element that enables users to see immediately at which times of the day a room is available. We have found that a colored “time bar” works quite well, but you can also try to find a better way

Additional information is provided for every room: room name, location, size&capacity, available equipment, and up to 3 images. It’s probably best to not display all information at once and to provide the user with a detailed view when he selects a room.

Room booking

When users select to book a room, a booking view for the room should be revealed. The user has to select the time, enter an event description and can add an unlimited number of participants.
Selecting time ranges is often clumsy and not intuitive. You can try to find a better way to select and adjust the time range, for example with simple drag operations on the booking schedule element you created before.

Users should not be able to choose a time that overlaps with an existing booking. For each attendee, name, email and phone number have to be entered. It should be possible to remove attendees that have already been added.

All Input fields should be validated and the user should be only able to submit the form when everything is correct. After the booking has been successfully created, the user should get an appropriate visual response. The API for the challenge is static and therefore the booking is not saved by the backend. If you want, you can make them permanent by storing them locally and showing them together with the existing schedules.

Documentation

Please produce a short(!!!) documentation listing the tools you used and explaining how you approached the task. Please also provide a copy of the complete project.

API

The API can be accessed via HTTPS/SPDY POST requests containing JSON objects. Each function requires certain parameters. If invalid data is provided or an error occurs, an error object is returned.

{ error: { text: "error description", code: /4-digit error code/ } //additional fields may be provided depending on the error }

Notes

– All parameters are extensively tested for validity. You have to check the data yourself before you send anything.
– Timezone “Europe/Berlin” is used for all timestamps, convert them accordingly if necessary.
– Error handling is important. If an error occurs, the system should react to it.

/getrooms

Returns a list of rooms for a given day, including the booking status.

Parameters

{ date: /UNIX Timestamp/ | "now" | "today" }

Results

[
//room object
{
name: "room name",
location: "location name",
equipment: [
//list of avaiable equipment
"equipment name",

],
size: "NNm2", //size of the room in m2
capacity: /suggested number of people a room can fit/,
avail: [
//list of times at which a room is free and can be booked,
//between 7 am and 7 pm in 15min steps
"HH:mm - HH:mm",
"HH:mm - HH:mm",

],
images: [
//can contain 0-3 images
"url of image",

]
},

]

/sendpass

Books a room and sends LightPasses to all attendees. Room bookings are not committed to the room data. However, the system will send emails and SMS to all attendees and the data has to be valid. Phone numbers can be entered in most common formats and are parsed and converted to E164 internally. If the number is missing a country code, it will be treated as a German number. If an error occurs while sending any of the passes, the process is halted and an error is returned (error code>4000) containing the index of the pass that could not be sent. It’s up to you to decide if you want to send the remaining passes and/or and how to handle the one that couldn’t be sent.

Parameters

{
//information about the booking
booking: {
date: /UNIX Timestamp/ | "today",
//only the hour and minute of the time_ timestamps are used,
//the day is always determined by date
time_start: /UNIX Timestamp/,
time_end: /UNIX Timestamp/,
title: "event title",
description: "event description"
room: "name of the room that is beeing booked"
},
//information about all atendees
//all 3 fields are required
passes: [
{
name: "Any Name",
email: "email@example.com",
number: "valid phone number"
},

]
}

Results

{ success: true }

Documentation

The application is developed using MVC (model-view-controller) architecture. The app has basically three Controllers:

  1. HomeViewController
  2. RoomDetailViewController
  3. RoomBookingViewController

The ResultsViewController works together with the HomeViewController when the user uses the search field to filter certain rooms.

Upon opening the app, HomeViewController loads all rooms available today and displays it to the user. As soon as the user selects a new day by clicking on the forward or backward button, the list is refreshed with the new date. I have created a SearchView that works with Delegate with the HomeViewController to change the days for the future and past. Using the UISearchController, the user can filter the room by name search or by typing “next” to find the room available in the next hour. The list is updated instantly every time when working with filters.

When the user selects a room, a detailed room information is presented, represented by RoomDetailViewController. The view controller is presented with the general information of the room (name, location, size & capacity); a timetable that is that allow users to see immediately at which time of the day the room is available, and by dragging the bars of the starting/ ending the meeting, the user can select the time range he wants for that meeting; an equipment list available on that room; and, sample pictures of that room.

When the user drags a starting and ending time for the meeting (not overlapping an existing booking), he/she can select to book that room by clicking on “Book”, which brings he/she to the RoomBookingViewController. Inside the RoomBookingViewController, the user has to input the title, description at least one attendee for that meeting. All the input fields have to be valid in order the user to submit the request. After the booking is made, the user will be presented with an alert saying either it was successful or not.

I have developed everything by code and working with Storyboards or Xib files would work the same making life a bit easier.

Tools in place

  • MVC (Model-View-Controller) architecture
  • Delegate (one-to-one relationship)
  • Notifications (one-to-many relationship)
  • HTTPS POST requests to the server
  • API handler
  • Custom classes and objects
  • Gesture Recognizer
  • Layout constraint
  • Search controller
  • Completion blocks

Future TODO’s

– Add calendar when the user clicks on the date
– Make the room reservation permanent by storing them locally after the static API responds success
– Move left indicator, right indicator and reservationView into one object ~simpler understanding.
– Add UnitTests

Points to pay attention to

– Increment Bundle Version (Build Phases -> Run script)
– Localizable string to multiple languages
Application running without CGRect frames ~easier to mantain new iPhone / iPads sizes in the future
– Extension helpers

You can download the source code of that project here: https://github.com/marcelosarquis/ios-room-booking

If you would have any idea of an app and don’t know how to start, send us a msg or stop by for a cup of coffee so we can go through the steps of developing your app.

Thank you for the time and see you in the next post!

Cheers!

Recent posts