Delen via


Verpakte oplossingen voor Contoso-onroerend goed

De Contoso Real Estate-toepassing bevat de referentiearchitectuur en onderdelen voor het bouwen van moderne samenstelbare front-ends (of micro-front-ends) en cloudeigen toepassingen. Het is een verzameling best practices, architectuurpatronen en functionele onderdelen die kunnen worden gebruikt voor het bouwen en implementeren van moderne JavaScript-toepassingen in Azure.

Diagram showing cloud architecture of Contoso real estate with Hero services on the left and the complete interaction of the services on the right.

De volgende pakketten worden weergegeven in volgorde van leerprioriteit.

Openbare blog met Container Apps en Azure Database for PostgreSQL

Dit pakket biedt mogelijkheden voor het ontwerpen en opslaan van gegevens voor zowel verticale micro-front-endtoepassingen (Blog en Portal). We maken deze mogelijkheden mogelijk, via de implementatie van een Headless CMS, mogelijk gemaakt door Strapi.

Architectural diagram of the blog client and API scenario.

Er zijn twee onderdelen waaruit de architectuur van deze oplossing bestaat:

  • Een Headless CMS, geïmplementeerd met Strapi.
  • Een front-endtoepassing, geïmplementeerd met Next.js, die de gegevens van het Headless CMS verbruikt en de blogpagina's weergeeft.
  • Een PostegreSQL-database waarin de gegevens voor het Headless CMS worden opgeslagen. Het CMS wordt gehost in Azure Container Apps en de database wordt gehost in Azure Database for PostgreSQL. Ze maken verbinding met elkaar via de eindpunten die zijn gebouwd in de Strapi-serveri-implementatie.

Beide toepassingen worden gehost in Azure Container Apps.

Pakketten:

Portal beveiligen met Static Web Apps en Azure Functions-API

Deze front-endtoepassing is het belangrijkste toegangspunt voor de gebruikers die Angular implementeren als een JavaScript-framework.

Architectural diagram of the portal client and API scenario.

Deze service wordt geïmplementeerd in Azure Static Web Apps, inclusief mogelijkheden zoals

  • Verificatie en autorisatie met Easy Auth

De API-back-end wordt geïmplementeerd in Azure Functions. Dit is een serverloze rekenservice waarmee u code on-demand kunt uitvoeren zonder dat u de infrastructuur expliciet hoeft te beheren.

De database voor inhoud, geïntegreerd met de serverloze API-back-end, is een Azure Database for PostgreSQL die is gevuld vanuit een headless CMS-implementatie in Scenario 1.

Een database voor gebruikersgebeurtenissen en gebruikersprofielen, geïntegreerd in de serverloze API-back-end, is een Azure Cosmos DB, een volledig beheerde NoSQL-databaseservice die meerdere API's biedt, waaronder de MongoDB-API.

Pakketten:

Gebruikersverificatie met ingebouwde functionaliteit voor beveiligde portal

Gebruikersverificatie wordt geleverd als ingebouwde functionaliteit in de Azure Static-web-app van de portal. De typische aanmeldingsstroom, het omleiden van een gebruiker naar een autorisatieprovider om verificatie te voltooien en vervolgens de geverifieerde gebruiker terug te leiden naar de toepassing, wordt aangeboden bij verschillende providers van sociale media.

Architectural diagram of the user authentication in the portal application.

Zodra een gebruiker is aangemeld, worden de gebruikersgegevens opgeslagen in Cosmos DB voor MongoDB-API , zoals favoriete eigenschappen en eigenschapsreserveringen.

Stripe betalingen

Dit pakket ondersteunt het betalingsproces in de portal om te betalen voor een accommodatiereservering. De betalingsstroom wordt geïmplementeerd met Stripe, een platform voor betalingsverwerking waarmee u betalingen online kunt accepteren. Met dit pakket wordt de functionaliteit voor betalingsverwerking in een Fastify-toepassing die is geïmplementeerd in Azure Container Apps, in een container geplaatst

Architectural diagram of the payments service to the Stripe payment provider.

Wanneer Azure API Management een aanvraag voor de eindpunt-URL van de webhook van Stripe ontvangt, wordt de aanvraag doorgestuurd naar de Fastify-API. De API verwerkt de binnenkomende webhookgebeurtenis en voert de betalingsacties uit, zoals uitchecken, uitgecheckt, verlopen.

Broncode van stripe-pakket

Playwright testen

Dit pakket biedt het end-to-end testen voor Contoso-onroerend goed. Playwright wordt gebruikt om de browser te automatiseren en de gebruikerservaring van de toepassing te testen.

Broncode van pakket testen

Documentatiesite

Dit pakket bevat uitgebreide documentatie voor de referentiearchitectuur van Contoso-onroerend goed. Het is gebouwd met Docusaurus, een moderne statische websitegenerator.

Broncode van documentatiepakket

Volgende stap