C#: PostgreSQL e .NET Core 2.1

Certas vezes é inviável contar com um banco de dados pago quando o projeto está iniciando. Mas nem por isso não será preciso que seja um repositório de dados profissional. Portanto, neste artigo ensino como usar o banco de dados relacional PostgresSQL com o .NET Core 2.1, ainda usando Entity Framework Core e Migrations.

Antes de começar você vai precisar:

Ter o PostgreSQL instalado, com a senha do localhost como 123456,
Ter o Visual Studio Code intalado,
Ter o .NET Core 2.1 SDK instalado.

Criando o projeto

Crie uma pasta vazia chamada PostgreSqlNetCore e dentro dela crie uma outra chamada src. E na pasta raíz, crie o arquivo da solução, usando o comando:

dotnet new sln

1	dotnet new sln

Abra a a pasta src e crie dentro dela a pasta PostgreSqlNetCore.Domain, e neste diretório execute o comando abaixo para criar o projeto do domínio:

dotnet new classlib

1	dotnet new classlib

Crie uma pasta chamada Entities, e adicione duas classes, uma de pessoa e outra de categoria.

using System;

namespace PostgreSqlNetCore.Domain.Entities
{
    public class Person
    {
        public Person(Guid id, 
                      string name,
                      Guid categoryId)
        {
            Id = id;
            Name = name;
            CategoryId = categoryId;
        }

        public Guid Id { get; private set; }
        public string Name { get; private set; }
        public Guid CategoryId { get; private set; }
    }
}

using System;

namespace PostgreSqlNetCore.Domain.Entities

{

public class Person

{

public Person(Guid id,

string name,

Guid categoryId)

{

Id = id;

Name = name;

CategoryId = categoryId;

}

public Guid Id { get; private set; }

public string Name { get; private set; }

public Guid CategoryId { get; private set; }

}

using System;

namespace PostgreSqlNetCore.Domain.Entities
{
    public class Category
    {
        public Category(Guid id, 
                        string description)
        {
            Id = id;
            Description = description;
        }

        public Guid Id { get; private set; }
        public string Description { get; private set; }
    }
}

using System;

namespace PostgreSqlNetCore.Domain.Entities

{

public class Category

{

public Category(Guid id,

string description)

{

Id = id;

Description = description;

}

public Guid Id { get; private set; }

public string Description { get; private set; }

}

Agora vamos criar o projeto que conterá nossa camada de acesso a dados, migrations e CRUD. Abra a a pasta src e crie dentro dela a pasta PostgreSqlNetCore.Infra.Data, e neste diretório execute o comando abaixo para criar o projeto de domínio:

dotnet new classlib

1	dotnet new classlib

Instale os pacotes conforme a seguir:

Npgsql.EntityFrameworkCore.PostgreSQL

dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL

1	dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL

Microsoft.Extensions.Configuration.FileExtensions

dotnet add package Microsoft.Extensions.Configuration.FileExtensions

1	dotnet add package Microsoft.Extensions.Configuration.FileExtensions

Microsoft.Extensions.Configuration.Json

dotnet add package Microsoft.Extensions.Configuration.Json

1	dotnet add package Microsoft.Extensions.Configuration.Json

Adicione a referência ao projeto de domínio, com o comando:

dotnet add reference ..\PostgreSqlNetCore.Domain\

1	dotnet add reference ..\PostgreSqlNetCore.Domain\

Crie uma pasta chamada Context, e adicione uma classe chamada PostgreSqlContext.

using System;
using Microsoft.EntityFrameworkCore;
using PostgreSqlNetCore.Domain.Entities;
using Microsoft.Extensions.Configuration;
using System.IO;

namespace PostgreSqlNetCore.Infra.Data.Context
{
    public class PostgreSqlContext : DbContext
    {
        private readonly IConfigurationRoot _configurationFile;
        private readonly string _connectionString;

        public PostgreSqlContext(DbContextOptions<PostgreSqlContext> options) :
            base(options)
        {
            _configurationFile = new ConfigurationBuilder()
                                    .SetBasePath(Directory.GetCurrentDirectory())
                                    .AddJsonFile("appsettings.json")
                                    .Build();

            _connectionString = _configurationFile
                                    .GetConnectionString("PostgreSqlNetCoreConnection");

        }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseNpgsql(_connectionString);
            base.OnConfiguring(optionsBuilder);
        }

        public DbSet<Person> People { get; set; }
        public DbSet<Category> Categories { get; set; }
    }
}

using System;

using Microsoft.EntityFrameworkCore;

using PostgreSqlNetCore.Domain.Entities;

using Microsoft.Extensions.Configuration;

using System.IO;

namespace PostgreSqlNetCore.Infra.Data.Context

{

public class PostgreSqlContext : DbContext

{

private readonly IConfigurationRoot _configurationFile;

private readonly string _connectionString;

public PostgreSqlContext(DbContextOptions<PostgreSqlContext> options) :

base(options)

{

_configurationFile = new ConfigurationBuilder()

.SetBasePath(Directory.GetCurrentDirectory())

.AddJsonFile("appsettings.json")

.Build();

_connectionString = _configurationFile

.GetConnectionString("PostgreSqlNetCoreConnection");

}

protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)

{

optionsBuilder.UseNpgsql(_connectionString);

base.OnConfiguring(optionsBuilder);

}

public DbSet<Person> People { get; set; }

public DbSet<Category> Categories { get; set; }

}

Abra a a pasta src e crie dentro dela a pasta PostgreSqlNetCore.Prompt, e neste diretório execute o comando abaixo para criar o projeto de domínio:

dotnet new console

1	dotnet new console

Instale o pacote Microsoft.EntityFrameworkCore.Design.

dotnet add package Microsoft.EntityFrameworkCore.Design

1	dotnet add package Microsoft.EntityFrameworkCore.Design

Adicione referência ao projeto de Dados.

dotnet add reference ..\PostgreSqlNetCore.Infra.Data\

1	dotnet add reference ..\PostgreSqlNetCore.Infra.Data\

Na raiz do projeto, adicione um arquivo chamado appsettings.json, e altere conforme a seguir:

{ 
    "ConnectionStrings": 
    { 
        "PostgreSqlNetCoreConnection": "Host=localhost;Port=5432;Username=postgres;Password=123456;Database=PostgreSqlNetCoreDb;" 
    } 
}

{

"ConnectionStrings":

{

"PostgreSqlNetCoreConnection": "Host=localhost;Port=5432;Username=postgres;Password=123456;Database=PostgreSqlNetCoreDb;"

}

Adicione ainda na raiz do projeto a classe DesignTimeDbContextFactory.

using System.IO;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Design;
using Microsoft.Extensions.Configuration;
using PostgreSqlNetCore.Infra.Data.Context;

namespace PostgreSqlNetCore.Prompt
{
    public class DesignTimeDbContextFactory : IDesignTimeDbContextFactory<PostgreSqlContext>
    {
        public PostgreSqlContext CreateDbContext(string[] args)
        {
            IConfigurationRoot configuration = new ConfigurationBuilder()
                .SetBasePath(Directory.GetCurrentDirectory())
                .AddJsonFile("appsettings.json")
                .Build();
            var builder = new DbContextOptionsBuilder<PostgreSqlContext>();
            var connectionString = configuration.GetConnectionString("PostgreSqlNetCoreConnection");
            builder.UseNpgsql(connectionString);
            return new PostgreSqlContext(builder.Options);
        }
    }
}

using System.IO;

using Microsoft.EntityFrameworkCore;

using Microsoft.EntityFrameworkCore.Design;

using Microsoft.Extensions.Configuration;

using PostgreSqlNetCore.Infra.Data.Context;

namespace PostgreSqlNetCore.Prompt

{

public class DesignTimeDbContextFactory : IDesignTimeDbContextFactory<PostgreSqlContext>

{

public PostgreSqlContext CreateDbContext(string[] args)

{

IConfigurationRoot configuration = new ConfigurationBuilder()

.SetBasePath(Directory.GetCurrentDirectory())

.AddJsonFile("appsettings.json")

.Build();

var builder = new DbContextOptionsBuilder<PostgreSqlContext>();

var connectionString = configuration.GetConnectionString("PostgreSqlNetCoreConnection");

builder.UseNpgsql(connectionString);

return new PostgreSqlContext(builder.Options);

}

Agora é preciso associar todos os projetos na solução, e para isso, abra a pasta raiz no terminal, e execute os comando a seguir:

dotnet sln add .\src\PostgreSqlNetCore.Domain\
dotnet sln add .\src\PostgreSqlNetCore.Infra.Data\
dotnet sln add .\src\PostgreSqlNetCore.Prompt\

dotnet sln add .\src\PostgreSqlNetCore.Domain\

dotnet sln add .\src\PostgreSqlNetCore.Infra.Data\

dotnet sln add .\src\PostgreSqlNetCore.Prompt\

Agora é só executar o comando para criar a migração.

dotnet ef migrations add initial --project .\src\PostgreSqlNetCore.Infra.Data\PostgreSqlNetCore.Infra.Data.csproj --startup-project .\src\PostgreSqlNetCore.Prompt\

1	dotnet ef migrations add initial --project .\src\PostgreSqlNetCore.Infra.Data\PostgreSqlNetCore.Infra.Data.csproj --startup-project .\src\PostgreSqlNetCore.Prompt\

E então atualizar o banco de dados.

dotnet ef database update --project .\src\PostgreSqlNetCore.Infra.Data\ --startup-project .\src\PostgreSqlNetCore.Prompt\

1	dotnet ef database update --project .\src\PostgreSqlNetCore.Infra.Data\ --startup-project .\src\PostgreSqlNetCore.Prompt\

E enfim podemos ver o banco de dados com as nossas tabelas criadas e o versionamento das migrations.

Acesse o repositório no githus deste projeto no link a seguir:

https://github.com/tiagopariz/PostgreSqlNetCore

Obrigado, e até a próxima.

C# e Mvc: mapa do Google com marcadores

Você já precisou colocar um mapa em seu site ou aplicativo? E este mapa precisaria mostrar vários locais, como unidades comerciais de um empresa com filiais? Neste artigo eu mostro como exibir um mapa usando a API Google e adicionar os devidos marcadores em um site feito em C# e MVC.

Mas primeiro, você vai precisar de uma chave do Google API Maps, que pode ser adquirida no endereço:

https://developers.google.com/maps

Chave na mãe, vamos criar uma pasta chamada CSharpMvcGoogleMapWithMarkers e dentro dela incluir outra chamada src e então abrir no Visual Studio Code.

Se você ainda não usou o VS Code e/ou ainda usa apenas o Visual Studio convencional, eu fiz um artigo para quebrar o gelo com este editor opensource da Microsoft.

Dentro da pasta src, crie outra pasta chamada CSharpMvcGoogleMapWithMarkers.Mvc, volte na pasta raiz e abra esta pasta no terminal e vá digitando os comandos a seguir:

Crie uma solução, para que seja possível abrir no Visual Studio convencional:

dotnet new sln

1	dotnet new sln

Abra a pasta do projeto MVC:

cd .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

1	cd .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

Crie um projeto C# do tipo MVC:

dotnet new mvc

1	dotnet new mvc

Volte a pasta raiz:

cd ..\..\

cd ..\..\

Adicione o projeto MVC na solução:

dotnet sln add .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

1	dotnet sln add .\src\CSharpMvcGoogleMapWithMarkers.Mvc\

Execute o site e veja no navegador:

dotnet run --project .\src\CSharpMvcGoogleMapWithMarkers.Mvc\CSharpMvcGoogleMapWithMarkers.Mvc.csproj

1	dotnet run --project .\src\CSharpMvcGoogleMapWithMarkers.Mvc\CSharpMvcGoogleMapWithMarkers.Mvc.csproj

A saída do terminal será esta, onde o VS Code vai informar a URL local para testar, normalmente https://localhost:5001 ou http://localhost:5000.

Copie e cole no navegador o endereço e confira a página:

Crie um novo controller, chamado StoreController, que será uma tela com um mapa e ponto onde há lojas de uma empresa. Para isso, clique o botão direito sobre a pasta Controllers, clique em New file e defina o nome como StoreController.cs.

using Microsoft.AspNetCore.Mvc;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Controllers
{
    public class StoreController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Detail()
        {
            return View();
        }        
    }
}

using Microsoft.AspNetCore.Mvc;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Controllers

{

public class StoreController : Controller

{

public IActionResult Index()

{

return View();

}

public IActionResult Detail()

{

return View();

}

Clique o botão direito sobre a pasta Models, clique em New file e defina o nome como StoreViewModel.cs.

using System;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Models
{
    public class StoreViewModel
    {
        public Guid Id { get; set; }
        public String Name { get; set; }
        public String Address { get; set; }
        public String Phone { get; set; }
        public String Latitude { get; set; }
        public String Longitude { get; set; }
    }
}

using System;

namespace CSharpMvcGoogleMapWithMarkers.Mvc.Models

{

public class StoreViewModel

{

public Guid Id { get; set; }

public String Name { get; set; }

public String Address { get; set; }

public String Phone { get; set; }

public String Latitude { get; set; }

public String Longitude { get; set; }

}

Para facilitar, adicione um novo item de menu chamado Know our stores que abre a action Index do controller Store, para isto edite o arquivo Views/Share/_Layout.cshtml.

(...)

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
        <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
        <li><a asp-area="" asp-controller="Store" asp-action="Index">Know our stores</a></li>
    </ul>
</div>

(...)

(...)

<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>

<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>

<li><a asp-area="" asp-controller="Store" asp-action="Index">Know our stores</a></li>

</ul>

</div>

(...)

Clique o botão direito sobre a pasta Views, clique em New folder e digite Store, em seguida clique o botão direito sobre Store e em New file e defina o nome como Index.cshtml.

@{
    ViewData["Title"] = "Map";
}
<h2>@ViewData["StoreName"]</h2>
<h3>@ViewData["Message"]</h3>

<style>
    #map {
    height: 600px;
    }
</style>

<h2>Stores</h2>

<div id="map"></div>
<script>
    var map;
    function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -30.060821, lng: -51.181687},
        zoom: 14
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.059737, -51.164658),
            title:"Store 1"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.064746, -51.157816),
            title:"Store 2"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.066648, -51.155412),
            title:"Store 3"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.051898, -51.194615),
            title:"Store 4"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.052617, -51.181038),
            title:"Store 5"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.071457, -51.191396),
            title:"Store 6"
        });
        marker.setMap(map);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(-30.059410, -51.207637),
            title:"Store 7"
        });
        marker.setMap(map);
    };
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

ViewData["Title"] = "Map";

}

<h2>@ViewData["StoreName"]</h2>

<h3>@ViewData["Message"]</h3>

<style>

#map {

height: 600px;

}

</style>

<h2>Stores</h2>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -30.060821, lng: -51.181687},

zoom: 14

});

var marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059737, -51.164658),

title:"Store 1"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.064746, -51.157816),

title:"Store 2"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.066648, -51.155412),

title:"Store 3"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.051898, -51.194615),

title:"Store 4"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.052617, -51.181038),

title:"Store 5"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.071457, -51.191396),

title:"Store 6"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059410, -51.207637),

title:"Store 7"

});

marker.setMap(map);

};

</script>

Explicando o código Javascript do mapa

Declaramos uma variável chamada map e criamos uma função initMap (), serão informadas as coordenadas inciais e logo após definido os marcadores.

var map;
function initMap()
{

};

var map;

function initMap()

{

};

Agora vamos definir a posição e o zoom do mapa, instanciando um novo objeto google.maps.Map, que recebe os parâmetros que informa qual a div que será renderizado o mapa, as coordenadas e o zoom.

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -30.060821, lng: -51.181687},
            zoom: 14
        });
};

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -30.060821, lng: -51.181687},

zoom: 14

});

};

Se você quiser entender melhor como funciona o Zoom e demais opções, clique no link abaixo para a documentação do google:

https://developers.google.com/maps/documentation/javascript/tutorial

Agora, com o mapa pronto, é adicionar os marcadores, para isso é só instanciar um objeto do tipo google.maps.Marker e usar a função setMap().

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -30.060821, lng: -51.181687},
            zoom: 14
        });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.059737, -51.164658),
        title:"Store 1"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.064746, -51.157816),
        title:"Store 2"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.066648, -51.155412),
        title:"Store 3"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.051898, -51.194615),
        title:"Store 4"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.052617, -51.181038),
        title:"Store 5"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.071457, -51.191396),
        title:"Store 6"
    });
    marker.setMap(map);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-30.059410, -51.207637),
        title:"Store 7"
    });
    marker.setMap(map);
};

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -30.060821, lng: -51.181687},

zoom: 14

});

var marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059737, -51.164658),

title:"Store 1"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.064746, -51.157816),

title:"Store 2"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.066648, -51.155412),

title:"Store 3"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.051898, -51.194615),

title:"Store 4"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.052617, -51.181038),

title:"Store 5"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.071457, -51.191396),

title:"Store 6"

});

marker.setMap(map);

marker = new google.maps.Marker({

position: new google.maps.LatLng(-30.059410, -51.207637),

title:"Store 7"

});

marker.setMap(map);

};

Segue a documentação do Google sobre marcadores:

https://developers.google.com/maps/documentation/javascript/markers

Ao carregar o mapa, todas as lojas serão exibidas como marcadores no mapa.

Pronto, agora temos uma mapa com marcadores de locais.

Este projeto pode ser conferido no meu repositório do GitHub:

https://github.com/tiagopariz/CSharpMvcGoogleMapWithMarkers