Skip to content

archilogic-com/room-booking

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
api
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Archilogic Desk & Room Booking App Example

This is a simple prototype of a room booking app for managing room booking in a given space.

It features a client-side application (built with React.js) and a serverless backend (powered by Vercel) communicating with Archilogic's Space API

Set Environment Variables

To run the app we'll need to set some environment variables first.

You can generate both tokens on the API keys page:https://developers.archilogic.com/api-keys.html.

  • Create a new .env file by copying the example
cp .env.example .env
  • Set your new 'secret token' to the ARCHILOGIC_SECRET_KEY environment variable.
  • Set your new 'publishable token' as the REACT_APP_PUBLISHABLE_TOKEN environment variable

Install and Run

In the project directory, you can run:

npm install

This command will install all the dependencies needed for the project to run locally.

To run the application, execute:

npm run vercel

The project loads a default scene but you can change it to a different one by specifing ?sceneId=THIS_IS_ANOTHER_SCENE_ID in the browser url.

http://localhost:3000/?sceneId=0246512e-973c-4e52-a1f2-5f0008e9ee9c

The App

This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.

Archilogic library setup

Index file public\index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Book rooms using Archilogic Floor Plan Engine" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <script src="https://code.archilogic.com/fpe-preview/v2.0.x/fpe.js?key=%REACT_APP_ARCHILOGIC_PUBLISHABLE_API_KEY%"></script>
  </head>
</html>

Floorplan Initialization

In file src\components\Floorplan\FloorPlan.tsx when the sceneId value is available trough props, we initialize the floor-plan and attach it to the DOM element #floorplan

useEffect(() => {
  const container = document.getElementById('floorplan')
  const fp = new FloorPlanEngine(container, floorPlanStartupSettings)
  fp.loadScene(props.sceneId).then(() => {
    props.setSpaces(fp.state.computed.spaces)
    onSpacesLoaded(fp.state.computed.spaces)
  })
}, [props.sceneId])

API storage

All the bookings are managed in a collection on the client side, and when there is any change to that collection, we push the new updated data to the corresponding space.

In order to keep business logic clean we decoupled it into a reducer: src\reducers\bookings.ts

export const saveBooking = (newBooking: Booking, bookings: Booking[]) => (dispatch: any) => {
  dispatch(startSaveBooking())
  let newBookingsList = bookings
  newBookingsList.push(newBooking)

  axios
    .put(`/v2/space/${newBooking.spaceId}/custom-field/properties.customFields.bookings`, {
      bookings: newBookingsList
    })
    .then((response: any) => {
      dispatch(endSaveBooking(newBookingsList))
    })
}

Other Libraries Used In This Project

Vercel - Creates a serverless endpoint for our backend as well as a static site deployment to serve the app Axios - Promise based HTTP client for the browser and node.js.
Ant Design - A UI Design language and React UI library.
Typescript - Optional static type-checking along with the latest ECMAScript features.
lodash - A JavaScript utility library delivering consistency, modularity, performance, & extras.
Redux - A Predictable State Container for JS Apps. Moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
uuidjs - Generate RFC-compliant UUIDs in JavaScript.

About

Room booking demo using the Archilogic Space API and SDK

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published