Maak gebruik van de vele Azure documentatie links die je kan terugvinden in de powerpoint van de theorie.

In deze les is het de bedoeling dat we onze webshop uitbreiden en aanpassen. We moeten bij het toevoegen van een nieuw product ervoor zorgen dat de afbeelding op Azure Blob Storage komt te staan. We zullen verder de shop uitbreiden met een winkel mandje en het versturen van winkel mandje door het te plaatsen op een Azure Queue.

Voor je start met dit labo gelieve eerst de Azure Storage Explorer te installeren. https://azurestorageexplorer.codeplex.com/

Voor we starten moeten we eerst een Storage Account aanmaken.

Na het aanmaken van de account zullen we bij "containers" een map "images" aanmaken waarin alle afbeeldingen moeten komen. Men spreekt over een blob container "images":

Als laatste activeren en saven we bij configure alle monitoring options. De retention policy zet je op 5 dagen. Dit wil zeggen dat hij steeds laatste 5 dagen zal bijhouden.

Test nu nog de connectie uit door via Azure Server Explorer te connecteren naar de storage account. De keys om te connecteren kan u onderaan in de storage account vinden door te klikken op "Manage Access Keys".

Als dit lukt moet je in de explorer de blob container "images" te zien krijgen:

##Stap 2: Verplaatsen van afbeeldingen naar Blob Storage

Nu gaan we de reeds aanwezig afbeeldingen toevoegen aan blog storage. Open de container "images" binnen "Blob Containers". Kies upload in het menu en selecteer de reeds bestaande afbeeldingen vanop je harde schijf.

Nu moeten we de link in de views waar we afbeeldingen gebruiken nog updaten. Bij mij ziet dit er als volgt uit:

<img src="http://iotwebshop.blob.core.windows.net/images/@Model.Picture" />

Daarna kan u de map met images uit je project verwijderen.

Wanneer we nu een nieuw product toevoegen moeten we de afbeelding op Blob Storage plaatsen en niet meer op de webserver. We moeten hiervoor een aanpassing doen bij het opslaan van de afbeelding.

Voor we starten moeten we eerst de Azure Storage SDK toevoegen. We gaan hiervoor naar Nuget en zoeken op "Azure Storage" en voegen deze toe.

In de web.config van onze applicatie moeten we nu de connectionstring toevoegen naar onze Azure Storage account. Deze ziet er als volt uit: waar he voor AccountName en AccountKey uw eigen waarden kan kiezen. Let erop dat er geen onnodige spaties staan in zowel AccountName als AccountKey. Voeg deze connectionString toe aan de AppSettings.

<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=iotwebshop;AccountKey= " />

Pas nu het opladen van files aan zodat de afbeelding opgeslagen zal worden op de blob storage. Probeer alles af te handelen in de service en niet in de controller. Maak gebruik van de Microsoft.WindowsAzure.Storage library en de online Azure documentatie voor blobs: azure.mictosift.com/storage dotnet how to use blobs.

In dit stuk gaan we het detail scherm aanpassen zodat we een product kunnen huren. Denk goed na wat u moet aanpassen in de view zodat we een aantal kunnen in geven en toevoegen aan de basket om daarna terug te keren naar het overzicht scherm van de cataloog.

Het opslaan van de basket items doen we in de database in een tabel "BasketItems". Maak deze tabel aan (via migration). Kies hierbij zelf de velden voor de tabel maar je moet verplicht een veld Timestamp toevoegen met het datatype DateTime. De rest van de velden mag je zelf kiezen, maar zorg dat je geen gegevens vergeet die nodig zijn voor de bestelling (vb. de ingelogde user). Telkens de user een bijkomende item selecteert om te huren, wordt deze toegevoegd aan de tabel.

Om een overzicht te hebben van de items die reeds toegevoegd zijn aan het bestelmandje voegt U een menu item “winkelmandje” toe. Wanneer je hiervoor een figuur gebruikt, plaatst U deze figuur in de blob container: Het winkelmandje is alleen zichtbaar voor ingelogde customers.

Uiteindelijk zijn volgende zaken geïmplementeerd voor het winkelmandje:

• toevoegen van nieuwe bestel item
• overzicht van producten het mandje
  • Naam van het product
  • Prijs van het product
  • Aantal bestelde items
  • Totaalprijs per bestellijn
• onderaan bij overzicht zien we de huidige totaalprijs van de basket
  • Maak een aparte klasse voor het berekenen van de prijs
  • Schrijf een unit test voor het berekenen van de prijs
• we kunnen het overzicht enkel opvragen als we zijn ingelogd als customer en dit met een link bovenaan in het menu
• zorg voor een duidelijke GUI en acceptabele opmaak

In een volgende stap wordt het winkelmandje omgezet naar een bestelling. Na het plaatsen van deze bestelling zullen de items verwijderd worden uit de basket tabel. We kiezen voor een database en niet sessions omdat je ook na het afsluiten van de browser nog weet wat er reeds in de basket aanwezig was. We identificeren gebruikers via hun gebruikersnaam waarmee ze zijn ingelogd...

Zorg ervoor dat je het aantal items in de winkelwagen kan zie bovenaan rechts in de menubar.

Tips:

• bekijk @Html.Action.
• een controller action kan ook een gewoon getal terugkeren. Het moet niet altijd een view zijn.

Nu we een winkelwagen kunnen vullen moeten we nog het order kunnen plaatsen. Wijzig het overzicht scherm van het winkelmandje zodat er een "CheckOut" knop is. Na het drukken op de knop verschijnt een invulscherm waarop de klant zijn gegevens invult.

Om een bestelling bij te houden zijn twee nieuwe models nodig:

• OrderLine (gegevens uit het winkelmandje)
• Order (met inbegrip van alle OrderLines)

Denk goed na over de velden in deze twee nieuwe models. Aangezien we veel orders verwachten moeten we de applicatie schalen. Dit kunnen we oplossen door vanuit de controller niet direct naar de database te schrijven maar door te schrijven via een Queue.

Maak gebruik van dezelfde storage account in Azure uit stap 1. Het schrijven naar de queue doen we vanuit de service en NIET vanuit de controller. Om de queue van data te voorzien moeten object omgezet worden naar binary data met een BinaryFormatter of naar een string (JSON). Wij kiezen voor JSON.

We moeten dus eerst het order object omzetten naar een JSON string voordat we het op de queue kunnen plaatsen. Maak hiervoor gebruik van de Newtonsoft JSON Parser, deze zit in Nuget:

string json = Newtonsoft.Json.JsonConvert.SerializeObject(orderInfo);

Schrijf de geserialiseerde data weg naar de Azure queue in de gebruikelijke stappen azure.microsoft.com/storage dotnet how to use queues

• Storage account ophalen m.b.v connectionstring
• QueueClient aanmaken op een al dan niet bestaande referentie
• Serialised message (JSON) op de queue plaatsen

Als het wegschrijven lukt dan kan u via Azure Storage Explorer kijken of er een bericht zit in de queue.

In de laatste stap maken we gebruik van een Azure Webjob om niet continu zelf de queue opnieuw te moeten pollen. We shedulen en schrijven een webjob die de queue zal uitlezen en het order plaatsen. We voegen een nieuwe Web Job (met naam OrderWebJob) toe aan onze solution via "Add New Project" en we zoeken achter "Webjobs" in de categorie "Cloud". Is er geen Azure Webjob te vinden zijn dan moet u de Azure Webjob SDK nog instaleren via azure.microsoft.com/websites dotnet webjobs SDK get started

Na de aanmaak van de webjob moet u eerst in App.config 3 x de connectionstring toevoegen naar Azure met volgende namen:

• StorageConnectionString
• AzureWebJobsDashboard
• AzureWebJobsStorage

De laatste twee verwijzen naar dezelfde Azure storage account. Daarnaast moet ook nog de connectionstring toegevoegd worden naar SQL Azure database.

Wanneer de website een bericht plaatst op de queue dan zal de methode in de file Functions.cs aangeroepen worden. Het is in deze methode dat we het bericht zullen verwerken. Het attribuut QueueTrigger zal de naam van wachtrij bevatten. De tweede parameter is het formaat van het bericht. In ons geval zal dit een JSON string zijn.

public static void ProcessQueueMessage([QueueTrigger("orderinfo")] string message, TextWriter log)
{
    // uw code
}

Binnen deze methode moeten we dus het bericht verwerken. We zullen de parameter "message" moeten deserialiseren naar het juiste formaat.

OrderInfo info = JsonConvert.DeserializeObject<OrderInfo>(message);

Daarna moeten we dit bericht doorsturen naar de database. Gebruik hiervoor een service die je reeds gemaakt hebt (en nu apart zit in een project).

• Wijzig het overzicht van de winkelwagen zodat je het aantal van een product kan wijzigen. Na het wijzigen moet je terug in het overzicht van de winkelwagen komen.
• Zorg ervoor dat de gebruiker niet altijd zijn "CheckOut" gegevens moeten invullen. Sla deze op in de database en vraag ze terug op bij een "CheckOut".
• Zorg ervoor dat ook niet geregistreerde gebruikers een winkelwagen kunnen vullen en sla deze op in de database. Hoe zou u dit aanpakken? Bedenk zelf een strategie en bespreek deze met de docent.