É neste cenário que o WebMatrix encontra-se inserido. Conforme apresentado em outros artigos aqui mesmo no portal, WebMatrix é uma ferramenta integrada de desenvolvimento que disponibiliza a desenvolvedores (através de robustos recursos para codificação, tais como: code complete, suporte nativo a HTML5, CSS3, Javascript, PHP, helpers, etc.) e usuários finais (através da Web App Gallery), um ambiente sóbrio para criação de websites em diversos níveis.

O WebMatrix é uma ferramenta gratuíta desenvolvida pela Microsoft e você efetuar o download no site oficial do produto: http://bit.ly/MS_WebMatrix.

Aqui no treinamento temos vários artigos que cobrem muitos aspectos sobre o WebMatrix. A seguir, apresento alguns deles:

• WebMatrix: o que ele traz e porque você deveria conhecê-lo
• Criando aplicações web com WebMatrix
• Instalando o WordPress no Windows com WebMatrix
• WebMatrix + WordPress = Fazendo a web de forma mais simples

Do que trata este artigo?

O fluxo de construção de aplicações de qualquer natureza pode ser resumido em três etapas fundamentais: a concepção/especificação da ideia; a projeção/implementação e transformação da ideia em código; publicação da aplicação.

De forma geral, desenvolvedores e técnicos envolvidos em um projeto de software tradicional ou web, concentram esforços na segunda etapa, isto é, o processo de implementação das aplicações. Assim, naturalmente a terceira etapa (tão importante quanto a segunda) acaba recebendo menor atenção e alguns problemas acabam surgindo um função disso.

Neste texto daremos atenção especial para o processo de publicação de aplicações web utilizando WebMatrix. Assim, não cobriremos o processo de desenvolvimento de novas aplicações pois, os artigos acima apresentam boas abordagens sobre isso.

O que significa "publicação" de uma aplicação web?

Aplicações web possuem peculiaridades em relação as demais aplicações. Uma destas peculiaridades é o processo de publicação.

Para que uma aplicação web possa funcionar, é preciso que a mesma esteja hospedada em um ambiente específico. Este ambiente, fornece todos os requisitos e demais tecnologias para que a referida aplicação possa ser executada. O ambiente ao qual nos referimos é um servidor (um computador com recursos poderosos) que hospeda tanto os arquivos da aplicação web como estruturas orbitantes a estas (como bancos de dados, por exemplo).

O processo de publicação é aquele que possibilita a transferência dos arquivos e demais estruturas do site/aplicação do ambiente local (o computador onde foi desenvolvido) para o ambiente remoto (servidor web, mencionado no parágrado anterior). A Figura 1 ilustra este processo.

Figura 1. Ilustrando o processo de transferência de arquivos

FTP ou WebDeploy?

O processo de publicação de uma aplicação web (ilustrado na Figura 1) pode ser realizado de diversas formas. WebMatrix, ferramenta alvo de nosso estudo neste texto, disponibiliza em seu ambiente de publicação duas destas metodologias (as duas principais) - FTP (File Tranfer Protocol) e WebDeploy. Nas linhas a seguir, apresentamos estas metodologias em maiores detalhes.

• FTP: Esta metodologia utiliza um protocolo específico para a transferência de arquivos através da rede - o protocolo FTP. Basicamente a função deste protocolo garantir a transferência segura dos arquivos da origem até o destino. Muito embora funcione muito bem, este modelo possui algumas limitações. A seguir apresento as principais:
  • Processo manual: o processo de publicação via FTP é manual, assim, quaisquer atualizações em arquivos da aplicação precisam ser enviados novamente um a um. Isto torna-se um problema a medida em que a aplicação cresce e o número de arquivos para administrar também.
  • Dificuldade com bancos de dados: uma situação não coberta pela abordagem FTP é a publicação de bases de dados de forma automática, isto é, uma vez criado no computador local o banco de dados, o usuário necessita gerar um backup ou script SQL (Structured Query Language) do mesmo para só então, em um segundo momento, utilizar este arquivo de apoio para estruturar este banco de dados junto a aplicação.
• WebDeploy: O processo de publicação via WebDeploy também disponível no WebMatrix é a reunião das melhores características do processo mencionado anteriormente com a solução dos problemas do mesmo. WebDeploy é um utilitário acoplado ao WebMatrix que realiza todo o processo de publicação. Algumas ações implementadas:
  • Validação do ambiente remoto em relação ao ambiente local
  • Publicação automática dos arquivos do site
  • Publicação automática de bancos de dados
  • Configuração automática dos arquivos para o ambiente remoto
• A ferramenta de WebDeploy precisa apenas dos parâmetros de publicação do ambiente remoto. O restante é com a ferramenta.

A Figura 2 apresenta de publicação via WebDeploy.

Figura 2. Tela de parametrização da ferramenta WebDeploy no WebMatrix

Onde publico meu site? De onde vêem os dados para configurar WebDeploy?

Olhando para a Figura 2, fica evidente que algumas informações são requeridas para que o processo de publicação via WebDeploy ocorra. Se você possui pouca vivência com o ambiente de desenvolvimento web, a pergunta que pode surgir aqui é: onde consigo estas informações?

Voltando um pouco no texto, nos deparamos com a Figura 1. Nela está ilustrado o processo de publicação e fica evidente que, os arquivos e demais estruturas de um site/aplicação ficam hospedados em um servidor remoto. Estes servidores possuem endereços e credenciais de segurança que garantem tanto ao usuário quanto a empresa que mantém este servidor online, que apenas usuários autorizados estão realizando acesso ao mesmo.

Para que um site possa ser hospedado e entre em ambiente de produção, o desenvolvedor (ou outro profissional envolvido no processo de publicação) deve procurar uma empresa de hospedagem de aplicações web. Estas empresas são conhecidas popularmente como hosters e são as responsáveis em primeira instância, por garantir que o ambiente de produção esteja saudável (entenda-se: container web corretamente configurado, link de internet sem gargalo, segurança implementada, estrutura para bancos de dados online, etc.). Evidentemente que, a manutenção de todos estes serviços funcionando exige mão de obra especializada e o hoster, possui um alto custo de manutenção.

Após escolher a empresa de hospedagem de sua confiança, é preciso escolher o plano que melhor se adapta as necessidades de seu site (por exemplo: se seu site/aplicação for escrito em PHP, você precisará escolher um plano Windows com suporte a PHP e banco de dados MySQL ou SQL Server, etc.). Serviços como número de contas de e-mail, tráfego mensal de dados, número de bases de dados, dentre outros, são fatores que também devem ser igualmente analisados antes da contratação do plano.

Os hosters brasileiros oferecem basicamente dois tipos de estruturas de hospedagem: compartilhada e dedicada. A seguir apresentamos as linhas gerais de ambas.

• Hospedagem compartilhada: neste modelo de serviço, existe um servidor físico que possui a capacidade de hospedar n aplicações web. Este servidor dispõe de todos os requisitos técnicos para atender a demanda suportada em suas especificações. As n aplicações presentes neste servidor compartilham todos os recursos: processador, link de internet, memória (RAM / ROM), container web, etc., daí vem o nome "hospedagem compartilhada". Este modelo de hospedagem de forma geral é mais barato de ser adquido e é indicado para sites/aplicações pequenas, cujo tráfego de dados e o número de visitas não seja tão elevado. Aqui, o usuário final não se preocupa com o processo de manutenção de seu site - o hoster é o responsável por isso.
• Hospedagem dedicada (VPS): neste modelo, ao contratar um plano, o usuário recebe uma máquina virtual (o processo de virtualização quem realiza é o hoster) dedicada para que sua aplicação possa funcionar. Aqui, o usuário é o dono da máquina (o ambiente é dedicado) e portanto, todo processo de manutenção fica por sua conta, entretanto, todas as operações que o usuário desejar realizar e complementos que desejar instalar ele pode fazer sem permissão prévia da empresa de hospedagem. Este modelo é recomendado para aplicações médias e grandes e, de forma geral, é um pouco mais onerosa em relação ao modelo compartilhado.

Após escolher a empresa de sua preferência e contratar plano que mais se adequa as suas necessidades, você receberá junto ao hoster as informações para parametrizar sua tela de WebDeploy do WebMatrix e aí sim, tudo está pronto para a publicação.

Os parceiros da Microsoft Brasil no quesito hospedagem

A Microsoft Brasil possui parceiros em todas as suas áreas de atuação. Para a Microsoft, empresas parceiras são aquelas que possuem credibilidade no mercado e que oferecem serviços/produtos com excelência e, no ambiente de hoster para WebMatrix também.

A Microsoft está firmando parceria com os principais hosters brasileiros para suportar em sua infraestrutura aplicações provenientes do WebMatrix. As parcerias são sempre benéficas para o usuário final, pois promoções, preços diferenciados nos principais ambientes do Brasil são gerados.

Hoje o principal parceiro Microsoft para hospedagem dedicada de WebMatrix é a Rede Host. O ambiente é homologado pelo time de especialistas da Microsoft e os preços são acessíveis tanto para hospedagem compartilhada quanto para virtual private server.

Neste artigo você será apresentado ao processo de implementação do Moodle utilizando WebMatrix.

O processo de instalação

Se você já tentou instalar o Moodle manualmente, irá concordar que o processo é relativamente complexo. Com WebMatrix a complexidade é encapsulada pela ferramenta e você precisa executar apenas alguns passos básicos.

Com o WebMatrix em execução, na tela de entrada, selecione a opção "Web App Gallery". Uma nova janela se abrirá e nela, selecione a opção "CMS" no menu de categorias exibido a esquerda. Em seguida, no campo de busca (canto superior direito da janela) digite o termo "moodle" e selecione a única opção apresentada. A Figura 1 ilustra este processo.

Figura 1. Selecionando a aplicação desejada

Após nomear seu projeto (sugestivamente estou chamando de "MoodleMVA"), prossiga para a próxima estapa da instalação pressionando o botão "Next". Na próxima etapa o assitente de instalação do WebMatrix exibe os termos de licença e os elementos ao quais ira realizar o download e instalação. Nesta tela, clicaremos na opção "I Accept". A Figura 2 apresenta a tela mencionada.

Figura 2. A tela de aceitação dos termos de licença

Ao aceitar os termos de licença você será redirecionado para uma nova tela. Esta nova que se apresenta, solicita uma informação: "PasswordSalt". Como o próprio nome sugere, esta é uma senha que estará atrelada ao usuário administrador da ferramenta. Crie uma senha que atenda os padrões exigidos pela ferramenta e clique em prosseguir. A Figura 3 apresenta este processo.

Figura 3. Criando a senha de administrador

Clicando em "Next" você estará habilitando o instalador do WebMatrix a baixar e instalar os elementos necessários para que o Moodle funcione corretamente. A Figura 4 mostra este procedimento ocorrendo.

Figura 4. Assistente instalando e configurando Moodle

Após aguardar algum tempo (para que o WebMatrix baixe, instale e configure todas as ocorrências relacionadas ao Moodle) uma nova janela será exibida. Caso tudo tenha ocorrido conforme o esperado, você estará recebendo uma mensagem informando que o processo foi concluído com sucesso e abaixo, algumas informações importantes como: usuário e senha do banco de dados. A Figura 5 apresenta uma tela semelhante à aquela que você deverá estar visualizando.

Figura 5. Mensagem de confirmação de instalação bem sucedida

Ao clicar em "Ok" você será levado ao ambiente já familiar do WebMatrix. Para finalizar o processo de instalação do Moodle, algumas parametrizações são necessárias. Estas parametrizações não são realizadas pelo WebMatrix mas sim, no próprio ambiente de execução da ferramente online.

Ao executar a ferramenta pela primeira vez, as informações de parametrização são requeridas. Para passar a esta etapa, o que faremos agora é executar nossa aplicação. A Figura 6 apresenta a primeira tela apresentada ao colocarmos o Moodle em execução. Esta tela pede para que você leia os termos de contrato e aceite ou não. Clicaremos em "Continue".

Figura 6. Aceitando os termos de contrato

Ao clicar em "Continue", o Moodle realizará um check de recursos disponíveis no ambiente e os comparará com aqueles dos quais ele precisa para funcionar adequadamente e, em seguida, exibirá um relatório (Figura 7). Se tudo estiver em conformidade em seu ambiente, clique em "Continue".

Figura 7. Relatório do "check" de ambiente realizado pelo Moodle

Ao clicar em "Continue" na tela apresentada acima o Moodle realizará algumas configurações de ambiente. Após executar tais configurações, um novo relatório (semelhante aquele apresentado pela Figura 8) será exibido. Novamente sua tarefa será pressionar o botão "Continue".

Figura 8. Relatório apontando o sucesso da configuração automática de ambiente

Se você visualizou o relatório apresentado pela Figura 8, significa que o processo de intalação foi finalizado. Agora, a etapa seguinte consiste apenas da configuração da conta de usuário administrador e perfil de exibição do site. Basta informar os dados conforme solicitado nas telas seguintes e pronto, Moodle instalado com sucesso (Figura 11).

As demais telas de configuração de dados de usuário e do site propriamente dito, podem ser visualizadas na mesma sequência em que são apresentadas pela ferramenta nas Figuras 9, 10 e 11.

Figura 9. Atualizando as informações do super usuário da ferramenta

Figura 10. Informando nome e descrição do site

Esturtura do template "Personal Site"

Para que possamos começar a analisar a estrutura do template, considere a estrutura de diretórios apresentada pela Figura 1.

Figura 1. A estrutura de diretórios do template

Iniciemos este processo de análise pelos diretórios da aplicação. São 7 (sete) diretórios sendo que, alguns deles, são estratégicos para o funcionamento da aplicação. São eles:

• App_Code: diretório responsável por agrupar helpers, classes, funções, etc. Se algum arquivo Razor deve ser utilizado como biblioteca, este arquivo deve ser incorporado na pasta App_Code. WebMatrix buscará nesta página códigos executáveis.
• App_Data: diretório dedicado ao armazenamento de arquivos que atuam como fontes de dados da aplicação. Por padrão, quando um banco de dados SQL Server Compact (.sdf) é criado, sua estrutura encontra-se hospedada neste diretório.
• bin: diretório específico para a adição componentes da plataforma .NET. Por padrão, quando um projeto WebMatrix é criado, são adicionadas automaticamente algumas referências base. 

Os demais diretórios (Contents, images, Layouts e Styles) são intrínsecos a cada aplicação e não padrões de projeto, como é o caso daqueles visualizados nos ítens anteriores. Ainda assim, como o objetivo é entender a forma como a aplicação foi construída, vale mencionar que, o diretório "Content" agrupa as páginas de conteúdo da aplicação. Já o diretório "images", como é possível imaginar, agrupa todas as imagens exibidas pela aplicação. O diretório "Layouts" é aquele que agrupa arquivos que possuem definições sobre os layouts possíveis para a aplicação, enquanto que o diretório "Styles" agrupa os arquivos de estilização (.css, .less, etc.).

O restante dos ítens apresentados pela Solution Explorer da Figura 1 são arquivos de inicialização padrão do site (veremos alguns deles em mais detalhes mais adiante neste texto).

O diretório "App_Code"

Conforme mencionado anteriormente, o diretório App_Code tem a função de agrupar códigos Razor executáveis para reutilização durante o projeto. Para que possamos entender sua utilidade no projeto do template, considere a Figura 2.

Figura 2. Conteúdo do diretório "App_Code"

Expandindo-se o diretório App_Code, é possível visualizar alguns arquivos em seu interior. Estes arquivos são helpers e classes escritas em linguagem C# que possibilitam a implementação de certos recursos da aplicação. Apresentemos então uma rápida descrição acerca destes:

• BlogHelper.cshtml: trata-se de um helper que implementa algumas funções intrínsecas a blogs. Alguns exemplos: criação de URL' amigáveis, exibição de RSS, etc. Como é possível notar, o arquivo possui a extensão ".cshtml" o que indica que este possui código Razor e pode haver HTML e C# misturados, caracterizando-o portanto como helper.
• ContentSource.cs: classe escrita em C# que implementa o mecanismo de links para conteúdos dentro da aplicação. A ideia aqui é, ao invés de ter-se um menu criado diretamente na web page view, tem-se um objeto que encapsula as características de um menu e, para cada novo conteúdo, tem-se uma instância de ítem de menu.
• FeedItem.cs: classe escrita em C# que possui a função de definir o objeto de feed para utilização do "BlogHelper.cshtml" visto anteriormente.
• FileHelper.cshtml: helper que possui a função de mapear e associar cada nova instância de "ContentSource" para os arquivos físicos em "Content".
• Flickr.cshtml: helper que implementa a intergração com o sistema de compartilhamento de fotos do Yahoo!. Este arquivo encapsula toda a complexidade de integração com a ferramenta e disponibiliza um interface simplificada para o desenvolvedor realizar a conexão.
• TwitterHelper.cshtml: helper que implementa a integração da aplicação com a ferramenta de microblogs. Várias funções estão disponíveis para este helper.

Com base na descrição dos arquivos fica fácil entender que, na pasta App_Code, temos o coração da aplicação implementado. Conforme o conteúdo deste artigo avança, a importância dos arquivos agrupados neste diretório lhe será cada vez meios evidente.

Os arquivos padrão

Além da importância já mencionada do diretório App_Code e seus arquivos, alguns outros arquivos de projeto também são fundamentais na estrutura apresentada pela Figura 1. São eles:

• _AppStart.cshtml: arquivo executado quando a aplicação inicia sua execução. O objetivo desta página é concentrar a implementação de recursos que devem ser executados no momento em que a aplicação é carregada. O símbolo "_" indica ao framework que este arquivo deve ser ignorado em termos de renderização pelos navegadores assim, só funciona em background.
• _PageStart.cshtml: arquivo carregado também com a inicialização da aplicação. A diferença em relação a "_AppStart.cshtml" é que, os parâmetros indicados em "_PageStart.cshtml" dizem respeito as configurações visuais das páginas, enquanto a outra indica configurações relacionadas a operações lógicas.
• ContentPage.cshtml: página responsável por estruturar logicamente o fluxo da aplicação. "ContentSource.cs" e "ContentPage.cshtml" estão intimamente relacionados pois, enquanto o primeiro define o objeto de navegação o segundo mapeia o fluxo de navegação.
• Default.cshtml: página padrão a ser renderizada pelo browser. Ao executar a aplicação, "Default.cshtml" é a página buscada pelo IIS para ser executada enquanto as demais são executadas na sequência.

Com base nas informações apresentadas até este ponto, podemos imaginar o fluxo de execução da aplicação conforme apresentado pela Figura 3.

Figura 3. Fluxo de execução do template

Vantagens deste modelo

As vantagens de se construir uma aplicação de forma modular, separando o máximo possível as responsabilidades são latentes.

Para justificar esta afirmação, considere o exemplo da construção de web page views. A forma tradicional para construção destes elementos é: cria-se um arquivo de estilização (CSS, por exemplo) e, para cada nova página que necessite exibir algum dado no padrão de layout, o arquivo de estilos deve ser incorporado manualmente no interior destes (princípio da repetição das tarefas). Com o modelo de arquitetura proposto pelo exemplo deste template, como o arquivo "_SiteLayout.cshtml" implementa o layout padrão da aplicação, as demais páginas apenas herdam (automaticamente) o layout padrão.

Conclusões

Estruturar as aplicações com WebMatrix pode implicar em diversos benefícios, principalmente para o desenvolvedor. Características como fácil manutenção, abstração com base em objetos, dentre outras, podem impactar diretamente na qualidade da aplicação bem como na produtividade do desenvoledor.

O modelo Razor de programação foi pensado de forma a fornecer todos os recursos necessários para que desenvolvedores pudessem criar a maior gama de códigos e modelos reutilizáveis possível.

Este artigo não apresentará os conceitos fundamentais de bancos de dados relacionais entretanto, veremos como ASP.NET Razor facilita o trabalho com bancos de dados em web pages utilizando WebMatrix.

Para apresentar as principais funcionalidades do modelo em relação a interação com bancos de dados, utilizaremos o exemplo do formulário já criado na aula anterior, isto é, o "produto". Assim, o que faremos é:

1. Criaremos um novo banco de dados (SQL Server);
2. Criaremos uma tabela (a qual chamaremos "tbProduto");
3. Adicionaremos um trecho de código que adiciona um novo registro de produto na base recém criada;
4. Adicionaremos um novo trecho de código que edita os registros previamente adicionados;
5. Adicionaremos um novo trecho de código que remove os registros da base de dados.

Criando o banco de dados da aplicação

Com o WebMatrix em execução, alterne para a aba "Databases". No menu superior, após clicar na opção "New Database", criarmos um novo banco de dados e o renomearmos para "DBLoja", criaremos uma nova tabela ("tbProdutos"). A Figura 1 apresenta o banco de dados criado e a estrutura da tabela (para saber como utilizar a ferramenta de banco de dados do WebMatrix, assista a video aula "Gerenciamento de Bancos de Dados" no segundo módulo deste treinamento).

Figura 1. Estrutura da tabela "tbProdutos" no banco de dados "DBLoja"

Como é possível observar, a estrutura do banco de dados segue o modelo apresentado pelo formulário de exemplo das aulas anteriores. A partir daqui, estamos prontos para seguir com a construção do exemplo.

Construindo a página que adiciona um novo registro

Após alternar para a guia "Files" e adicionar um novo arquivo "cshtml", adicione o trecho de código apresentado pela Listagem 1.

@{
    var Nome = "";
    var ValorUnitario = "";
    var RespostaFinal = "";
    var Erro = false;
    var ConexaoBD = Database.Open("DBLoja");

    if(IsPost)
    {
        Nome = Request["txtNome"];
        if(Nome.IsEmpty())
        {
            Erro = true;
            @:Por favor, informe o nome do produto.<br />
        }

        ValorUnitario = Request["txtValorUnitario"];
        if(ValorUnitario.IsEmpty() || !ValorUnitario.IsFloat())
        {
            Erro = true;
            @:Por favor, informe o valor unitário do produto.<br />
        }

        if(Erro == false)
        {
            var SentencaSQL = "INSERT INTO tbProdutos(Nome, ValorUnitario) VALUES (@0, @1)";
            var ResutadoBD = ConexaoBD.Execute(SentencaSQL, Nome, ValorUnitario.AsFloat());
            if(ResutadoBD == 1)
            {
                RespostaFinal = "Produto adicionado com sucesso na base de dados.";
            }
            else
            {
                RespostaFinal = "Problema encontrado ao processar a requisição. O produto não foi adicionado.";
            }
        }
    }
}
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalho com Formulários</title>
    </head>
    <body>
        <h1>Cadastro de produto</h1>
        
        <form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Adicionando novo prodruto</legend>
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" value="" name="txtNome" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" value="" name="txtValorUnitario" />
                <br />
            
                <input type="submit" value="Salvar" id="btnEnviar" name="btnEnviar" />
            </fieldset>
        </form>
        <div id="ResultadoOperacao" style="font-family:Arial; letter-spacing:-1px; font-weight:bold; color:#1611b9">
            @RespostaFinal
        </div>
    </body>
</html>

Listagem 1. Página que implementa a lógica de inserção 

Muito do código apresentado acima lhe deve ser familiar (de aulas anteriores), assim, vamos ressaltar apenas os aspectos diretamente relacionados ao processo de conexão e adição de novos registros ao banco de dados da aplicação.

• Linha 6: é criado dinamicamente um objeto chamado "ConexaoBD". Este objeto armazena o status da conexão com o banco de dados. O objeto que implementa as ações relacionadas a bancos de dados em Razor é "Database". "Open" é o método que estabelece a conexão com o banco de dados e, para realizar esta ação, espera uma string com o nome do banco de dados sem a extensão ".sdf". É importante mencionar que, todo gerenciamento da conexão com o banco de dados é realizado pela .net framework, isentando o desenvolvedor desta tarefa.
• Linha 25: da linha 6 até a 24, realizamos validações simples dos dados informados no formulário (este assunto foi estudado em outra aula neste mesmo módulo). Na linha 25, caso tudo tenha sido executado com sucesso, adicionamos a sentença de inserção dos dados e realizamos esta tarefa, através de uma metodologia conhecida como "parâmetros", que são indicados pelas strings "@0" e "@1". A utilização de parâmetros é uma boa prática pois, implementa segurança em sua operação com o banco de dados, protegendo de, dentre outras características, acessos mal intencionados.
• Linha 26: é criada dinamicamente a variável que hospeda o valor de retorno do processamento da operação de inserção no banco de dados. No caso do método "Execute", o valor retornado é um inteiro (1 para sucesso e 0 para falha). Os parâmetros dinamicamente esperados por "Execute" são: string com a sentença SQL e demais elementos associados aos parâmetros indicados por "@". Sim, a amarração dos dados com os parâmetros ocorre aqui.

Nas linhas seguintes apenas verificamos o resultado retornado. Caso tenha sido 1 (um), atribuímos à variável "RespostaFinal" a mensagem de sucesso. Caso contrário, retornamos a mensagem de insucesso.

A Figura 2 apresenta o resultado da execução do código apresentado pela Listagem 2.

Figura 2. Gravando os dados do formulário no banco de dados exemplo

Exibindo os dados do banco de dados

Bancos de dados só existem porque atuam como repositórios de dados para a exibição destes no momento oportuno, correto? Neste caso, vamos dedicar certo tempo a exibir os dados da única tabela existente em nosso banco de dados de exemplo. Assim, considere o código apresentado pela Listagem 2.

@{
    var ConexaoBD = Database.Open("DBLoja");
    var SentencaSQL = "SELECT * FROM tbProdutos ORDER BY Nome ASC";
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalhando com BD's</title>
    </head>
    <body>
        <table>
            <tr style="background-color:#a9a9a9; height:30px;">
                <td>
                    Código do produto
                </td>
                <td>
                    Nome do produto
                </td>
                <td>
                    Valor unitário
                </td>
                <td>
                    Operação
                </td>
            </tr>
            @foreach(var Registro in ConexaoBD.Query(SentencaSQL)) {
            <tr>
                <td>
                    @Registro.IDProduto
                </td>
                <td>
                    @Registro.Nome
                </td>
                <td>
                    @Registro.ValorUnitario
                </td>
                <td>
                    <a href="@Href("~/AtualizarDados", Registro.IDProduto)" target="_self">
                        Atualizar dados
                    </a>
                </td>
            </tr>
            }
        </table>
    </body>
</html>

 Listagem 2. Código que lista os dados cadastrados em forma de tabela

Como é possível notar, o código apresentado pela Listagem 2 é extremamente simples e apresenta poucos novos aspectos a serem considerados. Vamos a eles:

• Linha 3: a sentença SQL é modificada. Ao invés de adicionarmos dados no banco com INSERT, selecionamos os dados com SELECT. Armazenamos esta sentença em uma variável string gerada dinamicamente.
• Linha 27: adicionamos junto as tags HTML uma estrutura de repetição "foreach". Se você conhece C#, esta estrutura lhe é familiar. Você pode conhecer um pouco mais sobre esta forma de repetição clicando aqui. Uma observação importante aqui é: o compilador Razor é inteligente o suficiente para entender o que é  código Razor e o que não é, facilitando assim o trabalho do desenvolvedor e tornando o código legível.
• Linhas 30, 33 e 36: como "Registro" é um objeto gerado dinamicamente em tempo de compilação e representa cada registro do banco de dados, podemos então compor a exibição do mesmo através da chamada das colunas do registro como se fossem propriedades do objeto. Nestas linhas, é exatamente isso que realizamos.

O resultado do processamento do código apresentado pela Listagem 2 pode ser visualizado na Figura 3.

 Figura 3. Dados do banco de dados sendo exibidos

Atualizando dados

Outra operação comum quando estamos trabalhando com aplicações web que interagem com bancos de dados relacionais é a de atualização dos dados já existentes. Um exemplo comum que justifica esta operação em nossa aplicação exemplo, seria o reajuste de preço unitário em percentual x.

Para realizar tal operação, Razor ofere um modelo bem semelhante aquele apresentado pelos ítens anteriores. Para entendê-lo, considere o trecho de código apresentado pela Listagem 3.

@{
    var ParametroURL = UrlData[0];
    var ConexaoBD = Database.Open("DBLoja");
    var RespostaFinal = "";
    var NomeTemp = "";
    var ValorUnitarioTemp = "";

    if(ParametroURL.IsEmpty())
    {
        @:Não foi possível carregar os dados.
    }
    else
    {
        if(IsPost)
        {
            var Nome = Request["txtNome"];
            var ValorUnitario = Request["txtValorUnitario"];

            var SentencaSQLAtualiza = "UPDATE tbProdutos SET Nome = @0, ValorUnitario = @1 WHERE IDProduto = @2";
            ConexaoBD.Execute(SentencaSQLAtualiza, Nome, ValorUnitario, ParametroURL);
            RespostaFinal = "Dados atualizados com sucesso!";
        }
        else
        {
            var SentencaSQL = "SELECT * FROM tbProdutos WHERE IDProduto = @0";
            var ResultadoBD = ConexaoBD.QuerySingle(SentencaSQL, ParametroURL);
            NomeTemp = ResultadoBD.Nome;
            ValorUnitarioTemp = ResultadoBD.ValorUnitario.ToString();
        }
        
    }
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalho com BD's</title>
    </head>
    <body>
        <h1>Atualização de cadastro de produto</h1>
        
        <form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Atualizando o prodruto</legend>
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" value="@NomeTemp" name="txtNome" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" value="@ValorUnitarioTemp" name="txtValorUnitario" />
                <br />
            
                <input type="submit" value="Salvar" id="btnEnviar" name="btnEnviar" />
            
            </fieldset>
        </form>
        <div id="ResultadoOperacao" style="font-family:Arial; letter-spacing:-1px; font-weight:bold; color:#1611b9">
            @RespostaFinal
        </div>
    </body>
</html>

Listagem 3. Atualizando os dados de produtos 

O processo de atualização dos dados em um banco é realizado através da diretiva SQL "Update". O código apresentado pela Listagem 3 não apresenta novidades em relação ao que já foi estudado nas seções anteriores neste mesmo artigo. A diferença básica que ocorre aqui é: temos a conexão ao banco de dados ocorrendo em dois momentos sendo que, no primeiro, com base no código recuperado através da URL com "UrlData[0]", criamos a sentença SQL de busca do registro desejado. Já no segundo momento, quando o usuário fizer postback com os dados do formulário, o sistema conecta-se novamente ao banco de dados e executa o "Update".

O resultado do processo de atualização das informações de determinado registro no banco de dados pode ser visualizado nas Figuras 4 e 5.

Figura 4. Alterando os dados previamente cadastrados 

 Figura 5. Dados alterados no banco de dados

Removendo dados da base

Outro aspecto importante e muito comum em sistemas que armazenam dados, é a necessidade de em um momento ou outro, remover dados que encontram-se redundantes, que foram armazenados de forma incorreta ou que não mais são importantes no contexto da aplicação e estão ocupando espaço desnecessariamente.

A Listagem 4 apresenta uma das formas possíveis de utilização do Razor para realizar a a tarefa de remoção.

@{
    var ParametroURL = UrlData[0];
    var ConexaoBD = Database.Open("DBLoja");
    var RespostaFinal = "";
    var NomeTemp = "";
    var ValorUnitarioTemp = "";

    if(ParametroURL.IsEmpty())
    {
        @:Não foi possível carregar os dados.
    }
    else
    {
        if(IsPost)
        {
            var SentencaSQLRemove = "DELETE FROM tbProdutos WHERE IDProduto = @0";
            ConexaoBD.Execute(SentencaSQLRemove, ParametroURL);
            RespostaFinal = "Produto removido com sucesso!";
        }
        else
        {
            var SentencaSQL = "SELECT * FROM tbProdutos WHERE IDProduto = @0";
            var ResultadoBD = ConexaoBD.QuerySingle(SentencaSQL, ParametroURL);
            NomeTemp = ResultadoBD.Nome;
            ValorUnitarioTemp = ResultadoBD.ValorUnitario.ToString();
        }
        
    }
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalho com BD's</title>
    </head>
    <body>
        <h1>Remoção de produto</h1>
        
        <form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Dados do produto</legend>
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" value="@NomeTemp" name="txtNome" disabled="disabled" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" value="@ValorUnitarioTemp" name="txtValorUnitario" disabled="disabled" />
                <br />
            
                <input type="submit" value="Remover" id="btnEnviar" name="btnEnviar" />
            
            </fieldset>
        </form>
        <div id="ResultadoOperacao" style="font-family:Arial; letter-spacing:-1px; font-weight:bold; color:#1611b9">
            @RespostaFinal
        </div>
    </body>
</html>

Listagem 4. Removendo registro da base de dados 

 O processo de remoção de dados de uma tabela se dá através da escrita da diretiva DELETE (acessível através da linguagem SQL). Poucas mudanças são trazidas pelo código da Listagem 4. A principal delas é a troca de "UPDATE" por "DELETE" na execução do método "Execute". As Figuras 6 e 7 apresentam o resultado do processamento do código apresentado pela Listagem 4.

 Figura 6. Painel que exibe os dados a serem removidos

 Figura 7. Registro removido do banco de dados

 Uma observação oportuna neste ponto é: ao escrever query's de atualização e remoção de dados, quase sempre deseja-se realizar este tipo de operação para registros específicos e neste contexto, a utilização da cláusula "WHERE" é fundamental. O esquecimento ou desconsideração desta cláusula implicará necessariamente na aplicação da operação a todos os registros da tabela.

'

• Como criar e utilizar formulários web
• Como utilizar dados fornecidos por usuários em um formulário web na aplicação
• Como é possível validar as informações provenientes de formulários web sem javascript, utilizando Razor apenas

Criando formulários web

O objetivo deste texto não é ensinar conceitos sobre a linguagem padrão dos navegadores web, isto é, HTML. Entretanto, como falaremos massivamente acerca de formulários, faz sentido apresentar os conceitos básicos relacionados a este importante componente das web pages.
A Listagem 1 apresenta um código sugestivo para implementação de um formulário web simples, simulando o cadastro de produtos em um “sistema” web qualquer.

<form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Adicionando novo prodruto</legend>
            
                <label for="txtCodigo">Código do produto</label>
                <input type="text" id="txtCodigo" name="txtCodigo" />
                <br />
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" name="txtNome" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" name="txtValorUnitario" />
                <br />
            
                <input type="submit" value="Salvar" id="btnEnviar" name="btnEnviar" />
            
         </fieldset>
</form>

Listagem 1. Um formulário simples para cadastro de produto de um sistema fictício

Se você já possui algum conhecimento acerca da linguagem HTML, o trabalho com formulários deve lhe ser comum e, neste caso, minha recomendação é que prossiga para o próximo tópico deste artigo.

Os principais aspectos relacionados ao código apresentado pela Listagem 1 são:

• Sempre que um formulário web for necessário em determinada aplicação web, para que este possa existir, deve existir antes de mais nada, a implementação da tag <form></form>.
• A tag <form> possui atributos importantes. Os principais deles são:
  • Method: indica a forma com que os dados serão enviados. GET ou POST são os valores aceitos.
  • Action: possibilita ao desenvolvedor apontar os dados do formulário para processamento em arquivo externo. O valor aceito para este atributo é uma string com o caminho até o arquivo de destino.
  • Id: permite atribuir um nome ao formulário. Muito embora este não seja um atributo obrigatório, é uma boa prática utilizar pois, identificará o elemento HTML na árvore DOM, o que tornará possível a manipulação do elemento através de CSS e Javasctipt.
  • A tag <fieldset> não é obrigatória no contexto de um formulário web. Esta tag encontra-se no contexto do formulário apresentado no código da Listagem 1 para adicionar um elemento visual. Ao ser renderizada esta tag adiciona uma borda ao formulário, como pode ser visualizado na Figura 1. <legend> permite adicionar um texto descritivo ao contexto de <fieldset>.
  • A tag <label> possui a função de facilitar as ações interação com formulários sem ser renderizada. O que fazemos no código da Listagem 1 é, através do atributo "for" de <label>, amarrar ao campo <input> pelo atributo "id".
  • <input> são tags que possuem a responsabilidade de adicionar os elementos de formulários propriamente ditos. São campos de texto, listas de seleção, areas de texto, etc. Você pode encontrar um bom guia de referência para HTML clicando aqui.

O resultado do processamento do trecho de código apresentado pela Listagem 1 pode ser visualizado na Figura 1.

Figura 1. Formulário de exemplo em execução

Lendo dados do formulário

Os formulários de nada valeriam se não existisse a possibilidade do sistema no qual o formulário encontra-se inserido, ler as informações nele adicionadas.

Com ASP.NET Razor, o processo de leitura dos dados provenientes de formulários tornou-se consideravelmente mais simples. Para que a ideia envolvida neste processo torne-se mais clara, considere o trecho de código apresentado pela Listagem 2.

@{
    string Codigo = "";
    string Nome = "";
    string ValorUnitario = "";

    if(IsPost)
    {
        Codigo = Request["txtCodigo"];
        Nome = Request["txtNome"];
        ValorUnitario = Request["txtValorUnitario"];

        Response.Write("Produto cadastrado: Código " + Codigo + " - Nome: " + Nome + " - Valor unitário: " + ValorUnitario);
    }
}

Listagem 2. Trecho de código que faz a leitura dos dados do formulário

Como é possível observar, o processo de leitura dos dados é simples. A seguir, detalhamos o trecho de código apresentado pela Listagem 1.

• Linhas 2-4: declaramos três variáveis do tipo "string". Estas variáveis serão as responsáveis por guardar os valores provenientes do formulário. Uma observação importante aqui é: as variáveis são declaradas e inicializadas. Esta é uma boa prática de desenvolvimento.
• Linha 6: através da propriedade "IsPost", verificamos se ocorreu "post-back" na página. Em caso positivo, como o formulário de exemplo (Listagem 1) está configurado com o padrão de resposta "post", o trecho de código interno ao "if" será executado.
• Linha 8-10: através do objeto "Request" (estudado em aula anterior neste módulo) obtemos o valor outrora armazenado nos campos de texto ("txtCodigo", "txtNome" e "txtValorUnitario"). Estes valores são então enviados as variáveis "Codigo", "Nome" e "ValorUnitario" através de uma operação simples de atribuição.
• Linha 12: através do objeto "Response" e método "Write" apresentamos o resultado proveniente do formulário.

O resultado da execução do trecho de código apresentado pela Listagem 2 em parceria com o trecho de código apresentado pela Listagem 1 pode ser visualizado na Figura 2.

Figura 2. Executando o trecho de código que lê os dados

Validando dados de entrada

Erros em dados informados através de formulários são comuns de serem encontrados. Os problemas são os mais diversos: informações obrigatórias são ignoradas, números de documentos informados com pontos e traços quando deveriam ser apenas números, e-mails inválidos, dentre muitos outros. Este cenário leva a seguinte conclusão: antes de trabalhar com os dados internamente no sistema, a validação deste é necessária.

Razor disponibiliza um modelo simplificado para validar dados de entrada em formulários e, neste tópico, trabalharemos com estes principais aspectos. Para realizarmos as devidas considerações, considere o trecho de código apresentado pela Listagem 3.

@{
    string Codigo = "";
    string Nome = "";
    string ValorUnitario = "";
    var Erros = false;

    if(IsPost)
    {
        Codigo = Request["txtCodigo"];
        if(Codigo.IsEmpty() || !Codigo.IsInt())
        {
            Erros = true;
            @:Por favor, informe um código válido.<br />
        }

        Nome = Request["txtNome"];
        if(Nome.IsEmpty())
        {
            Erros = true;
            @:Por favor, informe seu nome.<br />
        }
        ValorUnitario = Request["txtValorUnitario"];
        if(ValorUnitario.IsEmpty() || ValorUnitario.IsFloat())
        {
            Erros = true;
            @:Por favor, informe o valor unitário do produto.<br />
        }
        if(Erros == false)
        {
            <text>
                Os dados digitados foram:<br />
                Código: @Codigo<br />
                Nome: @Nome<br />
                Valor unitário:<br />
            </text>
        }
    }
}

 Listagem 3. Validando o formulário de exemplo com Razor

Alguns aspectos fundamentais do código apresentado acima:

• Verifica-se campo a campo do formulário, se os dados informados correspondem a aqueles esperados. Esta verificação é realizada com o apoio de uma estrutura condicional simples – "if".
• Se os dados são provenientes de um post, os campos são verificados.
• Linhas 9-14: recuperamos o valor através do objeto request e armazenamos na variável "Codigo". Em seguida, através do método "IsInt" verificamos se o valor informado de fato é um inteiro (levando-se em consideração que o código necessariamente deverá ser um número inteiro). Na mesma sentença de verificação, através do método "IsEmpty" realizamos o "check" se de fato algum valor está armazenado. Caso as duas alternativas falhem, a variável "Erros" (inicializada propositalmente com "false") tem seu valor alterado para "true", indicando que ao menos um erro ocorreu.
• O mesmo processo de validação se repete para cada campo e, ao final (linha 28), caso não existam erros, uma mensagem com os dados informados é exibida. Caso erros existam, mensagens de erros são exibidas no topo da página.

O trecho de código em execução pode ser visualizado na Figura 3.

Figura 3. O formulário sendo validado

 Conclusões

Utilizar ASP.NET Razor para validar informações adicionadas a formulários web em web pages é um processo simples e robusto.

Existem diferentes formas e metodologias para realizar a validação de informações de formulários em páginas web (uma das principais é através de javascript e seus frameworks), entretanto, seguindo a ideia de tornar o processo de construção de web pages mais simples, realizar validações com Razor é uma interessante alternativa. 

Functions (funções)

Se você já escreveu código em alguma linguagem de programação, procedimental ou não, certamente possui alguma experiência com funções.

Em linhas gerais, funções são trechos de código que realizam operações específicas que, no momento oportuno, são trazidas ao contexto de determinada operação através de uma chamada simples.

Para que este conceito fique mais claro, imagine determinada situação onde, conexões com o banco de dados da aplicação devem ser realizadas em diferentes momentos e diversas vezes ao longo da execução da mesma. Ao invés de cada web page realizar a conexão no momento necessário, o trecho de código que realiza tal operação poderia estar encapsulado em uma função, que poderia ser chamada quantas vezes fossem necessárias.

WebMatrix e ASP.NET Razor oferecem uma forma simples e organizada de se trabalhar  com funções. A seguir, apresentamos este processo.

Com WebMatrix em execução, crie um novo projeto do tipo "Empty Site". Na Solution Explorer, adicione um novo diretório chamado "App_Code". Em seu interior adicione um novo arquivo do tipo ".cshtml" (sugestivamente nomeei o da construção deste exemplo de "OperacoesMatematicas.cshtml"). A Figura 1 apresenta esta etapa do processo.

Figura 1. Adicionando um arquivo ".cshtml" a pasta "App_Code" 

 No arquivo récem criado, remova o código automaticamente gerado pela ferramenta e adicione aquele apresentado pela Listagem 1.

@functions{

    //Operação de adição
    public static int Soma(int Valor1, int Valor2)
    {
        var Resultado = Valor1 + Valor2;
        return Resultado;
    }

    //Operação de multiplicação
    public static int Multiplicacao(int Valor1, int Valor2)
    {
        var Resultado = Valor1 * Valor2;
        return Resultado;
    }

    //Operação de divisão
    public static int Divisao(int Valor1, int Valor2)
    {
        var Resultado = Valor1 / Valor2;
        return Resultado;
    }

    //Operação de subtração
    public static int Subtracao(int Valor1, int Valor2)
    {
        var Resultado = Valor1 – Valor2;
        return Resultado;
    }

}

 Listagem 1. Criando a lógica da apresentação

Como é possível notar, a aplicação que demonstrará a utilização das funções implementa um exemplo de calculadora simples que, ao receber as informações de determinado formulário, exibe o resultado da conta.

Para que funções possam funcionar corretamente com Razor e WebMatrix é preciso que o código esteja alocado dentro do bloco delimitado por "@functions{}". Este bloco diz ao compilador Razor que, os métodos (são quatro funções, uma para operação aritmética) implementados internamente tem o comportamento de funções e portanto, podem ser acessadas como tal.

Como próxima etapa, o que faremos é criar o formulário que atuará como interface para a entrada de dados no sistema. Assim, adicione a raíz da aplicação um novo arquivo com a extensão ".cshtml" e adicione o código HTML apresentado pela Listagem 2.

<html>
    <head>
        <title>Funções - Como utilizar?</title>
    </head>
    <body>
        <h1>Operação matemática</h1>
        <form method="post" id="FormOperacao" name="FormOperacao">
            <table>
                <tr>
                    <td>
                        Informe o primeiro valor:
                    </td>
                    <td>
                        <input type="text" id="txtValor1" name="txtValor1" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Informe o segundo valor:
                    </td>
                    <td>
                        <input type="text" id="txtValor2" name="txtValor2" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Selecione o tipo de operação:
                    </td>
                    <td>
                        <select id="slcOperacao" name="slcOperacao">
                            <option selected="selected">Selecione a operação</option>
                            <option value="+">+</option>
                            <option value="-">-</option>
                            <option value="*">*</option>
                            <option value="/">/</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Resultado:
                    </td>
                </tr>
                <tr>
                    <td id="EstiloResultado">
                        
                    </td>
                    <td>
                        <input type="submit" value="Calcular" id="btnCalcular" name="btnCalcular" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Listagem 2. Formulário de entrada 

 Agora possuímos a interface de entrada do sistema e a lógica das operações. O que nos resta é "interligar" estes dois momentos e o faremos adicionando algum código Razor na web page do formulário. Assim, no topo da página do formulário, antes da tag HTML inicial, adicione o seguinte trecho de código.

@{
    var ResultadoFinal = 0;
    if(IsPost)
    {
        var Valor1 = Request["txtValor1"];
        var Valor2 = Request["txtValor2"];
        var Operacao = Request["slcOperacao"];

        switch(Operacao)
        {
            case "+":
                ResultadoFinal = OperacoesMatematicas.Soma(Valor1.AsInt(), Valor2.AsInt());
            break;
            case "-":
                ResultadoFinal = OperacoesMatematicas.Subtracao(Valor1.AsInt(), Valor2.AsInt());
            break;
            case "*":
                ResultadoFinal = OperacoesMatematicas.Multiplicacao(Valor1.AsInt(), Valor2.AsInt());
            break;
            case "/":
                ResultadoFinal = OperacoesMatematicas.Divisao(Valor1.AsInt(), Valor2.AsInt());
            break;
        }

    }
}

Listagem 3. Interligando os dados do formulário com a lógica da aplicação 

O código apresentado pela Listagem 3 é simples e nos possibilita entender de forma bem clara como funções podem ser utilizadas no contexto de aplicações web. Na próxima aula deste módulo, estudaremos os mecanismos disponíveis no modelo Razor de programação para interagir com formulários web utilizando WebMatrix e, por isso, não detalharei estes recursos neste texto.

O principal aspecto do código apresentado pela Listagem 3 e que é objeto de nosso estudo neste artigo é a forma com a qual trazemos as funções para o contexto dos dados atuais. Assim, observe atentamente as linhas 12, 15, 18 e 21. Em ambas podemos notar  "chamadas" a funções acontecendo. A nomenclatura para que isto ocorra é:

[ NomeDoArquivoDasFuncoes ].[ NomeDaFuncao ]( Parametros )

Assim, temos:

var Resultado = OperacoesMatematicas.Soma(Valor1.AsInt(),Valor2.AsInt());

A linha acima pode ser lida da seguinte forma: "Resultado" recebe o valor gerado pela execução da função "Soma" que possui os parâmetros "Valor1" convertido em inteiro e "Valor2" também convertido em inteiro que se encontra implementada no arquivo "OperacoesMatematicas".

O resultado final com a aplicação em execução pode ser visualizado na Figura 2.

Figura 2. A aplicação de exemplo em funcionamento

Helpers

Helpers e WebMatrix trouxeram um importante conceito para o processo de construção de aplicações para web: code ready (ou em português, códigos prontos). Helpers auxiliam desenvolvedores em grande escala pois facilitam o processo de reutilização de código.

Através da utilização de helpers, desenvolvedores podem criar fragmentos de código, armazená-los em repositórios locais, de rede ou na nuvem e reutilizar em projetos que necessitem da mesma demanda.

O conceito de helpers transcende o de funções visto anteriomente. Enquanto funções estão restritas ao escopo do projeto, helpers podem ser utillizados em diversos projetos. Isto faz deste recurso, um atrativo especialmente interessante.

WebMatrix traz uma galeria de diversos helpers já prontos e, além disso, permite que desenvolvedores criem seus próprios. Você pode encontrar um bom texto apresentando o processo de construção de helpers utilizando WebMatrix clicando aqui.

Neste artigo, apresentaremos o processo para utilizar um helper já existente na galeria online do WebMatrix e, para isso, lancaremos mão do mesmo projeto utilizado para explicitar o conceito de utilização de funções na seção anterior deste texto. Assim, adicione um novo arquivo ao diretório raíz do projeto também com a extensão ".cshtml".

O helper que será utilizado como exemplo neste ponto é o "TwitterHelper". Como o nome sugere, este helper realiza de forma extremamente simplificada a intergração com Twitter com a escrita de apenas algumas linhas de código.

Após adicionar o novo arquivo, clique sobre a opção "Gallery (NuGet)" localizada no menu superior, conforme ilustra a Figura 3.

 Figura 3. Galeria de helpers online do WebMatrix

 Na janela que se abre, após informar campo de busca a palavra "Twitter", selecione o helper "TwitterHelper" e clique em "Install", conforme ilustra a Figura 4.

 Figura 4. Selecionando e instalando o helper "TwitterHelper"

Aceitando os termos de licença e clicando novamente em "Install" você estará habilitando WebMatrix para que realize o trabalho para você. Ele buscará os arquivos do helper, os distribuirá nas pastas específicas do projeto e habilitará sua aplicação a utilizá-lo. A partir daí, apenas algumas linhas de código o separarão da integração.

Naturalmente que, o passo seguinte, consiste na adição do código que integra nossa aplicação web a API do Twitter. A Listagem 5 apresenta o código final da web page que realiza a integração.

<html>
    <head>
        <meta charset="utf-8" />
        <title>Integração com Twitter</title>
    </head>
    <body>
        @TwitterGoodies.Search("WebMatrix")
    </body>
</html> 

Listagem 4. Utilizando o helper para exibir dados do Twitter 

O código apresenta um aspecto fundamental: a chamada da função "Search" que se encontra implementada no arquivo "TwitterGoodies". Este conceito lhe é familiar?

Até a próxima aula.

Por algum tempo no passado, muitas tecnologias e frameworks eram propostos para otimizar não apenas o processo de escrita de códigos nos dois modelos de nível mais baixo (entenda-se: dados e negócios) das aplicações mas também o resultado final gerado. Algo que ocorria frequentemente era: as tecnologias para a camada final de visualização não evoluiam no mesmo ritmo que as demais.

Com a grande evolução sofrida por tecnologias já tradicionais do processo (HTML 5, CSS 3, jQuery, LESS, etc.) e o advento de novas e robustas (como ASP.NET Razor, por exemplo), a camada de visualização de dados de aplicações web dentro da plataforma .NET teve este cenário outrora desfavorável modificado para extremamente favorável.

Este módulo do treinamento tratará apenas da camada de visualização de aplicações web dentro da plataforma .NET, mais especificamente de sua nova tecnologia padrão para este fim – a saber, ASP.NET Razor.

Conhecendo o ASP.NET Razor

Definição: ASP.NET Razor é uma view engine. É uma nova forma de escrever visualizações em aplicações web.

Esta definição é fundamental pois traz consigo duas características muito importantes acopladas, as quais discutimos a seguir. O objetivo principal da tecnologia também está implícito através dela.

• Não é linguagem de programação: esta é uma confusão muito comum realizada por desenvolvedores que iniciam seus estudos sobre Razor. ASP.NET Razor é um novo modelo de programação e não uma nova linguagem. Muito embora possua verbetes próprios, o que de fato ocorre é, no back-end, temos C# ou VB sendo executado. Além disso, é perfeitamente possível construir views utilizando Razor sem utilizar sua sintaxe específica, isto porque o usuário pode utilizar seu expertise de C# ou VB para escrever as views no modelo Razor.
• Linguagens robustas renderizadas na view: com Razor o desenvolvedor web ganha o poder de incorporar códigos escritos em linguagens como C# e VB em um novo ambiente – as views.

O ASP.NET Razor surgiu como parte do projeto do WebMatrix. Na verdade, Razor surgiu para ser a linguagem padrão para a construção de aplicações .NET dentro da ferramenta. Logo, se WebMatrix surgiu com o objetivo de ser uma ferramenta que simplifica o processo de construção de aplicações web robustas, Razor automaticamente carrega a mesma responsabilidade.

Razor agregou tanto valor a ferramenta, que o time de produto do ASP.NET MVC incorporou a view engine como padrão do framework a partir da versão 3.

Características funcionais

O ASP.NET Razor possui uma série de características que a tornam extremamente interessantes. A seguir, apresentamos as principais delas:

• Código limpo e legível: sem dúvida, a principal característica do ASP.NET Razor é a simplicidade na construção dos códigos. É possível construir páginas extremamente elaboradas, ricas em conteúdo com código organizado e limpo, gerando assim, facilidade no processo de manutenção do mesmo.
•  Razor não é uma linguagem: aqui está um motivo de grande confusão daqueles que iniciam os estudos com ASP.NET Razor. Muito embora você seja levado a pensar desta forma, o ASP.NET Razor não é uma nova linguagem de programação e sim, um novo modelo de programação. Para utilizar Razor em suas aplicações, você poderá utilizar seus conhecimentos das linguagens C# (C-Sharp) ou VB (Visual Basic). Caso sua escolha seja pela linguagem C#, o arquivo em que trabalhará terá a extensão "cshtml". Caso a linguagem escolhida seja o Visual Basic, seu arquivo possuirá a extensão "vbhtml".
• Helpers: uma das possibilidades interessantes do ASP.NET Razor é a de utilizar helpers. Helpers são funcionalidades específicas (por exemplo: formulário de busca no Bing, exibição de twits, integração com Facebook, etc.) já implementadas e disponibilizadas gratuitamente para utilização. Para alguns casos, a utilização de helpers diminui em grande escala o tempo gasto no processo de desenvolvimento de algumas tarefas. É possível também criar helpers personalizados.
• Fácil aprendizagem: outra característica importante do ASP.NET Razor é a facilidade na aprendizagem do mesmo, haja vista a simplicidade para escrever códigos proporcionada por ele.

Recursos básicos

A partir daqui apresentaremos uma visão geral acerca dos recursos básicos disponíveis no modelo Razor de programação. Estes conceitos são fundamentais para entender o funcionamento da linguagem e são base para o entendimento das próximas aulas do treinamento neste módulo.

As páginas Razor podem assumir duas extensões, dependendo da linguagem base de programação escolhida. Se a escolha for codificar com C#, a página assume a extensão ".cshtml". Se a escolha for por codificar em Visual Basic, a página assume a extensçao ".vbhtml".

1.      Adicionando código na página com através do caracter '@'

O modelo Razor de programação disponibiliza basicamente três modelos para a codificação no contexto de uma página com código HTML: bloco unitário, incorporado e bloco multi linhas (em inglês: single block, inline e multi-block, respectivamente).

Para que esta ideia fique clara, considere o trecho de código apresentado pela Listagem 1.

<!-- Bloco unitário -->
@{ var Nome = "Fabrício Lopes Sanchez"; }
@{ var Idade = 28; }

<!-- Incorporado -->
<p>O nome do usuário é: @Nome</p>
<p>A idade do usuário é: @Idade</p>

<!-- Multi linhas -->
@{
    var Modelo = "IX35";
    var Tipo = "SUV";
    var Fabricante = "Hyundai";
    var Mensagem = "O modelo é: " + Modelo + ". Este carro é do tipo " + Tipo + " e é fabricado por " + Fabricante + ".";
}
<h1>Informações do carro do cliente "@Nome"</h1>
<p>@Mensagem</p>

Listagem 1. Utilizando os blocos de código do ASP.NET Razor

Analisando-se a Listagem 1 fica fácil evidenciar os três de tipos de modelos de codificação e dispensa maiores comentários. Algumas observações pertinentes neste momento são:

• O interpretador do Razor é inteligente o suficiente para "saber" diferenciar os diferentes contextos. Um exemplo é o modelo incorporado. O interpretador é inteligente o suficiente para diferenciar o contexto do Razor do HTML.
• Razor conserva aspectos dinâmicos disponíveis também nas linguagens da .NET framework, como pode ser observado através da palavra reservada "var".
• A linguagem escolhida para a escrita do exemplo apresentado pela Listagem 1 foi C# e, neste caso, o arquivo deveria possuir a extensão ".cshtml".
• Codificação de elementos HTML. Quando Razor exibe uma saída, ele codifica o conteúdo de elementos HTML por outros códigos por questão de segurança (como pode ser visualizado na Figura 2).
• Com Razor é perfeitamente possível utilizar variáveis. Lembre-se, estamos utilizando C# no back-end.

O resultado produzido pelo código apresentado pela Listagem 1 pode ser visualizado na Figura 1.

 Figura 1. Resultado do processamento do código da Listagem 1

Figura 2. Os caracteres codíficados pelo interpretador Razor

 2.      Trabalhando com objetos

Objetos são elementos que possuem propriedades e métodos. Estes elementos são abstrações do mundo real e as propriedades e métodos descrevem estas abstrações. Com Razor, como trabalhamos com linguagens orientadas a objetos como plano de fundo, temos a possibilidade de utilizar este recurso.

Para entender uma das formas possíveis de se utilizar objetos com a sintaxe Razor, considere o exemplo apresentado pela Listagem 2.

<h1>Trabalhando com o objeto Request</h1>

<table style="border:1px dotted #000;">
    <tr>
        <td>URL Requisitada</td>
        <td>Caminho Relativo</td>
        <td>Tipo de Requisição</td>
    </tr>
    <tr>
        <td>@Request.Url</td>
        <td>@Request.FilePath</td>
        <td>@Request.RequestType</td>
    </tr>
</table>

 Listagem 2. Trabalhando com o objeto "Request"

No código apresentado pela Listagem 2 basicamente o que temos é: um objeto "Request" e a exibição dos valores armazendas em cada propriedade. Este texto não irá apresentar os conceitos de orientação objetos pois não é o foco do mesmo. Você pode encontrar um bom texto de referência sobre orientação a objetos seguindo este link.

Razor oferece ainda a possibilidade de criar suas próprias classes e instanciar seus próprios objetos.

O resultado do processamento do código apresentado pela Listagem 2 pode ser visualizado na Figura 3.

 Figura 3. Resultado do processamento do código da Listagem 2

 3.      Estruturas condicionais

Com Razor o desenvolvedor pode construir trechos de códigos que "tome decisões" com base em situações específicas. A tomada de decisão pode ser realizada utilizando-se dois recursos básicos: "if/else" e/ou "switch/case". Como exemplo de utilização, considere o trecho de código apresentado pela Listagem 3.

@{
    var Valor = 5;

    if(Valor > 3)
    {
        Valor = Valor *= 3;
    }
}
<p>O valor da operação é: @Valor</p>

Listagem 3. Utilizando uma estrutura condicional 

 O resultado natural da execução do trecho de código apresentado pela Listagem 3 pode ser visualizado na Figura 4.

 Listagem 4. Tomada de decisão em execução

 4.      Conversão de tipos

Razor também oferece métodos que possibilitam a conversão entre tipos de dados. Estes métodos são especialmente úteis quando os valores estão chegando de um "ambiente externo" e não se tem certeza quanto ao formato de entrada sendo que, para a realização de determinados tipos de operações posteriores, são requeridos tipos específicos

A Tabela 1 a seguir, apresenta os métodos para conversão de tipos disponíveis no vocabulário Razor com breve descrição e exemplos de como utilizar cada um deles.

var NumeroInteiro = 0;
var NumeroString = "256";
if(NumeroString.IsInt() == true)
    {
        NumeroInteiro = NumeroString.AsInt();
    }

var ValorString = "True";
var NovoBooleano = ValorString.AsBool();

var ValorFloatString = "10,23";
var ValorFloat = ValorFloatString.AsFloat();

var ValorDecimalString = "25485,548";
var ValorDecimal = ValorDecimalString.AsDecimal();

var DataString = "08/12/1983";
var Data = DataString.AsDateTime();

int Valor1 = 20;
int Valor2 = 28;
int Soma = Valor1 + Valor2;
var Concatenacao = Valor1.ToString() + Valor2.ToString();
Response.Write(Soma);
Response.Write(Concatenacao);

Tabela 1. Conversão de tipos utilizando Razor

1. Operadores

Razor incorpora todas as características do C#, logo, os operadores a serem utilizados na construção das expressões lógicas e/ou aritméticas são os mesmos. A Tabela 2 apresenta os operadores da linguagem e suas formas de utilização.

//Adição
var Soma = 12 + 52;

//Subtracao
int Subtracao = 1245852 - Soma;
    
//Multiplicacao
var Multiplicacao = 12;
Multiplicacao = Multiplicacao * Subtracao;

//Divisão
var Divisao = Multiplicacao / 2;

var Multiplicacao = 12;

var A = 12;
if(A == 12)
{
   Response.Write("Iguais!");       
}

if(A != 12)
{
     Response.Write("Diferentes!");
}

var Valor = 134;
if(Valor > 100)
{
     Valor++;
}
else if(Valor < 100)
{
     Valor--;
}

var Concatenacao = Valor1.ToString() + Valor2.ToString();

var Valor = 134;
if(Valor > 100)
{
    Valor *= 20;
    Response.Write(Valor);
}

Response.Write(Valor);

if(!Valor == 143)
{
    Response.Write("O valor é diferente de 143!");
}

if(Valor > 100 && Valor < 200)
{
    Response.Write("O valor está entre 100 e 200.");
}

Conclusão

ASP.NET Razor renova o conceito de web pages dentro da plataforma .NET. Razor apresenta um novo modelo de programação na camada de visualização que permite adicionar lógica de forma robusta sem perder a simplicidade. Esta característica faz com que a curva de aprendizado de desenvolvedores web de forma geral seja minimizada.

Razor incrementa produtividade no processo de construção de páginas web pois, diminui a quantidade de código escrito e facilita a manutenção do mesmo.

No texto de hoje, nos concentraremos na apresentação dos recursos disponibilizados pelo WebMatrix para gerenciamento do ambiente de codificação. Nosso objetivo é apresentar de forma clara e objetiva, como a ferramenta atende as demandas de usuários que desejam escrever seus códigos no WebMatrix.

O ambiente de codificação

O WebMatrix é uma ferramenta para construção de aplicações web e portanto, se existe uma característica que não pode deixar a desejar é o ambiente de codificação. Neste quesito, usuários do WebMatrix estão bem servidos.

WebMatrix disponibiliza um ambiente simples (mas não pobre) e intuitivo para a escrita de códigos para as linguagens as quais a ferramenta oferece suporte nativo.

Oferecer suporte nativo siginifica que o WebMatrix traz consigo certos recursos que facilitam o processo de escrita dos códigos nas linguagens suportadas, tais como: coloração de palavras reservadas, code-complete (intellisense), tooltip, etc. Atualmente, as linguagens suportadas nativamente na versão atual do WebMatrix são:

• HTML (já com atualização para a especificação 5)
• CSS (já com atualização para a especificação 3)
• Razor View Engine
• ASP.NET
• PHP
• Javascript (incluindo os frameworks mais populares, como jQuery)
• SQL (para a escrita de scripts de bancos de dados)
• XML
• C#
• Visual Basic
• ASP Clássico

Além dos recursos específicos para as linguagens já suportadas, WebMatrix disponibiliza ainda certos recursos comuns ao ambiente, tais como: auto identação, numeração de linhas, árvore de diretórios simplificada, menu contextualizado, etc.

Conhecendo o ambiente

Para acessar o ambiente de codificação do WebMatrix, basta direcionar o mouse ao canto inferior esquerdo do ambiente de trabalho da ferramenta e selecionar a opção "Files". Ao realizar tal procedimento, você deverá estar visualizando uma tela semelhante aquela apresentada pela Figura 1.

Figura 1. O ambiente de codificação do WebMatrix

A Figura 1 apresenta o ambiente de codificação do WebMatrix. Conforme mencionado anteriormente, o ambiente é extremamente simples e permite a fácil operação por qualquer usuário.

Duas características são marcantes analisando-se a Figura 1: menu contextualizado e árvore de navegação entre arquivos e diretórios. A presença do menu contextualizado no WebMatrix justifica-se naturalmente se trazemos conosco o conceito fundamental da ferramenta, isto é, o de ser uma ferramenta simples e intuitiva. Menus contextualizados foram introduzidos no Office 2010 e emplacaram excelentes resultados em termos de produtividade, justamente por não permitir o desvio de atenção durante determinada operação. Já a árvore de navegação é elemento indispensável em qualquer ambiente de codificação pois, permite gerenciar de forma simplificada nos muitos arquivos constantes em um projeto de aplicação web.

A seguir apresentamos com algumas imagens recursos adicionais do ambiente de codificação oferecidos pelo WebMatrix.

Figura 2. Code-complete para uma das linguagens suportadas

Figura 3. Recurso "go to". Muito útil para arquivos com muitas linhas de código

Figura 4. Busca de expressões dentro de arquivos

Conclusões

Conhecer o ambiente de codificação do WebMatrix é fundamental pois, boa parte do tempo de desenvolvimento de sua aplicação, será dispendido neste local. Conhecer os recursos associados podem o ajudar a incrementar a qualidade do código e a produtividade do usuário.

O ambiente de codificação do WebMatrix proporciona todos os recursos necessários para proporcionar a seus usuários produtividade na escrita de códigos nas linguagens suportadas pela ferramenta.

No artigo de hoje, concentraremos nossos esforços no sentido de conhecer as principais características relacionadas ao container de dados instalado e configurado pelo WebMatrix – o IIS.

Algumas palavras sobre IIS Express

O IIS Express é uma versão autônoma do já consagrado container web da Microsoft. Além de ser uma versão autônoma, isto é, uma versão dissociada da versão padrão, é uma instância otimizada para utilização por parte de desenvolvedores. Evidentemente que neste contexto certas características do produto são retiradas, o que por inércia, acarreta em outra característica: leveza. Sim, IIS Express é uma ferramenta leve, o que diminui seu tempo de download, instalação e configuração.

Algumas outras características importantes do IIS Express são:

• Não executa como um serviço e portanto, não requer permissões de administrador para realizar a maioria das operações.
• Desenhado para obter melhor desempenho com aplicações escritas em ASP.NET e PHP.
• Múltiplos usuários podem trabalhar de forma independente na mesma máquina.

A relação entre WebMatrix e IIS

Conforme apresentado em aulas anteriores, WebMatrix é uma IDE e seu objetivo principal é fornecer um ambiente limpo e sóbrio para o desenvolvimento de aplicações web. Tornar o ambiente "limpo e sóbrio" neste caso, implica necessariamente em esconder aspectos relacionados a configuração de ambiente.

Com vista a este cenário, torna-se natural inferir que, ao WebMatrix ser instalado ele naturalmente instala e configura a versão Express do Internet Information Services já que este, será a base executora das aplicações criadas com a ferramenta.

O WebMatrix gerencia todas as dependências relacionadas ao correto funcionamento do IIS e das demais ferramentas acopladas e, no front-end, disponibiliza funções básicas de gerência.

Gerenciando o IIS no WebMatrix

Se o WebMatrix possui o objetivo de ser uma ferramenta simples e intuitiva, o painel de adminitração das funções do IIS oferecido por ele também o é. Poucas opções são disponibilizadas, entretanto, apenas aquelas que realmente são interessantes para quem escreve as asplicações.

A Figura 1 apresenta o painel de administração do WebMatrix. Este painel pode ser visualizado na ferramenta selecionando-se a opção "Site" no menu inferior esquerdo e, nas opções apresentadas acima, selecionando "Settings".

Figura 1. Opções de configuração do IIS

Fitando-se a figura acima torna-se fácil evidenciar as quatro opções básicas de configuração:

• SSL Connection: a primeira opção permite ao desenvolvedor habilitar ou não a utilização de SSL para o site local. Check habilita o recurso enquanto a ausência dele não.
• .NET Framework Version: um simples drop-down-list que permite escolher a versão da .NET framework a ser utilizada no projeto.
• PHP Settings: com esta opção o usuário do WebMatrix pode selecionar se deseja ou não configurar o IIS para trabalhar com PHP. Em caso positivo (ao checar a opção "Enable PHP"), o WebMatrix baixa, instala e configura a versão mais recente do framework.
• Manage Default Pages: opção simples mas extremamente últil, permite adicionar,  remover e alterar prioridade de páginas de inicialização no projeto corrente.

Além dos quatro recursos para administração disponíveis no painel "Settings", o WebMatrix permite ainda ao usuário monitorar o sucesso/fracasso das requisições realizadas para a aplicação em questão através do menu esquerdo "Requests". A Figura 2 apresenta este monitor.

Figura 2. Gerenciando requisições

Conclusões

O gerenciamento de configurações do IIS dentro do WebMatrix é extremamente simplicado, seguindo a premissa de entregar ao desenvolvedor um ambiente sóbrio que, encapsule a complexidade e ao mesmo tempo ofereca as opções importantes ao usuário, não limitando-o ao auto instalador.

Basicamente, quando se inicia um novo projeto com WebMatrix, do início ao fim, três elementos básicos devem estar presentes: ideia, personalização/desenvolvimento e publicação. Este artigo trata do primeiro elemento, isto é, como o WebMatrix pode com suas características funcionais atender "a ideia" do usuário.

Tipos de projetos disponíveis

Uma ferramenta de desenvolvimento deve atender seus usuários em diversos aspectos. Nesse sentido, em termos de projetos, o WebMatrix disponibiliza basicamente dois modelos: templates básicos temáticos (implementados com sintaxe Razor) e galeria de aplicativos (Web App Gallery). A seguir, apresentamos cada um deles individualmente com suas características associadas.

Templates: são 6 (seis) opções para criação de aplicações baseadas em modelos já prontos. Esta opção torna-se interessante principalmente se o usuário encontra-se em nível junior ou é novo no universo de desenvolvimento para web e está utilizando a ferramenta para aprender como construir aplicações utilizando a sintaxe Razor utilizando banco de dados e helpers. Outro aspecto importante em relação aos templates é que, em algum momento, determinado template pode atender de fato as necessidades de determinado, exigindo do responsável pelo desenvolvimento apenas personalizações. Os templates disponíveis atualmente são:

• Empty Site: projeto vazio. Neste modelo, tudo deve ser criado pelo usuário. De forma geral, esta opção atende a desenvolvedores que pretendem criar soluções esepcíficas, não atendidas pelos modelos oferecidos pela ferramenta.
• Starter Site: projeto que traz um site básico. O template é todo construído com sintaxe Razor, HTML 5, CSS 3, Helpers (autenticação de usuários, etc.).
• Bakery: projeto que traz um modelo de site para padaria. De igual forma, o modelo é implementado em Razor e webstandards.
• Photo Gallery: projeto para galeria de fotos. Todas as características presentes nos modelos anteriores podem ser encontradas aqui.
• Calendar: projeto que implementa um controle de calendário.
• Personal Site: modelo que sugere a estrutura de um site pessoal, trazendo helpers para integração com twitter, facebook, etc.

A Figura 1 apresenta a janela exibida pelo WebMatrix após clicar na opção "Template" da página inicial.

Figura 1. A tela com as opções de templates do WebMatrix

Web App Gallery: como o próprio nome sugere, a Web App Gallery (WAG) é um repositório de aplicativos web terceiros com uma característica fundamental: todos são open-source, isto é, podem ser utilizados livremente sem custo adicional. As aplicações disponíveis na WAG atendem a diferentes demandas: blogs, lojas virtuais, wikis, fóruns, CMS, dentre outros. A grande vantagem desta característica com WebMatrix é o fato de que esta última oferece todos os recursos necessários para executar a personalização, publicação e demais operações com as web apps provenientes da WAG, isto é, tudo o que o usuário precisa em um único lugar.

A Figura 2 apresenta a tela específica de aplicações oferecidas através da Web App Gallery.

Figura 2. Web App Gallery

Dentre as aplicações presentes na WAG, destacam-se as já populares:

• Wordpress: indiscutivelmente a mais popular ferramenta para gerenciamento de conteúdos e mídias no formato de blog. Desenvolvida em linguagem PHP com banco de dados MySQL.
• Joomla!: CMS para gerenciamento de conteúdos web em formato de portal. Desenvolvida em linguagem PHP com banco de dados MySQL.
• nopCommerce: uma das lojas virtuais mais completas e utilizadas no mundo.
• Dentre outras.

Conclusões

Conhecer os tipos de projetos disponibilizados pelo WebMatrix é importante pois passa a ideia de como a ferramenta pretende atender as demandas de seus usuários.

O WebMatrix é uma ferramenta interessante para você se seu objetivo é iniciar de forma correta (entenda-se utilizando conceitos e tecnologias corretas para este cenário) no universo web ou se é desenvolvedor PHP em qualquer nível e procura uma opção interessante em termos de IDE para construir suas aplicações.

Ferramentas como Visual Studio, Visual Studio Express e outras, falam para públicos distintos, sem gerar atrito com WebMatrix, conforme mencionado no primeiro módulo deste treinamento.

Este artigo pretende responder a esta e outras questões comumente realizadas por desenvolvedores que entram em contato com WebMatrix pela primeira vez. Entender o foco da ferramenta é fundamental para o sucesso na utilização da mesma.

Onde utilizo o WebMatrix?

Muito embora o nome da ferramenta já sugira o cenário de atuação da mesma, é comum encontrar desenvolvedores que, por desconhecerem o foco da ferramenta, não sabem exatamente o contexto de utilização do WebMatrix.

WebMatrix é um ambiente integrado de desenvolvimento para construção exclusivamente de aplicações web utilizando webstandards. As palavras "exclusivamente" e "webstandard" são decisivas para indicar que:

• WebMatrix não é uma ferramenta para construção de aplicações Silverlight;
• WebMatrix não é uma ferramenta para construção de aplicações Windows Phone;
• WebMatrix não é uma aplicação para construção de aplicações Windows Forms ou WPF (Windows Presentation Foundation)
• Dentre outras.

Assim, se o projeto de software a ser implementado contempla o cenário de atuação na web, WebMatrix pode e deve ser considerado como ferramenta de desenvolvimento.

Um aspecto crítico a ser considerado quando opções de IDE's estão sendo analisadas trata-se justamente da "dimensão da aplicação". Este é um aspecto realmente crítico pois, impacta diretamente em aspectos vitais do projeto de software como: produtividade, testabilidade, integração, etc.

De forma geral, WebMatrix é uma aplicação interessante e recomendável para criação de aplicaçãoes pequenas e médias pois, certos recursos fundamentais em projetos de grande porte não são suportados por ela.

Quem pode utilizar?

WebMatrix possui uma característica interessante e que, acabam a diferenciando em relação a outras IDE's do mercado. A característica a qual nos referimos é: WebMatrix atende o público iniciante no universo de construção de aplicações web e além disso, fala também para o público com certa experiência.

Enquanto ferramentas como Visual Studio oferecem uma ampla gama de recursos avançados (e com isso, naturalmente atingindo um público mais avançado/experiente de desenvolvedores), WebMatrix com sua simplicidade e recursos otimizados e autoconfiguráveis, vai na contra mão, atingindo naturalmente este público leigo ou com pouca experiência no desenvolvimento para web.

Assim, é possível afirmar categoricamente que não há uma área de sobreposição de mercado entre Visual Studio, Visual Studio Developer Express, etc. com WebMatrix pois, os alvos são distintos.

São contemplados ainda pelo WebMatrix, desenvolvedores de outras plataformas que são carentes de boas IDE's para construção de seus projetos, especialmente da plataforma PHP. A partir da versão 2 beta (atual) da ferramenta, vários recursos dedicados a desenvolvedores PHP foram adicionados as features nativas do WebMatrix.

Além disso, como WebMatrix hoje instala e configura os requisitos necessários para que o PHP funcione da melhor forma possível no Internet Information Services (IIS), o ambiente entregue ao desenvolvedor é extremamente saudável.

Links complementares

Artigo: PHP e IIS – Uma parceria de sucesso
Artigo: Fast CGI: O motor do PHP no IIS

É justamente neste ponto da discussão que este texto pretende ser um objeto elucidativo, apresentando aspectos gerais do Web Platform Installer.

Web Platform Installer: visão geral

Web Platform Installer (ou simplesmente WebPI) é a solução proposta pela Microsoft para atender profissionais com a necessidade imposta pelo modelo apresentado acima.

O WebPI atua como um gerenciador de dependências. Para que essa ideia torne-se mais clara, consideremos o exemplo do WebMatrix (se você acompanha o site dedicado a desenvolvedores da Microsoft – MSDN, deve estar acostumado com esta ferramenta. Se você está sendo apresentado neste momento à ferramenta "WebMatrix", chamamos sua atenção para a próxima aula deste módulo pois, ela será objeto de estudo da mesma.

Quando um usuário deseja instalar o WebMatrix, este "baixa" um arquivo de aproximadamente 2 MB. Engana-se quem pensa que este pequeno executável é a IDE em sí. Na verdade, este arquivo recém baixado é o instalador do WebPI. Após sua instalação, esta ferramenta "varre" a máquina do usuário realizando um check list e, com base nos recursos necessários para que a aplicação funcione corretamente, ela relaciona todas as dependências para que esta funcione, efetua o download, as instala e configura. Tudo de forma automática, sem qualquer interferência do usuário final. É função do WebPI também, manter as ferramentas instaladas, devidamente atualizadas.

Algumas características do WebPI

A seguir apresentamos algumas características do WebPI que corroboram para seu sucesso e ampla adoção em diversos ambientes:

1. Gratuíto: esta poderosa ferramenta pode ser utilizada sem qualquer custo adicional. É só baixar e instalar!
2. Pequeno: o WebPI possui apenas 2 MB, ou seja, é leve o suficiente para ser executado mesmo em máquinas cujos recursos computacionais são escassos.
3. Inteligente: o WebPI mantém todas as aplicações que estão sob sua gerência atualizadas de forma automática.

Além disso, o WebPI é composto por alguns pilares. São eles:

• Internet Information Services: você pode instalar a versão mais atual do IIS sem se preocupar com informações de configuração de ambiente, etc.
• Bancos de dados: instale a versão mais atual do sistema gerenciador de bancos de dados da Microsoft – O SQL Server.
• Framework: instale a versão mais atual da .NET framework. Sem complicação!
• Ferramentas: instale as principais ferramentas de desenvolvimento da Microsoft para desenvolvimento de aplicações.
• Extras: instale a versão atual do PHP para IIS e seus módulos exigidos exigidos (FastCGI, WinCache, etc.).

Qual a relação do WebPI com Virtual Private Server?

Imagine o seguinte cenário: você comprou um servidor virtual privado com Windows Server 2008 R2. Se você leu o post onde apresento o conceito de VPS (este texto pode ser encontrado seguindo este link), deve estar lembrado de que, a empresa que vende o respectivo serviço, entrega o ambiente pronto, entretanto, as ferramentas e serviços adicionais necessários para que sua aplicação tenha o comportamento esperado, devem ser realizados pelo contratante, logo, você precisará preparar este ambiente para que as aplicações que você venha a criar tenham funcionamento ótimo.

Assim, a menos que você deseje (e tenha skill técnico para tal) preparar este ambiente de forma manual, você pode considerar a utilização do WebPI para endereçar a preparação deste ambiente. Com ele, você poderá instalar e configurar o Internet Information Services (inclusive para suportar nativamente PHP e MySQL), SQL Server, .NET framework, e muito mais.

Links recomendados

• Web Platform Installer: download
• Artigo: Virtual Private Server – Pode ser para você