https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-an-sms-dashboard-with-blazor-webassembly/Blog_Blazor-WebAssembly_1200x600.png

Erstellen eines SMS-Dashboards mit Blazor WebAssembly

Zuletzt aktualisiert am November 5, 2020

Lesedauer: 8 Minuten

Falls Sie meinen Twitter-Feed verfolgt haben meinem Twitter-Feedverfolgt haben, haben Sie vielleicht bemerkt, dass ich parallel dazu einige Demo-Apps mit SMS entwickelt habe, mit Blazor und reinem MVC.

Es gibt drei Hauptfunktionen, über die wir nachdenken müssen, wenn wir über SMS sprechen.

  1. Versenden von SMS-Nachrichten

  2. Empfang von SMS-Nachrichten

  3. Empfang von Zustellbestätigungen von Ihren gesendeten SMS

Jetzt, wo diese Dinge aus dem Weg geräumt sind, schien es ein guter Zeitpunkt zu sein, um etwas Komplizierteres zu bauen. Genau das werden wir in diesem Tutorial tun.

Zielsetzungen

Wir werden Folgendes verwenden Blazor WebAssembly, MVC, das Entity Framework Coreund SignalR, um eine Single-Page-App (SPA) zu erstellen.

Diese Anwendung wird natürlich in der Lage sein, SMS-Nachrichten zu versenden. Sie wird auch in der Lage sein, SMS-Nachrichten zu empfangen; jede empfangene Nachricht wird mit dem Entity Framework gespeichert und mit SignalR direkt an unsere Client Applications weitergeleitet. Das Gleiche gilt für alle empfangenen Empfangsbestätigungen. Dieses Projekt mag ein wenig ehrgeizig erscheinen, aber ich verspreche Ihnen, dass es das nicht ist. Lassen Sie uns also ohne weitere Umschweife unser Abenteuer beginnen.

Direkt zum Code springen

Wenn Sie den Code für diese Demo sehen möchten, können Sie ihn auf GitHub.

Voraussetzungen

  • Wir benötigen Visual Studio 2019, um Blazor WebAssembly zu verwenden.

  • Wir werden Folgendes verwenden Ngrok zum Testen

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Ngrok laufen lassen

Ich werfe alles auf localhost:5000Wenn wir ngrok ausführen, können wir öffentlich auf localhost:5000.

ngrok http --host-header=localhost:5000 5000

Notieren Sie sich die URL, unter der ngrok läuft. In meinem Fall läuft er auf http://fb09abd3c106.ngrok.io. Diese URL wird in Zukunft die Basis-URL für meine Webhooks sein.

Erstellen Sie Ihre Lösung

Lassen Sie uns unsere Lösung erstellen:

  1. Öffnen Sie Visual Studio

  2. Klicken Sie auf Neue App erstellen

  3. Blazor App auswählen

  4. Benennen Sie Ihre Anwendung VonageSmsDashboard

  5. Klicken Sie auf Erstellen

  6. Blazor WebAssembly-Anwendung auswählen

  7. Aktivieren Sie das Feld ASP.NET Core gehostet unten rechts in der Ecke

  8. Klicken Sie auf Erstellen

Create a new Blazor ApplicationCreate a new Blazor Application

Nachdem Sie Ihr Projekt erstellt haben, werden Sie eine Lösung mit drei Projekten haben:

  1. VonageSmsDashboard.Client

  2. VonageSmsDashboard.Server

  3. VonageSmsDashboard.Shared

Abhängigkeiten installieren

Sie müssen die folgenden NuGet-Pakete zu Ihren jeweiligen Projekten hinzufügen.

VonageSmsDashboard.Server

Vonage
Microsoft.AspNetCore.SignalR.Core
Microsoft.EntityFrameworkCore.Sqlite
Microsoft.EntityFrameworkCore.Design

VonageSmsDashboard.Client

Microsoft.AspNetCore.SignalR.Client

VonageSmsDashboard.Shared

System.ComponentModel.Annotations

Unser Modell aufbauen

Wir werden EntityFramework Core mit SQLite verwenden, um unsere Datenbank unterzubringen. Man könnte einfach die Datenstrukturen aus dem Vonage SDK als Modell verwenden, aber da wir WebAssembly verwenden, würde das bedeuten, dass wir das gesamte Nexmo Csharp SDK an den Client-Browser senden müssten, was eine Vervierfachung der Größe des Wasms bedeuten würde. Um das zu vermeiden, fügen wir Plain Old CLR Objects (POCOs) zu unserem VonageSmsDashboard.Shared Projekt hinzufügen. Fügen Sie die folgenden Klassen zu diesem Projekt hinzu:

public class MessageBase
 {
     [Key]
     public string MessageId { get; set; }
     public string To { get; set; }
     public string MessageTimestamp { get; set; }
     public string Msisdn { get; set; }
 }
 public class DeliveryReceiptModel : MessageBase
 {
     public string Status { get; set; }
 }
 public class InboundSmsModel : MessageBase
 {
     public string Text { get; set; }
 }
 public class OutboundSms
    {
        [Key]
        public string MessageId { get; set; }
        public string To { get; set; }
        public string From { get; set; }
        public string Status { get; set; }
        public string MessagePrice { get; set; }
    }

Migration und Datenbank erstellen

Wechseln Sie zu VonageSmsDashboard.Server und fügen Sie die Datei SmsContext.cs zum Projekt hinzu. Fügen Sie eine DbSet für unsere Inbound Messages und Dlrs. Überschreiben Sie dann die OnConfiguring Methode, um auf eine Sqlite-Datenquelle zu verweisen.

public DbSet<InboundSmsModel> InboundSms { get; set; }

public DbSet<DeliveryReceiptModel> Dlrs { get; set; }

public DbSet<OutboundSms> OutboundSms { get; set; }

protected override void OnConfiguring(DbContextOptionsBuilder options)
   => options.UseSqlite("Data Source=VonageSms.db");

Ihr Projekt schnell erstellen, oder dotnet ef Ihre abhängigen Pakete entfernt, wenn Sie die Migration durchführen. Navigieren Sie nun in Ihrer Konsole zum VonageSmsDashboard.Server und führen Sie Folgendes aus:

dotnet tool install --global dotnet-ef
dotnet ef migrations add InitialCreate
dotnet ef database update

Dies führt zur Ausgabe von Migrations\SmsContextModelSnapshot.cs und Migrations\A_TIMESTAMP_InitialCreate.cs Nachdem das Modell erstellt wurde, fügen wir nun unseren SignalR Hub hinzu.

SMS-Hub hinzufügen

In unserem VonageSmsDashboard.Server Projekt fügen Sie einen Ordner namens Hubsund fügen Sie dann eine SmsHub.cs Datei zu diesem Ordner hinzu. Der SmsHub soll die Datei Hub.

public class SmsHub : Hub{}

Middleware konfigurieren

Wir müssen einige Teile der Middleware für uns selbst einrichten, um uns bei der Einrichtung von Entity/SignalR zu helfen.

Unter Startup.cs finden Sie die ConfigureServices Methode und fügen Sie die folgenden zwei Zeilen hinzu:

services.AddSignalR();
services.AddDbContext<SmsDashboardContext>();

Als nächstes fügen Sie in der Configure Methode, fügen Sie ein endpoints.MapHub("/smshub") zu dem UseEndpoints Delegat hinzu, das nun wie folgt aussieht:

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    endpoints.MapFallbackToFile("index.html");
    endpoints.MapHub<Hubs.SmsHub>("/smshub");
});

Controller bauen

Nachdem wir unser Modell erstellt und die gesamte Middleware eingerichtet haben, bauen wir unseren Controller. In VonageSmsDashboard.Server klicken Sie mit der rechten Maustaste auf den Controllers Ordner -> Hinzufügen -> Controller -> API Controller - Empty -> Hinzufügen -> SmsController.cs

Abhängigkeiten injizieren

Lassen Sie uns unsere Abhängigkeiten in den SMS-Controller einfügen. Wir brauchen ein IConfiguration um unsere API_KEY/API_SECRET. Wir brauchen ein IHubContext um die Verbindung mit unseren Clients zu verwalten. Und wir brauchen ein SmsContext die den Zugang zu unserer Datenbank darstellt. Injizieren Sie sie alle in den Konstruktor des Controllers wie folgt:

private readonly IConfiguration _config;
private readonly IHubContext<Hubs.SmsHub> _hubContext;
private readonly SmsContext _dbContext;

public SmsController(IConfiguration config, IHubContext<Hubs.SmsHub> context, SmsContext dbContext)
{
   _hubContext = context;
   _config = config;
   _dbContext = dbContext;
}

SendSms-Aktion hinzufügen

Wir fügen nun eine Aktion zum Senden einer SMS hinzu; diese nimmt ein OutboundSms-Objekt, zieht unseren ApiKey/Geheimnis aus der Konfiguration, sendet eine SMS, fügt dann die Message Id, den Preis und den Zeitstempel zu unserem Request-Objekt hinzu und gibt es an den Requestor zurück.

[HttpPost]
[Route("[controller]/sendsms")]
public async Task<ActionResult<OutboundSms>> SendSms([FromBody] OutboundSms sms)
{
   var apiKey = _config["API_KEY"];
   var apiSecret = _config["API_SECRET"];
   var credentials = Credentials.FromApiKeyAndSecret(apiKey, apiSecret);
   var request = new SendSmsRequest { To = sms.To, From = sms.From, Text = sms.Text };
   var client = new SmsClient(credentials);
   var response = client.SendAnSms(request);
   sms.MessagePrice = response.Messages[0].MessagePrice;
   sms.Status = response.Messages[0].Status;
   sms.MessageId = response.Messages[0].MessageId;
   _dbContext.OutboundSms.Add(sms);
   await _dbContext.SaveChangesAsync();
   return sms;
}

Get-Methoden für Model hinzufügen

Als Nächstes fügen wir Get-Methoden für jeden unserer Modelltypen hinzu, die sie einfach aus der Datenbank auslesen und an den Anfragenden zurückgeben werden.

[HttpGet]
[Route("[controller]/getInboundSms")]
public ActionResult<List<InboundSmsModel>> GetInboundSms()
{
   return _dbContext.InboundSms.ToList();

}

[HttpGet]
[Route("[controller]/getDlr")]
public ActionResult<List<DeliveryReceiptModel>> GetDlr()
{
   return _dbContext.Dlrs.ToList();
}

[HttpGet]
[Route("[controller]/getOutboundSms")]
public ActionResult<List<OutboundSms>> GetOutboundSms()
{
   return _dbContext.OutboundSms.ToList();
}

Hinzufügen einer Route zur Bearbeitung eingehender SMS und DLR

Jetzt brauchen wir eine Route, um die SMS- und DLR-Nachrichten zu verarbeiten, die bei unserer Anwendung eingehen. Diese Anfragen ziehen den Body aus dem Stream und deserialisieren ihn in ein Inbound-SMS- und DLR-Objekt. Dann werden die kritischen Felder auf unsere Modellobjekte abgebildet. Dann wird es an die SmsHub-Clients weitergegeben. Zum Schluss wird die neue Inbound/Dlr in unserer Datenbank gespeichert.

[HttpPost]
[Route("webhooks/inbound-sms")]
public async Task<IActionResult> ReceiveSms()
{
   using (StreamReader reader = new StreamReader(Request.Body, Encoding.UTF8))
   {
       var json = await reader.ReadToEndAsync();
       var inboundSms = JsonConvert.DeserializeObject<InboundSms>(json);
       var inboundSmsModel = new InboundSmsModel { Msisdn = inboundSms.Msisdn, To = inboundSms.To, MessageId = inboundSms.MessageId, Text = inboundSms.Text, MessageTimestamp = inboundSms.MessageTimestamp };
       await _hubContext.Clients.All.SendAsync("ReceiveMessage", inboundSms);
       _dbContext.InboundSms.Add(inboundSmsModel);
       await _dbContext.SaveChangesAsync();
   }
   return NoContent();
}

[HttpPost]
[Route("webhooks/dlr")]
public async Task<IActionResult> ReceiveDlr()
{
   using (StreamReader reader = new StreamReader(Request.Body, Encoding.UTF8))
   {
       var json = await reader.ReadToEndAsync();
       var dlr = JsonConvert.DeserializeObject<DeliveryReceipt>(json);
       var dlrModel = new DeliveryReceiptModel { Msisdn = dlr.Msisdn, To = dlr.To, MessageId = dlr.MessageId, Status = dlr.StringStatus, MessageTimestamp = dlr.MessageTimestamp };
       await _hubContext.Clients.All.SendAsync("ReceiveDlr", dlrModel);
       _dbContext.Dlrs.Add(dlrModel);
       await _dbContext.SaveChangesAsync();
   }
   return NoContent();
}

Erstellen des Frontends

Das letzte, was wir tun müssen, ist die Erstellung des Frontends. Normalerweise würde dies bedeuten, dass wir HTML/js/CSS zusammenbringen, bis wir alles genau so haben, wie es uns gefällt. Das Schöne an Blazor wasm ist, dass wir nur über eine Art von Einheit nachdenken müssen - unsere Razor-Komponenten. Erstellen wir einen Components Ordner im VonageSmsDashboard.Client Verzeichnis.

Caching deaktivieren

Zunächst müssen wir Dinge aus unserem Controller dynamisch laden, also müssen wir das Caching der HttpClient. Öffnen Sie Program.cs und ersetzen den builder.Services.AddTransient Aufruf zu:

builder.Services.AddTransient(sp =>
{
    var client = new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) };
    client.DefaultRequestHeaders.CacheControl = new System.Net.Http.Headers.CacheControlHeaderValue { NoCache = true };
    return client;
});

Erstellen einer DeliveredMessage-Komponente

Im Ordner VonageSmsDashboard.Client\Components Ordner fügen Sie eine neue Razor-Komponente "DeliveredMessages" hinzu, in der wir DLRs anzeigen werden, sobald sie in unserer App ankommen. Fügen Sie am Kopf dieser Komponente using-Anweisungen für die Microsoft.AspNetCore.SignalR.Client und VonageSmsDashboard.Shared Namespaces hinzu. Dann injizieren Sie einen NavigationManager und einen HttpClient. Da wir außerdem einen HttpClient verwenden werden, um den HubConnection verwenden, um den Push von SignalR zu verwalten, müssen wir IDisposable implementieren, um es danach aufzuräumen.

@using Microsoft.AspNetCore.SignalR.Client
@using VonageSmsDashboard.Shared;
@inject NavigationManager NavigationManager
@inject HttpClient Http
@implements IDisposable

Kopfzeile und Tabelle hinzufügen

Nun, da wir unsere Abhängigkeiten haben, können wir den visuellen Teil unserer Komponente hinzufügen. Es wird einfach eine Tabelle sein, die aus der Liste der Nachrichten, die wir vom Server erhalten, gefüllt wird.

<div class="x-display-table">
<h2>Delivered Messages</h2>

<table class="table" id="dlrList">
    <thead>
        <tr>
            <th>To</th>
            <th>From</th>
            <th>Message Id</th>
            <th>TimeStamp</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        @for (var i = _messages.Count - 1; i >= 0; i--)
        {
            var message = _messages[i];
            <tr>
                <td>@message.Msisdn</td>
                <td>@message.To</td> @*note the to = the number you sent from*@
                <td>@message.MessageId</td>
                <td>@message.MessageTimestamp</td>
                <td>@message.String</td>
            </tr>
        }
    </tbody>

</table>
</div>

Initialisierungslogik und SignalR-Verbindung hinzufügen

Jetzt müssen wir ein paar Felder hinzufügen _hubConnection und _messages hinzufügen, um unsere SignalR-Hub-Verbindung bzw. die DLR-Nachrichten zu speichern. Wir müssen einen Override hinzufügen zu OnInitializedAsync hinzufügen, um die Initialisierung der HubConnection mit einem Delegaten zu initialisieren, der die Nachrichtenliste aktualisiert, und eine anfängliche Aktualisierung der Nachrichtenliste mit den aktuell verfügbaren DLRs durchzuführen. Wir müssen auch eine Dispose Methode hinzufügen, um die HubConnection zu entsorgen, wenn die Komponente abgeschlossen ist. Fügen Sie all dies in den Codeblock ein, der wie folgt aussehen sollte:

@code {
    private HubConnection _hubConnection;
    private List<DeliveryReceipt> _messages = new List<DeliveryReceipt>();

    protected override async Task OnInitializedAsync()
    {
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/SmsHub"))
            .Build();
        _hubConnection.On<DeliveryReceipt>("ReceiveDlr", (dlr) =>
        {
            _messages.Add(dlr);
            StateHasChanged();
        });

        await _hubConnection.StartAsync();
        var response = await Http.GetAsync("/sms/getDlr");
        var json = await response.Content.ReadAsStringAsync();
        _messages.AddRange(Newtonsoft.Json.JsonConvert.DeserializeObject<List<DeliveryReceipt>>(json));
    }


    public bool IsConnected => _hubConnection.State == HubConnectionState.Connected;

    public void Dispose()
    {
        _ = _hubConnection.DisposeAsync();
    }
}

Komponente für eingehende SMS erstellen

Als nächstes bauen wir die InboundSms Komponente - wir beginnen auf die gleiche Weise, wie wir mit der DeliveredMessages Komponente, erstellen eine Razor-Komponente namens InboundSms und fügen ihr die Abhängigkeiten hinzu.

@using Microsoft.AspNetCore.SignalR.Client
@using VonageSmsDashboard.Shared
@inject NavigationManager NavigationManager
@inject HttpClient Http
@implements IDisposable

Dann fügen wir eine sehr ähnlich aussehende Tabelle hinzu, in der die Daten von unserem Webhook angezeigt werden.

<div class="x-display-table">
<h2>Received MessagesMessages</h2>

<table class="table" id="messageList">
    <thead>
        <tr>
            <th>From</th>
            <th>To</th>
            <th>Time</th>
            <th>Message Id</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody>
        @for (var i = _messages.Count - 1; i >= 0; i--)
        {
            var message = _messages[i];
        <tr>
            <td>@message.Msisdn</td>
            <td>@message.To</td>
            <td>@message.MessageTimestamp</td>
            <td>@message.MessageId</td>
            <td>@message.Text</td>
        </tr>
        }
    </tbody>

</table>
</div>

Schließlich aktualisieren wir unseren Codeblock, um die eingehenden Nachrichten bei der Initialisierung der Komponente abzurufen und die Hub-Verbindung einzurichten. Wenn die Komponente abgeschlossen ist, wird sie die Hub-Verbindung auflösen.

@code {
    private HubConnection _hubConnection;
    private List<InboundSmsModel> _messages = new List<InboundSmsModel>();

    protected override async Task OnInitializedAsync()
    {
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/SmsHub"))
            .Build();
        _hubConnection.On<InboundSmsModel>("ReceiveMessage", (sms) =>
        {
            _messages.Add(sms);
            StateHasChanged();
        });
        await _hubConnection.StartAsync();
        _messages = await Http.GetFromJsonAsync<List<InboundSmsModel>>("/sms/getinboundsms");
    }

    public bool IsConnected => _hubConnection.State == HubConnectionState.Connected;

    public void Dispose()
    {
        _ = _hubConnection.DisposeAsync();
    }
}

SendSms-Komponente erstellen

Nun müssen wir das Frontend für den Versand von SMS-Nachrichten erstellen. Wir werden eine separate Komponente erstellen, die wir MessageSenderErstellen Sie eine Komponente mit diesem Namen, fügen Sie einen HttpClient ein und binden Sie das gemeinsame Projekt ein.

@inject HttpClient Http
@using System.Text.Json
@using VonageSmsDashboard.Shared

Als nächstes werden wir ein OutboundSms Objekt an drei Eingabefelder, a to, from, und text Feld. Außerdem zeigen wir unsere letzte gesendete Nachricht id exists an. Wir werden sie anzeigen.

To:
<input id="to" @bind="@Message.To" placeholder="To Number" class="input-group-text" />
From:
<input id="from" @bind="@Message.From" placeholder="From Number" class="input-group-text" />
Text:
<input id="text" @bind="@Message.Text" placeholder="Text" class="input-group-text" />
<br />
<button class="btn btn-primary" @onclick="SendSms">Send SMS</button>

@if (LastMessageId != null)
{
    <br />
    <h2>Most Recently Sent Message: @LastMessageId</h2>

}

Schließlich müssen wir die Nachricht senden. Wir senden eine Anfrage an unseren Controller, ziehen die Message Id aus der Antwort und speichern sie in LastMessageId.

@code {
    OutboundSms Message { get; set; } = new OutboundSms();
    string LastMessageId { get; set; }

    private async Task SendSms()
    {
        var response = await Http.PostAsJsonAsync<OutboundSms>("/sms/sendsms", Message);
        var json = await response.Content.ReadAsStringAsync();
        LastMessageId = JsonSerializer.Deserialize<OutboundSms>(json).MessageId;
    }
}

Layout des Frontends

Nun wollen wir das Frontend gestalten. Glücklicherweise haben wir alles in Komponenten aufgeteilt, so dass wir nur noch die VonageSmsDashboard.Client.Components in die index.razor Datei einfügen und die drei neuen Komponenten zusammen in ein div einfügen.

@page "/"
@using VonageSmsDashboard.Client.Components

    <div style="height: 100%">
        
        
        
    </div>

Etwas Stil hinzufügen

Fügen wir noch ein wenig Stil in die wwwroot\css\app.css Datei hinzufügen, damit das Ganze ein bisschen schöner aussieht:

.x-display-table {
    width: 90%;
    max-height: 400px;
    overflow-y: auto;
}

Webhooks konfigurieren

Das letzte, was wir vor dem Testen tun müssen, ist die Konfiguration unserer Webhooks. Wir müssen die Webhooks auf die Endpunkte richten, an denen wir unsere eingehenden Nachrichten und DLRs empfangen wollen. Zuvor haben wir einen ngrok-Befehl ausgeführt, der ngrok in http://fb09abd3c106.ngrok.io - die zufällige Zeichenkette vor ngrok.io anders sein wird. Der Pfad, auf den wir für unsere eingehenden SMS-Nachrichten zeigen müssen, lautet http://fb09abd3c106.ngrok.io/webhooks/inbound-sms und http://fb09abd3c106.ngrok.io/webhooks/dlr für DLR-Nachrichten. Wir müssen nun diese URLs festlegen und die HTTP-Methode auf POST-JSON in der Dashboard

Configuring the webhook settings in the Vonage dashboardConfiguring the webhook settings in the Vonage dashboard

Konfigurieren Sie die App

Das letzte, was wir vor dem Testen tun müssen, ist das Hinzufügen unserer API_KEY, und API_SECRET zur Konfiguration hinzuzufügen. Öffnen Sie VonageSmsDashboard.Server\appsettings.json und fügen Sie Ihren API-Schlüssel und Ihr API-Geheimnis hinzu. Ihre Konfiguration wird dann etwa so aussehen:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "API_KEY": "API_KEY",
  "API_SECRET": "API_SECRET"
}

Hafen aktualisieren

Wir haben beim Einrichten von ngrok auch angenommen, dass wir auf Port 5000 lauschen. Sie können dies einstellen, indem Sie die Datei properties\launchsettings.json Datei öffnen und den Eintrag applicationUrl in http://localhost:5000 für IIS express ändern, wenn Sie IIS express verwenden, und den SSL-Port auf 0 ändern. Oder, wenn Sie Kestrel verwenden, können Sie den https://localhost:5001 Endpunkt löschen.

Test

Jetzt sind Sie bereit zum Testen. Starten Sie die Anwendung in IIS Express oder Kestrel, und schon kann es losgehen. Sie werden ein Dashboard sehen, das ungefähr so aussieht:

Example of what the final dashboard will look likeExample of what the final dashboard will look like

Einpacken

Es ist erstaunlich, was die Kombination aus Blazor und den Vonage-APIs mit etwas HTML und einem Hauch von C#-Code alles möglich macht. Zum Überblick: Wir haben eine funktionsreiche SPA-App mit NULL JavaScript in wenigen Minuten erstellt.

Ressourcen

  • Der Code für diese Demo befindet sich in GitHub

  • Wenn Sie einen Blick auf meine anderen Artikel auf dem Vonage Entwickler-Blog lesen, werden Sie viele weitere tolle Beispiele für die gemeinsame Nutzung von .NET und den Vonage APIs finden.

Teilen Sie:

https://a.storyblok.com/f/270183/384x384/73d57fd8eb/stevelorello.png
Steve LorelloVonage Ehemalige

Ehemaliger .NET Developer Advocate @Vonage, polyglotter Software-Ingenieur, AI/ML