Mobile App Tutorial: The Meeting Room Booking App, Part 1

DZone 's Guide to

Mobile App Tutorial: The Meeting Room Booking App, Part 1

· Java Zone ·
Free Resource

The Meeting Room Booking AppMeeting room management is a common facilities management need for different kinds of businesses. The mobile app tutorial that we are starting with this article is a Meeting Room Booking app that allows its users to reserve rooms for meetings and other types of events. The app will also have an administration feature through which designated users can enter, edit or delete meeting rooms.

My initial plan for this tutorial is to develop two versions of the app. One using a Sencha Touch frontend, and the other using a Kendo UI Mobile frontend.

I am open to expanding this tutorial to frameworks such as jQuery Mobile or Ionic if you request it. Just let me know if you are interested, via email or by leaving a comment on this article.

Functional Requirements of the Meeting Room Booking App

We will model this app after a real-world Meeting Room Manager with which I am very familiar. Here’s the list of high-level functional requirements that we will focus on. The app and its backend must:

  1. Authenticate and authorize a user.
  2. Store a number of data records describing a collection of meeting rooms. Each record will hold the following attributes:
    • Room number
    • Room name
    • Room location (Building A, Building B, and so on)
    • Room capacity (number of seats)
    • Room picture
    • Room has network connection (yes/no)
    • Room has conference phone (yes/no)
    • Room has video screen or projector (yes/no)
    • Room has wireless internet access (yes/no)
    • Room is active in the system (yes/no)
  3. Allow users to search for available meeting rooms by entering the desired meeting date and time, duration, location and other room attributes, and produce a list of available rooms that satisfy the criteria.
  4. Allow users to reserve a room that is open for reservation during a given time span.
  5. Allow users to review the meeting room reservations that they have made for a given date.
  6. Allow users to browse the meeting rooms that are active (reserved or not) for a given location and date.
  7. Allow administrators to browse the meeting rooms that are set up in the system.
  8. Allow administrators to add meeting rooms to the system.
  9. Allow administrators to change the attributes of an existing room.
  10. As well, allow administrators to remove an existing room from the system.

Designing the User Interface

Based on these functional requirements, let’s now work on a set of wireframes for the screens that we will use in the app. First, we are going to model the screens that will allow the user to book a room.

The Sign In Screen

We will use this screen to capture the user’s credentials and initiate the authentication and authorization process.


The My Bookings Screen

After signing in, we want to take the user to a landing screen where she can initiate the process of booking a meeting room. This page will also serve as the place where the user can see her current bookings.


This screen features the New button on its navigation bar. Tapping on this button will activate the Room Finder screen.

The Room Finder Screen

The Room Finder screen is basically a form where the user will enter the booking start and end times, as well all the attributes that she is looking for in a room, such as the building where the room should be located, the number of attendees, and the availability of network outlets and video conferencing equipment.


Once she has entered the search parameters, the user will tap on the Search button, which will initiate the search and activate the Rooms List screen.

The Rooms List Screen

The Rooms List screen will render a list of the rooms that fit the criteria entered in the Room Finder.


Each listing on this screen will feature a button that will allow the user to open the Room Details screen, described next, where she can review the room’s details and proceed to book it.

The Room Details Screen

This screen will render all the significant attributes of the selected room, such as a picture of the room, name, location and the availability of network outlets and video conferencing equipment.


The Book button on the screen’s navigation bar will activate the Booking Details screen.

The Booking Details Screen

This is where the user can review the details of her booking and commit the booking to the app’s database.


When the user taps the Done button on the screen’s navigation bar, the booking will be saved and the My Bookings screen will become active.

The Bookings Details screen will also serve to review existing bookings, therefore we will set up a footer area containing a Delete button that will allow the user to trigger the deletion of an existing booking.

When the user taps the Delete button, we will activate an alert that will inform her that deletions are permanent.


If she chooses to go ahead and delete, we will remove the booking from the app’s database, and activate the My Bookings screen.

Next Steps

This will be our first iteration of the UI for the “book a meeting room” use case of the app.

In the next part of this tutorial we will design the UI for the “meeting room browser” use case of the app, which is the feature that allows users to explore the meeting rooms in the system and see their availability for any given date. We will also design the UI that administrators will use to add, edit and delete rooms.

Stay Tuned

Don’t miss the next article. Get my updates by signing up for MiamiCoder’s Newsletter.

java, kendo ui mobile, mobile, sencha touch, tools & methods, tutorial

Published at DZone with permission of Jorge Ramon , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}