Como pesquisador, já tive a oportunidade de apresentar diversos artigos em países como Itália, Portugal, Espanha, Canadá e África do Sul — obrigado CAPES e CNPq pelos apoios (infelizmente, no momento atual que tanto precisamos, o país não incentiva mais a pesquisa). Continuando, os países que frequentei possuem seus idiomas raízes, mas todos usam inglês (alguns nativamente). Agora me imagino ir para a China, Japão ou Índia, onde, por mais que possam ter o idioma inglês também como um meio de comunicação, as placas, cardápios e avisos em geral são escritos em seus idiomas próprios. Como estarmos preparados para visitar tais países? A solução está na Inteligência Artificial.

Nos dias atuais, é comum termos um dispositivo móvel por pessoa, quando não dois ou mais, e estes dispositivos, os chamados smartphones, nos trazem uma série de recursos que permitem nos localizarmos (GPS), guardarmos momentos (câmera para fotos e vídeos), conectarmos (WiFi, 4G) e assim por diante. Mais do que isso, estes dispositivos possuem atualmente um alto poder de processamento e capacidade de armazenamento de dados, o que os permitem realizar processamentos complexos, com a execução de um modelo de Rede Neural Artificial, por exemplo. E quando não houver tais poderes? Temos então a computação em nuvem (Cloud Computing) para nos auxiliar, realizando o processamento em servidores da Google, por exemplo, e nos enviando a resposta desejada, em poucos segundos.

Apenas uma curiosidade: eu iniciei na área de desenvolvimento de aplicativos em 2007, quando ainda não tínhamos o Android e o iOS, mas sim o Symbian, sendo executado nos celulares de ponta da Nokia. Naquela época, eu desenvolvia na linguagem Java usando Java Micro Edition (J2ME), inclusive com conexões ao Sun Spot (Sun Small Programmable Object Technology, mostrado na Figura 1) para obter informações do ambiente, como hoje é feito usando Arduino, Raspberry Pi entre outros. De lá para cá muita coisa evoluiu, tanto em hardware, quanto em sistemas operacionais e linguagens de programação, até chegarmos ao conjunto de tecnologia que estudaremos neste artigo, o Flutter/Dart, Android (mas poderia ser o iOS também) e o Backend as a Service Firebase e seus serviços de Machine Learning.

Flutter é um SDK (Software Development Kit) para criação de aplicativos para dispositivos móveis — e também para web, watch, desktop, televisão e outros — desenvolvido e mantido pela Google para criar interfaces nativas de alta qualidade tanto para o iOS quanto para o Android e que faz uso da linguagem de programação Dart, criada também pela própria Google e que possui uma sintaxe muito similar ao Java, C# e TypeScript, ou seja, com uma única linguagem de programação você criará aplicativos nativos para Android e iOS.

Gostaria de dizer que eu não pretendo focar na introdução ao Flutter, ou seja, é recomendável que você tenha o ambiente de desenvolvimento instalado e saiba criar, pelo menos, um aplicativo "Hello World" com esta tecnologia. Caso não tenha esses conhecimentos, recomendo que você acesse o link do curso gratuito disponível na Udemy que eu preparei.

https://www.udemy.com/course/flutter-crie-aplicativos-android-e-ios-com-sdk-mobile-do-google-e-dart/

O Firebase, da Google, é conhecido com Backend as a Service, ou seja, é uma plataforma que disponibiliza um conjunto de serviços para aplicativos móveis e web prontos, dentre os quais podemos destacar a autenticação, o armazenamento de arquivos, o banco de dados de tempo real, as functions (serverless) e o Machine Learning do qual faremos uso. Na Figura 2 são apresentados os principais serviços do Firebase.

1. Criando o aplicativo Flutter

Vamos começar criando nosso projeto a partir da execução do comando flutter create --androidx tradutor_app. Depois de criado o projeto, acesse a sua pasta a partir do Visual Studio Code (ou Android Studio, se preferir) e vamos colocar a mão na massa!

Uma vez criado o projeto, vamos alterar o arquivo lib\main.dart para o código apresentado na Figura 3. Apresentando de uma forma geral, temos a class MyApp retornando o widget MaterialApp, que por sua vez tem o widget HomePage definido no seu atributo home (linha10), ou seja, HomePage consiste no widget a ser exibido quando carregarmos o aplicativo.

A classe HomePage herda da classe StatefulWidget para que possamos renderizar as atualizações na tela quando tirarmos a foto e realizar a captura e traduação do texto, objetivo do aplicativo. Sendo assim, vamos utilizar a variável texto (String), definida na linha 21, para as operações a seguir.

Na Figura 4 é apresentada a tela do aplicativo, após executar o código criando anteriormente. A ideia é simples, o usuário clicará no botão que se encontra no canto inferior direito da tela (FloatingActionButton), capturará uma foto usando a câmera e o sistema apresentará a tradução do texto encontrado nesta foto.

Para realizar nosso objetivo, precisaremos utilizar quatro bibliotecas externas, quais seja, image_picker, firebase_core, firebase_ml_vision e translator. Todas as bibliotecas estão disponíveis no pub.dev. No projeto, basta abrirmos o arquivo pubspec.yaml e adicionarmos as dependências apresentadas nas linhas 13, 14, 15 e 16da Figura 5. Em seguida, salve o projeto e o Flutter instalará as novas dependências (flutter pub get).

Uma vez instaladas as dependências, vamos ao código! De volta ao arquivo main.dart, vamos importar, no início do arquivo, nossas bibliotecas. Para tanto, basta adicionar as linhas 4, 5, 6 e 7, conforme apresentado na Figura 6. Além dela, vamos adicionar também a biblioteca dart:io (linha 1) para que possamos manipular o arquivo da imagem obtida com a câmera.

2. Criando e configurando o Firebase

Agora, antes de realmente fazer a "mágica acontecer", precisamos criar um novo projeto no Firebase e configurarmos o acesso a ele no Flutter/Android. Esta é uma parte bem "burocrática" e que pode se alterar com novas versões das bibliotecas, mas deixarei aqui o caminho das pedras usando as versões disponíveis no momento em que escrevo este artigo.

O primeiro passo é efetivamente criar o projeto no Firebase. Para tanto, acesse a plataforma a partir do link https://firebase.google.com/, faça o login e acesse o Console. Fique tranquilo, não é necessário cadastrar cartão de crédito ou informar nenhum outro dado a não ser sua própria conta de acesso ao Google (Gmail, por exemplo). Uma vez no console, basta clicar em "Criar novo Projeto" e seguir as instruções a seguir.

Nas telas apresentadas na Figura 7 nós definimos o nome do projeto, o uso ou não do Google Analytics e a finalização. Em relação ao nome, eu utilizei TradutorApp, mas você pode utilizar o nome que desejar, inclusive o mesmo (se utilizar o mesmo, repare que abaixo de onde você digita o nome aparecerá um id diferente, algo como tradutorapp-2abc1).

Uma vez criado o projeto, vamos ter acesso ao painel principal. Neste, poderemos escolher uma ou mais plataformas para conectarmos ao projeto, quais sejam: Android, iOS, Web e Unity. Nas telas da Figura 8, vamos escolher o Android (clicando no seu ícone na Figura do lado esquerdo), o que nos levará para a tela à direita. Nesta última, devemos preencher o campo Nome do pacote do Android,definido na criação do projeto Flutter (em geral, se você não definiu um pacote durante a criação, ele será com.example.NOME_DO_APP, no nosso caso com.example.tradutor_app. Preenchido este campo, clique no botão "Registrar app".

Após clicarmos em "Registrar app", far-se-à necessário realizar o download do arquivo google-services.json e adicionar ao nosso projeto Flutter. Depois de feito o download, o arquivo deve ser movido para dentro da pasta android/app conforme apresentado na Figura 9 (à direita). O arquivo google-services.json contém as chaves de acesso que permitirão que nosso aplicativo Flutter acesse os serviços do Firebase (pense nele como se fosse uma string de conexão).

As duas próximas, e últimas, etapas de configuração do Firebase no nosso aplicativo Flutter consistem em adicionar as dependências do google-services aos arquivo build.gradle, disponível na pasta raiz do projeto Android (Figura 10, linha 11) e build.gradle, do arquivo disponível na pasta app do projeto Android (Figura 11, linha 27). Estas configurações permitiram que o nosso aplicativo Flutter, quando compilado para Android, possa acessar os recursos do Firebase. Caso deseje executar o projeto no iPhone, é necessário escolher a plataforma iOS no Firebase e seguir os passos indicados.

Para concluirmos a configuração, vamos alterar o método main do nosso arquivo main.dart. Primeiro, vamos transformar este método em um método assíncrono (linha 9) para que possamos utilizar a instrução await (linha 11) e aguardar a conexão com o Firebase (feita a partir das chaves disponíveis no arquivo google-services.json).

3. Configurando o Firebase Machine Learning

Mais configurações? Sim, mas é a última, prometo. Vamos ao Firebase Machine Learning (ML). O Firebase fornece um conjunto de serviços de Aprendizado de Máquina, tendo os serviços cognitivos de visão como os seus principais (Figura 13). Utilizando o Firebase ML podemos implementar o reconhecimento de texto em imagens (o qual utilizaremos neste artigo), a rotulação de imagens, a detecção e o rastreamento de objetos, a leitura de código de barras, a detecção do idioma de um texto, o reconhecimento de pontos de referência, a detecção facial, entre outros.

Fugindo um pouco do nosso objetivo principal, o Firebase ML possui vários serviços bem interessantes, dentre eles o de detecção facial. Entretanto, é importante ressaltar que este serviço consiste apenas em detectar e não identificar faces. Caso deseje fazer a identificação, recomendo os serviços cognitivos do Microsoft Azure — em breve um artigo sobre como podemos usá-los em nosso aplicativo, aguarde!

A última configuração, portanto, consiste em adicionarmos a dependência do Firebase Machine Learning Vision ao nosso projeto Android. Para tanto, basta adicionarmos a linha 64 no arquivo android\app\build.gradle, conforme apresentado na Figura 14.

4. Usando o Firebase Machine Learning

Ufa! Tudo configurado! Agora, conforme disse Linus Torvalds,

“Talk is cheap. Show me the code.”

Portanto, vamos mostrar (e explicar) o código! No nosso arquivo main.dart, em específico dentro de nossa classe _HomePageState, vamos implementar os métodos pickImage(), readTextFromImage() e translate(). Como os próprios nomes já indicam (obrigado pela dica de limpeza, "Uncle Bob"), os métodos realizam, respectivamente, a captura de uma imagem usando a câmera do dispositivo, o retorno dos textos encontrados na imagem e a tradução destes textos para o português.

Na Figura 15 é apresentado o método pickImage , o qual utiliza-se da biblioteca image_picker e do método getImage() da class ImagePicker para acessar a câmera do dispositivo e retornar o arquivo contendo a imagem capturada. Ainda no método getImage(), podemos definir de onde virá a imagem (câmera ou galeria). Neste exemplo, utilizaremos apenas a câmera.

No método readTextFromImage , apresentado na Figura 16, é utilizado efetivamente o Firebase Machine Learning, em especial, a classe FirenaseVision (linha 40), a qual permite retornar uma instância da classe TextRecognizer, responsável por realizar o reconhecimento e retorno de textos em uma imagem (sendo esta transformada num objeto da classe FirebaseVisionImage, linha 38).

Para cumprir o objetivo do aplicativo, implementamos o métodotranslate() apresentado na Figura 17. A partir de um objeto da classe GoogleTranslator, invocamos o método translate() informando como parâmetros o texto que queremos traduzir e o idioma para o qual queremos que o texto seja traduzido (linha 47).

Como podemos ver nos métodos anteriores, todos executam de maneira assíncrona e, portanto, utilizamos os recursos da linguagem Dart para aguardar (async/await) que tais métodos finalizem suas execuções antes de alterarmos o estado do widget com o texto traduzido (linhas 56–58).

Implementado todos os métodos, nos resta apenas alterar o método build, em específico o método onPressed do objeto FloatingActionButton, para que invoque o método translate ao ser pressionado.

5. Executando o aplicativo

Vamos aos testes! E nada melhor que utilizar um exemplo empreendedor, a tradução da capa do livro "The Lean Startup", de Eric Ries, dado a mim pelo maior empreendedor que conheci na minha vida, meu amado pai, Rui Dezani (in memorian), cujo nome foi dado honrosamente ao Centro Incubador de Empresas da cidade de São José do Rio Preto, SP.

Como podemos ver nas telas apresentadas na Figura 20 (da esquerda para a direita), ao carregarmos o aplicativo temos o texto com uma mensagem padrão sendo exibida ("Tire uma foto do texto que deseja traduzir"). Ao tocarmos no FloatingActionButton, a câmera é aberta e, ao tirarmos a foto da capa do livro, o texto disponível na foto é obtido e traduzido usando os recursos do Firebase Machine Learning para, então, ser exibido ao usuário.

O projeto completo pode ser encontrado no meu repositório no GitHub, basta acessar o link abaixo.

henriquedezani/flutter-firebase-ml-ocr-translate

Antes de concluir, gostaria de indagar você, leitor, sobre as possibilidades de desenvolver projetos usando estas tecnologias. Pense bem e colabore deixando seu comentário com uma sugestão de aplicação prática.

Obrigado e até o próximo artigo!
Prof. Dr. Henrique Dezani

Flutter e Firebase Machine Learning na prática. was originally published in Henrique Dezani on Medium, where people are continuing the conversation by highlighting and responding to this story.

Neste artigo eu apresento o passo a passo da criação de parte de um CRUD (Create, Read, Update, Delete) em ASP.NET MVC (Model View Controller) utilizando a linguagem de programação C# (C Sharp) e o banco de dados SQL Server. Ao final da leitura deste texto você estará apto a desenvolver uma aplicação com conexão ao banco de dados SQL Server utilizando a biblioteca ADO.NET e o IDE Visual Studio 2017 que realiza o cadastro e a consulta (CR) de uma tabela.

O Framework ASP.NET MVC tem sido muito utilizado no mercado e novos recursos são adicionados constantemente. Como um exemplo mais recente, temos o Microsoft Bot Framework, que permite a criacão de ChatBots utilizando a linguagem de programação C# e faz uso da Web API 2 do ASP.NET MVC.

O projeto

Tenha em mente que este artigo foi escrito com a proposta de fornecer um material didático para a criação de aplicações web utilizando o ASP.NET MVC. Portanto, nada como uma aplicação simples de exemplo para tratarmos do assunto.

O projeto a ser desenvolvido consiste em uma aplicação para armazenamento de, adivinhem só, tarefas (afazeres).

Para iniciarmos, vamos começar criando nosso banco de dados no SQL Server, conforme script exibido na Figura 1. O banco de dados terá o nome de BDContatoe conterá apenas 1 tabela, chamada Contato. Esta tabela possui 3 campos (colunas), quais sejam, IdContato, gerado automaticamente e que representa a chave primária (primary key), Nomee Email, sendo estes últimos obrigatórios e do tipo string.

Desenvolvimento

1. Instalação do Visual Studio 2017 Community

Quem já tem familiaridade com o Visual Studio, pular para o tópico 2!

Para quem estiver começando o desenvolvimento e .NET, C# e Visual Studio agora, peço que faça o download do Visual Studio Community gratuitamente a partir deste link: https://www.visualstudio.com/vs/

Não explicarei o processo de instalação, mas consiste no tradicional NNF (Next, Next and Finish). O Visual Studio 2017 traz diversos recursos, mas precisaremos apenas do ASP.NET e suas dependências. Veja a Figura 2 do que devemos selecionar na instalação.

2. Criando um projeto de aplicação web com ASP.NET MVC.

Para criarmos um novo projeto, basta seguir o fluxo normal das aplicações do sistema operacional Windows. No Visual Studio, selecione na barra de menu superior a opção File e depois New Project. A tela apresentada na Figura 3 aparecerá.

Nesta tela (Figura 3), basta selecionar o template da linguagem Visual C# Web, em seguidaASP.NET Web Application. Ao final desta tela você deverá entrar com o nome do projeto, o local onde deseja gravá-lo e o nome da solução. A solução nada mais é do que uma estrutura que permite organizar um ou mais projetos de uma maneira prática em termos de compartilhamento e manipulação de bibliotecas.

Para termos o mesmo padrão durante o desenvolvimento do projeto, coloque o nome do projeto como sendo ContatoWeb e o nome da solução como ContatoSolution .

Em seguida, ao clicar no botão OK, uma nova tela no Visual Studio se abrirá (Figura 4). Nesta tela, basta selecionar o template Vazio e logo abaixo a estrutura do projeto MVC.

3. Entendendo a estrutura do Framework ASP.NET MVC

Ao finalizar a criação do projeto, accesse o Gerenciador de Soluções e veja a estrutura do projeto. Basicamente, o projeto ASP.NET MVC contempla três diretórios principais, quais sejam, Controllers, Models e Views, os quais serão discutidos nos tópicos que se seguem.

Na Figura 5 eu apresento o diagrama de classes do projeto. Dando um explicação bem simples, as classes criadas na pasta Models realizam o acesso ao banco de dados SQL Server, enquanto que as classes criadas na pasta Controllers atuam como intermediárias entre a visão (Views) do cliente — páginas HTML (HyperText Markup Language)— e o modelo — Banco de Dados. São as classes Controller que desenvolvemos grande parte das validações e regras de negócio do sistema (não estamos considerando a aplicação de DDD — Domain Driven Design).

4. Criando as classes (entidades) que representam as tabelas do banco de dados

Uma vez que temos nosso banco de dados criado, precisamos criar as classes que a representem no sistema. Para tanto, basta clicarmos com o botão direito no diretório Models e selecionar as opções Adicionar → Classe. Na Figura 6 é apresentado o código da classe C#, chamada Contato, que representa a tabela Contato no nosso banco de dados.

Analisando o código da Figura 6, conseguimos determinar que ela está dentro do namespace ContatoWeb.Models. Não é uma questão obrigatório, mas é uma boa prática, ter os namespaces relacionados aos nomes dos diretórios do projeto.

Dentro da classe temos três propriedades, quais sejam, IdContato (int), Nome (string) e Email (string). Esta estrutura representa o que chamamos de propriedades automáticas, ou seja, o encapsulamento destes campos é tratado automaticamente pelo framework, e o que precisamos fazer é simplesmente tratar estas propriedades como se fosse atributos (sem os métodos get/set). Veja como são utilizados nas linhas 14, 15 e 16 do código apresentado na Figura 7.

5. Criando as classes Models (manipuladoras do banco de dados)

Na Figura 7 eu apresento o código da classe ContatoModel , o qual contempla os métodos responsáveis por abrir e fechar a conexão com o banco de dados, assim como inserir (create) e listar (read) os registros da tabela Contato.

Como pode ser visto no código da Figura 7, a camada Model atua no acesso e manipulação das tabelas do banco de dados SQL Server. Para tanto, far-se-á necessário utilizar o namespace System.Data.SqlClient, que contém as classes necessárias para conexão (SqlConnection), consulta (SqlCommand) e retorno dos dados (SqlDataReader) do banco de dados SQL Server.

Na declaração da classe, implementamos a interface IDisposable que contém apenas um método público: Dispose. Este método é executado sempre que a classe é "finalizada". Digo entre aspas pois, para realmente executar este método, é necessário utilizarmos a palavra chave using, como veremos mais adiante no artigo.

A ideia é que no construtor da classe realizemos a conexão com o banco de dados e no método Dispose realizemos o fechamento desta conexão. Na linha 9 temos declarado um campo privado do tipo SqlConnection. Este campo é quem controlará a conexão com o banco de dados e o chamamos de connection.

Na linha 14 instanciamos esta classe passando como parâmetro para o construtor uma string (declarada na linha 13 e que armazena a string de conexão com nosso banco de dados). Para efetivamente abrir uma conexão, utilizamos o método Open() do objeto connection (linha 15). Como é de se esperar, utilizamos o método Close() para fechar a conexão (linha 20, dentro do método Dispose).

Os métodos que realizam a inserção ou a consulta de dados na tabela são apresentados nas seções que seguem.

5.1. Recuperando os dados armazenados na tabela do banco de dados.

Na Figura 8eu apresento a implementação do método Read, que faz uso das classes SqlCommande SqlDataReader citadas anteriormente.

Na linha 3 é criada uma collection (Lista) de objetos da classe Contato. O objetivo do método é justamente retornar esta lista (linha 21) preenchida com objetos da classe Contato preenchidos com dados da tabela do banco de dados.

Na linha 5 temos a criação de um objeto da classe SqlCommand. Esta classe é responsável por executar comandos SQL no nosso banco de dados SQL Server. Para tanto, se faz necessário definir pelo menos duas de suas propriedades, quais sejam, Connection (linha 6), que indica por qual conexão com o banco de dados será executado o comando, e CommandText(linha 7), que é justamente o comando SQL a ser executado no banco de dados.

Como o objetivo deste método é retornar uma lista com informações do banco de dados, realizamos uma consulta (SELECT * FROM Contatos). A execução desta consulta SQL é feita na linha 9 e é armazenada num objeto da classe SqlDataReader. A execução do método ExecuteReader do objeto cmd nos retorna um cursor que permite percorrer o resultado do da consulta realizada. Para percorrer então o resultado, utilizando a estrutura de repetição while (linha 11).

Dentro desta estrutura de repetição, temos o objeto reader apontando (por isso ser um cursor) para um registro da tabela do nosso banco de dados, ou seja, se tivermos dois registros na tabela Contato, este laço será executado duas vezes e, a cada execução, retornará uma linha da tabela. Obtendo o registro da tabela, simplesmente criamos um objeto da classe Contato (linha 13) e definimos os valores de suas propriedades com os dados do cursor reader (linhas 14, 15 e 16). Não entrarei em detalhes neste artigo, mas o que precisamos entender é que uma tabela pode possuir campos (colunas) com diversos tipos de dados, mas para recuperamos temos apenas o objeto reader. Para resolver este impasse, utilizamos o polimorfismo . Fique ligado, em breve escreverei um artigo sobre como os Power Rangers entram nisso.

Dentro do laço, por fim, adicionamos o objeto da classe Contatona nossa Collection, a qual é retornada do método na linha 21.

5.2. Criando, atualizando e apagando registros na tabela do banco de dados.

Na Figura 9 eu apresento o método para criar registros na nossa tabela Contato do Banco de Dados.

Comparado ao método Read (Figura 8), podemos ver que o método Create (Figura 9) é mais simples, pois não precisamos receber nada da base de dados, ou seja, estamos realizando uma manipulação e não consulta. Consequentemente, o método não tem retorno.

Em contrapartida, temos parâmetros que devem ser enviados pelo comando SQL (linhas 7 e 8), tais como o nome e o e-mail do contato. Mas e o IdContato? Pois bem, se nos atentarmos ao script SQL da Figura 1, verificamos que a chave primária é identity, ou seja, gerada automaticamente pelo SQL Server.

Na linha 5, o comando SQL possui duas variáveis que serão preenchidas em tempo de execução pelos valores informados nas linhas 7 e 8. Cada variável possui um apelido (alias), ou seja, @nome e @email. Isso é feito para evitarmos SQL Injection.

Nas Figura 10 e 11 eu apresento os métodos Update e Delete, respectivamente. Não serão tratados neste artigo, mas é fácil verificar que a implementação dos métodos que manipulam uma tabela no banco de dados segue em padrão.

Apenas uma observação. Na Figura 10, verificamos que eu usei @id como nome do parâmetro, mas o valor foi da propriedade IdContato do objeto contato. Portanto, não precisamos ter o mesmo nome do parâmetro e o nome da propriedade, mas é uma boa prática para facilitar posteriores manutenções no código.

Com os códigos apresentados até aqui temos a classe ContatoModel pronta para ser utilizada em nosso projeto. Uma vantagem em separar o projeto em camadas, como feito aqui, é justamente a possibilidade de isolar suas implementações, ou seja, uma vez que temos a classe ContatoModel pronta, podemos manipular o banco de dados usando os métodos da classe sem ter que nos preocupar com suas implementações. Além disso, se num futuro desejarmos alterar a manipulação do banco de dados de ADO.NET para o Entity Framework, basta alterar apenas esta camada.

6. Criando o Controller

Uma vez que temos a camada Models pronta, trabalharemos com a classe Controller, a qual utilizará os métodos da classe Model para enviar ou recuperar dados do banco de dados para o usuário, a partir de uma interface desenvolvida em HTML (Views).

Para criar uma classe Controller basta clicar com o botão direito no diretório Controllers e selecionar a opção Adicionar → Controller. A tela exibida pelo Visual Studio dará a opção de selecionar o tipo de Controller. Trabalharemos neste artigo com a primeira opção: Controller MVC vazio.

Em seguida será perguntado o nome da classe. É importante notar que o Visual Studio deixa pronto para você editar apenas o prefixo, mantendo assim o sufixo Controller. Este é apenas um padrão do framework, mas acho interessante mantê-lo por questões de documentação. Para seguirmos o padrão do nosso projeto, coloque o nome desta classe de ContatoController.

Criada a classe, é possível reparar que o Visual Studio automaticamente criou um diretório chamado Contato dentro do diretório Views. Isso significa que cada Controller possui suas Views específicas. No nosso caso, no tópico 7, trabalharemos com duas Views, quais sejam, Index e Cadastro.

Na Figura 12 é apresentado o código gerado pelo Visual Studio seguindo as etapas anteriores. É importante ressaltar que a classe ContatoController herda da classe Controller(linha 7). Isto nos permite manipular as requisições HTTP (HyperText Transfer Protocol) com um alto nível de abstração, ou seja, ao invés de lidarmos com Request/Response e Get/Post, trabalhamos com invocação e retorno de métodos.

É possível trabalharmos num baixo nível de abstração e, aliás, fazemos muito isso quando trabalhamos com Web APIs, mas foge do escopo deste artigo.

Os métodos da classe ContatoController são chamados também de Action e têm como retorno uma ActionResult. Uma ActionResult retorna uma resposta para o cliente, seja ela uma View (que corresponde a uma página HTML, como no caso dos métodos Read (linha15) e Create (linha 22) ou um redirecionamento para uma Action como na linha 35.

As Actions, juntamente com os Controllers formam as URLs da aplicação. Por exemplo, se executarmos o projeto e digitarmos no navegador a URL http://localhost:1234/contato/create teremos o método Create (declarado na linha 20) executado. Se digitarmos a URL http://localhost:1234/contato/index teremos o método Index da linha 10 executado.

Temos 3 métodos na classe ContatoController , quais sejam, Index, Create e Create. Espere aí! Dois métodos Create? Oras pois, sim! Retomando os conceitos de Orientação a Objeto, o que temos neste caso é uma sobrecarga de métodos, os quais se diferenciam pela quantidade ou tipo de parâmetros — neste caso, pela quantidade de parâmetros. Repare que na linha 20, a declaração do método Create não recebe parâmetros. Já na linha 26, a declaração do outro método Create recebe um objeto da classe FormCollection.

Em relação ao método Create, como é uma ação a ser executada pelo Controller, a sobrecarga não é suficiente para diferenciá-los. Portanto, o primeiro método Create tem o atributo [HttpGet] que indica que ele aceitará requisições por Get (por exemplo, quando chamado a partir de links ou executados ao digitar o caminho na barra de endereço do navegador). No segundo método (linha 25), tem-se o atributo [HttpPost] o qual indica que este método só será executado quando foi chamado a partir de uma requisição por Post (consideraremos que a única maneira de realizar uma requisição por Post é quando submetermos um formulário com o atributo method igual a post). Veremos as chamadas mais adiante no tópico 7 (Criando as Views).

7. Criando as Views

Certo, chegamos até este ponto e sabemos que ao solicitar a URL http://localhost:1234/contato/index teremos o método (Action) Index executado. Mas qual será a View? Ou seja, qual a página HTML será exibida. Vamos criá-las.

Clicando com o botão direito dentro das Actions o Visual Studio nos dá a opção Add View que realiza a criação da View. Esta View nada mais é do que uma página HTML. Bom, na verdade, é uma mistura de HTML e C# (daí a extensão ser .cshtml. Este junção consiste numa tecnologia chamada Razor.

Criando nossa primeira View (Index), temos o código apresentado na Figura 13. Um primeiro ponto a destacarmos é o código entre as linhas 1 e 3, que corresponde a um código C#. A instrução Layout=null simplesmente indica que não utilizaremos um LayoutPage (matéria de outro artigo).

Porém, esta página ainda é estática e nosso objetivo é torná-la dinâmica a ponto de exibir e montar uma tabela com os dados enviados para ela (uma lista de objetos da classe Contato — linha 15 da Figura 12). Veja como é simples o código para tornar nossa página dinâmica (Figura 14).

Na linha 1 agora temos a definição do modelo de dados que esta página receberá, ou seja, estamos indicando que ela receberá uma collection de objetos da classe Contato. Pronto. A partir de agora podemos utilizar a palavra reservada Model que conterá nossa collection List<Contato>.

Para percorrê-la, basta utilizarmos a instrução foreach da linguagem C#, mostrada na linha 15. Repare que criamos um laço que será executado de acordo com a quantida de objetos em nossa lista. Em cada execução do laço, um código html que representa uma linha da tabela será criada e conterá três colunas, quais seja, IdContato, Nome e Email.

Para concluirmos o projeto, temos a View Create.cshtml apresentada na Figura 15. O código apresenta um simples form, mas o mais importante é ressaltar os atributos action e method. Repare que o formulário submete os dados Nome e Email para a action Create, mas usando o método post. Portanto, será executado o segundo método Create que contém o atributo [HttpPost], sendo que o objeto form conterá estes dados (linhas 29 e 30 da classe ContatoController).

Que bom, consegui! (Espero que esta seja sua resposta final). Mas veja o sistema, bonito, não é? Não. Como costumo dizer aos meus alunos, é funcional, mas nada que dê para mostrar e receber um elogio da tia ou primo. (Vó e mãe não contam, pois elas sempre dizem que está lindo tudo que fazemos rs). Piadas à parte, seria bom adicionar o clássico e famoso Bootstrap (CSS). Fica a dica!

Considerações Finais

É isso. Espero que tenha gostado do artigo e que este possa lhe auxiliar no desenvolvimento inicial do seu projeto em ASP.NET MVC. Preencha seu e-mail abaixo e fique sabendo de novos artigos em primeira mão.

Grande abraço e até o próximo artigo!
Prof. Dr. Henrique Dezani

Criando uma aplicação web com Microsoft ASP.NET MVC e C# was originally published in Henrique Dezani on Medium, where people are continuing the conversation by highlighting and responding to this story.