What's On app

Initial Requirements

The high-level requirements from a local business were:

I am in the process of opening a pub and we intend to have many themed events; I need an app that allows the following actions: -

• can maintain a list of events

• send notifications to user of new or amended events

• allow users who have downloaded the app to:

o view all events grouped by category

o identify an event(s) they are attending

o view only the events they are attending

o defining which, if any, notifications they require

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:

Home –this page will show the buttons which will allow the user to navigate to the require category of events they are interested in. There will also be a button to allow the user to navigate to a list of events they have flagged as “attending”. Also from the home page, the user will be able to select which, if any, notifications they wish to receive.

My Events – this page will show all events the user has flagged as attending. The page is a list view with sticky headers showing the events grouped by date, within the list, each expanding event card will consist of a “event image”, “event name”, “event date”, “event location” and expanding the card will show the “event description”. Double taping the “event image” will toggle the “attending” flag accordingly.

Category Events – this page will show all events in the selected category. Each expanding event card will consist of a “event image”, “event name”, “event date”, “event location” and expanding the card will show the “event description”. Double taping the “event image” will toggle the “attending” flag accordingly.

Admin Events – this page will show all events the user has flagged as “attending”. The page has a list view with sticky headers showing the events grouped by date, within list each expanding event card will consist of a “event image”, “event name”, “event date”, “event location” and expanding the card will show the “event description”. Double taping the “event image” will toggle the “attending” flag accordingly. Swiping the card allows the user to either edit or delete an event.

Settings – this page will allow the user to toggle on/off the receiving of notifications. If set to “on”, then the user can refine which specific event notifications they wish to receive.

Solution Details

Home

On opening the app, the user is taken to the home page which will contain four main “event category” buttons and a “my events” button. Tapping one of the main event buttons navigates the user to a list of events for the selected category. Tapping the “my events” button navigates the user to a list of events that have been flagged as “attending”. Also, from the home page, the user can navigate to the “settings” page to select which, if any, notifications they require.

My Events

From the home page, tapping one of the “my events” buttons, the user will navigate to the “events” page.

The page is a list view with sticky headers showing the events grouped by date, which contains a list of events which the user has flagged as attending, each expanding card represents an event, the cards will have the following attributes: “event name”, “event date”, “event location”, and “event description”, the leading image will represent the selected event category.

Double tapping the leading image will toggle the attending flag between Yes & No.

Category Events

From the home page, tapping one of the “event category” buttons, the user will navigate to the “events” page.

The page contains a list of events for the selected event category, each expanding card represents an event, the cards will have the following attributes: “event name”, “event date”, “event location”, and “event description”, the leading image represents the event category.

Double tapping the leading image will toggle the attending flag between Yes & No.

Admin Events

From the home page, double-tapping the page title, the user will navigate to the “admin events” page.

The page contains a list of all events, each card represents an event, the expanding cards will have the following attributes: “event name”, “event date”, “event location”, and “event description”, the leading image will represent the selected event category.

Swiping the card to the right allows the user to edit a given event and swiping the card to the left allows the user to delete an event.

From the app bar, the user can create a new event, to create an event, the user must provide, “event name”, “event location”, “event description”, from a date picker, the user can select a future “event date” and from the radio buttons, select an “event type”.

Settings

From the home page, tapping the settings icon, the user will be navigated to the “settings” page.

The page allows the user to toggle between allowing and not allowing notifications, if the user allows notifications, then they can refine which event category notifications are required.

Technical stuff

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

• When a user first opens the app, a new user document is created in a corresponding collection within firebase, no information relating to the individual user is stored, firebase generates a random key which is held within the app preferences.

• When toggling an event between attending and not attending, fields of an existing user document within firebase are updated.

• When a new event is created, the event is stored in a document collection within firebase, the adding of a document triggers a cloud function which:

o creates a corresponding entry within each user’s event collection

o triggers a cloud message that notifies the relevant users a new event has been added, only users who have requested notifications for the specific event category will be notified

• When an existing event is modified, the event collection document within firebase is updated, the updating of a document triggers a cloud function which:

o updates the corresponding entries within each user’s event collection

o triggers a cloud message that notifies the relevant users an existing event has been modified, only users who have requested notifications for the specific event category will be notified

• When an existing event is deleted, the event collection document within firebase is deleted, the deleting of a document triggers a cloud function which:

o removes the corresponding entries within each user’s event collection

o triggers a cloud message that notifies the relevant users an existing event has been removed, only users who have requested notifications for the specific event category will be notified

Icons made by freepik from www.flaticon.com