DEV Community: Nishka Kotian

Building a Venue Booking System using Parse and SashiDo : Part-2

Nishka Kotian — Thu, 05 Aug 2021 11:36:50 +0000

Hello ! This post is a continuation to the first part where I've explained about user authentication and storing venue details.In this post we'll cover querying the database and look into how the booking functionality can be implemented.
In case you aren't familiar with ES6 arrow functions and template literals I would suggest reading about them first.I have added links at the bottom for your reference.

Displaying venues on the dashboard
Filtering venues based on location
Show venue information
Sending booking request to owner
Approving requests
Deleting past bookings
Conclusion
Useful links

Displaying venues on the dashboard

After the owner has added venues, there has to be a way to get all that information.In the customer's dashboard top 25 venues are shown and in the owner's dashboard under the Venues tab all the venues belonging to that owner are displayed.

Owner's dashboard :

This owner has 3 venues listed.

When an owner first creates an account, they wouldn't have any venues.So in the html I have created two divs one for new owners with no venues and another for those who have at least one venue.

<body onload="getOwnerData();">

...

<!--Div to display for new owners.No venues added yet-->
<div class="card mt-4 w-75 defaultMsg d-none" id="novenues">
    <div class="card-body">
        <h5 class="mb-3" style="color: #fa5757;">Welcome to SKED!</h5>
        Your listed venues will show up here after you add them.<br>
        <button type="button" class="btn mt-3" style="background:#7cebeb;"
            data-bs-toggle="modal" data-bs-target="#addVenueModal">Add a
            venue</button>
    </div>
</div>
<!--Div to display for owners with at least 1 venue added-->
<div id="displayVenues" class="row">
    <h5 class="mt-4 mb-3 d-none" id="yourVenuesHeading">Your Venues</h5>
</div>   

...

</body>

function getOwnerData() {
    const user = Parse.User.current();
    document.getElementById("ownername").innerHTML = user.attributes.username;

    const Venues = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venues);
    query.equalTo("owner", user);
    query.find().then(function findVenues(results) {
        if (results.length == 0) {
            document.getElementById("novenues").classList.remove("d-none");
        } else {
            document.getElementById("yourVenuesHeading").classList.remove("d-none");
            const displayArea = document.getElementById("displayVenues");
            results.forEach((venue, index) => {
                if (i == 11) { i = 0; }
                displayVenue(displayArea, venue);
                i += 1;
            });
        }

        /* Insert code to fetch booking details here */

    }, function error(err) {
        console.log('Error : ', err);
    });
}

To fetch the data, you'll have to find out the owner who is logged in using Parse.User.current() and then create a new Parse.Query which can be used for querying objects of a class. You can specify conditions based on which the query will return matching records. query.equalTo("owner", user); means that I want to get all Venues which have the owner column set to user.Note that user is a pointer to the instance of the current user in the User class.query.find() retrieves all the rows which satisfy the query and returns a promise.
The displayVenue function is a utility function that takes as parameters the id of the div element inside which the venue cards will be displayed and a Venue object.

var i = 0; //iterator for colours in venue cards
const colours = ["#8a068f", "#06148f", "#c70a62", "#0a9956", "#e78659", "#87b40d", "#0791b4", "#8609ce", "#4c7e80", "#c2427e", "#838080"];

function displayVenue(displayArea, venue) {
    var venuediv = document.createElement("div");
    venuediv.className = "venue col-md-6 col-lg-3 mb-4 d-flex align-items-stretch text-center";
    var photo = venue.get("image1").url();
    var objId = venue.id;

    venuediv.innerHTML =
        `<div class='card' id='${objId}' onclick='venueDetails(this)' style ='border-bottom: 4px solid ${colours[i]};'>
            <img class='card-img-top' height='230px' src='${photo}'>
            <div class='card-body'>
                <h5 class='card-title'>${venue.get("venueName")}</h5>
                <span class='tag tag-place'><small class="capitalised">${venue.get("city")}</small></span>
            </div>
        </div>`;
    displayArea.appendChild(venuediv);
}

The .get method of an object can be used to obtain the value of any field in it.

Notice that for the cards I'm assigning the id to the id of the venue object.So, when an user clicks on the card, its id would be added as a parameter to the url and hence we can identify which venue's details have to be displayed.

function venueDetails(el) {
    window.location.href = "venue.html?id=" + el.id;
}

Customer's dashboard :

The customer can check venues as well as their bookings by toggling the button in the navbar. In the html I've created empty containers for each of them.

<body onload="showVenues(); getCustomerBookings();">

<nav>
     <button class="navbtns navlink" id="toggle_btn" 
onclick="showOther(this)">Show Bookings</button>
</nav>
...

<div id="showVenuesHomepg" class="row"></div>
<div id="customerBookings" class="row my-4 d-none"></div>
...

</body>

//Toggle between showing venues and bookings
function showOther(el) {
    if (el.innerHTML == "Show Venues") {
        el.innerHTML = "Show Bookings";
        document.getElementById("customerBookings").classList.add("d-none");
        document.getElementById("venues").style.display = "block";
    }
    else {
        el.innerHTML = "Show Venues";
        document.getElementById("venues").style.display = "none";
        document.getElementById("customerBookings").classList.remove("d-none");
    }
}

function showVenues() {
    const Venues = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venues);
    query.limit(25);
    query.find().then(function success(results) {
        results.forEach((venue, index) => {
            const displayArea = document.getElementById("showVenuesHomepg");
            if (i == 11) { i = 0 };
            displayVenue(displayArea, venue);
            i += 1;
        });
    }, function error(err) {
        console.log("Error : ", err);
    });
}

The showVenues function is quite similar to the getOwnerData function except that here I'm fetching the top 25 rows in the Venues class using query.limit(25).By default though, parse returns the top 100 results.

Filtering venues based on location

As the number of venues gets larger a function that can filter venues based on their location would be useful.Now, we'll see how this can be done.

In the customer.html page create an input field to let the user enter a city name.

<div class="container">
    <h2 id="venHeading" class="my-4 text-center">VENUES</h2>
    <div class="input-group input-group-lg mb-4">
        <input type="text" id="locationfilter" name="venuesfilter" class="form-control" aria-label="searchBar" aria-describedby="locationSearchBar" placeholder="Enter a location..">
        <button type="button" class="btn btn-secondary" id="locationSearchBar"
            onclick="filterVenues();">Search</button>
    </div>
    <div id="filterNoResults" class="my-3 text-center text-danger"></div>
    <div id="showVenuesHomepg" class="row"></div>
</div>

Earlier we made a query based on the owner column.Now we're interested in querying based on the city column.

function filterVenues() {
    document.getElementById("filterNoResults").innerHTML = "";
    var loc = document.getElementById("locationfilter").value.toLowerCase();
    const Venues = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venues);
    query.equalTo("city", loc);
    query.find().then(function findVenues(results) {
        if (results.length == 0) {
            document.getElementById("filterNoResults").innerHTML = "No venues found !";
        } else {
            const displayArea = document.getElementById("showVenuesHomepg");
            displayArea.textContent = ""; //Remove all venues so as to display only the filtered venues
            results.forEach((venue, index) => {
                if (i == 11) { i = 0; }
                displayVenue(displayArea, venue);
                i += 1;
            });
        }
    }, function error(err) {
        alert('Error : ', err.message);
    });
}

To make this query a little robust, while saving the city for the Venue object I had first has converted it to lower case so that now we can convert the input field's value to lowercase and make the search case insensitive.

Display venue details

On clicking on any of the venue card, the insertDetails function is triggered which shows a new page with information about the venue which basically contains :
1) Images of the venue
2) Details about location,timings etc
3) A calendar.If any date on this calendar is clicked, it shows the time slots that have already been booked so that customers can plan their event accordingly
4) A form to send a booking request

You can find the code for this page in the venue.html file where I have created empty containers for venue images, details, calendar and added a booking form.Here's a rough outline:

<body onload="insertDetails(); getDates();">
     <div id="loader" class="centered"></div>

    /* Insert navbar */

    <div class="container my-4 whileLoadHide">

        /* slideshow to show images of the venue */

        /* empty divs to show details like timings,address etc */

    </div>

    <div class="container my-4 whileLoadHide" id="calholder">

        /* Empty calendar */

    </div>

    <div id="bookVenue" class="container mb-4 whileLoadHide">

        /* Form to book venue */

    </div>
</body>

To get details about the venue from the database the function below is used.

var params, venueId,flag;

function insertDetails() {
    params = new URLSearchParams(location.search); //get the parameters in query string
    venueId = params.get('id');
    const Venue = Parse.Object.extend("Venues");
    const query = new Parse.Query(Venue);
    query.get(venueId).then((venue) => {
        // The object was retrieved successfully.
        document.getElementById("brand").innerHTML = venue.get("venueName");
        document.getElementById("img1container").innerHTML = `<img class="d-block w-100" src="${venue.get("image1").url()}" alt="First Image" style="max-height:720px">`
        document.getElementById("img2container").innerHTML = `<img class="d-block w-100" src="${venue.get("image2").url()}" alt="Second Image" style="max-height:720px">`
        document.getElementById("desc").innerHTML = venue.get("description");
        document.getElementById("city").innerHTML = venue.get("city");
        document.getElementById("address").innerHTML = venue.get("address");
        document.getElementById("days").innerHTML = venue.get("daysAvailable");
        document.getElementById("timing").innerHTML = venue.get("timings");

        var hiddencontent = document.getElementsByClassName("whileLoadHide");
        while (hiddencontent.length != 0) {
            hiddencontent[0].classList.remove("whileLoadHide");
        }
        document.getElementById("loader").style.display = "none";

    }, (err) => {
        // The object could not be retrieved.
        alert("Error occured: ", err.message);
        document.getElementById("loader").style.display = "none";

    });
}

The query.get method can be used to find an object using its id.

The getDates function implements the calendar feature which you can easily build using HTML and CSS.Each date is shown as a button which on clicking calls the checkbooked function which checks the slots that are already booked. This depends on the booking functionality so I'll describe it later.

Sending booking request to owner

At the bottom of the venue details page there is a form which any customer can fill to send a booking request.

<form id="venueBookForm">
    <h4 style="color: #00a090;">Book this venue</h4>
    <div class="row mb-3">
        <div class="col-md-6">
            <label for="custName" class="form-label">Full name</label>
            <input type="text" id="custName" name="customerName" class="form-control">
        </div>
        <div class="col-md-6">
            <label for="email" class="form-label">Email Id</label>
            <input type="email" id="email" name="EmailId" class="form-control">
        </div>
    </div>

    ...

    //Insert label and input fields to collect other details

    ...

    <div class="my-2 text-danger" id="bookingError"></div>
    <button type="button" onclick="bookVenue()" class="btn text-light mb-2" id="bookVenueBtn">Book slot</button>
    <div class="my-2 text-success" id="bookingSuccess"></div>
</form>

function bookVenue() {
    document.getElementById("bookingError").innerHTML = "";
    const name = document.getElementById("custName").value;
    const email = document.getElementById("email").value;
    const date = document.getElementById("date").value;
    const timeStart = document.getElementById("starttime").value
    const timeEnd = document.getElementById("endtime").value;
    const details = document.getElementById("purpose").value;

    if (!name || !email || !date || !timeStart || !timeEnd || !details) {
        document.getElementById("bookingError").innerHTML = "Please fill all the fields.";
    }
    else {
        const user = Parse.User.current();

        const Venues = Parse.Object.extend("Venues");
        const q = new Parse.Query(Venues);
        q.get(venueId).then(function success(object) {
            var ownerOfVen = object.get("owner");

            const Booking = Parse.Object.extend("Booking");
            const booking = new Booking();

            var acl = new Parse.ACL();
            acl.setReadAccess(user, true);
            acl.setReadAccess(ownerOfVen, true);
            acl.setWriteAccess(ownerOfVen, true);

            booking.set("ACL", acl);
            booking.set("fullName", name);
            booking.set("email", email);
            booking.set("date", date);
            booking.set("timeSlot", timeStart + " - " + timeEnd);
            booking.set("details", details);
            booking.set("venue", object);
            booking.set("owner", ownerOfVen);
            booking.set("bookedBy", user);
            booking.set("approvedStatus", false);

            booking.save().then(function success(booking) {
                document.getElementById("venueBookForm").reset();
                document.getElementById("bookingSuccess").innerHTML = "Booking done successfully!";
                console.log("Booking done!");
            }, function error(err) {
                console.log("Error: ", err);
            });
        }, function error(err) {
            console.log(err);
        });
    }
}

The Booking class will be used to store details about booking requests.The approvedStatus field is a boolean value which if set to true, implies that the booking has been approved.As one of the field here is the email address of the customer who is booking the venue, we need to make sure that this data is private and can be read only by them and the owner. Also, the write access should be given only to the owner, as only they should be able to update the approvedStatus field.

But we'll have to show the timeSlots that have already been booked right? Yes and to do so I have created another class named ApprovedBookings which contains only the venueId,timeslot,date and a pointer to the Booking object and this class is publicly readable.

Approve requests

In the owner's dashboard under the booking requests tab all the requests made to any of their venues would be displayed.
Getting these booking details is very similar to how we fetched all the venues so I won't be going over it.Today's events tab is again the same thing but with a condition to find out only rows where date==today's date.

In the following image, the red box shows a request that hasn't been approved yet

On clicking the approve button the approvedStatus is set to true and a new row is added to the ApprovedBookings class.

function approveReq(el, id) {

    if (el.innerHTML == "Approved") {
        return;
    }

    const Booking = Parse.Object.extend("Booking");
    const q = new Parse.Query(Booking);
    q.get(id).then((object) => {
        object.set("approvedStatus", true);
        object.save().then((booking) => {

            //create a row in ApprovedBookings class which has public read access
            const ApprovedBookings = Parse.Object.extend("ApprovedBookings");
            const approved = new ApprovedBookings();

            const acl = new Parse.ACL();
            acl.setPublicReadAccess(true);
            acl.setWriteAccess(Parse.User.current(), true);

            approved.set("date", booking.get("date"));
            approved.set("timeSlot", booking.get("timeSlot"));
            approved.set("venueID", booking.get("venue").id);
            approved.set("parent", object);
            approved.setACL(acl);
            approved.save().then(function () {
                console.log("approved and saved!");
            }, function error(err) {
                console.log(err);
            });

            el.innerHTML = "Approved";
            el.classList.remove("cardpink-btn");
            el.classList.add("cardpurple-btn");
            const card = document.getElementById(id);
            card.classList.remove("cardpink-bg");
            card.classList.add("cardpurple-bg");
        }, function error(err) {
            console.log(err);
        });
    });
}

After approval :

The time slots of approved bookings can be read by any user. Here's an example of how the slots already booked will appear upon clicking any date in the calendar.

The main part of the checkbooked function which is called on clicking any date in the calendar is as follows :

const apprBooking = Parse.Object.extend("ApprovedBookings");
const query = new Parse.Query(apprBooking);
query.equalTo("venueID", venueId);
query.equalTo("date", datecheck);
query.find().then(successCallback,errorCallBack);

veneuId is a global variable containing the id of venue whose value was set in the insertDetails function.date refers to the date in the calendar which was clicked.

Deleting past bookings

Once an event has completed, maybe the owner doesn't need the booking information anymore so we have to provide a delete option for expired bookings.We will have to destroy it from both the Booking class and ApprovedBookings class.As ApprovedBookings has a pointer to its parent in Bookings, we'll start by deleting it first.
But it is possible that a booking was never approved.Then it would be present only in the Bookings class.

function deleteBooking(bookingid) {
    const Booking = Parse.Object.extend("Booking");
    const query = new Parse.Query(Booking);

    query.get(bookingid).then((bking) => {

        const status = bking.get("approvedStatus");

        //If approved,first remove record from ApprovedBookings class.
        if (status) {
            const apprBookings = Parse.Object.extend("ApprovedBookings");
            const q = new Parse.Query(apprBookings);
            q.equalTo("parent", bking);
            q.find().then((result) => {
                result[0].destroy().then(() => {
                    console.log("Deleted booking from ApprovedBookings");

                    //Next remove from Booking class
                    bking.destroy().then(() => {
                        const bookingcard = document.getElementById(bookingid);
                        bookingcard.parentElement.removeChild(bookingcard);
                        console.log("Deleted from Booking");
                    });
                });
            }, (err) => {
                console.log(err);
            });
        }
        else { //just remove the non approved booking from Booking class
            bking.destroy().then(() => {
                const bookingcard = document.getElementById(bookingid);
                bookingcard.parentElement.removeChild(bookingcard);
                console.log("Deleted from Booking");
            }, (err) => {
                console.log(err);
            });
        }
    });
}

Conclusion

I hope you've gotten some idea about how Parse and SashiDo can be used to perform various tasks.This was a simple fun project so I haven't implemented any cloud code validation functions.Nevertheless, it was a great learning experience. There are a couple of more features that could have been added like allowing owners to edit venue details and displaying time in the AM-PM format.I think it would be cool to have a feature that can show room usage statistics for each of the venues.

Useful links

Part 1 - Building a Venue Booking System with Parse and SashiDo - Part-1
Arrow functions - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Template literals - https://css-tricks.com/template-literals/
Github repo - https://github.com/nishkakotian/SKED
SashiDo - https://www.sashido.io/en/
Parse Javascript SDK documentation - https://docs.parseplatform.org/js/guide/

Building a Venue Booking System using Parse and SashiDo : Part-1

Nishka Kotian — Thu, 05 Aug 2021 11:35:13 +0000

I got to know about Parse some time ago and was keen to build a full-stack web application using it.So, I decided to make a venue booking system and I would like to describe how I went about coding it.

In the first part of this post, I've given a brief introduction to Parse Server, SashiDo and javascript promises.If you're already familiar with these, please skip it.

To get an understanding of how the application works, check out the demo video!

Parse Server and SashiDo
Javascript Promises
Project overview
Database
User Registeration and Login
Adding a new Venue
Conclusion
Useful links

Parse Server and SashiDo

Parse Server is an open source backend that can be deployed to any infrastructure that can run Node.js.You can set up your own Parse server and dashboard or use a service like SashiDo that hosts Parse for you.Parse has SDKs for various platforms but for this project I have used Javscript.

To connect your application to SashiDo go to the Getting started section in the dashboard and copy the code under the Javascript section and place it at the top of your JS file.

To integrate the project with the SDK include the following script.

<script src="https://unpkg.com/parse/dist/parse.min.js"></script>

Javscript Promises

A promise is a proxy for a value which may not be know at the time of its creation but will eventually be available.It allows asynchronous functions to return values similar to synchronous ones.So, instead of returning the actual value, a promise is returned.When a promise is created it will be in pending state and ends in either a resolved state by returning a value or in a rejected state by returning an error.The .then() method of a promise object takes two arguments, the first argument is a callback function for the resolved case and the second argument is a callback function for the rejected case.As you go along this tutorial you'll learn more about it.

Project overview

The venue booking application which I named SKED has two main types of users, venue owners and customers.

A customer can :

Find details about venues and filter them based on location
Check time slots that have already been booked for any day
Send a booking request to the owner of that venue

An owner can :

Add a venue
Get bookings made for the present day
Approve booking requests made by customers
Delete bookings for events that have finished

Database

Data is stored by creating a Parse.Object with key-value pairs.You can create classes to manage and store different kinds of data.When a class is created, it does not have a schema defined so you can add fields which can have any type of JSON compatible data.But once the first object is saved the data types for any fields that have been set will be locked.For example, if I create a class named Venues and my first object has a field venueName whose valued I set to "Auditorium" then parse recognises that it was of string type.So whenever a new object is added it checks whether the venueName is of string type.If not, it returns an error.

Below is a diagram I created so that you can get a quick idea about the various classes and fields in them.

There is another class named Role created by default in parse, but since I did not create roles for this project I haven't shown it.Also, I did not put any thought into naming the classes 🤦‍♀️.I really should've named all of them in singular form.

User Registeration and Login

The Parse.User class has built in functions to handle and secure user account information.As there are two types of users I've added a new field called userType to differentiate between them.New fields can be added using the dashboard by clicking on the Add a new column button.

For the frontend, I've created two separate home pages for customers and owners as I wanted to display different messages on them.In each of them there are two buttons ie.Register and Login.On clicking them a modal(bootstrap popup) opens up asking the user to enter the username and password.These two are mandatory.You could optionally ask email too.

<form id="registerform">    
    <label for="username_reg" class="form-label">Username</label>
    <input id="username_reg" name="username_r" class="form-control mb-2" type="text">
    <label for="pswd_reg" class="form-label">Password</label>
     <input id="pswd_reg" class="form-control" name="password_r" type="password">
    <div id="regError" class="mt-2 text-danger"></div>
    <button type="button" id="CustRegbtn" onclick="register(this)" class="btn bg-light-blue text-white my-2">Register</button>
</form>

I've created a similar form in the owner's homepage but with a different id for the Register button so as to be able to determine if the request was made by a customer or owner.

Function to register user :

function register(el) {
    const username = document.getElementById("username_reg").value;
    const password = document.getElementById("pswd_reg").value;

    var user_type;
    if (el.id == "OwnerRegbtn") {
        user_type = "Owner";
    }
    else {
        user_type = "Customer";
    }

    if (username.length == 0) {
        document.getElementById("regError").innerHTML = "Username cannot be empty";
    }
    else if (password.length < 8 || password.length > 16) {
        document.getElementById("regError").innerHTML = "Password must be between 8-16 characters long";
    }
    else {
        const user = new Parse.User();
        user.set("username", username);
        user.set("password", password);
        user.set("userType", user_type);

        user.signUp().then(function success() {
            window.location.href = "registered.html";
        }, function error(err) {
            document.getElementById("regError").innerHTML = err.message;
        });
    }
}

new Parse.User() will create a new instance of the User class.After creating a new object, you can set the values for its fields using .set which takes two parameters, the name of the column and the value that you want to set it to.To register an user, the .signUp method has to be used.It is an asynchronous function, which returns a promise object which has a .then method that takes two functions for the success and error case.One example for an error case is when the username is already taken by some other user.

Now let's look into the login part.

<form id="loginform">
    <label for="username_login" class="form-label">Username</label>
    <input id="username_login" name="username_l" class="form-control mb-2" type="text">

    <label for="pswd_login" class="form-label">Password</label>
    <input id="pswd_login" class="form-control" name="password_l" type="password">

    <div id="loginError" class="mt-2 text-danger"></div>
    <button type="button" id="CustLoginbtn" onclick="login()"
        class="btn bg-light-blue text-white my-2">Login</button>
</form>

Function to log in user :

function login() {
    var username = document.getElementById("username_login").value;
    var password = document.getElementById("pswd_login").value;

    if (username.length == 0) {
        document.getElementById("loginError").innerHTML = "Please enter the username";
    }
    else if (password.length < 8 || password.length > 16) {
        document.getElementById("loginError").innerHTML = "Passwords are between 8-16 characters long.";
    }
    else {
        Parse.User.logIn(username, password, { usePost: true }).then(function success() {
            const user = Parse.User.current();
            if (user.attributes.userType == "Owner") {
                window.location.href = "owner.html";
            }
            else { /*user.attributes.userType == "Customer"*/
                window.location.href = "customer.html";
            }
        }, function error(err) {
            document.getElementById("loginError").innerHTML = err.message;
        });
    }
}

To log in an user, retrieve the input entered in the form and use the .logIn method by passing the username and password.By default it uses GET request but you can add an optional argument to tell Parse to use POST instead.Once the user is logged in, you can use Parse.User.current() to find out the current user.Then, using the attributes property of the object we can find the userType. Alternatively the .get method can also be used like so - user.get("userType").

If the login was successful the user will be taken to their dashboard (owner.html or customer.html) which has all their data.

To provide log out functionality use the .logOut() method.

/*Passing a boolean value true for owner & false for customer 
so that after logout they can be taken to their respective home page */

<button class="btn nav-link btn-link" onclick="logout(true)">Sign out</button> //in owner.html

<button class="btn nav-link btn-link" onclick="logout(false)">Sign out</button> //in customer.html

function logout(isOwner) {
    Parse.User.logOut().then(function gotohome() {
        if (isOwner) {
            window.location.href = "home.html";
        }
        else {
            window.location.href = "home_customer.html";
        }
    });
}

Next, we'll be looking into how owners can add a new venue.

Adding a venue

I have created a class named Venues to store venue details.This can be done using the dashboard.Just click on the Create a class button and add all the required columns by clicking on Add a new column.You'll have to give the column a name and specify the type of data you want to store.

If you remember I mentioned that Parse will automatically find the data type from the first object that gets stored and now I'm asking you to specify the data type.What's happening here?

Well, creating a class before hand isn't really necessary in Parse.If you create a subclass using Parse.Object.extend ("class"); and if that class did not exist Parse will create it for you.To enable this feature you'll have to go to App Settings > Security and keys > App permissions and enable client class creation.You can utilise it all through development and disable it before moving to production.

In the owner's dashboard there is a Add a venue button which on clicking opens up a form in which details about the venue must be entered.

Here's an outline of the code for the form.

<form>
    <div class="mb-3">
        <label for="nameOfVenue" class="form-label">Name of the venue</label>
        <input type="text" id="nameOfVenue" name="venueName" class="form-control">
    </div>

    ...

    /* Insert label and input fields for all other details here*/

    ...

    <div id="addVenueError" class="mb-3 text-danger"></div>
    <button type="button" onclick="createVenue()" id="venueSubmitBtn"
        class="btn text-light mb-3">Submit</button>
</form>

Once the submit button is clicked, the createVenue function shown below creates a new Venue object containing all the details that were entered.The venue will then show up in the owner's dashboard and also be visible to customers.

function createVenue() {
    document.getElementById("addVenueError").innerHTML = "";
    const venuename = document.getElementById("nameOfVenue").value;
    const address = document.getElementById("addr").value;
    const city = document.getElementById("cityName").value.toLowerCase();
    const daysAvailable = document.getElementById("days").value;
    const topen = document.getElementById("topen").value; /*Venue opening time*/
    const tclose = document.getElementById("tclose").value; /*Venue closing time*/
    const timing = topen + "-" + tclose;

    const image1 = document.getElementById("image1");
    const image2 = document.getElementById("image2");

    const desc = document.getElementById("desc").value;

    //Client side validation to check that all fields are entered
    if (!venuename || !address || !city || !daysAvailable || !topen || !tclose || image1.files.length == 0 || image2.files.length == 0 || !desc) {
        document.getElementById("addVenueError").innerHTML = "Please fill all the fields.";
    }
    else {
        const parseFileImg1 = new Parse.File("img1.jpeg", image1.files[0]);
        const parseFileImg2 = new Parse.File("img2.jpeg", image2.files[0]);

        const owner = Parse.User.current();
        /*create a subclass of the Venues class ie. inherit the properties of the Venues class.*/
        const Venue = Parse.Object.extend("Venues");
        //create an instance of the Venues class
        const venue = new Venue();

        var acl = new Parse.ACL();
        acl.setPublicReadAccess(true);
        acl.setWriteAccess(owner.id, true);

        venue.setACL(acl);
        venue.set("owner", owner); //pointer to owner
        venue.set("venueName", venuename);
        venue.set("address", address);
        venue.set("city", city);
        venue.set("daysAvailable", daysAvailable);
        venue.set("timings", timing);
        venue.set("image1", parseFileImg1);
        venue.set("image2", parseFileImg2);
        venue.set("description", desc);

        venue.save().then(function success(venue) {
            const displayArea = document.getElementById("displayVenues");
            displayVenue(displayArea, venue);
            i += 1;
            if (i == 11) { i = 0; }
            location.reload();
        }, function error(err) {
            alert("Error adding venue : " + err.message);
        });
    }

};

Let's go over what this function is doing.First, I'm retrieving the values entered in the form and checking that no fields were left empty.Then, the images are stored in a Parse.File object which allows storing data that is too large to fit inside a normal Parse.Object. Finally, after setting the fields to their values the .save() method is used to save the object in the database and like I stated before, if the Venues class did not exist Parse will first create it and then save the object.The displayVenue function will just add a new card to display the venue in the owner's dashboard.More about this function can be found in part-2.

One important point to note here is that we need to make sure that only the owner can modify or delete the venue.In order to provide such fine grained security we need to set an ACL (ACL = Access control list) using which we can specify who have permissions to read or write to that particular object. setpublicReadAccess(true) as the name suggests means that any user can read that object and setWriteAccess(owner.id, true) implies that only the owner has write access.The boolean value true specifies that I want to give permission.If instead I wanted to deny access to a user, then I would set that parameter to false.

Conclusion

So far, we have looked at user authentication and adding a new venue.If you would like to learn about querying the database and adding the booking functionality please check part-2 which can be found here.

Useful links

Part 2 - Building a Venue Booking System with Parse and SashiDo - Part-2
Github repo - https://github.com/nishkakotian/SKED
SashiDo - https://www.sashido.io/en/
Parse Javascript SDK documentation - https://docs.parseplatform.org/js/guide/

Fruit quality detection web app using SashiDo and Teachable Machine

Nishka Kotian — Mon, 21 Jun 2021 18:46:43 +0000

Hello! I recently built a web application that can identify if a fruit(apple,orange or banana) is fresh or rotten and I'd like to share how I went about it.I thought this was an interesting idea and also something that has real life applications.An automated tool that can scan through fruits and get rid of the spoilt ones would be really beneficial in the agriculture industry.I used Google's Teachable machine to train a machine learning model and SashiDo for storing images.Users can either upload an image or use their webcam to get prediction results.

Here's a short demo video showing how the website works.

Trainable Machine
SashiDo
Frontend
Webcam based prediction
Uploaded image based prediction
Conclusion
Github link
References

Trainable Machine

For classifying fruits the first step is to generate a ML model.Teachable machine is a web-based tool that can be used to generate 3 types of models based on the input type, namely Image,Audio and Pose.I created an image project and uploaded images of fresh as well as rotten samples of apples,oranges and banana which were taken from a kaggle dataset.I resized the images to 224*224 using OpenCV and took only 100 images in each class.

There are a few advanced settings for epochs,learning rate and batch size, but I felt the default ones were good enough for the task.After training, I exported the model and uploaded it.This stores it in the cloud and gives a shareable public link which can be then used in the project.

The next step would be to use to model to perform classification.There are two ways of providing input,we shall go through both of them.

SashiDo

SashiDo is a beautiful backend as a service platform and has a lot of built in functions.In this project, I've used only the Files functionality to store images uploaded by users.I agree that this isn't totally necessary but it is a great way to obtain more samples from the public and build a better dataset.To connect the application with SashiDo copy the code in the getting started page in SashiDo's Dashboard to the javascript file and also add the following script.

<script src=https://unpkg.com/parse/dist/parse.min.js></script>

Frontend

I've created two buttons to start/stop the webcam and to upload image, an input element for file upload and 3 empty divs to display the webcam input,image input and the output(prediction result).I have used Bootstrap, so in case you're not familiar with it, the class names basically correspond to various utilities in it.

<label for="webcam" class="ps-3 pt-3 pb-3">USE WEBCAM:</label>
<button id="webcam" type="button" class="btn btn-outline-primary ms-3" onclick="useWebcam()">Start webcam</button><br />
<label class="p-3" for="fruitimg">UPLOAD IMAGE:</label>
<div class="input-group px-3 pb-3" id="inputimg">
    <input type="file" class="form-control" accept="image/*" id="fruitimg">
    <button class="btn btn-outline-primary" id="loadBtn">Load</button>
</div>
<div id="webcam-container" class="px-3"></div>
<div id="uploadedImage" class="px-3"></div>
<div id="label-container" class="px-3 pt-3"></div>

Webcam based prediction

The model can be used in our javascript project easily using the Teachable Machine library for images.To use the library, just add the following scripts at the bottom of the html file.Alternatively, you could also install the library from NPM.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script
    src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js">
</script>

The following code helps in toggling the webcam button and declares some variables.The URL constant is set to the model link.

const URL = "https://teachablemachine.withgoogle.com/models/N58PlX_GN/";

let model, webcam, newlabel, canvas, labelContainer, maxPredictions, camera_on = false, image_upload = false;

function useWebcam() {
    camera_on = !camera_on;

    if (camera_on) {
        init();
        document.getElementById("webcam").innerHTML = "Close Webcam";
    }
    else {
        stopWebcam();
        document.getElementById("webcam").innerHTML = "Start Webcam";
    }
}

async function stopWebcam() {
    await webcam.stop();
    document.getElementById("webcam-container").removeChild(webcam.canvas);
    labelContainer.removeChild(newlabel);
}

Now,we can load the model and perform the prediction and display the class having highest probability.

// Load the image model and setup the webcam
async function init() {

    const modelURL = URL + "model.json";
    const metadataURL = URL + "metadata.json";

    // load the model and metadata
    model = await tmImage.load(modelURL, metadataURL);
    maxPredictions = model.getTotalClasses();

    // Convenience function to setup a webcam
    const flip = true; // whether to flip the webcam
    webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
    await webcam.setup(); // request access to the webcam
    await webcam.play();
    window.requestAnimationFrame(loop);

    // append element to the DOM
    document.getElementById("webcam-container").appendChild(webcam.canvas);

    newlabel = document.createElement("div");
    labelContainer = document.getElementById("label-container");
    labelContainer.appendChild(newlabel);
}

async function loop() {
    webcam.update(); // update the webcam frame
    await predict(webcam.canvas);
    window.requestAnimationFrame(loop);
}

async function predict(input) {
    // predict can take in an image, video or canvas html element
    const prediction = await model.predict(input);

    var highestVal = 0.00;
    var bestClass = "";
    result = document.getElementById("label-container");
    for (let i = 0; i < maxPredictions; i++) {
        var classPrediction = prediction[i].probability.toFixed(2);
        if (classPrediction > highestVal) {
            highestVal = classPrediction;
            bestClass = prediction[i].className;
        }
    }

    if (bestClass == "Fresh Banana" || bestClass == "Fresh Apple" || bestClass == "Fresh Orange") {
        newlabel.className = "alert alert-success";
    }
    else {
        newlabel.className = "alert alert-danger";
    }

    newlabel.innerHTML = bestClass;
}

Uploaded image based prediction

The second way of providing input is by uploading an image. I've used a little bit of jQuery code to do this.Essentially, once a user selects an image file using the input element on the client side and clicks load,the reference to the file is obtained using a click handler and a new Parse file is created.A Parse file lets us store application files in the cloud that would be too large to store in a object.Next,I created a canvas element to display the saved image and used it to predict the class of the uploaded image.

$(document).ready(function () {
    $("#loadBtn").on("click", async function () {

        labelContainer = document.getElementById("label-container");

        image_upload = !image_upload;

        if (!image_upload) {
            labelContainer.removeChild(newlabel);
            document.getElementById("uploadedImage").removeChild(canvas);
        }

        const fileUploadControl = $("#fruitimg")[0];
        if (fileUploadControl.files.length > 0) {

            const modelURL = URL + "model.json";
            const metadataURL = URL + "metadata.json";

            // load the model and metadata
            model = await tmImage.load(modelURL, metadataURL);
            maxPredictions = model.getTotalClasses();

            const file = fileUploadControl.files[0];

            const name = "photo.jpg";
            const parseFile = new Parse.File(name, file);

            parseFile.save().then(async function () {
                //The file has been saved to the Parse server

                img = new Image(224, 224);
                img.crossOrigin = "Anonymous";
                img.addEventListener("load", getPredictions, false);
                img.src = parseFile.url();

            }, function (error) {
                // The file either could not be read, or could not be saved to Parse.
                result.innerHTML = "Uploading your image failed!";
            });
        }
        else {
            result.innerHTML = "Try Again!";
        }
    });
});

In the below code a canvas is created to display the image and prediction is done using the same predict function that was used for webcam.

async function getPredictions() {

    canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = "224";
    canvas.height = "224";
    context.drawImage(img, 0, 0);
    document.getElementById("uploadedImage").appendChild(canvas);

    newlabel = document.createElement("div");
    labelContainer = document.getElementById("label-container");
    labelContainer.appendChild(newlabel);

    await predict(canvas);
}

That's it! Any fruit can now be tested for defects.

Conclusion

I had a lot of fun making this project and learnt a lot doing it.I hadn't used SashiDo nor Teachable machine before so this was a nice opportunity for me to learn about them.I hope you enjoyed reading this.I think this is a pretty simple project, so if you have some time and are interested, go ahead and try building it yourself!

Github link

Github repo
Check out the project here

References

SashiDo - https://www.sashido.io/en/
Teachable Machine - https://teachablemachine.withgoogle.com/
Teachable Machine library - https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
Dataset - https://www.kaggle.com/sriramr/fruits-fresh-and-rotten-for-classification
Parse SDK - https://github.com/parse-community/Parse-SDK-JS
Parse File - https://docs.parseplatform.org/js/guide/#creating-a-parsefile

DEV Community: Nishka Kotian

Building a Venue Booking System using Parse and SashiDo : Part-2

Table Of Contents

Displaying venues on the dashboard

Filtering venues based on location

Display venue details

Sending booking request to owner

Approve requests

Deleting past bookings

Conclusion

Useful links

Building a Venue Booking System using Parse and SashiDo : Part-1

Table Of Contents

Parse Server and SashiDo

Javscript Promises

Project overview

Database

User Registeration and Login

Adding a venue

Conclusion

Useful links

Fruit quality detection web app using SashiDo and Teachable Machine

Table Of Contents

Trainable Machine

SashiDo

Frontend

Webcam based prediction

Uploaded image based prediction

Conclusion

Github link

References