Appietaria: the Happietaria-App
Appietaria is a webapplication developed for Happietaria Enschede 2017 - a pop-up restaurant that raises money for children in Dafur (Sudan), to improve their education. The purpose of Appietaria is to create more awareness about this topic among the visitors of Happietaria. This is done with a little gamification: in Appietaria, visitors can save money for virtual products that are required for good education.
How does it work?
Every table has its unique ID, with which the visitors can authenticate themselves in the web-application. Once gained access, they have the option to enable push-notifications. And that's it! When food and drinks are ordered, virtual money is added to their Appietaria account. This money can be used for investing in products that are required for good education, such as a table, good water supply and a classroom. All the products together represent the money required to help a child in Dafur, thus once a table has invested in every single product, they have raised enough money to give a child a solid eduction.
A large screen in the restaurant shows the general progress by listing the items that received investment. It has an open connection with the server, which allows realtime notifications through a pop-up when a new investment is made.
Web Push Notifications
An exciting feature is the native push notification, enabled by the Notifications API which is implemented in Chrome and Firefox. It enables a website to send a push notification to the user, even when the browser is not active (in case of a mobile device). In Appietaria this is used for notifying the user when money is added to their account, so they don't need to check their mobile device regularly (remember, we are in a restaurant).
In order to use Appietaria, visitors can authenticate themselves using an unique table-id which they can find on their table. In order to save paper, this table-id is initiated once. However, this also allows visitors from a previous night to login by using the same table-id. To prevent this, a second code is asked when authenticating: an evening depending code. Visitors can find this code on the large screen.
Laravel and AngularJS are used as respectively back- and frontend framework. Since the application requires a continuous internet connection, I decided to let Laravel handle the routing and filtering, which leaves Angular to only provide a smooth user interaction. Laravel provides a neat solution for event driven client-notifications (using Pusher and Laravel Echo) which is used for the large screen. On the other hand, the technology behind native push notifications is still at an early stage, so I had to write my own wrapper.