Artigo WebMobile 9 - Desenvolvendo um FotoBlog móvel com .NET

Esse artigo faz parte da revista WebMobile edição 09. Clique aqui para ler todos os artigos desta edição

Clique aqui para ler este artigo em PDFe de nossa vida. Todo mundo tem ou acompanha a rotina da vida de muitas pessoas através da internet. O FotoBlog em especial é o mais novo item nesses ‘diários’ digitais, onde as pessoas contam um pouco de sua história através de fotos tiradas de suas câmeras digitais.

Neste artigo, mostraremos como podemos simplificar um pouco a vida dessas pessoas. Criaremos uma aplicação para o Windows Mobile 5.0 que permitirá que pessoas tirem fotos com seus celulares e as enviem diretamente para um FotoBlog via um web service. Para isso, utilizaremos os novos recursos do Compact Framework 2.0 e do Visual Studio 2005.

Preparando o ambiente

Vamos iniciar o desenvolvimento de nosso sistema criando uma solution (conjunto de projetos no Visual Studio) que irá conter nossos projetos. Neste artigo, iremos criar três projetos diferentes: (1) uma aplicação para Smartphone que irá permitir que o usuário envie fotos diretamente de seu aparelho celular, (2) um Web Service para exibir os serviços de upload de fotos, e (3) um site para exibir o FotoBlog, conforme a Figura 1.

Figura 1. Aplicações que compõem o projeto do Fotoblog.

Para acompanhar o nosso desenvolvimento, você vai precisar instalar o Microsoft Visual Studio 2005 (http://www.microsoft.com/visualstudio) e o SQL Server Express Edition (http://msdn.microsoft.com/sql/express/) ou mesmo o SQL Server Standard.

Após termos estas tecnologias preparadas, o primeiro passo é a criação do web site que exibirá as fotos. Chamamos o projeto de ‘FotoBlogger’. Depois iremos criar mais dois projetos, um para o web service e outro para o Smartphone.

Para criação do web site, devemos abrir o Visual Studio e selecionar a opção File à New à Web Site para criar um projeto ASP.NET, conforme Figura 2.

Figura 2. Criando o projeto ASP.NET.

Em seguida vamos criar o banco de dados que usaremos na aplicação.

Criando o banco de dados

Antes de criar o site, o mais indicado é que definamos de antemão o esquema do banco de dados. Podemos fazer isso diretamente no Visual Studio. Para isso, devemos seguir esses passos:

(1)       Primeiro crie um novo banco de dados através do Server Explorer, como na Figura 3. Caso o Server Explorer não esteja visível, clique na opção View à Server Explorer na barra de menus do Visual Studio 2005.

Figura 3. Conectando-se ao SQL Server.

(2)       Selecionando ‘Create New SQL Server Database...’ a janela da Figura 4 será apresentada. Os campos da janela são bastante simples, e devemos preenchê-los como na figura. Note que o nome do servidor será o nome de sua máquina (nesse exemplo, VAIONOTE).

Figura 4. Criando o banco de dados.

(3)       Vamos também criar as tabelas de forma visual. Para isso, ainda no Server Explorer crie um novo diagrama, conforme apresentado na Figura 5. Através deste diagrama poderemos criar as tabelas e os relacionamentos do nosso banco de dados de forma visual, sem usar comandos SQL.

Figura 5. Criando o diagrama das tabelas.

(4)       Feito isso, iremos dividir o banco de dados em três tabelas: uma tabela (Blogs) para armazenar as informações sobre o FotoBlog, uma tabela (BlogEntry) que irá armazenar informações sobre as fotos enviadas ao FotoBlog e uma tabela (EntryComment) que irá conter os comentários feitos pelos usuários sobre uma foto.

Vamos começar pela tabela Blogs. Adicione uma tabela seguindo o esquema da Figura 6.

Figura 6. Estrutura da tabela ‘Blogs’.

Nesta tabela iremos armazenar o nome e a descrição de um FotoBlog e as informações do usuário que é o criador deste FotoBlog. Note que o campo chave ID deve ser especificado como Identity nas propriedades da tabela para que seu valor seja atribuído automaticamente pelo SQL Server.

Depois, crie a tabela que irá armazenar as fotos (BlogEntry) como na estrutura vista na Figura 7:

Figura 7. Estrutura da tabela BlogEntry.

Nesta tabela iremos armazenar a data e um comentário de uma imagem que foi enviada para o servidor pelo autor de um FotoBlog específico. Note que a coluna ‘Picture’ é do tipo Image, pois no SQL Server já existe um tipo de dado especial para guardar imagens que facilitará bastante nosso trabalho e, claro, vamos usá-lo.

Note que o campo chave ID é o Identity da tabela. Proceda da mesma maneira como na tabela Blogs que criamos anteriormente.

Agora só falta a tabela que irá armazenar os comentários feitos por outros usuários do site a nossas fotos. Crie a tabela EntryComment como na Figura 8.

Figura 8. Estrutura da tabela EntryComment.

O campo chave ID também é o Identity da tabela.

Pronto. O esquema do nosso banco de dados está pronto. Salve o projeto e o Visual Studio irá criar as tabelas no SQL Server automaticamente.

Vamos agora criar o web service que irá manipular esse banco de dados.

Projeto 1: criando o web service

O web service será responsável pelo “negócio” do FotoBlogger. O “negócio” do nosso site é muito simples: um usuário pode se cadastrar no site, cadastrar um FotoBlog, e uma vez autenticado, fazer upload de fotos. Como foge ao escopo deste artigo, não iremos implementar funções mais sofisticadas de um FotoBlog real, tais como a customização do FotoBlog, atualização de informações cadastrais, dentre outras. Deixo para o leitor como um exercício de aprendizado.

Então vamos iniciar o desenvolvimento do web service. Inicialmente, devemos clicar com o botão direito no arquivo da solution na janela do Solution Explorer e adicionar um novo web site, como na Figura 9.

Figura 9. Adicionando um novo web site.

Selecione o tipo de projeto ‘ASP.NET Web Service’ e chame-o de ‘FotoBloggerWS’, como na Figura 10.

Figura 10. Criando o projeto do Web Service.

Em seguida iremos criar as classes do nosso negócio. Teremos três classes, a “Blog” que representa um usuário e seu FotoBlog, a “BlogEntry” que representa uma entrada (foto) no FotoBlog e a “EntryComment” que representa um comentário feito por um usuário a uma foto. A Figura 11 ilustra essas classes. Observe que essas classes correspondem às tabelas criadas no nosso banco de dados.

Figura 11. Classes do Web Service.

Então adicione uma nova classe ao projeto e adicione nela o código da Listagem 1.

Listagem 1. Código das classes de negócio.

using System;

using System.Web;

using System.Collections.Generic;

using System.Web.Services;

using System.Web.Services.Protocols; ...