Tutorial do provedor MongoDB para o EF Core: criação de um aplicativo com CRUD e controle de alterações
Avalie esse Tutorial
O Entity Framework (EF) faz parte do .NET há muito tempo (desde o .NET 3.51) e é um mapeador relacional de objetos (ORM) popular para muitos aplicativos. O EF desenvolveu-se para o EF Core juntamente com a evolução do .NET. O EF Core oferece suporte a vários provedores de banco de dados diferentes e agora pode ser usado com o MongoDB com a ajuda do provedor MongoDB para Entity Framework Core.
Neste tutorial, vamos ver como você pode criar um aplicativo de reserva de carro usando o novo MongoDB Provider para o EF Core, que oferece suporte às operações de criação, leitura, atualização e exclusão (CRUD), bem como ao rastreamento de alterações, que ajuda a atualizar automaticamente o banco de dados e somente os campos que foram alterados.
Um sistema de reserva de carros é um bom exemplo para explorar os benefícios de usar o EF Core com o MongoDB, pois há a necessidade de representar uma gama diversas de entidades. Haverá entidades como carros com status de disponibilidade e localização associados, e reservas incluindo o carro associado.
À medida que o sistema evolui e cresce, garantir a consistência dos dados pode se tornar um desafio. Além disso, à medida que os usuários interagem com o sistema, atualizações parciais nas entidades de dados, como detalhes da reserva ou especificações do carro, acontecerão com cada vez mais frequência. Capturar e lidar com eficiência com essas atualizações é fundamental para um bom desempenho do sistema e integridade dos dados.
Para acompanhar este tutorial, você precisará de algumas coisas:
- .NET 7.0.
- Conhecimento básico de ASP.NET MVC e C#.
Se você quiser apenas ver o código de exemplo, poderá visualizar o código completo no repositório do GitHub.
O ASP.NET Core é uma estrutura web muito flexível, permitindo que você crie diferentes tipos de aplicativos da Web que tenham pequenas diferenças em termos de interface ou estrutura. Para este tutorial, criaremos um projeto MVC que fará uso de arquivos e controladores estáticos. Existem outros tipos de frontend que você pode usar, como o React, mas o MVC com .cshtml views é o mais usado. Para criar o projeto, vamos usar o .NET CLI:
Como usamos o CLI, embora mais fácil, ele cria apenas o arquivo csproj e não o arquivo de solução que nos permite abri-lo no Visual Studio, então corrigiremos isso.
Agora que criamos o novo projeto, queremos adicionar os pacotes NuGet necessários. Usando o Gerenciador de pacotes NuGet ou os comandos .NET CLI abaixo, adicione os pacotes MongoDB MongoDB.EntityFrameworkCore e Microsoft.EntityFrameworkCore.
No momento em que este artigo foi escrito, o MongoDB.EntityFrameworkCore está em versão prévia, portanto, se estiver usando a interface do NuGet Package Manager dentro do Visual Studio, certifique-se de marcar a caixa “include pre-release”, caso contrário você não obterá nenhum resultado ao procurá-la.
Antes de podermos começar a implementar os novos pacotes que acabamos de adicionar, precisamos criar os modelos que representam as entidades que queremos em nosso sistema de reserva de carro que, é claro, serão armazenados no MongoDB Atlas como documentos. Nas seguintes subseções, criaremos os seguintes modelos:
- Carro
- Reserva
- MongoDBSettings
Primeiro, precisamos criar nosso modelo de carro que representará os carros que estão disponíveis para serem reservados em nosso sistema.
- Crie uma nova classe na pasta Modelos chamada Carro.
- Adicione o seguinte código:
O atributo da coleção antes da classe informa ao aplicativo qual coleção dentro do banco de dados estamos usando. Isso nos permite ter nomes diferentes ou maiúsculas entre nossa classe e nossa coleção, se quisermos.
Também precisamos criar uma classe de reserva para representar todas as reservas que recebemos em nosso sistema.
- Crie uma nova classe dentro da pasta Models chamada Booking.
- Adicione o seguinte código a ele:
Embora não seja um documento em nosso banco de dados, precisamos de uma classe de modelo para armazenar nossas configurações relacionadas ao MongoDB para que possam ser usadas em todo o aplicativo.
- Crie outra classe em Models chamada MongoDBSettings.
- Adicione o seguinte código:
Essa é a parte emocionante. Vamos começar a implementar o EF Core e aproveitar o novo provedor MongoDB. Se você já estiver acostumado a trabalhar com o EF Core, parte disso será familiar.
- Em um local de sua escolha, crie uma classe chamada CarBookingDbContext. Coloquei-o dentro de uma nova pasta chamada Services.
- Substitua o código dentro do namespace pelo seguinte:
Se você está familiarizado com o EF Core, isso parecerá familiar. A classe estende o DbContext e criamos propriedades do DbSet que armazenam os modelos que também estarão presentes no banco de dados. Também substituímos o método OnModelCreating. Você pode notar que, diferentemente de quando usamos o SQL Server, não chamamos .toTable (). Em vez disso, poderíamos chamar ToCollection, mas isso não é necessário aqui, pois especificamos a coleção usando atributos na classe.
Anteriormente, criamos um modelo MongoDBSettings e agora precisamos adicionar os valores que as propriedades mapeiam em nossas appsettings.
- Tanto em appsettings.json quanto em appsettings.Development.json, adicione a seguinte nova seção:
Agora que configuramos nossos modelos e DbContext, é hora de adicioná-los ao nosso arquivo program.cs.
Após a linha
builder.Services.AddControllersWithViews();existente, adicione o seguinte código:Agora, é hora de adicionar os serviços que usaremos para nos comunicar com o banco de dados por meio do CarBookingDbContext que criamos. Para cada serviço, criaremos uma interface e a classe que a implementa.
A primeira interface e serviço que implementaremos é para realizar as operações CRUD na coleção de carros. Isso é conhecido como padrão de repositório. Você pode ver as pessoas interagindo diretamente com o DbContext. Mas a maioria das pessoas usa esse padrão, e é por isso que o incluímos aqui.
- Se você ainda não o fez, crie uma pasta Services para armazenar nossas novas classes.
- Crie uma interface ICarService e adicione o seguinte código para os métodos que vamos implementar:
- Crie um arquivo de classe CarService.
- Atualize a declaração da classe CarService para que ela implemente o ICarService que acabamos de criar:
- Isso fará com que um rabisco vermelho apareça abaixo do ICarService, pois ainda não implementamos todos os métodos, mas vamos implementar os métodos um a um.
- Adicione o código a seguir após a declaração de classe que adiciona um objeto CarBookingDbContext local e um construtor que obtém uma instância do DbContext via injeção de dependência.
- Em seguida, implementaremos o método GetAllCars, então adicione o seguinte código:A propriedade id aqui mapeia para o campo _id em nosso documento, que é um tipo especial do MongoDB ObjectId e é gerado automaticamente quando um novo documento é criado. Mas o que é útil na propriedade _id é que ela pode realmente ser usada para ordenar documentos devido a como é gerada nos bastidores.Se você nunca viu isso antes, o método
AsNoTracking()faz parte do EF Core e impede que o EF rastreie as alterações que você faz em um objeto. Isso é útil para leituras quando você sabe que não haverá nenhuma alteração. - Em seguida, implementamos o método para obter um carro específico usando sua propriedade ID:Depois, adicionamos a implementação do AddCar:Em um ambiente de produção, convém usar algo como ILogger para rastrear essas alterações em vez de imprimir no console. Mas isso nos permitirá ver claramente que uma nova entidade foi adicionada, mostrando o rastreamento de mudanças em ação.
- EditCar é o próximo:Novamente, adicionamos uma chamada para imprimir informações do rastreamento de alterações, pois elas mostrarão que o novo EF Core Provider, mesmo ao usar o MongoDB como banco de dados, é capaz de rastrear modificações.
- Por fim, precisamos implementar DeleteCar:
Em seguida, temos o IBookingService e o BookingService.
- Crie a interface IBookingService e adicione os seguintes métodos:
- Crie a classe BookingService e substitua sua classe pelo seguinte código que implementa todos os métodos:
Este código é muito semelhante ao código para a classe CarService, só que para reservas.
A etapa final para os serviços é adicioná-los ao contêiner de injeção de dependência.
Dentro do Program.cs, Adicione o seguinte código após o código que adicionamos lá antes:
Antes de implementarmos o front-end, precisamos adicionar os modelos de visualização que atuarão como mensageiros entre o front-end e o back-end, quando necessário. Embora nosso aplicativo seja bastante simples, a implementação do modelo de visualização ainda é uma boa prática, pois ajuda a desacoplar as partes do aplicativo.
O primeiro que adicionaremos é o CarListViewModel. Ele será usado como modelo em nossa página Razor mais tarde para listar os carros do nosso banco de dados.
- Crie uma nova pasta na raiz do projeto chamada ViewModels.
- Adicione uma nova classe chamada CarListViewModel.
- Adicione
public IEnumerable<Car> Cars { get; set; }dentro da sua classe.
Também queremos um modelo de visualização que possa ser usado pela visualização Add que adicionaremos mais tarde.
- Dentro da pasta ViewModels, crie uma nova classe chamada CarAddViewModel.
- Adicione
public Car? Car { get; set; }.
Agora, queremos fazer algo muito semelhante para reservas, começando com BookingListViewModel.
- Crie uma nova classe na pasta ViewModels chamada BookingListViewModel.
- Adicione
public IEnumerable<Booking> Bookings { get; set; }.
Finalmente, temos nosso BookingAddViewModel.
Crie a classe e adicione a propriedade
public Booking? Booking { get; set; } dentro da classe.Posteriormente, adicionaremos referências aos nossos modelos e viewmodels nas visualizações. Para que o aplicativo saiba quais são, precisamos adicionar referências a eles no arquivo _ViewImports.cshtml dentro da pasta Visualizações.
Já haverá algumas referências lá, incluindo TagHelpers, então queremos adicionar referências às nossas pastas .Models e .ViewModels. Quando adicionada, ela ficará parecida com o que está abaixo, apenas com o nome do seu aplicativo.
Agora que temos a implementação de back-end e os modelos de visualização aos quais faremos referência, podemos começar a trabalhar no front-end. Criaremos dois controladores: um para Car (carro) e outro para Booking (reserva).
O primeiro controlador que adicionaremos é para o carro.
- Dentro da pasta Controllers existente, adicione um novo controlador. Se estiver usando o Visual Studio, use o modelo Controlador MVC – Controlador vazio.
- Adicione um objeto ICarService local e um construtor que o obtém da injeção de dependência:
- Dependendo do que foi fornecido com seu controlador de andaimes, crie ou atualize a função Index com o seguinte:Para as outras operações CRUD – criar, atualizar e excluir – teremos dois métodos para cada uma: um para Get e outro para Post.
- O HttpGet para Add será muito simples, porque não precisa passar nenhum dado:
- Em seguida, adicione o método Adicionar que será chamado quando for solicitada a adição de um novo carro:
- Agora, vamos adicionar o código para editar um carro:
- Por fim, temos Excluir:
Agora, para o controlador de reserva. É muito semelhante ao CarController, mas tem uma referência tanto ao carro quanto ao serviço de reserva, pois precisamos associar um carro a uma reserva. Isso ocorre porque no momento o EF Core Provider não oferece suporte a relacionamentos entre entidades, portanto podemos relacionar entidades de uma maneira diferente. No entanto, você pode visualizar o roteiro no repositório do GitHub.
- Crie outro Controlador MVC vazio chamado BookingController.
- Cole o código a seguir substituindo a classe atual:
Agora que temos o back-end e os controladores preparados com os endpoints para nosso sistema de reserva de carros, é hora de implementar as visualizações. Isso será feito usando as páginas Razor. Você também verá referências a classes do Bootstrap, pois essa é a estrutura CSS que vem com aplicativos MVC prontos para uso. Forneceremos visualizações para as operações CRUD tanto para listagens quanto para reservas.
Primeiro, forneceremos uma visualização que mapeará para a raiz de /Car que, por convenção, examinará o método de índice que implementamos.
O ASP.NET Core MVC usa um padrão de convenção pelo qual você dá ao arquivo .cshtml o nome do endpoint/método que ele usa e ele fica dentro de uma pasta com o nome de seu controlador.
- Dentro da pasta Visualizações, crie uma nova subpasta chamada Car.
- Dentro da pasta Car, adicione uma nova visualização. Se estiver usando os modelos disponíveis, é Razor View - Empty. Dê um nome ao índice de visualização.
- Exclua o conteúdo do arquivo e adicione uma referência ao CarListViewModel na parte superior
@model CarListViewModel. - Em seguida, devemos adicionar um placeholder para o tratamento de erros. Se houve algum problema ao excluir um carro, nós adicionamos uma string ao TempData e, portanto, temos que adicionar isso à visualização, se houver dados a serem exibidos.
- A seguir, trataremos se não há carros no banco de dados, exibindo uma mensagem ao usuário:
- A maneira mais fácil de exibir a lista de carros e as informações relevantes é por meio de uma tabela:Faz sentido ter a lista de carros como nossa página inicial, portanto, antes de prosseguirmos, atualizaremos a rota padrão de Home para /Car.
- Em Program.cs, dentro de
app.MapControllerRoute, substitua a linha padrão pelo seguinte:
Se executássemos isso agora, os botões levariam a 404s porque ainda não os implementamos. Então, vamos fazer isso agora.
Começaremos com o formulário para adicionar novos carros.
- Adicione uma nova Razor View vazia dentro da subpasta Car chamada Add.cshtml.
- Antes de adicionar o formulário, adicionaremos a referência do modelo na parte superior, um cabeçalho e conteúdo condicional para a mensagem de erro.
- Agora, podemos implementar o formulário.
Agora, queremos adicionar um botão na parte inferior para navegar facilmente de volta à lista de carros, caso o usuário decida não adicionar um novo carro. Adicione o seguinte após a tag
</form>:O código para a página Editar é quase idêntico a Adicionar, mas ele usa o carro como um modelo, pois usará o carro que é passado para pré-preencher o formulário para edição.
- Adicione outra visualização dentro da subpasta do carro chamada Edit.cshtml.
- Adicione o seguinte código:
A última página que precisamos implementar é a página chamada assim que clicamos no botão de exclusão de um carro.
- Crie uma nova visualização vazia chamada Delete.cshtml.
- Adicione o seguinte código para adicionar o modelo, o título e a mensagem de erro condicional:Em vez de um formulário como nas outras exibições, vamos adicionar uma lista de descrição para exibir informações sobre o carro para o qual estamos confirmando a exclusão.
- Abaixo disso, adicionaremos um formulário para enviar a exclusão e o botão para retornar à lista:
Adicionamos as visualizações para os carros, então agora adicionaremos as visualizações para as reservas, começando pela listagem de todos os livros existentes.
- Crie uma nova pasta dentro da pasta Views chamada Booking.
- Crie uma nova visualização vazia chamada Index.
- Adicione o seguinte código para exibir as reservas, se houver:
Adicionar reservas é o próximo passo. Esta visualização estará disponível quando o botão de reserva for clicado ao lado de um carro listado.
- Crie uma visualização vazia chamada Add.cshtml.
- Adicione o seguinte código:
Assim como acontece com os carros, também queremos poder editar livros existentes.
- Crie uma visualização vazia chamada Edit.cshtml.
- Adicione o seguinte código:
A visualização final que precisamos adicionar é excluir uma reserva. Assim como no caso dos carros, exibiremos as informações da reserva e a confirmação da exclusão.
Agora temos um aplicativo funcional que usa o novo provedor do MongoDB para EF Core — oba! Agora é a hora de testar tudo e visitar nossos endpoints para garantir que tudo funcione.
Não faz parte deste tutorial, pois não é obrigatório, mas optei por fazer algumas alterações no arquivo site.css para dar um toque especial. Também atualizei o arquivo _Layout.cshtml para adicionar as páginas Carro e Reservas à barra de navegação. Você verá isso refletido nas capturas de tela no restante do artigo. É claro que você pode fazer suas próprias alterações se tiver ideias de como gostaria de deixar o aplicativo.
Abaixo estão algumas capturas de tela que fiz no aplicativo, mostrando os recursos do endpoint Carros.
As páginas de reservas serão muito semelhantes às dos carros, mas são adaptadas para o modelo de reservas que inclui datas.
Pronto: temos um aplicativo de pilha completa usando ASP.NET MVC que usa o novo MongoDB Provider para EF Core. Podemos realizar as operações CRUD e acompanhar as alterações. O EF Core é amplamente usado entre desenvolvedores, portanto, ter um MongoDB Provider oficial é muito emocionante. Esta biblioteca está em Pré-visualização, o que significa que continuamos desenvolvendo novos recursos. Fique atento às atualizações e estamos sempre abertos a comentários. Mal podemos esperar para ver suas criações!
Você pode visualizar o Roadmap do provedor no repositório GitHub, onde também pode encontrar links para a documentação!
Como sempre, se você tiver alguma dúvida sobre esse ou outros assuntos, participe dos fóruns da MongoDB Community.