Building Workspace Reservations App using Low-Code platform

8 min readNov 21, 2023

In this article, I will build OfficeSpot, an Employee Workspace Reservations app that simplifies the process of managing office space bookings for administrators. This innovative tool allows seamless inputs from administrators, facilitating the sending of automated calendar invites to attendees via email. By simplifying the reservation process, it enhances resource management, fosters better organization, and saves time for both administrators and employees.

In this App, I will integrate APIs from ApyHub, an API marketplace that offers 75+ APIs, with DronaHQ, a low-code platform accelerating app development with its drag-and-drop interface and 150+ UI controls. I will cover every step in detail to build the OfficeSpot app, aiming for an improved workspace reservation experience and a user-friendly process.

To start with we need to ensure a few things such as

Having an ApyHub account, make sure that you have created your account on ApyHub
You should have an account on DronaHQ with Cloud Login.
You should know how to configure the REST API connector. You can learn more about configuring REST API with various authentication methods from here.

Generating API Keys on ApyHub is a simple process. Upon logging into your ApyHub account, navigate to the dashboard where you’ll easily locate the API Keys option.

From there, proceed by selecting + API Key to create a new API key. You'll be prompted to assign a name and specify the Authentication Type as Token.

Featured APIs for App Development

From the list of vast APIs options, we will be using Generate iCal and Timezones Dictionary.

Generate iCal

By utilizing the iCalendar format (RFC 5545), this API produces calendars in a text-based format that can be seamlessly integrated into different applications.

Our primary intention is to employ this API for the creation of .ics files. These files will facilitate the addition of non-recurring events to Google Calendar effortlessly.

Timezones Dictionary

I will be using the Timezone Dictionary to acquire a comprehensive list of time zones within our app. This resource will assist us in setting time zones for calendar invites in our OfficeSpot app.

Now that we’ve identified the necessary APIs for constructing our Employee Workspace Reservations application with Calendar-Style Invites, our next step involves building the application layout, interactivity, and functionality using DronaHQ.

Create a new app on DronaHQ, this should bring you to the development environment like the one shown below:

Configuring REST API Connector: ApyHub

This connector enables users to efficiently configure and conduct API tests by inputting specific configuration details. Notably, it presents a diverse array of authentication methods.

Before delving into the visual aspect of our application, let’s lay the groundwork by configuring our REST API connector with APIs.

By navigating to Data Queries > New > Connector Library > +Add Connector, you can select the REST API option from a diverse array of available databases and third-party API connectors.

Fetching time zones via API

Let’s use cURL request from ApyHub for Timezones Dictionary, to fetch details-

curl — request GET \\
 — url <https://api.apyhub.com/data/dictionary/timezone> \\
 — header ‘Content-Type: application/json’ \\
 — header ‘apy-token: api-token-of-your-account’

Test API and Save the configuration.

The connector is now accessible within the Data Queries section. Let's proceed by selecting Keys from its Transform Response segment.

Choosing specific keys facilitates the process of structuring and organizing the data output received from the connector’s response. This step allows you to precisely pinpoint and extract the essential information or attributes required for your application.

Sending Request and Generating Invite via API

From the list of connectors, we’ll add a REST API connector to initiate a request and generate an invite file as a response. The process mirrors the previous steps: acquire the cURL request and paste it into the designated area.

Feel free to make slight adjustments based on your preferences or specific requirements. This flexibility allows you to tailor the request to best suit your needs. For example, I have used API Key Authentication as a method of authentication for this API.

Test API and Save the configuration.

Upon reviewing the current request functionality, it operates smoothly; however, it presents a limitation by not being dynamic. To address this, our focus will now shift to making the request parameters dynamic, a straightforward task within DronaHQ.

Navigate to the added API which is named inviteIcs in this case, from our connector list. Under Advanced > Body/Form Parameters, the process involves replacing static parameters with variables using the notation. This action will imbue the request with dynamic capabilities, allowing for the use of variables to create a more flexible and adaptable request structure.

{

    "summary":"{{summaryVal}}",
    "description":"{{descriptionVal}}",
    "organizer_email":"{{organizerEmailVal}}",
    "attendees_emails":["{{attendeesEmailVal}}"],
    "location":"{{locVal}}",
    "time_zone": "{{timezoneVal}}",
   "start_time":"{{startTime}}",
    "end_time":"{{endTime}}",
    "meeting_date":"{{meetingDateVal}}"

}

Test API and Save. We have our API ready.

Building Dynamic UI: Diverse Controls in DronaHQ

This layout encompasses various controls for display, input, and action triggers.

The process of creating an engaging UI with a plethora of controls is effortless on DronaHQ. By simply dragging and dropping controls from the control list, users can access a range of controls, each with distinctive properties. These properties allow for alterations such as changing the control’s name, display, color, data binding, and more.

For this application, we will incorporate controls including Container, Image, Text Input, Text Area, Dropdown, Date Picker, Time Picker, Keyword and Button. Users have the flexibility to select controls based on their specific requirements and preferences.

Adding Actions and Functionalities

This app is designed to offer information on time zones, facilitate the triggering of actions to send requests and generate invite .ics files, and ensure the delivery of well-crafted, curated emails.

Adding Time Zones

To showcase our fetched time zones, we’ll use the dropdown control. Accessing its Bind Data options, we'll simply input the data query name we configured earlier i.e., Timezone within double curly braces {{ }}. With this simple step, our control will display the comprehensive list of available time zones. Just click Save, and the control will be populated with the time zone data.

Adding Actions and Functionalities

This is the part where we build the crux of our application. We want to trigger an action on button_click of Button Control, which will:

Initiate a request to the API, retrieving ‘invite.ics’ file data.
Generate a URL for the obtained ‘.ics’ data.
Send invite using the URL via email connector.

Let’s get started

Insert a JS Code action block to convert UINX time and date format from our controls (i,e., Date picker and Time picker) to HH:mm and DD-MM-YYYY format respectively. This can be done by using a simple JS code for transformation.
|Select the keywords of the control.
Insert JS code, for example:

dt = moment(Number(date)).format('DD-MM-YYYY')
st = moment(Number(startTime)).format('HH:mm');
et = moment(Number(endTime)).format('HH:mm');
output = {
"date": dt,
"starttime": st,
"endtime": et
};

In the image/code presented above, moment.js is utilized, a pre-installed library within DronaHQ. This platform conveniently provides several pre-installed JavaScript libraries, simplifying JavaScript code creation. Additionally, users have the flexibility to

Upon clicking Continue, proceed to the next configuration section to save each output in distinct variables. Finally, click Finish.

Add Server-Side action of our inviteIcs API.

Assign keywords for each dynamic variable used as parameters for the API request.
We can now use the JavaScript output variables as keywords to pass date, start time, and end time for parameters.

Proceed by Continue, store the retrieved output (ics file data) in a variable and click Finish.

To create a URL out of the ics data, we will be using server-side action of AWS S3 - Upload File, This action allows for the transmission of the invite.ics data and facilitates the retrieval of its URL.

Specify the bucket name and set the key as invite.ics.
Select the obtained data from inviteIcs API using keywords for the Files` section.
Mention content type as: text/calendar to ensure proper handling of the calendar data.

Continue and save the output URL in a variable, then click Finish.

Integrate the Gmail - Send Mail server-side action to execute the final step. This action aims to dispatch an email to all attendees containing event information, including a calendar invite.

Select content type: Plain.
Under Attachment(s) segment, put the keyword for the obtained URL from AWS S3 output.

In the provided image, within the ‘Message’ section, a text message has been combined with keywords. This combination allows the event details from the control to be sent to attendees via email.

All the actions are added now. Your action flow will look something like below.