Blazor How To: Server App with GPS


GPS capability was added to the Blazor Server app using AspNetMonsters.Blazor.Geolocation. Whilst there was a few issues as covered in an Issues post on GitHub, this post encompasses those issues. I have further improved that solutions covered in that post.

The previous post in this series documented a simple Blazor Server Web App that that logs user details into an Azure SQL database using Entity Framework Core. It also uses QRCodeNetCore to generate a QRCode for the site’s homepage. The Telerik Blazor Web Grid is used for presenting data. This post covers the addition of the GPS capability for including the GPS location of users when they post their information.

The App Summary

djaus2/AEGateLog on GitHub: “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.”

About GPS use

The Web App is public. Anyone can make a submission. Athlete’s submissions though would normally only be done at the gate to the Athletics Centre. By logging their GPS location we can filter out spurious entries posted from afar. That way, if there is a need for COVID-19 tracing, then those with the correct GPS location can be prioritised for action.

Useage

When athletes click [Accept] on the main page, they navigate to the Log page. After the page is rendered, a call is made to the GPS API to get the current GPS data. This does pop up an acceptance message as is normally required. The GPS coordinates are then determined if the response is positive. Logging occurs though with or without the GPS acceptance.

The Nuget Packages

As per the project file:

  <ItemGroup>
    <PackageReference Include="AspNetMonsters.Blazor.Geolocation" Version="0.5.0-preview1" />
    <PackageReference Include="QRCoderNetCore" Version="1.0.0" />
    <PackageReference Include="Telerik.UI.for.Blazor" Version="2.14.1" />
  </ItemGroup>

The first one is the one for the GPS capability

The repository for the package is here on GitHub

Using the GPS Package

My amended version of enabling it follows.

  1. In your Blazor app, add the AspNetMonsters.Blazor.Geolocation NuGet package

     Install-Package AspNetMonsters.Blazor.Geolocation -IncludePrerelease

  2. In your Blazor app’s Startup.cs, register the ‘LocationService’.

     public void ConfigureServices(IServiceCollection services)
 {
     ...
     services.AddScoped<LocationService>();
     ...
 }

    Note change from AddSingleton to AddScoped

  3. Now you can inject the LocationService into any Blazor page (usually near the top of the page) and use it like this:

     @using AspNetMonsters.Blazor.Geolocation
 @inject LocationService  LocationService

  4. Add some code to display location

     <h3>You are here</h3>
 <div>
 Lat: @location?.Latitude <br/>
 Long: @location?.Longitude <br />
 Accuracy: @location?.Accuracy <br />
 </div>

  5. In the code

     @code
 {
     Location location = null;

     protected async Task GetLocation()
     {
         location = await LocationService.GetLocationAsync();
         this.StateHasChanged();
     }

     protected override async Task OnAfterRenderAsync(bool first)
     {
         if (first)
         {
             base.OnAfterRender(first);
             await GetLocation();
         }
     }

     protected override async Task OnInitAsync()
     {
         // No location stuff here
     }
 }

The GetLocation needs to not occur until the page is rendered.
Also note that the StateHasChanged call to make sure the values are displayed.

An Example

An example

Nb: The usaeage changes as above have been pushed to the repository for inclusion in the repository ReadMe.

 TopicSubtopic
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor
<  Prev:   Blazor