共用方式為


開始使用 Contoso 房地產企業應用程式

Contoso Real Estate 應用程式包含參考架構和元件,用於建置企業級現代化可組合前端(或微前端)和雲端原生應用程式。 它是最佳做法、架構模式和功能元件的集合,可用來建置和部署新式 JavaScript 應用程式至 Azure。

Contoso 房地產應用程式

Contoso 房地產企業應用程式可讓 Contoso 公司的員工透過 Web 應用程式搜尋保留搬遷住房。 此 Web 應用程式是 Contoso HR 和新進員工或重新安置員工所使用的內部工具。 已驗證的 Talent Manager 和新進員工都可以與應用程式功能互動,而未經驗證的使用者則可存取其中的某些部分。

必要條件

若要將此整個應用程式解決方案部署至 Azure,您需要:

應用程式

Contoso Real Estate 應用程式有兩個 用戶端應用程式:入口網站 和部落格。 部落 會公開新的房地產供應專案,如果在未經驗證的情況下可見的話。 入口網站應用程式需要驗證才能檢視、保留及支付清單費用。 個別的開發小組已建置及支援此端對端架構,並自行選擇技術堆疊。

使用下一個公開部落格:

部落 及其 API 是裝載自 Azure Container Apps。 部落格內容會從無 頭帶式錶帶 CMS 提供,其中包含儲存在 適用於 PostrgreSQL 的 Azure 資料庫中的數據。 CMS 也會儲存房地產清單。 清單的屬性影像會儲存在 Azure Blob 儲存體 中。

Screenshot of Contoso blog featuring information about technology, news, gastronomy, releases, and locations relevant to users of the HR relocation portal.

使用 Angular 保護入口網站用戶端

入口網站裝載在 Azure Static Web 應用程式中,且具有來自 Azure Functions 應用程式的 API 支援。 它也會使用適用於 PostrgreSQLAzure 資料庫中保留的清單。 入口網站會透過社交提供者提供驗證,例如 Microsoft、Google 和 Facebook。

Screenshot of Contoso portal featuring several property listings with images, descriptions, and prices.

當使用者登入並選取屬性之後,他們可以選擇保留該屬性,然後使用 Stripe 整合來支付該屬性的費用。

Screenshot of Contoso portal property page showing property images, details, and offering a user the ability to reserve the property with a payment form.

其他使用的 Azure 服務包括:

套件

此應用程式分成數個套件。 每個套件描述套件中的案例,以及協助您建置套件並將其部署至 Azure 的逐步指示。

套件 技術堆疊
部落格Blob-CMS 具有 Strapi CMS 的 Next.js 應用程式,兩者都裝載在 Azure 容器應用程式中。
入口網站API 使用適用於後端的 Azure Functions API 應用程式,從靜態 Web Apps 裝載的 Angular Web 入口網站。
條紋 在 Azure 容器應用程式中快速化 API 付款服務 API。
測試 使用 Playwright 進行端對端測試。
文件 深入瞭解此端對端解決方案。

後續步驟