Final Major Project — Finishing Retailer Menu Editor

I wanted to complete the retailers menu editor to a level where they can fully construct their menu and make changes to it. This will give me the begining of the structure I require to lead towards ordering being implemented. I’ve indetified that getting the ordering functionality complete is the most important function I need to work on as it gives my application purpose and makes it able to be shown at the degree show. Once I have got to that point I can work on refinements like getting the application to run smoothly and adding in CSS animations to make it feel more flowing like a native app rather than a website, potentially putting other features like the loyalty scheme on the back burner to have an app that feels more refined to showcase. Potentailly aspects like the loyalty scheme could still be implemented in time but I’ve decided it could be a good move to treat them as less of a priority.

Editing the menu on the retailer application isn’t something I have wireframed and this has led me to all kinds of challenges, without a concise goal of what I’m working towards makes it harder to prioritise what needs to be done to get it working and making design choices on the fly is less than ideal, however now I am speaking in hindsight as I have already implemented it but for other aspects i’m going to go through the full wireframing process for each page to ensure that I know what I’m setting out to achieve. I began working on the menu item editing system by using the base design that is displayed on the consumer app, giving the retailer a view similar to the consumer is important as it allows them to see what the consumer will see when using the app rather than guessing.

The consumer app of menu items

I first implemented a form to add new items to the menu I put this in the form of a bar at the bottom of the category page and included fields of the items name and price with an add submit button to add the new item to the database, getting this functionality and having it add to firebase was simple enough as I now have a lot of experience in other areas of the app of implementing forms and getting them to add to firebase however where the difficulting comes in is showing the updated item list once the user has submitted the new item. To show the new item list at first I was going to use and on “child_added” listener using firebase however this listener not only refreshes for the item I’ve added but refreshes the whole item list for that category which means the entire list is dupliucated, instead what I did is having the trigger created by a successful adding of the item to firebase, this in turn clears the div in which the menu items are stored and calls them again to remove duplicates. Then I needed to add editing functionality to these menu items so people can change the item name, price or remove the item completely, to do this I budged the price over a bit further from the right hand screen and added the edit pencil icon I’ve been using in orther places in the app, when this happens the app turns the menu item into a form using the exisitng menu item text as a placeholder for the form options, as the form takes up less spage than the text did it also allows me scope to add in the remove button on the right hand side next to the edit button, the user can re-enter the information then press the edit button again to make the cahnges or press the remove button to just delete the element, the way it does this is removing the original entry and creating a new one rather than editing the item directly as updating the value s was causing issues because it you change the name of the element essentially it changes the ID as the menu item name is the ID, the remove button simply deletes it, then in the same way as before once the user is done editing it refreshes the list by clearing the div and reloading it. I hit bug along the way as I essentially didn’t think through what I was trying to do and plan before I did it however I’m happy wioth the effect in the end and it works. There are still bugs that need fixing as the menu items sometimes dissapear for some reason but it’s implemented to the point that I can begin the ordering process from the consumer app using the menu details added from the retail app.

the menu editing system in the retailer app