Pancake Store - Admin

Initial Requirements

The high-level requirement for this app were:

My pancake store requires an app that allows the store to perform the following actions:

• maintain a list of menu items

o split by “savoury”, “sweet”, “desserts” and “drinks”

o attributes “title”, “description”, “unit cost”, “is vegetarian” indicator and “is available” indicator

• a screen which allows the store to view

o all orders, ideally, split by order status

o update order status, either at the order header level or when viewing the order details

o automatically notify the customer when an order status is updated

• a screen to maintain & notify customers of “one off discount on a given day” offers

• receive notifications when new orders are placed

Proposed Solution

To address the requirements, a flutter app which utilises Google’s Firebase suite will be built, the app will utilise the following Firebase modules: “Firestore”, “Cloud Functions”, and “Firebase Cloud Messaging”.

The app will have the following pages:

Menu – this page will show the store’s menu, a top tab bar will split the menu into the required menu types (“savoury”, “sweet”, “desserts” and “drinks”). Each menu item card will consist of a “menu item title”, “menu item description”, “menu item cost”, a flag for “is vegetarian” and a flag for “is available”. Tapping the card will allow the selected item to be edited, tapping either the “is vegetarian” flag or the “is available” flag will toggle the assigned value between Yes & No.

Orders (Header) – this page will show all received orders, a top tab bar will split the orders into the status types (“pending”, “in progress”, “on way”, “delivered” and “closed”). Each order header card will consist of a “status” image, “order #”, “order date”, “delivery date” and a “contact details” image. Taping a card will navigate the user to the order details page, tapping the “status” image will update the order status accordingly and tapping the “contact details” image will show the contact & delivery details of the given order.

Orders (Details) – this page will show the individual line items for the selected order, at the top of the page will be the order header information, below that is a row of status icons and below that, on the lower half of the page will include details of the selected menu item added to the order, this will include “menu item name” and “required quantity”. Tapping a given status icon will update the order status accordingly.

Solution Details

Home

On opening the app, the home page will allow the user to either a) navigate to the menu, where existing menu items can be maintained or new menu items added, b) view all orders by status or c) define a new discount. There is also a button which will navigate the user to the information page.

Menu

From the home page, tapping the menu button, the user will navigate to the “menu” page.

The page has a top tab bar which contains the tabs “savoury”, “sweet”, “desserts” and “drinks”, these represent the various menu types.

Each tab will contain cards representing the menu items, the cards will have the following attributes: “menu item title”, “menu item description”, “menu item cost”, “is vegetarian” indicator and “is available” indicator.

Tapping a card will allow the user to edit the menu item details, taping the “is vegetarian” or “is available” flag will toggle the assigned value between Yes & No.

Tapping the “delete” icon will allow the user to delete a menu card.

Tapping the “add” icon in the app bar will allow the user to create a new menu item.

Orders (Header)

From the home page, tapping the orders button, the user will navigate to the “order header” page.

The page has a top tab bar which contains the tabs “pending”, “in progress”, “on way”, “delivered” and “closed”, which represents the various order lifecycle status.

Each tab will contain cards representing the orders, the cards will have the following attributes: “order status” image, “order #”, “order date”, “delivery date”, “contact details” image.

Tapping the leading “order status” image will allow the user to move the order status along the order lifecycle. Tapping the trailing “contact details” image will show the user the related contact & delivery details for the order.

Taping an order card will navigate the user to the order details page.

Orders (Details)

The order details page is split into three main sections, at the top of the page is the order details containing the attributes: “order #”, “order date”, “delivery date”.

The next section shows a row of status images, each representing the various order lifecycle status, by tapping an image the user can move the order status along the order lifecycle. Status images which are colour show that status has passed, and outline status images are pending.

The last section of the page shows the order line items, a card for each item of the order shows the following attributes: “menu item name” and “quantity required”.

Setting Discount

The “apply discount” dialogue allows the user to enter a numeric value and select a future date from a date picker.

Technical stuff

• All menu data in the app is stored in a document collection within firebase.

• All order header & corresponding details data in the app are stored in a document collection within firebase.

• When setting a discount, fields of an existing document within firebase are updated, this update will trigger a cloud function which in turn triggers cloud messaging to send a message to all users (those who have been associated a key).

• When an order is placed, the order is stored in a document collection within firebase, the adding of a document to the collection triggers a cloud function which in turn triggers a cloud message that notifies the “admin app” that a new order has been placed.

• When the order status is updated by the “admin app”, this updates the corresponding document within the firebase collection, this in turn triggers a cloud function which triggers a cloud message that notifies the user the order status has been updated.

Icons made by freepik from www.flaticon.com