ASP.net Core APP 01 – Ambiente

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.

 dotnet --version

Agora vamos listar os SDKs.

dotnet --list-sdks

Agora vamos listar os runtimes.

dotnet --list-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:

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:

dotnet run

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.

using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;

namespace myshop.Models
{
    public class Product
    {
        [BsonId]
        [BsonRepresentation(BsonType.ObjectId)]
        public string Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public float Price { get; set; }
    }
}

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:

using System.Collections.Generic;
using myshop.Models;

namespace myshop.Services
{
    public interface IProductService
    {
         List <Product> GetAll();
    }
}

Em seguida dentro da mesma pasta crie uma classe ProductService conforme o código a seguir:

using System.Collections.Generic;
using MongoDB.Driver;
using myshop.Models;

namespace myshop.Services
{
    public class ProductService : IProductService
    {
        MongoClient con;
        IMongoDatabase db;
        public ProductService()
        {
            con = new MongoClient("mongodb://127.0.0.1:27017");
            db = con.GetDatabase("NomeDB");
            if(db.GetCollection<Product>("Products") == null)
                db.CreateCollection("Products");
        }
        public List<Product> GetAll()
        {
            var collection = db.GetCollection<Product>("Products");
            return collection.Find<Product>(p => true).ToList();
        }
    }
}

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:
using myshop.Services;

//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.

using myshop.Models;
using myshop.Services;

namespace myshop.Controllers
{
    public class HomeController : Controller
    {
        private IProductService productService;
        public HomeController(IProductService productService)
        {
            this.productService = productService;
        }

        public IActionResult Index()
        {
            var listProducts = productService.GetAll();
            return View(listProducts);
        }

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",
    "Price" : 120
}

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.

Agora execute a aplicação no Visual Studio Code e verifique se o produto é apresentado.