Índice

• Especificações técnicas;

• Estrutura do projeto;

• Configuração do ambiente de desenvolvimento;

• Abrindo o código da plataforma;

• Desativando o Recaptcha para poder fazer login no ambiente local.

Especificações técnicas

Back-end

• Linguagem: C#

• Framework: Aspnet MVC 5

• Plataforma: Aspnet Framework 4.7.2

• Banco de dados: SQL Server Express

• ORM: Entity Framework 6, Dapper

• Hospedagem: AWS - Amazon Web Services

Front-end

• View Engine: Razor View Engine

• CSS Framework: Bootstrap 3

• Javascript Framework: jQuery

Serviços e APIs utilizados

• Envio de emails: Twilio's SendGrid

• Armazenamento de arquivos (storage): Amazon S3

• CDN: Amazon CloudFront

Outros

• IDE: Visual Studio 2019

• Compilador automático de Views: RazorGenerator

Estrutura do projeto

Arquitetura

A aplicação é divida nos seguintes grupos de camada:

• Apresentação

• Aplicação

• Infraestrutura

As camadas são refletidas na organização do projeto através das pastas dentro de src:

Camada de Apresentação

• Projeto Presentation

• Padrão MVC (Model View Controller)

• As Views são pré-compiladas com a extensão RazorGenerator (mais sobre isso adiante) para ganho de performance

• Destaque para os itens:

  • Areas: contra o subprojeto da (controllers, views, scripts, css) da área administrativa, e também da API pública da plataforma (documentação aqui)

  • Controllers: código dos controllers da parte principal da plataforma (aquela acessada pelos usuários finais - compradores e vendedores)

  • Views: código das views da parte principal da plataforma

  • connstrings.config e appsettings.config: configurações do projeto, como Connection String (dados para conexão com o banco de dados) e outras chaves

Camada de Aplicação

• Projetos Application, V2.Application, Domain

• Concentram as regras de negócio da aplicação, através de classes de Domínio (models, entidades) e Serviço

• Definem também interfaces para os serviços de infraestrutura que são implementados nos projetos focados em infraestrutura. Essas interfaces são: envio de email, conexão com banco de dados, integração com gateway de pagamento, etc.

• Explicando os projetos separadamente:

  • Application: age como uma ponte entre a camada de Apresentação e as Entidades de Domínio. Contém também várias classes de serviço, que processam ações dos usuários, implementando assim os Casos de Uso da plataforma (ex. processamento de um pedido, conectando com gateway de pagamento, banco de dados e outros)

  • V2.Application: existe para auxiliar na refatoração de classes e serviços originais de Application. Novos serviços são criados em V2.Application, e serviços antigos de Application são migrados para a nova estrutura de forma gradativa

  • Domain: define as models e entidades centrais da plataforma (ex. classes de Vendedor, Comprador, Produto, Pedido, Orçamento, etc.)

    • Contém também as classes que representam a Configuração da plataforma (classes dentro da pasta Config), que ditam o funcionamento de toda a regra de negócio da plataforma.

    • Por fim, contém ainda as classes de DomainEvents, que representam os eventos gerados pela regra de negócio e que podem ser usados para disparar ações adicionais/efeitos colaterais de forma desacoplada (ex. quando um pedido é pago, a plataforma dispara um evento do tipo OrderStatusChangedEvent, que é capturado por outra classe para acionar o disparo de emails para o comprador e vendedor). Veja este artigo para saber mais sobre este conceito.

Camada de Infraestrutura

• Os principais projetos são Infrastructure, V2.Infrastructure e V2.Infrastructure.Boostrapper

• Os projetos dessa camada são todos voltados para a implementação de serviços que excedem a barreira física das classes de negócio, ou seja, que fazem algum tipo de IO (disco, APIs, banco de dados, etc.)

• As principais implementações são:

  • Repositórios, Queries e Acesso a Dados, também envio de emails (Infrastructure e V2.Infrastructure)

  • Configuração de Injeção de Dependências para todo o projeto (V2.Infrastructure.Bootstrapper)

  • Integração com armazenamento de arquivos em nuvem (CloudStorage)

  • Importação em massa de vendedores e produtos (BatchImport)

  • Integração com Correios (Infra.Crosscutting.Correios)

  • Mecanismo de busca inteligente (Infra.SmartSearchAdapter)

  • Integração com Gateways de Pagamento (PaymentIntegrator.Moip, PaymentIntegrator.PagarMe, NewIntegrator.Stripe)

Outros

RazorGenerator

Todos os detalhes sobre a extensão aparecem em sua página. Os pontos relevantes para o projeto são:

• Extensão que deve ser instalada diretamente no Visual Studio (ou neste link)

• Todas as views (arquivos .cshtml) devem ter a propriedade CustomTool definida para RazorGenerator

• Com isso, ao salvar o arquivo .cshtml, o Visual Studio gera automaticamente sua versão pré-compilada no arquivo de mesmo nome e extensão .generated.cs

• A extensão também conta com dois comandos que podem ser executados pelo PMC (Package Manager Console) para:

  • Definir automaticamente o CustomTool como RazorGenerator para todas as views do projeto (comando enable-razorgenerator)

  • Recompilar todas as views, forçando gerar/atualizar o arquivo .generated.cs para todas elas (comando redo-razorgenerator)

  • Mais sobre estes comandos no link

Configuração do ambiente de desenvolvimento

Pré-requisitos

• Sistema operacional Windows, já que a plataforma é desenvolvida no framework Asp.Net, versão 4.7.2.

Siga os demais passos na ordem em que aparecem.

Instalação de softwares

Baixe o instalador do Visual Studio Community Edition 2019, que é uma edição gratuita. Prossiga com a instalação selecionando os pacotes focados em Desenvolvimento Web (não confundir com Desenvolvimento Mobile), com suporte ao Asp.Net Framework 4.7.2 (não confundir com Asp.Net Core).

Baixe o SQL Server Express e também o SQL Server Management Studio (SSMS), que é a interface gráfica para gerenciar os bancos de dados do Sql Server Express, executar consultas, se conectar ao banco de dados de produção, entre outros.

Sincronizando o Backup do banco de dados ao SQL Express para executar o Projeto

Para importar o banco de dados, primeiramente faça o download do arquivo na pasta que foi entregue o codigo fonte com o nome no modelo: NOMEDESEUNEGOCIO-bancodedados.bacpac, após isso utilize o SQL Server, acessando localmente pelo Sqlexpress, clicando em database e posteriormente em Import Data-tier Application:

Abrindo o código da plataforma

Abra o código executando o arquivo WhiteLabel.sln na raiz do projeto. Isso carregará todo o projeto no Visual Studio.

É recomendado que você hospede sua cópia do código fonte num repositório privado, mantendo sigilo do código fonte, conforme disposto as questões legais, referidas em contrato:

• Os direitos patrimoniais referentes à plataforma pertencem exclusivamente à empresa Ideia no Ar. Pertencem ao cliente seu banco de dados e informações relacionadas para acesso ao mesmo. Ambos código fonte e banco de dados são disponibilizados ao cliente ao término do contrato.

• Por se tratar de licenciamento de uso da plataforma, o cliente só poderá utilizar o código-fonte para a mesma finalidade de utilização do contrato assinado, ou seja, para modificar a plataforma única e exclusivamente para que atenda o modelo de negócio previsto em contrato.

• É absolutamente vedado ao cliente a utilização integral ou parcial do código-fonte para qualquer outra finalidade, senão aquela desenvolvida pelo Ideia no Ar para a plataforma de marketplace do cliente, ou o aproveitamento de parte ou integralidade do código-fonte para outros softwares, aplicativos, aplicações ou similares.

• A utilização indevida ou não autorizada dos códigos-fonte pelo cliente ou por terceiro que tenha tido acesso ao código-fonte por intermédio deste implicará obrigatoriamente no repasse de todo o faturamento advindo da utilização indevida para o Ideia no Ar, sem prejuízo de perdas e danos.

• Caso o cliente porventura tenha acesso a qualquer informação relativa à Plataforma Marketplace do Ideia no Ar, independentemente da forma como tomou conhecimento, deverá manter sigilo sobre as informações e não poderá, em hipótese alguma, divulgar ou utilizar as informações obtidas para qualquer outro fim, senão a execução do contrato assinado.

• O dever de sigilo perdurará durante a vigência do contrato e por mais 10 (dez) anos, a contar de seu término.
  
  Mantendo também o sigilo do código fonte, no GitHub ou GitLab (ambos têm opções gratuitas, plenamente suficientes para o desenvolvimento com até 3 colaboradores).

Configuração do Visual Studio para pré-compilação das páginas

Por questões de desempenho em produção, a Plataforma de Marketplace utiliza um recurso de pré-compilação das Views (arquivos .cshtml, as páginas do sistema), dentro do próprio Visual Studio, durante o processo de desenvolvimento. A cada alteração salva para uma View, o Visual Studio cria uma versão compilada da página e salva num arquivo de mesmo nome com a extensão .generated.cs (um arquivo exemplo.cshtml é salvo como exemplo.generated.cs).

Mais detalhes e instruções de instalação e configuração podem ser visualizadas na em Estrutura de Projeto logo acima, na seção Outros > RazorGenerator.

Importante: se este passo não for seguido, suas alterações de tela não surtirão efeito.

Manutenção do banco de dados

Usando o SQL Server Management Studio, utilize o banco de dados entregue na pasta de código fonte.

Não é necessário adicionar nenhuma tabela ao banco de dados. Todas as tabelas serão criadas automaticamente pelo Entity Framework, durante a primeira execução da plataforma (saiba mais em EF 6 CodeFirst to a new database), com base nas Migrations que você pode conferir.

Saiba mais sobre Migrations no EF 6. O projeto está configurado para aplicar automaticamente todas as migrações pendentes a cada vez que é executado.

Toda vez que você alterar as Models da aplicação (classes do projeto Domain), as alterações deverão ser refletidas para o banco de dados através de novas Migrations. Lembre-se de abrir o PMC e executar o comando Add-Migration NomeDaMigrationAqui.

É importante definir o projeto Presentation como Startup Project, e selecionar o projeto Infrastructure na janela do PMC (desta forma, o Visual Studio cria a Migration dentro do projeto Infrastructure, usando a informações de conexão com o banco de dados conforme definidas no projeto Presentation).

Configurações essenciais

O primeiro passo é criar os arquivos de configuração:

No arquivo connStrings.config, configure a conexão ScaffoldContext.

Server=.\sqlexpress;Database=SEU_BANCO;Trusted_Connection=True

Executando a plataforma

Com todas as configurações acimas realizadas, no Visual Studio acesse no projeto Presentation e clique com o botão direito sobre ele, em seguida clique em "properties", com a configuração aberta, clique em "Web" e insira na URL local o https (com o S no final).
Url e porta que recomendamos: https://localhost:44310/
Ao final salve com: Control+S

Agora é hora de compilar o projeto no Visual Studio (atalho CTRL+Shift+B), o que causa primeiro a restauração de todos os pacotes NuGet referenciados.

Caso aconteça o seguinte erro:

error CS1617: Invalid option '7.3' for /langversion. Use '/langversion:?' to list supported values.

ou se sua IDE estiver em português, o equivalente do erro CS1617, aperte o botão direito do mouse na solução, escolha limpar e depois recompilar.

Aperte F5 para executar o projeto e aguarde até que o Visual Studio abra uma janela no seu navegador padrão e mostre o site.

A primeira execução deve demorar alguns minutos a partir do momento em que seu navegador abrir uma página em branco. Neste momento, a plataforma está realizando todas as configurações necessárias, entre elas:

• Criação da estrutura do banco de dados

• Aplicação das Migrations pendentes (no caso de atualizações na modelagem)

• Insert das strings de tradução na tabela Str

• Insert dos templates de email na tabela MessageTemplate

Ao finalizar estes processos de configuração inicial, você verá uma tela como esta com as informações do banco de dados que baixou:

Caso não tenha os acessos de admin, esse acesso é fornecido ao cliente responsável pela plataforma.

Desativando o Recaptcha para fazer login no ambiente local local.

Quanto estiver fazendo testes locais, provavelmente se deparará com erro de login ao tentar logar com os acessos de administrador.
Isso acontece devido a proteção de Recaptcha para proteger acessos diferentes do domínio exclusivo à plataforma, nesse caso siga esse artigo para desativar essa configuração.

Acesse ao banco de dados local e busque pela tabela dbo.ApplicationConfig

Ao encontrar clique com o botão direito do mouse e clique em edit Top 200 Rows

Ao abrir a Query, copie tudo que estiver na coluna MaaSConfig com Ctrl+A e Ctrl+C

Obs.: O que vai copiar é gigante então se vier pouco texto, desconfie!!!
Abra a URL abaixo e cole o script:
JSON Formatter & Validator

Agora encontre a configuração de nome: reCaptchaConfig e faça as devidas alterações, conforme modelo abaixo:

No link faça desta maneira (dica pesquise com ctrl+F para achar com mais facilidade):

Depois de alterar clique em Process.

Vai gerar um o código formatado em json, analise se as configurações estão corretas e depois copie todo o código no botão indicado:

Cole todo o script na coluna MaaSConfig do banco de dados, lembre de apagar tudo antes com Ctrl+A e Del:

Cole:

Depois de colar clique na segunda linha em NULL e aperte as teclas ctrl+R para salvar as alterações.
Verifique no ambiente local, fazendo o login se desativou o Recaptcha.