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
To run the app we'll need to set some environment variables first.
- The backend needs a 'secret token' to negotiate a temporary token: secret token documentation
- The client needs a 'publishable token' for readonly access of Space API resources: publishable token documentation
You can generate both tokens on the API keys page:https://developers.archilogic.com/api-keys.html.
- Create a new
.envfile 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
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.
https://localhost:3000/?sceneId=0246512e-973c-4e52-a1f2-5f0008e9ee9c
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.
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>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])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))
})
}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.