Crie um website de notícias sobre criptomoedas em C# usando o Microsoft Azure App Service e o MongoDB Atlas
Dominic Frei9 min read • Published Apr 17, 2023 • Updated Jun 13, 2023
APLICATIVO COMPLETO
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 emmodify
para 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
Run
e 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.
1 @* The `page` attribute defines how this page can be opened. *@ 2 @page "/news" 3 4 @* The `MongoDB` driver will be used to connect to your Atlas cluster. *@ 5 @using MongoDB.Driver 6 @* `BSON` is a file format similar to JSON. MongoDB Atlas documents are BSON documents. *@ 7 @using MongoDB.Bson 8 @* You need to add the `Data` folder as well. This is where the `News` class resides. *@ 9 @using CryptoNewsApp.Data 10 @using Microsoft.AspNetCore.Builder 11 12 @* The page title is what your browser tab will be called. *@ 13 <PageTitle>News</PageTitle> 14 15 @* Let's add a header to the page. *@ 16 <h1>News</h1> 17 18 @* And then some data. *@ 19 @* This is just a simple table contains news and their date. *@ 20 @if (_news != null) 21 { 22 <table class="table"> 23 <thead> 24 <tr> 25 <th>News</th> 26 <th>Date</th> 27 </tr> 28 </thead> 29 <tbody> 30 @* Blazor takes this data from the `_news` field that we will fill later on. *@ 31 @foreach (var newsEntry in _news) 32 { 33 <tr> 34 <td>@newsEntry.Title</td> 35 <td>@newsEntry.Date</td> 36 </tr> 37 } 38 </tbody> 39 </table> 40 } 41 42 @* This part defines the code that will be run when the page is loaded. It's basically *@ 43 @* what would usually be PHP in a non-Blazor environment. *@ 44 @code { 45 46 // The `_news` field will hold all our news. We will have a look at the `News` 47 // class in just a moment. 48 private List<News>? _news; 49 50 // `OnInitializedAsync()` gets called when the website is loaded. Our data 51 // retrieval logic has to be placed here. 52 protected override async Task OnInitializedAsync() 53 { 54 // First, we need to create a `MongoClient` which is what we use to 55 // connect to our cluster. 56 // The only argument we need to pass on is the connection string you 57 // retrieved from Atlas. Make sure to replace the password placeholder with your password. 58 var mongoClient = new MongoClient("YOUR_CONNECTION_STRING"); 59 // Using the `mongoCLient` we can now access the database. 60 var cryptoNewsDatabase = mongoClient.GetDatabase("crypto-news-database"); 61 // Having a handle to the database we can furthermore get the collection data. 62 // Note that this is a generic function that takes `News` as it's parameter 63 // to define who the documents in this collection look like. 64 var newsCollection = cryptoNewsDatabase.GetCollection<News>("news"); 65 // Having access to the collection, we issue a `Find` call to find all documents. 66 // A `Find` takes a filter as an argument. This filter is written as a `BsonDocument`. 67 // Remember, `BSON` is really just a (binary) JSON. 68 // Since we don't want to filter anything and get all the news, we pass along an 69 // empty / new `BsonDocument`. The result is then transformed into a list with `ToListAsync()`. 70 _news = await newsCollection.Find(new BsonDocument()).Limit(10).ToListAsync(); 71 // And that's it! It's as easy as that using the driver to access the data 72 // in your MongoDB Atlas cluster. 73 } 74 75 }
Acima, você notará a classe
News
, que ainda precisa ser criada. Na pastaData
, adicione uma nova classe C#, chame-a News
e use o seguinte código.1 using MongoDB.Bson; 2 using MongoDB.Bson.Serialization.Attributes; 3 4 namespace CryptoNewsApp.Data 5 { 6 public class News 7 { 8 // The attribute `BsonId` signals the MongoDB driver that this field 9 // should used to map the `_id` from the Atlas document. 10 // Remember to use the type `ObjectId` here as well. 11 [public ObjectId Id { get; set; } ] 12 13 // The two other fields in each news are `title` and `date`. 14 // Since the C# coding style differs from the Atlas naming style, we have to map them. 15 // Thankfully there is another handy attribute to achieve this: `BsonElement`. 16 // It takes the document field's name and maps it to the classes field name. 17 [public String Title { get; set; } ] 18 [public DateTime Date { get; set; } ] 19 } 20 }
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
é Azure
e 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.