Crie um website de notícias sobre criptomoedas em C# usando o Microsoft Azure App Service e o MongoDB Atlas
.jpg&w=3840&q=75)
Avalie esse Tutorial
Quem disse que criar um site precisa ser difícil?
Escrevendo o código, notícias persistentes, hospedando o site. Uma década atrás, isso poderia ter sido muito trabalhoso. Atualmente, graças ao Microsoft Blozor, Microsoft Azure App Servicee MongoDB Atlas, você pode começar em minutos. E termine igualmente rápido!
Neste tutorial, oriento você por:
- Configurando um novo projeto Blazor.
- Criando uma nova página com uma UI simples.
- Criando dados no MongoDB Atlas.
- Mostrando essas novidades no site.
- Tornar o site disponível usando o Azure App Service para hospedá-lo.
Tudo que você precisa é deste tutorial e dos seguintes pré-requisitos, mas se preferir apenas ler por enquanto, confira o repositório do GitHub para este tutorial, onde você pode encontrar o código e o tutorial.
Antes de começarmos, aqui está uma lista de tudo que você precisa enquanto trabalha no tutorial. Recomendo que você tenha tudo configurado primeiro para que possa acompanhar o processo sem problemas.
- Baixe e instale o framework .NET. Para este tutorial, estou usando o .NET 7.0.102 para Windows, mas qualquer .NET 6.0 ou superior devem servir.
- Baixe e instale o Visual Studio. Estou usando a 2022 edição Community, versão 17.4.4, mas qualquer edição 2019 ou 2022 estará bem. Certifique-se de instalar o volume de trabalho
Azure development, pois implantaremos isso mais tarde. Se você já tiver uma versão instalada do Visual Studio, acesse o Instalador e clique emmodifypara encontrá-la.
Agora que os pré-requisitos estão fora do caminho, vamos começar criando um novo projeto.
Encontrei recentemente Microsoft Blozor e estou simplesmente interessado nele. Uma maneira tão fácil de criar sites de forma rápida e fácil. E você nem precisa escrever JavaScript ou PHP! Vamos usá-lo para este tutorial também. Atlas Procure por
Blazor Server App e clique em Next.
Escolha um
Project name e Location de sua preferência. Eu gostaria de ter a solução e o projeto no mesmo diretório, mas você não precisa.
Escolha seu .NET framework atualmente instalado (conforme descrito em
Pre-requisites) e deixe o restante no padrão.Clique em
Create e Go!
Antes de começarmos a entrar no código, precisamos adicionar um pacote NuGet ao projeto: o driver MongoDB. O driver é uma biblioteca que permite que você acesse facilmente seu cluster MongoDB Atlas e trabalhe com seu banco de dados. Clique em
Project -> Manage NuGet Packages... e procure por MongoDB.Driver.
Durante esse processo, talvez seja necessário instalar componentes adicionais, como os mostrados na captura de tela a seguir. Confirme esta instalação, pois precisaremos de algumas delas também.
Outra mensagem que você encontra pode ser os seguintes contratos de licença, que você precisa aceitar para poder trabalhar com essas bibliotecas.
Agora que instalamos o driver, vamos criar um cluster e um banco de dados para nos conectar.
Ao registrar uma nova conta, você verá a seleção de um banco de dados na nuvem a ser implementado. Abra o
Advanced Configuration Options. Para este tutorial, precisamos apenas da camada compartilhada forever-free. Como o site será implantado posteriormente no Azure, também queremos que o cluster do Atlas seja implantado no Azure. E também queremos que ambos residam na mesma região. Dessa forma, diminuímos a chance de ter uma latência adicional o máximo possível.Aqui você pode escolher qualquer região. Apenas certifique-se de escolher o mesmo mais tarde, ao implantar o site no Azure. As opções restantes podem ser deixadas em seus padrões.
A etapa final da criação de um novo cluster é pensar nas medidas de segurança passando pelo
Security Quickstart.
Escolha um
Username e Password para o usuário do banco de dados que acessará este cluster durante o tutorial. Para Access List, precisamos adicionar 0.0.0.0/0, pois ainda não sabemos o endereço IP de nossa implantação do Azure. Isso é bom para fins de desenvolvimento e teste, mas, em produção, você deve restringir o acesso aos IPs específicos que acessam o Atlas.O Atlas também oferece suporte ao uso de peering de rede e conexões privadas usando os principais provedores de nuvem. Isso inclui o Azure Private Link ou aAzure Virtual Private Connection (VPC), se você estiver usando um cluster M10 ou superior.
Agora pressione
Finish and Close.A criação de um novo cluster compartilhado é muito, muito rápida e você deve poder começar em poucos minutos. Assim que o cluster for criado, você o verá em sua lista de
Database Deployments.Vamos adicionar alguns dados de amostra para nosso site! Clique em
Browse Collections agora.
Se você nunca trabalhou com Atlas antes, aqui estão alguns vocabulários para começar:
- Um cluster consiste em vários nós (para redundância).
- Um cluster pode conter vários bancos de dados (que são replicados em todos os nós).
- Cada banco de dados pode conter muitas collection, que são semelhantes às tabelas em um relational database.
- Cada coleção pode conter muitos documentos. Pense em linhas, só que melhores!
- Documentos são superflexíveis porque cada documento pode ter seu próprio conjunto de propriedades. Eles são fáceis de ler e super flexíveis para trabalhar com estruturas semelhantes a JSON que contêm nossos dados.
Como ainda não há dados, você verá uma lista vazia de bancos de dados e coleções. Clique em
Add My Own Data para adicionar a primeira entrada.
O nome do banco de dados e o nome da collection podem ser qualquer coisa, mas para estar de acordo com o código que vamos ver mais tarde, chame-os
crypto-news-website e news respectivamente, e clique em Create.
Isso deve levar a uma nova entrada parecida com esta:
Em seguida, clique em
INSERT DOCUMENT.Há algumas coisas aqui. O
_id já foi criado automaticamente. Cada documento contém um desses e eles são do tipo ObjectId. Identifica exclusivamente o documento.Ao passar o mouse sobre a contagem de linhas à esquerda, você obterá um pop-op para adicionar mais campos. Adicione um chamado
title e defina seu valor para o que você quiser. A captura de tela mostra um exemplo que você pode usar. Escolha String como o tipo à direita. Em seguida, adicione um date e escolha Date como o tipo à direita.
Repita o processo acima algumas vezes para obter o máximo de dados de exemplo que desejar. Você também pode continuar com uma entrada, se quiser, e preencher suas notícias quando terminar.
A etapa final no MongoDB Atlas é realmente criar acesso a este banco de dados para que o driver MongoDB que instalamos no projeto possa se conectar a ele. Isso é feito usando uma connection string. Uma connection string é um URI que contém o nome de usuário, a senha e o endereço de host do banco de dados ao qual você deseja se conectar.
Clique em
Databases à esquerda para voltar à visão geral do cluster.Desta vez, pressione o botão
Connect e depois Connect Your Application. Se ainda não tiver feito isso, escolha um nome de usuário e uma senha para o usuário do banco de dados que acessará esse cluster durante o tutorial. Além disso, adicione 0.0.0.0/0 como o endereço IP para que a implantação do Azure possa acessar o cluster mais tarde.
Se você nunca usou o Blazor antes, basta clicar no botão
Rune dar uma olhada no modelo que foi gerado. É um ótimo começo, e reutilizaremos algumas partes dele mais tarde.No entanto, vamos adicionar nossa própria página primeiro. No seu Solution Explorer, você verá uma pasta
Pages . Clique com o botão direito do mouse e adicione umRazor Component. Esses são arquivos que combinam o HTML da sua página com o código C#.
Agora, substitua o conteúdo do arquivo pelo seguinte código. As explicações podem ser lidas in-line nos comentários do código.
Acima, você notará a classe
News, que ainda precisa ser criada. Na pastaData, adicione uma nova classe C#, chame-a Newse use o seguinte código.Agora é hora de ver o resultado. Pressione
Run novamente.O site deve abrir automaticamente. Basta adicionar
/news ao URL para ver sua nova página de notícias.
Se quiser saber mais sobre como adicionar a página de notícias ao menu à esquerda, dê uma olhada em mais tutoriais específicos do Blazor.
Até agora, tudo bem. Tudo está funcionando localmente. Agora vamos à parte divertida: ir ao vivo!
O Visual Studio torna isso muito fácil. Basta clicar em seu projeto e selecionar
Publish....
O
Target é Azuree o Specific target é Azure App Service (Windows).
Quando você se registrou no Azure anteriormente, uma assinatura gratuita já deve ter sido criada e escolhida aqui. Ao clicar em
Create new à direita, agora você pode criar um novo App Service.
As configurações padrão estão totalmente bem. No entanto, você pode escolher uma região diferente aqui, se quiser. Por fim, clique em
Create e depois em Finish.
Quando estiver pronto, a seguinte janela pop-up deverá ser exibida. Ao clicar em
Publish, você pode iniciar o processo de publicação. Por fim, ele mostra o resultado da publicação.
O resumo acima também mostrará a você a URL que foi criada para a implantação. Meu exemplo: https://cryptonewsapp20230124021236.azurewebsites.net/
Novamente, adicione
/news para acessar a página Notícias.
Go em frente e adicione mais alguns dados. Adicione mais campos ou estilize o site um pouco mais do que essa tabela padrão.
A combinação de uso do Microsoft Azure e doMongoDB Atlas torna super fácil e rápido criar sites como este. Mas é apenas o início. Você pode aprender mais sobre o Azure na plataforma Aprenda e sobre Atlas na MongoDB University.
E, se você tiver alguma dúvida, entre em contato conosco pelos fóruns do MongoDB ou twite @domincfrei.
Avalie esse Tutorial