Aplicação de Referência Empresarial em JavaScript - Contoso Real Estate
Tags: javascript, azure, node, webdev
Published: 2023-05-24 23:35:51

---
title: Aplicação de Referência Empresarial em JavaScript - Contoso Real Estate
published: true
description: nesse artigo vocês vão aprender sobre a Aplicação de Referência Empresarial em JavaScript - Contoso Real Estate e como vocês podem contribuir com esse projeto Open Source!
tags: #javascript, #azure, #nodejs #webdevelopment
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-24 21:03 +0000
---

Olá, Developers! Como vocês estão?! Quanto tempo não é mesmo? Hoje eu gostaria de falar sobre um projeto totalmente Open Source e que tem como objetivo ajudar a toda a Comunidade de Pessoas Desenvolvedoras em JavaScript em como podem aplicar um projeto E2E (ponta a ponta) seguindo com os melhores padrões de desenvolvimento, boas práticas, testes e integrado com Serviços de Nuvem do Azure: a Aplicação de Referência em JavaScript - Contoso Real Estate! 

O projeto foi lançado durante o Microsoft Build 2023 e hoje eu gostaria de compartilhar com vocês um pouco mais sobre esse projeto e como vocês podem contribuir com ele!

Aqui vamos nós!	

## O que é a Aplicação de Referência Empresarial em JavaScript - Contoso Real Estate?

A Aplicação de Referência em JavaScript: Contoso Real Estate tem como objetivo ser um projeto com uma arquitetura referência que contém os componentes para criar Front-Ends modernos de nível empresarial e aplicações nativas em nuvem. 

Vejam um vídeo teaser que um dos contribuidores desse incrível projeto **[Wassim Chegham](https://twitter.com/manekinekko)**, fez para mostrar um pouco mais sobre o projeto:

{% youtube  https://www.youtube.com/watch?v=GxeENsvwZrI %}

O projeto segue com as melhores práticas de padrões de desenvolvimento, arquitetura e componentes funcionais para quem deseja implementar uma aplicação de ponta a ponta com JavaScript e integrada com os Serviços de Nuvem do Azure. E, melhor totalmente Open Source! Open Source? Como assim?! 

## Open Source?! Sim, Senhores(as)! 

Sim, Senhores(as)! O projeto é totalmente Open Source e vocês podem contribuir com ele!

{% github  https://github.com/Azure-Samples/contoso-real-estate %}

Inclusive, há inúmeros `good first issues` para quem deseja contribuir com o projeto! 

* ✅ **[Contribua para projeto - Good First Issues](https://github.com/Azure-Samples/contoso-real-estate/labels/good%20first%20issue)**

## Entendendo a Arquitetura do Projeto

O projeto dispõe de 7 cenários principais (5 já prontos e outros 2 para vir) que são:

- ✅ **[API](https://github.com/Azure-Samples/contoso-real-estate/tree/main/packages/api)**: camada de API criada com **[Azure API Management](https://learn.microsoft.com/azure/api-management/)** que serve para gerenciar autorização, limitação de taxa e armazenamento em cache. As tecnologias usadas nessa camada são: 
  - [Azure Identity](https://learn.microsoft.com/azure/active-directory/develop/) 
  - [Azure Key Vault](https://learn.microsoft.com/azure/key-vault/)
  - [Azure Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/) 
  - [MongoDb for Azure Cosmos DB](https://learn.microsoft.com/azure/cosmos-db/)
  - [Azure Database for PostgreSQL](https://azure.microsoft.com/en-us/services/postgresql/) 
  - [Azure Functions](https://learn.microsoft.com/azure/azure-functions/) 
  - [TypeScript](https://www.typescriptlang.org/)
  
- ✅ **[Blog CMS](https://github.com/Azure-Samples/contoso-real-estate/tree/main/packages/blog-cms)**: nessa camada temos uma  aplicação de CMS (Sistema de Gerenciamento de Conteúdo) que é usada para gerenciar, no lado do Back-End, o conteúdo do blog. As tecnologias usadas nessa camada são:
  - [Strapi](https://strapi.io/)
  - [Azure Storage](https://azure.microsoft.com/en-us/services/storage/)
  - [Azure Database for PostgreSQL](https://azure.microsoft.com/en-us/services/postgresql/) 
  - [TypeScript](https://www.typescriptlang.org/)
  - [Azure Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/)
  
- ✅ **[Blog](https://github.com/Azure-Samples/contoso-real-estate/tree/main/packages/blog)**: parte do Front-End do blog e feito em Next.js e 
  - [Next.js](https://nextjs.org/)
  - [TypeScript](https://www.typescriptlang.org/)
  - [Azure Container Apps](https://azure.microsoft.com/en-us/services/app-service/containers/)
  - [Azure Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/)
  
- ✅ **[Portal](https://github.com/Azure-Samples/contoso-real-estate/tree/main/packages/portal)**: é uma aplicação de portal de imóveis que é feita em Angular e que usa o Azure Static Web Apps para hospedar o Front-End. As tecnologias usadas nessa camada são:
  - [Angular](https://angular.io/)
  - [Azure Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/)
  - [TypeScript](https://www.typescriptlang.org/)
  - [Azure Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/)

- ✅ **[Stripe](https://github.com/Azure-Samples/contoso-real-estate/tree/main/packages/stripe)**: essa camada é responsável pela integração com o Stripe para pagamentos. As tecnologias usadas nessa camada são:
  - [Stripe](https://stripe.com/)
  - [Fastify](https://www.fastify.io/)
  - [TypeScript](https://www.typescriptlang.org/)
  - [Azure Container Apps](https://azure.microsoft.com/en-us/services/app-service/containers/)
  - [Azure Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/)
  
- ✅ **[Testing](https://github.com/Azure-Samples/contoso-real-estate/tree/main/packages/testing)**: e por fim, não poderia faltar a camada de testes! As tecnologias usadas nessa camada são:
  - [Playwright](https://playwright.dev/)
  - [TypeScript](https://www.typescriptlang.org/)

Sem contar as Ferramentas de Desenvolvimento tais como:

- ✅ **[Visual Studio Code](https://code.visualstudio.com/)**
- ✅ **[Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/)**
- ✅ **[GitHub Codespaces](https://github.com/features/codespaces)**
- ✅ **[GitHub Actions CI/CD](https://docs.github.com/actions)**
- ✅ **[GitHub Copilot](https://copilot.github.com/)**
- ✅ **[Azure Developer CLI](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/overview)**

Vocês podem ter uma noção de toda a arquitetura do projeto na imagem abaixo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzoikkmx1eq231pweqts.png)

## Um Projeto que Ajudará à toda Comunidade de Desenvolvedores(as)!

O intuito de desenvolvermos um projeto dessa escala, veio justamente através de inúmeros feedbacks que recebemos de vocês, desenvolvedores(as), que desejam aprender a desenvolver aplicações de ponta a ponta com as tecnologias mais modernas do mercado. Geralmente sempre quando encontramos exemplos de projetos Open Source, eles são muito simples e não nos ajudam a entender como podemos desenvolver aplicações de ponta a ponta. O nosso time de JavaScript, composta por: (ordem alfabética)

- ✅ **[Aaron Powell ex-integrante do JavaScript Team](https://twitter.com/slace)**
- ✅ **[Dina Berry](https://twitter.com/dfberry)**
- ✅ **[Glaucia Lemos](https://twitter.com/glaucia_lemos86)**
- ✅ **[Natalia Venditto](https://twitter.com/AnfibiaCreativa)**
- ✅ **[Nitya Narasimhan](https://twitter.com/nitya)**
- ✅ **[Wassim Chegham](https://twitter.com/manekinekko)**
- ✅ **[Yohan Lasorsa](https://twitter.com/sinedied)**

Esperamos que vocês possam aprender muito com esse projeto e que possam contribuir com a gente também!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdbfws7ftn624fe6u4mg.png)

## Recursos Importantes

Abaixo segue alguns recursos importantes para vocês poderem aprender mais sobre o projeto:

- ✅ **[Repositório Oficial do Projeto: Contoso Real Estate](https://github.com/Azure-Samples/contoso-real-estate?source=techcommunity)**
- **[Documentação Oficial: Enterprise-grade reference for composable architecture](https://learn.microsoft.com/en-us/azure/developer/javascript/composable-cloud-contoso-real-estate)**
- ✅ **[Blog do Anúncio Oficial - Tech Community](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/announcing-contoso-real-estate-javascript-composable-application/ba-p/3827097?WT.mc_id=twitter-0000-azureadvocates)**
- **[Azure Developer CLI (azd) templates](https://azure.github.io/awesome-azd/?operator=AND&tags=enterprisepatterns&tags=javascript)**

E, claro temos uma Coleção Oficial a qual dispõe de você poder realizar um Laboratório de Aprendizagem em relação as tecnoogias usadas no projeto:

[![collection-image](https://i.postimg.cc/Hxm0SyJy/Screen-Shot-05-24-23-at-08-16-PM.png)](https://learn.microsoft.com/pt-br/users/learn-live/collections/12odt3rkw1nqnd?wt.mc_id=build23_lab_collection_azuremkt_LAB120)


## Palavras Finais

Espero que esse o projeto Contoso Real Estate seja de grande ajuda para vocês e que possam aprender muito com ele. E, claro, não deixem de contribuir com o projeto, pois ele é Open Source e vocês podem contribuir com ele, seja através de Issues ou Pull Requests.

Será realizada uma Live com o Time do Reactor Brasil a qual estarei explicando detalhadamente sobre o projeto e fazendo um hands-on lab com vocês. Então, não deixem de se inscrever no link abaixo: 

> estaremos incluindo ainda a data e horário da live no  **[Canal do YouTube do Microsoft Reactor](https://www.youtube.com/@MicrosoftReactor)**

- **[Página do Meetup: Microsof Reactor Brasil](https://www.meetup.com/pt-BR/microsoft-reactor-sao-paulo/events/)**

Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu **[Canal do Youtube](https://www.youtube.com/@GlauciaLemos)**! E, ainda durante o ano de 2023 virão muitas outras coisas bem legais no canal!

Algumas das novidades:

* 😃 **Microsoft Learn Live Sessions**
* 😃 **Tutoriais semanais de Node.js, TypeScript & JavaScript**
* 😃 **E, muito mais!**

Se são conteúdos que você curte, então não deixa de se inscreverem e ative o sininho para ficarem sabendo quando teremos vídeo novo! Essa semana já teremos uma série nova incrível lá no Canal do Youtube.

[![Screen-Shot-12-31-20-at-01-06-AM.png](https://i.postimg.cc/pr3TL4Pd/Screen-Shot-12-31-20-at-01-06-AM.png)](https://bit.ly/youtube-canal-glaucialemos)

E para ficarem por dentro de várias outras novidades, não deixem de me seguirem lá no Twitter!

[![Screen-Shot-12-31-20-at-01-06-AM.png](https://i.postimg.cc/sXPk87Td/Screen-Shot-05-24-23-at-08-32-PM.png)](https://twitter.com/glaucia_lemos86)

E, nos vemos! ❤️❤️