Explore o novo chatbot do Developer Center! O MongoDB AI chatbot pode ser acessado na parte superior da sua navegação para responder a todas as suas perguntas sobre o MongoDB .

Desenvolvedor do MongoDB
Central de desenvolvedor do MongoDBchevron-right
Idiomaschevron-right
C#chevron-right

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
.NETAzureMongoDBC#
APLICATIVO COMPLETO
Ícone do FacebookÍcone do Twitterícone do linkedin
Avalie esse Tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
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.

Pré-requisitos para este 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 trabalhoAzure development, pois implantaremos isso mais tarde. Se você já tiver uma versão instalada do Visual Studio, acesse o Instalador e clique em modify para encontrá-la.

Criação de um novo projeto Microsoft Blazor que conterá nosso site de notícias sobre criptografia

Agora que os pré-requisitos estão fora do caminho, vamos começar criando um novo projeto.
Tela inicial do Visual Studio
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.
Lista de modelos de projeto no Visual Studio
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.
Tela de configuração do projeto no Visual Studio
Escolha seu .NET framework atualmente instalado (conforme descrito em Pre-requisites) e deixe o restante no padrão.
Clique em Create e Go!
Informações adicionais para o projeto

Adicionando o driver MongoDB ao projeto para se conectar ao banco de dados

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.
Menu Arquivo no Visual Studio
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.
Visualização dos pacotes que estão prestes a serem instalados.
Outra mensagem que você encontra pode ser os seguintes contratos de licença, que você precisa aceitar para poder trabalhar com essas bibliotecas.
Licenças para as bibliotecas que estão prestes a serem instaladas.

Criando um novo cluster e banco de dados MongoDB Atlas para hospedar nossas notícias de criptografia

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.
Seletor de cluster para o MongoDB Atlas Opções avançadas para criar um cluster MongoDB Atlas
A etapa final da criação de um novo cluster é pensar nas medidas de segurança passando pelo Security Quickstart.
Início rápido de segurança para a criação do cluster do MongoDB Atlas
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.
Visão geral dos serviços de dados do Atlas
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.

Criando alguns dados de teste no Atlas

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.
Visão geral das coleções do seu cluster do Atlas
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.
Criar pop-up do banco de dados
Isso deve levar a uma nova entrada parecida com esta:
Banco de dados e coleção recém-criados.
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.
Inserindo um novo documento na coleção.
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.

Criando uma string de conexão para acessar seu cluster do MongoDB Atlas

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ãoConnect 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.
Copie a cadeia de conexão que é mostrada no pop-up.
Recuperando a string de conexão para o cluster.

Criando uma nova página do Blazor

Se você nunca usou o Blazor antes, basta clicar no botãoRune 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#.
Menu de contexto para criar um novo componente do Razor Escolher um tipo e nome para o novo componente.
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 classeNews, que ainda precisa ser criada. Na pastaData, adicione uma nova classe C#, chame-a Newse use o seguinte código.
1using MongoDB.Bson;
2using MongoDB.Bson.Serialization.Attributes;
3
4namespace 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 [BsonId] 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 [BsonElement("title")] public String Title { get; set; }
18 [BsonElement("date")] 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.
Site local mostrando 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.

Implantando o website no Azure App Service

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....
Menu de contexto para publicar o aplicativo
O Target é Azuree o Specific target é Azure App Service (Windows).
Escolher um destino de publicação Escolher um alvo específico
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.
Criando 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.
Configurações do App Service Visão geral final antes de publicar o novo aplicativo
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.
Resumo da publicação Publicando resultado
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.
Site de notícias implantado no Azure App Service

O que vem a seguir?

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.

Ícone do FacebookÍcone do Twitterícone do linkedin
Avalie esse Tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Relacionado
Início rápido

Crie seu primeiro aplicativo .NET Core com o MongoDB Atlas


Jun 04, 2024 | 6 min read
Tutorial

Crie uma API RESTful com .NET Core e MongoDB


Sep 11, 2024 | 8 min read
Tutorial

Construindo um AI agente de IA com semântica Kernel, C# C#, OpenAI e MongoDB Atlas


Dec 02, 2024 | 13 min read
Artigo

MongoDB Provider para EF Core: As atualizações mais recentes


Aug 29, 2024 | 6 min read
Sumário