Skip to content

Latest commit

 

History

History
123 lines (85 loc) · 4.77 KB

README.md

File metadata and controls

123 lines (85 loc) · 4.77 KB
Raw

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.