ASP.net Core APP 01 – Ambiente – Walter Coan
Antes de iniciar o desenvolvimento precisamos compreender nosso ambiente e verificar quais versões do SDK e do Runtime do dotnet estão disponíveis. Primeiro vamos ver a versão atual.
Agora vamos listar os SDKs.
Agora vamos listar os runtimes.
Por fim vamos criar um arquivo chamado global.json para definir a versão do SDK e da runtime que vamos utilizar.
dotnet new globaljson --sdk-version 2.2.203 --force
O primeiro passo realizado neste projeto foi a criação do esqueleto da aplicação utilizado a linha de comando, e executando:
dotnet new mvc -o myshop
Em seguida realize o download do arquivo ui-ecommerce.zip através deste link https://1drv.ms/u/s!Amsz66OT5hTfi59IuCY06YO6qAdC3A?e=U750ba e descompacte dentro do seu desktop.
Mova os arquivos conforme a seguinte tabela:
Origem: ui-ecommerce.zip Destino: Projeto myshop
\ui-ecommerce\css\* \myshop\wwwroot\css
\ui-ecommerce\js\* \myshop\wwwroot\js
\ui-ecommerce\images\* \myshop\wwwroot\images
\ui-ecommerce\starter-page-listing.html \myshop\Views\Home\Index.cshtml
Caso voce execute a aplicação teclando F5 no Visual Studio Code ou rodando o comando dentro da pasta do projeto na linha de comando:
Deverá ter o seguinte resultado ao acessar https://localhost:5001
Acesso ao banco de dados Mongo
Para ter acesso ao banco de dados mongo, precisamos primeiro instalar a biblioteca para .net Core, para isso vá novamente ao terminal dentro da pasta do projeto e execute o comando:
dotnet add package MongoDB.Driver --version 2.9.1
Você também precisa instalar o MongoDB, para isso siga o manual: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/
Agora vamos criar uma classe dentro do namespace Models para representar os dados do Produto que será mostrado na tela principal. Para isso crie a classe Product, e insira o código abaixo. Observe que vamos anotar a propriedade Id com as anotações BsonId e BsonRepresentation para informar ao Mongo que este atributo é a chave única da coleção.
namespace myshop.Models
Agora vamos criar um conjunto de classes de Serviço onde vamos no primeiro momento conectar diretamente com o banco de dados Mongo e realizar uma consulta e destinar os dados recebidos para a tela. Para isso crie dentro do projeto um novo diretório chamado Services.
Dentro deste diretório crie uma interface IProductService.cs com o seguinte código inicial:
List <Product> GetAll();
Em seguida dentro da mesma pasta crie uma classe ProductService conforme o código a seguir:
con = new MongoClient("mongodb://127.0.0.1:27017");
db = con.GetDatabase("NomeDB");
Observe que na linha con = new MongoClient("mongodb://127.0.0.1:27017"); você deve informar o IP do seu servidor MongoDB ou manter 127.0.0.1 caso o servidor esteja instalado no seu próprio computador. Na linha db = con.GetDatabase("NomeDB"); informe o nome do seu banco de dados. Dentro do método GetAll() estamos executando o método Find para retornar todos os objetos encontrados na coleção.
Agora para que este serviço seja injetado por dependência dentro da nossa classe controller, devemos alterar o código da classe Startup.cs para no método ConfigureServices inserir a linha para injeção desta dependência.
//No topo da classe:
//No método ConfigureServices
services.AddScoped<IProductService,ProductService>();
Então podemos finalmente alterar o código da nossa classe HomeController para no método construtor receber a instância do ProductService e na action Index() executar a consulta e repassar o resultado para a View.
var listProducts = productService.GetAll();
Agora devemos alterar nossa view para que os dados enviados pelo controller sejam exibidos. Para isso identifique dentro do template \Views\Home\index.cshtml um tag article com a class card-product
<article class="card card-product">
Observe que todo o conteúdo desta tag article contém todo o layout da listagem para mostrar um produto. Após esse primeiro tag, deve existir um grupo de tags article com a classe card-product, remova esse segundo grupo mantendo apenas o primeiro.
Agora no início do arquivo Index.cshtml vamos inserir o comando @model do Razor para indicar que esta página utilizará uma lista de Product como sua classe de fonte de dados:
@model IList<myshop.Models.Product>
Então antes do início do tag article vamos inserir um @foreach para repetir o código do bloco para cada produto que foi enviado na lista pelo controllador. E na tag h4 vamos inserir o título do produto utilizando a tag @item.Name
Para concluir, devemos fechar o foreach com uma chaves logo após o fim do tag article.
Para testar nossa aplicação precisamos acessar o banco de dados e criar alguns registros, para isso instale o programa Robo 3T https://robomongo.org/ e realize a conexão com seu servidor MongoDB.
Procure o seu banco de dados e dentro dele a coleção Products. Clique com o botão direito sobre a coleção Product, e selecione a opção Insert Document.
Insira um novo documento conforme o código de exemplo a seguir.
"Name" : "Batedeira Arno",
"Description" : "Batedeira Arno modelo 2000",
Para confirmar se o documento foi inserido clique duas vezes sobre a coleção Product e verifique se o documento é apresentado na listagem da direita.