I moonlight (a lot of us do). I moonlight as a Lego Engineer. It's always been a dream of mine, and in the evenings, I've been making it a reality.
At first I would help throw a party now and then — a Lego Party, where I bring the Legos, supply decades of Lego construction expertise, and clean up the mess. When business picked up, I hired an assistant. We started to fill some other niches: one-on-one construction instruction for small, medium and large Lego sets, Lego therapy for stress and IBS relief (Irritable-Builder-Syndrome), adult Lego parties (things can get weird).
Recently, I started offering a regular schedule of evening and weekend classes aimed at helping people become better builders. Managing a few appointments a week was fine, but the phone calls from the class attendees were starting to seriously jeopardize my day job. Tapping into that daytime experience as a software engineer, I decided it was the right time to move that regular schedule into the modern era with an online calendar for booking classes:
Table of Contents
Now, I don't want this class calendar to be my life's work, which means using a couple open-source libraries and an existing online booking platform. And I do want to do it right, which means a little up-front design. We'll build this in two pieces:
- A Server Component: an API facade, allowing control over which API calls are made to the booking platform. After all, we don't want our API credentials floating around in a client-side application.
- Acuity Scheduling is the online platform I selected (full disclosure: this is my day job). Acuity has an appointment scheduling API, a backend for managing my availability and appointment reminders, and a front-end allowing clients to cancel and reschedule online.
- Express.js is an HTTP server suitable for the task of serving the API facade.
- A Client Component: a UI for mapping client intention to API calls, e.g., a calendar and some forms ;-)
Let's get started!
For many businesses, online scheduling means more time to do what they love and less time managing their calendar. For clients, it means scheduling an appointment on their terms, say, late in the evening, with a glass of red wine, from a bathtub.
To follow along with this HowTo, a free trial will work just fine. You'll need to create a couple Group Classes to display on the calendar, and you'll need your User ID and API Key from Business Settings - Integrations.
The server component talks to the Acuity Scheduling API on our behalf, and serves up the page containing the class calendar. To get started, we'll need to install a couple Node modules:
- acuityscheduling Acuity's JS SDK
First create a new project, then install the these modules using npm:
$ npm init $ npm install --save acuityscheduling express
Now that we have the modules installed, we can start building the server. Create a new file called app.js and include the modules:
'use strict'; // Modules: var AcuityScheduling = require('acuityscheduling'); var express = require('express');
Finally, let's take it all for a spin. Start the server, passing your Acuity user ID and API key from Business Settings - Integrations in through the environmental variables:```bash $ ACUITY_USER_ID = 123 ACUITY_API_KEY=abc node app.js ```
The client component is our web-based user interface, allowing folks to browse the class calendar and book an appointment. It talks to the server component, which makes calls to the Acuity API and returns a list of classes. We're gonna need a couple more modules:
- webpack, a bundler for client-side assets
- FullCalendar, a calendar widget
- style-loader and css-loader, two webpack plugins we'll be using.
These can also be installed using npm:```bash $ npm install --save-dev webpack style-loader css-loader fullcalendar ```
Create an empty file src/index.js, you can now run webpack:```bash $ ./node_modules/.bin/webpack ```
At this point, we're just creating a big bundle of nothing, but if you've done everything correctly you'll see some output about chunks. More importantly, you should now have a file public/bundle.js. If everything isn't quite right, you'll see a (hopefully) much more helpful error message.
Run ./node_modules/.bin/webpack to rebuild the client component's bundle as we go along, or start webpack in watch mode to continually rebuild the bundle as files change:./node_modules/.bin/webpack --watch
SERVING UP THE CLIENT COMPONENT
Now that we have our asset bundle, create an HTML file to serve it in public/index.html:```html Class Calendar
Re-bundle your app using ./node_modules/.bin/webpack and refresh the page http://localhost:3000/. You'll now see a very empty calendar — let's fill it up!
DISPLAY THE CLASS CALENDAR
Finally, we can wire up the click handler. We'll use your Acuity user ID and the "data" attribute we supplied to the FullCalendar event to build a direct scheduling link. To get the Acuity user ID on the client side, we'll use a special webpack plugin to define a constant ACUITY_USER_ID. From now on, run webpack with the option --define ACUITY_USER_ID=123.
With that final change, it's time to re-bundle with ./node_modules/.bin/webpack --define ACUITY_USER_ID=123. You can find the full changes on GitHub. After rebundling, head back to localhost:3000 and schedule some classes:
The bones of our class calendar are there, but there's plenty more to do! Here are some ideas —
- Schedule in style using Bootstrap or a custom stylesheet. Just install bootstrap with npm install --save-dev bootstrap and addrequire('bootstrap/dist/css/bootstrap.css) to your src/index.js.
- Enable CORS for the API facade using the Express CORS middleware. This will enable you to deploy the static assets in /public to your existing website, while hosting the API facade somewhere else.
- Build a custom appointment booking UI using Acuity's Appointment APIs.
This content is sponsored via Syndicate Ads.