Blazor: Web App for Logging Restaurant Attendance


As a staged relaxation of COVID-19 restrictions, some governments allow restaurants and other public facing businesses to reopen with restrictions of the number in attendance at a time and with logging clients who attend. A Blazor web app has been developed to efficiently and simply facilitate the logging of patrons attendance at a restaurant using a QR Code attached to each table as the initiator of the logging.

This post discusses a web app for logging customers attendance at a restaurant on a per table basis. Attached to each table is a QR code specific to that table and the restaurant which when scanned by a phone QR Code reader, takes the patron to the app’s website with the restaurant’s ID and the table number as parameters to the URL. Those two things are prefilled in on the submission form page. The patron then just enters their mobile number and name which only needs to be a first name but can be a full name if I wish and then I submit. This is then logged in an Azure SQL Database.

The purpose of the web app is for COVID-19 contact tracing. Its function is to log patrons attendance at a restaurant on a venue, date, time, location and table basis so that if there is notification of a positive sCOVID-19 virus test buy another patron patron on that date and in that time zone and possibly in a table nearby ,then the patron can be contacted so that they can told to get a COVID-19 test .

The app is able to generate QR codes specific to each page table and restaurant. This is based upon a previous web app that was used to log athletes’ entry at the gate to an athletics track for similar purposes. The previous project on GitHub: djaus2/AEGateLog.

What are the requirements for an app a web app for logging attendance at a restaurant?

  • Generate a QR Code that can be attached to each table.
  • The QR Code codifies the URL for the web app.
  • The app is able to handle multiple venues hence the database the venue is also codified into the QR Code.
  • There is never too much information so the table number is also codified into the QR Code.
  • When scanned by a QR Reader, as most modern phones have this, the scan prompts the user to open the web app URL, with the venue ID and table number as URL parameters.
  • The first page, Acceptance, shows the venue name as a label, with the Venue Id a hidden parameter
    • It shows the table number
    • There is a brief explanation of the purpose of this logging on that page.
    • There is an [Acceptance] button that takes the user to the form to be submitted, the Log page, passing the Venue Id and table number as parameters
  • The Log page has the Venue ID and Table number as hidden form inputs but displays the Venue Name and Table Number as Labels.
    • The Venue Id and Table Number, although to be submitted by the form, are effectively readd-only inputs.
    • The user enters their name and mobile number and [Submits] this.
    • A first name is all that is required but a full name can be given.
    • The Mobile number is validated before submission.
  • Upon successful submission, the information is stored in the database and user is presented with thanks page which explains what happens next if anything.
    • The important thing here is to explain what to do if they themselves test positive to the virus within the time zone of having attended this venue .
  • There’s also another page for adding new venues which includes a form for submitting the venue name, location, phone number etc.
    • This page would normally be protected by an Administrator password

There is also an administrative protective password protected page for viewing submitted client attendances. For security reasons and privacy this page would ordinarily not be viewed except when there is a positive virus test impacting upon this venue. One other scenario is for a 28 day clearance of submissions. In the conditions for presented to patrons there is an indication that all entries are deleted after 28 days and so this keeps face with that.

The QR code generation page he is also administratively password protected. On this page there is a form for selecting the venue from the list of the news the news as in the database and for entering a cezve list of table numbers. I’m pressing submit the cure type the QR code labels for each table a generated on the page in a table in a web page table with two labels per row. When viewed in a browser, the labels can be printed four or six to a page. They can then be separated , laminated and then affixed to the tables. It may or may not be desirable for the venue nominee to be able to generate and print these labels. If so, a second level of administration on a per venue basis may be needed.

The site will also contain general information about the COVID-19 virus with links 2 government sites for information and issues with the virus, as well as local restrictions.

Implementation

As per the previous athletes logging app, the web app is implemented as a .NET Core C# Blazor web server app . For simplicity and no in user baggage it is implemented as a server only app and not as a Blazor WASM app. The app is hosted on Azure as a Web App and uses an Azure Microsoft SQL database as the information repository.

An implementation of the web is current publicly available on Azure here. You can submit phantom logging and then view them. You can also delete entries. On the QR Code page you select a venue and set the table list and generate the QR Codes. The URL is though fixed to the site.

The Pages

Acceptance Page
The first (Acceptance) page.

Log Page
The Log page.

Log Page
The QR Codes page.

A Sample QR Code
A Sample QR Code.

Further Refinements

The following is a list of “thought bubbles” for the web app.

  • Allow for one person at a table to submit for the whole table at the restaurant.
    • That would enter their name and phone number as the principle information as well as list of the other peoples names (as a separate entity) and the number of people on the table for validation. They would need to undertake to contact the others if required because of contact tracing.
    • This has been implemented.
  • Send an SMS message his confirmation of this submission do these submitted mobile number
    • This has not been implemented.
  • Provide a formal mechanism for person who subsequently test positive to submit this to the app for action.
    • This has not been implemented.

Coming

More Blazor How Tos as used in this app.

 TopicSubtopic
  Next: > Blazor-IoT
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: >  
<  Prev:   Blazor How To