DEV Community

Cover image for Redis Hackathon Submission for Whatstore App
Davide Del Papa
Davide Del Papa

Posted on

Redis Hackathon Submission for Whatstore App

Overview of My Submission

Link to the Repo

Whatstore is an ecommerce store. However, this is no ordinary web-based store, Whatstore is a chatbot based on Meta Whatsapp Business platform.

This has been chosen because many people do not have (easy) access to a computer, or the possibility (and willingness) to browse for an e-commerce, even on mobile. Think for example at the elderly. Instead, many people know and use IM apps, such as Whatsapp, to communicate with friends and family. Many still save their local groceries, pharmacy, or pizza store phone numbers, and text them often to order their groceries. During the Covid 19 pandemic, this has been for many the best option to deal with the rules and needs of social distancing.

However, many times the little stores are not able to attend all the customers by phone. This actually happened to me one evening, when I phoned four different pizza stores to try to get an order, and had to phone each repeatedly, until at last one of them attended me. This brought me to think that orders could be more efficient if we could just use a chatbot. But, where I am located not every grocery is even on socials, let alone have the funds or time necessary to set up such an interface. It came to my mind that everybody here around passes a lot of time answering to texts (and here around Whatsapp is the most used platform), so why not to take advantage of this?

This is the spark that brought me to implement this project.
For the project I actually created data for a fake pizza store, set in a touristic location nearby (where I actually am sure there are no pizza stores, just not to incur in some copyright violations). So when you install this app, you can actually start to order my favorite pizzas!

Submission Category:

Microservice Mavens

Language Used

Node.js

Link to Code

GitHub logo davidedelpapa / whatstore

Whatsapp Business Chat Store

Whatstore

Whatsapp Business app to implement a chat-based e-commerce store

App: Screenshot

How it works

How the data is stored:

Data is stored as JSON objects with the RedisJSON module.

  • The e-commerce data is stored in various keys
    • A store:info key holds all the info related to the store
    • product:* keys hold data for the products
    • category:* keys hold data for the products' categories
    • user:* keys hold information about the user-sessions, like the cart
    • purchase:* keys hold information about completed purchases

How the data is accessed:

  • Store info
    • Get store info: JSON.GET store:info $
    • Set store info: JSON.SET store:info $ {store-info-objec}
  • Product info
    • Get product info: JSON.GET product:{product-id} $
    • Set product info: JSON.SET product:{product-id} $ {product-info-objec}
  • Product category info
    • Get category info: JSON.GET category:{category-id} $
    • Set category info: JSON.SET category:{category-id} $ {category-info-objec}
    • Get all categories: KEYS category:*
  • User information
    • Get user info: JSON.GET user:{user-phone-number} $
    • Set user info: JSON.SET user:{user-phone-number} $ {user-info-objec}

Additional Resources / Info

I'm using Node.js, NPM, ngrok, express and whatsappcloudapi_wrapper, as well as pdfkit, uuid, node-fetch v.2, loglevel.

And of course, Redis and RedisJSON

This is the actual workflow of the app:

  • First you need to ping the business number from you number, it does not matter what you write. It will answer with a choice to either view the products or to speak to a human.

App: Init Message

  • If you choose "Speak to a human" it sends a vCard for the customer care contact; otherwise the app will present to you the product categories choice.

App: Select Product Categories

  • Now you can choose a category and then be presented with a choice of products in that category.

App: Select Product

  • Here we selected the classic pizzas, and now we are going to select a "Salame(Pepperoni)"
  • We are presented with the details of our selection, and we can now choose to add the product to the cart or browse for some more products. Let's add it to the cart.

App: Add to Cart

  • We can now review the cart, before checking out, or browse some more products to add. Let's review and checkout!

App: Review Cart

  • We can also modify the cart before checkout

App: checkout

  • After checking out, the app notifies the seller of a new incoming order, and presents to the buyer some options to either again talk to a human or browse more products to shop.

We have accomplished our purchase!

  • On the seller side, the seller number gets notified of the incoming order, together with all the info needed to prepare the order. The seller has the possibility to send the buyer a notification of when the order will be ready, or fulfill the order right away. Finally the seller can review all pending orders.

App: Seller side

App: Seller side again

  • At any time the seller can ping their app to check how many pending order are present and view each of them.
  • Finally, when the order is fulfilled (ideally when the buyer comes to pick up the orders), the app saves the purchased order to the database as a purchase order. This could be used for statistics.

Collaborators

Just me, davidedelpapa - Davide Del Papa.

Top comments (0)