๐ŸŽ“ Advanced Booking App Tutorial (Step-By-Step)

Whatโ€™s up Gliders!

Thought Iโ€™d share my latest free tutorial for those that might be interested.

:popcorn: ๐—”๐—ฏ๐—ผ๐˜‚๐˜ ๐—ง๐—ต๐—ถ๐˜€ ๐—ง๐˜‚๐˜๐—ผ๐—ฟ๐—ถ๐—ฎ๐—น :popcorn:
This tutorial is an in-depth, step-by-step, tutorial that shows you how to build an advanced booking app from scratch in Glide.

:nerd_face: ๐—ฆ๐˜๐—ฎ๐˜† ๐—™๐—ผ๐—ฐ๐˜‚๐˜€๐—ฒ๐—ฑ :nerd_face:
Sprinkled throughout this tutorial are countless insider tips, strategies, code snippets and techniques that will take your Glide skills to the next level. So grab a coffee, get comfy, stay focused, and enjoy!

:raising_hand_man: ๐—ช๐—ต๐—ผ ๐—œ๐˜€ ๐—ง๐—ต๐—ถ๐˜€ ๐—™๐—ผ๐—ฟ :raising_hand_woman:
Anyone who wants to level up their skills. This tutorial is long, but because itโ€™s built on a free plan and is step-by-step (with an optional cheat sheet) I encourage all Gliders to give it a shot, no matter what skill level you are :muscle:

:rotating_light: ๐—จ๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ๐˜€ :rotating_light:
#๐Ÿญ - I have upgraded the JavaScript snippet that is used in the Validation/Template column so it now allows the last slot of the day to be booked, and removes any Timeslots for the current day that have already passed. You can find the updated code below.

#๐Ÿฎ - If you use a time increment larger that 15 minutes (e.g. 30 or 60) you will need to create a filter on the settings page to ensure that the values you can select as the Open/Close time for each day are less than 1440. To do this, just add a the following filter to both choice components: Timeslot/Value is less than 1440.

๐—จ๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ๐—ฑ ๐—๐—ฎ๐˜ƒ๐—ฎ๐˜€๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜:

const Check = "p7";

if(Check === "NaN"){ return "No date selected."};

const AS = [p1];
const TS = [p2];
const BS = [p3];
const BD = parseInt("p4", 10);
const DS = parseFloat(("p5" / 1440).toFixed(4))
const DE = parseFloat(("p6" / 1440).toFixed(4))
const SD = p7;

const date = new Date();
const [year, month, day] = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
const today = year * 10000 + month * 100 + day;

let currentTimeFraction = SD === today
    ? (date.getHours() * 60 + date.getMinutes()) / 1440
    : 0;

const FrS = BS.filter(s => s >= DS && s <= DE && s >= currentTimeFraction && !TS.includes(s));

const VS = FrS.filter(s => {
    const SE = parseFloat(((Math.round(s * 1440) + BD) / 1440).toFixed(4));
    return AS.filter(ss => ss >= s && ss < SE).every(ss => FrS.includes(ss));
}).map(s => s.toFixed(4));

return VS.length ? VS.join(",") : "No availability on this date.";

๐—ง๐—ฒ๐—บ๐—ฝ๐—น๐—ฎ๐˜๐—ฒ ๐—ฉ๐—ฎ๐—ฟ๐—ถ๐—ฎ๐—ฏ๐—น๐—ฒ๐˜€ & ๐—ฉ๐—ฎ๐—น๐˜‚๐—ฒ๐˜€:
โ†ณ p1 = Validation/All Slots
โ†ณ p2 = Validation/Taken Slots
โ†ณ p3 = Validation/Barber Slots
โ†ณ p4 = Service/Duration
โ†ณ p5 = Trading Hours/Start
โ†ณ p6 = Trading Hours/End
โ†ณ p7 = Booking/Date โ†’ ID

7 Likes

Thank you for sharing. I will check it

1 Like

Youโ€™re welcome! Go for it :muscle: