Blazor: A Server only Web App


A light weight quick response Blazaor Server app for logging participants entry to a sporting facility for COVID-19 contact tracing. Uses a QR Code generated by the site to navigate users to the site.

Situation

My Athletics Club has been given the green light by our municipal council to resume formal training at our Athletics Track on the condition that we track all athletes who attend during our designated training times. We need a light weight phone web app that logs athletes name and mobile phone number as they enter the track area through a web form.

The Solution

A Blazor, server only, web app hosted as an Azure Web App using an Azure SQL database to log athletes name and number via their phone. The URL of the site is communicated by a QRCode that the app can generate.

A SQLite database hosted by the Blazor server was used during initial developement. In finishing the app, this was changed to an Azure SQL database to facilitate backup and access separate from the app.

The Outcome

We first used it tonoight (24/6/2020) and most attendees were able to quickly get onto the app site using the QRCode staione at the gate to the track. Most only took less than a minute to do so. About 80 athletes were able to log their attendance in about one hour. Probably helped by a Facebook post about this facility, they all seemed quite cooperative in using the logging app.

Discussion

The Blazor Server (only) app was used as it is light weight with respect to the users’ phones. Unlike a Blazor WebAssembly there is no payload tp upload to the user’s phone. THe form only requires the user input and submission of two simple strings. An off-the-shelf form submission site such as SurveyMonkey or a Web Excel spreadsheet could have been used. But by using the Blazor Server software there is a better capability to customize the interaction. Relevant COVID-19 information can be presented. Other information such as terms, conditions and privacy can be made available. Also, athletes can be informed as what happens with their data from here when they log their attendance (Contact Tracing if needed, deletion after 28 days etc.)

The Code

djaus2/AEGateLog on GitHub

Authentication

Rather than using a standard Idenity service for authentication a simpler approach was used

  • No pages are subject to authentication
  • Most pages are linked on the shared Sidebar, some aren’t though.
  • Pages that are meant to be accessed by athletes but only after they perform some actions require an integer parameter that is checked at page navigation to teh page.
    • If the parameter is not present or is incorrect, navigation automatically returns to the main page

e.g.:Navigation from to the main page. The requirement is that they only get access to the page if they press [Accept] on the Acceptanve (main) page:

On the Acceptance page in Button OnClick handler:

navigationManager.NavigateTo("/Log/123");

At the top of the target razor page:

@page "/Log"
@page "/Log/{PinParam:int}"

Declare that parmeter:

@code {
    [Parameter]
    public int? PinParam { get; set; }

Verify the parameter in OnInitialized (or OnInitializedAsync):

    protected override void OnInitialized()
    {
        int Pin = 123;
        PinParam = CurrenPinParamtCount ?? 1;
        if (PinParam != Pin)
        {
            navigationManager.NavigateTo("/");
        }
    }

Page Navigation

  • The QRCode link directs to the main page, (the Acceptance page).
    • That presents the terms that they need to accept.
  • The Log page to submit their details is only navigated to after they press the [Accept] button.
  • On valid submit (non-blank name, valid mobile number):
    • Navigation is to the Thank You page.
  • Various information pages are available that are listed on the sidebar
  • There is a hidden (not listed on the sidebar) Manage Page” for Admins to login with.
    • Login is simple, a fixed username and password are checked
    • If correct then a controller variable is set and navigation is directed to the FetchData page.
  • The FetchData page requires the controller variable to be set. If not then navigation is redirected to the main page.
    • This page enables the management of submitted data
    • Any navigation away from this page clears the controller variable
  • The QRCode page is publicly available but hidden as its not on the SideBar.
    • Anyone “in-the-know” can get it. No login, no parameter.
      No impact if others get access toit though.

    Customising the Web App

    • Only parameters are The BaseURL of the web app and the SQL Server connections string
      • Both are set for local virtaul IIS Express and MS SQL Server Express (local).
      • For deployment need to set these for teh deployment context.
 TopicSubtopic
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor How To
<  Prev:   Blazor Gym Booking App