Oefening: een REST-service gebruiken met HttpClient

20 minuten

Als onderdeel van de app die technici gebruiken bij bezoeken aan de klantsite, moet u een functie toevoegen waarmee een technicus de details van elektrische onderdelen kan opzoeken. Deze informatie wordt bewaard in een database en wordt geopend via een REST-webservice. U bent ook gevraagd om een interface te bieden waarmee een beheerder de details van onderdelen in de database kan maken, verwijderen en wijzigen met behulp van dezelfde REST-webservice.

In deze oefening implementeert u de REST-webservice in Azure en controleert u vervolgens of u er toegang toe hebt via een webbrowser. Vervolgens voegt u functionaliteit toe aan een bestaande app die gebruikmaakt van de REST-webservice om de details van elektrische onderdelen op te halen, toe te voegen, te verwijderen en bij te werken.

U voert deze oefening uit met behulp van de Azure-sandbox.

Tip

U kunt de knop Kopiëren gebruiken om opdrachten te kopiëren naar het klembord. Als u wilt plakken, klikt u met de rechtermuisknop op een nieuwe regel in de Cloud Shell-terminal en selecteert u Plakken of gebruikt u de sneltoets Shift+Insert (⌘+V in macOS).

De Onderdelen REST-webservice implementeren

Voer in het Cloud Shell-venster de volgende opdracht uit om de opslagplaats met de code voor deze oefening te klonen, inclusief de Rest-webservice Parts:
```
git clone https://github.com/microsoftdocs/mslearn-dotnetmaui-consume-rest-services
```

Ga naar de map Consume-REST-services :

cd mslearn-dotnetmaui-consume-rest-services/src

Voer de volgende opdracht uit om de webservice Onderdelen te implementeren met behulp van de Azure Cloud Shell-sandbox. Met deze opdracht wordt de service beschikbaar via een unieke URL. Noteer deze URL wanneer deze wordt weergegeven. U configureert de app om verbinding te maken met de webservice met behulp van deze URL.
```
bash initenvironment.sh
```

De code voor de webservice onderzoeken

Notitie

U voert de rest van deze oefening uit op uw lokale ontwikkelcomputer.

Open op uw computer een opdrachtpromptvenster en kloon de opslagplaats voor deze oefening. De code bevindt zich in de opslagplaats net-learn-consume-rest-services .
```
git clone https://github.com/microsoftdocs/mslearn-dotnetmaui-consume-rest-services
```
Notitie

Het is raadzaam om de inhoud van de oefening te klonen of te downloaden naar een kort mappad, zoals C:\dev, om te voorkomen dat door de build gegenereerde bestanden de maximale padlengte overschrijden.
Ga naar de map src\webservice\PartsServer in uw kloon van de opslagplaats en open de PartsServer.sln oplossing met Visual Studio of de map in Visual Studio Code. Deze oplossing bevat een kopie van de code voor de webservice die u in de vorige procedure in Azure hebt geïmplementeerd.
Vouw in het venster Solution Explorer de map Modellen uit. Deze map bevat twee bestanden:
- Part.cs. De klasse Deel vertegenwoordigt een onderdeel zoals geleverd door de REST-webservice. De velden bevatten de onderdeel-id, onderdeelnaam, onderdeeltype, de beschikbaarheidsdatum (toen het onderdeel voor het eerst werd opgegeven) en een lijst met leveranciers. De eigenschap Href retourneert de relatieve URI van het onderdeel. Een REST-client kan deze URI gebruiken om te verwijzen naar dit specifieke onderdeel in de REST-webservice. De eigenschap Leveranciers retourneert de lijst met leveranciers van het onderdeel als een tekenreeks.
- PartsFactory.cs. De klasse PartsFactory initialiseert de lijst met onderdelen die door de service worden geleverd, met behulp van een kleine set vastgelegde waarden. In de praktijk worden deze gegevens opgehaald uit een database.
Vouw in het venster Solution Explorer de map Controllers uit. Deze map bevat de volgende bestanden:
- PartsController.cs. De klasse PartsController implementeert de web-API voor de service. Het bevat methoden waarmee een clienttoepassing een lijst met alle onderdelen kan ophalen (Ophalen), de details van een specifiek onderdeel vindt op basis van de onderdeel-id (de overbelaste versie van Ophalen), de details van een onderdeel (Put) bijwerken, een nieuw onderdeel aan de lijst toevoegen (Posten) en een onderdeel uit de lijst verwijderen (Verwijderen).
- LoginController.cs. De LoginController-klasse implementeert een eenvoudige vorm van verificatie voor de webservice. Een app moet een HTTP GET-aanvraag verzenden naar deze controller, die een autorisatietoken retourneert. Dit autorisatietoken wordt gebruikt om de aanvragen te verifiëren die naar de PartsController worden verzonden.
- BaseController.cs. De BaseController-klasse bevat de logica die wordt gebruikt voor het verifiëren van aanvragen. De klasse PartsController neemt deze klasse over. Als de client methoden probeert aan te roepen in de klasse PartsController zonder een geldig verificatietoken op te geven, retourneren de methoden een HTTP 401-antwoord (niet-geautoriseerd).

De code voor de .NET MAUI-client-app onderzoeken

In deze module wordt de .NET 8.0 SDK gebruikt. Zorg ervoor dat .NET 8.0 is geïnstalleerd door de volgende opdracht uit te voeren in de opdrachtterminal van uw voorkeur:

dotnet --list-sdks

Uitvoer die vergelijkbaar is met het volgende voorbeeld wordt weergegeven:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Zorg ervoor dat er een versie wordt vermeld die begint met 8 . Als er geen wordt vermeld of de opdracht niet wordt gevonden, installeert u de meest recente .NET 8.0 SDK.

Sluit de oplossing PartsServer en open de Oplossing PartsClient in de map src\client\PartsClient in de gekloonde opslagplaats. Deze oplossing bevat een gedeeltelijke implementatie van een .NET MAUI-client-app die gebruikmaakt van de PartsServer-webservice .
Vouw in het venster Solution Explorer de map Gegevens uit. Deze map bevat de code voor twee klassen:
- PartsManager.cs. De klasse PartsManager biedt de methoden die de client-app gebruikt om te communiceren met de REST-webservice. Deze klasse is momenteel onvolledig; U voegt de benodigde code toe tijdens deze oefening. Als u klaar bent, maakt de Methode GetClient verbinding met de REST-webservice. De methode GetAll retourneert een lijst met onderdelen uit de REST-webservice. Met de methode Toevoegen wordt een nieuw onderdeel toegevoegd aan de lijst met onderdelen die worden beheerd door de REST-webservice. De methode Update wijzigt de details van een onderdeel dat is opgeslagen door de REST-webservice en met de methode Delete wordt een onderdeel verwijderd.
- Part.cs. In de klasse Part wordt een onderdeel gemodelleerd dat is opgeslagen in de database. Hiermee worden eigenschappen weergegeven die een toepassing kan gebruiken voor toegang tot de velden PartID, PartName, PartAvailableDate, PartType en PartSuppliers . De klasse biedt ook een hulpprogrammamethode met de naam SupplierString die een toepassing kan gebruiken om een opgemaakte tekenreeks op te halen die de leveranciersnamen bevat.
Vouw in het venster Solution Explorer de map Pagina's uit. Deze map bevat de markeringen en code voor twee pagina's:
- PartsPage.xaml. Deze pagina maakt gebruik van een CollectionView-indeling met een DataTemplate om de details weer te geven van de onderdelen die beschikbaar zijn als lijst. DataTemplate maakt gebruik van gegevensbinding om de gegevens te verbinden die worden weergegeven met de onderdelen die zijn opgehaald uit de webservice. U kunt een rij in CollectionView selecteren om een deel in de AddPartPage te bewerken of u kunt de knop Nieuw onderdeel toevoegen selecteren om een nieuw onderdeel toe te voegen.
- AddPartPage.xaml. Op deze pagina kunnen gebruikers de details voor een nieuw onderdeel invoeren en opslaan. Gebruikers kunnen de onderdeelnaam, het type onderdeel en een initiële leverancier opgeven. De onderdeel-id en de beschikbare datum van het onderdeel worden automatisch gegenereerd.
Vouw in het venster Solution Explorer de map ViewModels uit . Deze map bevat twee klassen: AddPartViewModel.cs en PartsViewModel.cs. Dit zijn de weergavemodellen voor hun respectieve pagina's en bevatten eigenschappen en logica die de pagina nodig heeft om gegevens weer te geven en te bewerken.

Voor de REST-service moet u zich eerst aanmelden om een autorisatietoken op te halen. Er is geen gebruikersverificatie. U roept eerst een specifiek eindpunt aan om een autorisatietoken op te halen en vervolgens stuurt u het token terug naar de server op elke volgende aanvraag in de HTTP-header.

Open het bestand PartsManager.cs in de map Gegevens .
Voeg statische velden BaseAddress en URL toe zoals gedefinieerd in het volgende codefragment aan de klasse PartsManager . Vervang de tekst-URL HIER door de URL van de REST-webservice die u eerder hebt genoteerd:
```
public class PartsManager
{
    static readonly string BaseAddress = "URL GOES HERE";
    static readonly string Url = $"{BaseAddress}/api/";
    ...
}
```
Voeg het volgende veld toe aan de klasse, na het url-veld . Dit veld bevat het autorisatietoken dat wordt geretourneerd wanneer de gebruiker zich aanmeldt:
```
private static string authorizationKey;
```
Zoek de Methode GetClient . Deze methode genereert momenteel een NotImplementedException-uitzondering . Vervang de bestaande code in deze methode door de volgende code. Met deze code wordt een HttpClient-object gemaakt en wordt vervolgens een aanvraag verzonden naar het aanmeldingseindpunt van de REST-webservice. De service moet reageren met een bericht dat het autorisatietoken bevat. Deserialiseer dit token en voeg het toe als standaardheader voor autorisatieaanvragen voor volgende aanvragen die worden verzonden met behulp van het HttpClient-object :
```
private static async Task<HttpClient> GetClient()
{
    if (client != null)
        return client;

    client = new HttpClient();

    if (string.IsNullOrEmpty(authorizationKey))
    {                
        authorizationKey = await client.GetStringAsync($"{Url}login");
        authorizationKey = JsonSerializer.Deserialize<string>(authorizationKey);
    }

    client.DefaultRequestHeaders.Add("Authorization", authorizationKey);
    client.DefaultRequestHeaders.Add("Accept", "application/json");

    return client;
}
```

Een GET-bewerking uitvoeren om informatie voor onderdelen op te halen

Zoek in het bestand PartsManager.cs de methode GetAll . Dit is een asynchrone methode die een opsommingslijst met onderdelen retourneert. Deze methode is nog niet geïmplementeerd.
In deze methode verwijdert u de code waarmee de uitzondering NotImplementedException wordt gegenereerd.
Controleer of het apparaat een internetverbinding heeft met behulp van de Connectivity klasse. Als het internet niet aanwezig is, retourneer dan een lege List<Part>waarde.
```
if (Connectivity.Current.NetworkAccess != NetworkAccess.Internet)
    return new List<Part>();
```
Roep de GetClient-methode aan om een HttpClient-object op te halen waarmee u kunt werken. Houd er rekening mee dat GetClient asynchroon is, dus gebruik de wachtoperator om het object vast te leggen dat door deze methode wordt geretourneerd.
Roep de Methode GetStringAsync van het HttpClient-object aan en geef de basis-URL op om een matrix met onderdelen op te halen uit de REST-webservice. De gegevens worden asynchroon geretourneerd als een JSON-tekenreeks.

Deserialiseer de JSON-tekenreeks die door deze methode wordt geretourneerd in een lijst met partobjecten met behulp van de methode JsonSerializer.Deserialize. Retourneer deze lijst naar de beller.

De voltooide methode moet er als volgt uitzien:

public static async Task<IEnumerable<Part>> GetAll()
{
    if (Connectivity.Current.NetworkAccess != NetworkAccess.Internet)
        return new List<Part>();

    var client = await GetClient();
    string result = await client.GetStringAsync($"{Url}parts");

    return JsonSerializer.Deserialize<List<Part>>(result, new JsonSerializerOptions
        {
            PropertyNameCaseInsensitive = true,
        });                     
}

Bouw de app en voer deze uit. Wanneer de app wordt gestart, wordt de pagina Lijst met onderdelen weergegeven en wordt er een lijst met onderdelen weergegeven die zijn opgehaald door de methode GetAll . In de volgende afbeelding ziet u de app die wordt uitgevoerd op Android:
Wanneer u klaar bent met bladeren door de gegevens, sluit u de app en keert u terug naar Visual Studio of Visual Studio Code.

Een POST-bewerking uitvoeren om een nieuw onderdeel toe te voegen aan de database

Zoek in de klasse PartsManager de methode Toevoegen . Deze methode bevat parameters voor de onderdeelnaam, een leverancier en het onderdeeltype. De methode is asynchroon. Het doel van de methode is om een nieuw onderdeel in de database in te voegen en een onderdeelobject te retourneren dat het zojuist gemaakte item vertegenwoordigt.
Verwijder de bestaande code in de methode.
Controleer of het apparaat een internetverbinding heeft met behulp van de Connectivity klasse. Als het internet niet aanwezig is, retourneer dan een lege Partwaarde.
```
if (Connectivity.Current.NetworkAccess != NetworkAccess.Internet)
    return new Part();
```
Maak een nieuw onderdeelobject . Vul de velden in met de doorgegeven gegevens:
- Stel het veld PartID in op een lege tekenreeks. Deze id wordt gegenereerd door de REST-webservice.
- Maak een nieuwe lijst voor de naam van de leverancier.
- Stel het veld PartAvailableDate in op DateTime.Now.
- Haal een HTTP-client op uit de GetClient-methode .
```
var part = new Part()
{
    PartName = partName,
    Suppliers = new List<string>(new[] { supplier }),
    PartID = string.Empty,
    PartType = partType,
    PartAvailableDate = DateTime.Now.Date
};
```
Roep de GetClient-methode aan om een HttpClient-object op te halen waarmee u kunt werken.
Maak een HttpRequestMessage object. Dit object wordt gebruikt om de aanvraag te modelleren die naar de webservice wordt verzonden. Start deze met parameters die aangeven met welk HTTP-werkwoord moet worden gebruikt en met welke URL van de webservice moet worden gecommuniceerd.
```
var msg = new HttpRequestMessage(HttpMethod.Post, $"{Url}parts");
```
U moet een nettolading verzenden naar de webservice met de informatie over het onderdeel dat moet worden gemaakt. Deze nettolading wordt geserialiseerd naar JSON. De JSON-nettolading wordt toegevoegd aan de HttpRequestMessage.Content eigenschap en wordt geserialiseerd met de JsonContent.Create methode.
```
msg.Content = JsonContent.Create<Part>(part);
```
Verzend het bericht nu naar de webservice met de HttpClient.SendAsync functie. Deze functie retourneert een HttpResponseMessage object met informatie over de bewerking op de server. Zoals HTTP-antwoordcodes en informatie die is doorgegeven vanaf de server.
```
var response = await client.SendAsync(msg);
response.EnsureSuccessStatusCode();
```
Let op: in het voorgaande wordt de response.EnsureSuccessStatusCode methode gebruikt. Hiermee wordt een fout gegenereerd als er iets anders dan een HTTP-statuscode van 2xx wordt geretourneerd.

Als de webservice informatie retourneert, zoals een object dat in JSON is geserialiseerd, kunt u deze uitlezen HttpResponseMessage. Vervolgens kunt u deSerialiseren van de JSON met behulp van JsonSerializer.Deserialize.

var returnedJson = await response.Content.ReadAsStringAsync();

var insertedPart = JsonSerializer.Deserialize<Part>(returnedJson, new JsonSerializerOptions
        {
            PropertyNameCaseInsensitive = true,
        });

Retourneer ten slotte het nieuwe ingevoegde deel.
```
return insertedPart;
```
Bouw de app en voer deze uit. Selecteer de knop Nieuw onderdeel toevoegen en voer een naam, type en leverancier in om een nieuw onderdeel te maken. Selecteer Opslaan. De methode Toevoegen in de klasse PartsManager wordt aangeroepen, waardoor het nieuwe onderdeel in de webservice wordt gemaakt. Als de bewerking is geslaagd, wordt de pagina met de lijst met onderdelen opnieuw weergegeven met het nieuwe gedeelte onderaan de lijst.
Wanneer u klaar bent met bladeren door de gegevens, sluit u de app en keert u terug naar Visual Studio of Visual Studio Code.

Een PUT-bewerking uitvoeren om de details voor een onderdeel in de database bij te werken

Zoek in de klasse PartsManager de updatemethode . Dit is een asynchrone methode die een Part-object als parameter gebruikt. De methode heeft geen expliciete retourwaarde. Het retourtype is echter Taak , zodat uitzonderingen correct worden teruggezet naar de aanroeper. We gaan de PUT-functionaliteit implementeren.
Verwijder de bestaande code.

Controleer net als voorheen op een internetverbinding.

if (Connectivity.Current.NetworkAccess != NetworkAccess.Internet)
    return;

Maak een nieuwe HttpRequestMessage, deze keer het opgeven van een PUT-bewerking en de URL voor het bijwerken van onderdelen.
```
HttpRequestMessage msg = new(HttpMethod.Put, $"{Url}parts/{part.PartID}");
```
Stel de Content eigenschap in van het HttpRequestMessage gebruik van de JsonContent.Create functie en de onderdeelparameter die is doorgegeven aan de functie.
```
msg.Content = JsonContent.Create<Part>(part);
```
Haal een HTTP-client op uit de GetClient-methode .
```
var client = await GetClient();
```

Verzend de aanvraag met de HttpClient aanvraag en controleer of deze is geslaagd.

var response = await client.SendAsync(msg);
response.EnsureSuccessStatusCode();

Bouw de app en voer deze uit. Selecteer een van de onderdelen in de lijst. De pagina AddPart wordt weergegeven, deze keer met de eigenschappen die al zijn ingevuld. Werk wat u wilt bijwerken.
Selecteer Opslaan. Hiermee wordt de updatemethode in de klasse PartsManager aangeroepen om de wijzigingen naar de webservice te verzenden. Als dit lukt, worden de wijzigingen doorgevoerd op de pagina met onderdelenlijsten.

Notitie

Het deel dat u in de vorige taak hebt toegevoegd, wordt niet weergegeven op de pagina Lijst met onderdelen. De gegevens die de app gebruikt, worden opnieuw ingesteld op een lijst met vooraf gedefinieerde onderdelen telkens wanneer de app wordt uitgevoerd. Dit is om consistentie te bieden voor het testen van de app.

Een DELETE-bewerking uitvoeren om de details voor een onderdeel uit de database te verwijderen

Zoek in de klasse PartsManager de methode Delete . Dit is een asynchrone methode die een partId-tekenreeks gebruikt en een taak retourneert.
Verwijder de bestaande code.

Controleer op een internetverbinding.

if (Connectivity.Current.NetworkAccess != NetworkAccess.Internet)
    return;

Maak een nieuw HttpRequestMessage-object. Geef nu alleen het HTTP-woord DELETE en de URL op om een deel te verwijderen.
```
HttpRequestMessage msg = new(HttpMethod.Delete, $"{Url}parts/{partID}");
```
Haal een HTTP-client op uit de GetClient-methode .
```
var client = await GetClient();
```
Verzend de aanvraag naar de webservice. Controleer of het is gelukt nadat deze is geretourneerd.
```
var response = await client.SendAsync(msg);
response.EnsureSuccessStatusCode();
```
Bouw de app en voer deze uit. Selecteer een onderdeel in de lijst en selecteer Vervolgens Verwijderen op de pagina Deel toevoegen. Als dit lukt, wordt de pagina Lijst met onderdelen opnieuw weergegeven en is het gedeelte dat u hebt verwijderd niet meer zichtbaar.