Pancake Store - User

Initial Requirements

The high-level requirement for this app were:

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

• view a list of available menu items

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

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

o place an order

• enter contact & delivery details

• a screen which allows the user to view

o all orders, ideally, split by status

• receive notifications of “one off discount on a given day”

• receive order status update notifications

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:

Settings – this page will allow the user to enter the following attributes: “contact e-mail”, “delivery address”, “post code” and “contact phone number”. To be able to place an order all fields will be required. The user will be notified if their delivery post code is outside of the catchment area for home delivery, if it is, they will be able to place an order but will only have the option of “pick-up from store”.

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”) and a tab showing the selected items for the current order. Each menu item card will consist of a “menu item title”, “menu item description”, “menu item cost” and a flag for “is vegetarian”. Tapping the “add to basket” icon adds the item to the current order. The current order tab will show a list of menu items added to the basket.

Orders (Header) – this page will show the users’ orders, a top tab bar will split the orders into the various order status (“pending”, “in progress”, “on way”, “delivered” and “closed”). Each order header card will consist of a “status” image, “order #”, “order date” and “delivery date”. Taping a card will navigate the user to the order detail page.

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”.

Solution Details

Home

On opening the app, the home page will allow the user to either a) navigate to the store’s menu, where a new order can be placed, b) view all orders by status or c) navigate to the settings page where the user can update their contact & delivery details. 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”, “drinks”, these represent the various menu types, there is also a tab “current order”, which shows details of menu items added to the current order. The “current order” tab icon also shows a counter representing the number of items added to the basket.

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

Tapping the “add to basket” trailing icon will add the menu item to the current order.

On the orders tab, the user will see all menu items that have been added to the order, for each menu item, the user will be able to increase or decrease the required quantity. Tapping the “delete” trailing icon will remove the item from the order.

Increasing or decreasing the quantity required or removing an item from the order will update the unit cost & total order cost accordingly.

At the bottom of the order tab, the total order cost is displayed, also at the bottom of the page is an “clear order” and “place order” button. Tapping the “clear order” button removes all menu items from the order, tapping the “place order” button displays the “order confirmation” dialog.

On the “order confirmation” dialog, the user will have the option of changing the delivery method or cancelling the order. The delivery method defaults to “home delivery” if the user has completed the delivery information within the settings tab. If the user is outside of the delivery catchment area, the only option available will be “store pick-up”.

Orders (Header)

From the home page, tapping the orders button, the user will navigate to the “order headers” 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 individual orders, the cards will have the following attributes: “order status” image, “order #”, “order date” and “delivery date”.

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

Orders (Details)

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

The next section shows a row of status images, each representing the various order lifecycle status, 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 included menu item of the order shows the following attributes: “menu item name” and “quantity required”.

Technical stuff

• All menu data displayed in the app is retrieved from a document collection within firebase, only menu items flagged as “is available = yes” are displayed.

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

• A unique firebase key is associated to a user on completion of the attributes within the settings page.

• The ability to place an order is restricted to only be available during store opening times, so, if the store is considered “closed”, a message is displayed on the home page and the “add to basket” trailing icon is hidden from the menu item cards.

• 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.

• When the “admin app” sets a discount offer, the corresponding document within the firebase collection is updated, this in turn triggers a cloud function which triggers a cloud message that notifies the user a discount will be automatically applied to an order placed on the specified discount date.

• If the app is in the foreground when a cloud message is received, a dialog is displayed informing the user of the relevant information (order status update or discount offer), if the app is either in the background or not open, then the message will be handled by the device notification system.

Icons made by freepik from www.flaticon.com