Site do MySQL atacado via SQL Injection

Site do MySQL atacado via SQL Injection

Criado por Pedro Pinto em 29 de Março de 2011 | 42 comentários

Parece que o feitiço se virou contra o feiticeiro, mas segundo informação disponibilizadas no site Techie Buzz, a página oficial do projecto MySQL (motor de base de dados bastante popular) foi atacado através de um mecanismo denominado de SQLInjection (alguns sites referem que foram utilizados mecanismos mais elaborados como XSS e blind SQLi).

Ao que tudo indica, além do ataque ter sido efectuado com sucesso foram ainda “roubados” dados importantes da empresa. O ataque ao que consta foi realizado através de uma página de consulta de cliente, tendo já sido divulgadas algumas passwords, inclusive a de um Director de produtos do MySQL com apenas 4 dígitos. Algumas passwords de administradores do serviço blogs.mysql.com foram também já tornadas públicas.

sql_injection

Mas como funciona um ataque de SQL Injection?

O SQL injection tal como o nome indica é um mecanismo que permite  “injectar” instruções SQL dentro de uma consulta (query) realizada à base de dados. Desta forma, o hacker pode “construir” a query SQL e obter informações privilegiadas que se encontram guardadas na base de dados (ex. passwords de utilizadores).

Imaginem por exemplo um formulário HTML para autenticação de um utilizador num determinado site. Depois do utilizador carregar no botão enviar, é executado no MySQL a seguinte query SQL:

SELECT user,passwd FROM users WHERE user = 'pplware' AND passwd='123456'

Os dados user e passwd são passados via POST numa query do tipo:

SELECT user,passwd FROM users WHERE user = '$user' AND passwd='$passwd';

Agora imaginem que é um hacker e que no campo password colocou:

'123456';DROP TABLE users;

Neste caso a query ficava algo do tipo:

SELECT user,passwd FROM users WHERE user =  'pplware' AND passwd='123456';DROP table users;

Veja uma demonstração de como funciona o mecanismo SQL Injection:

Caso seja um utilizador com conta no site mysql.com é aconselhável que proceda rapidamente à alteração da sua password.

Desenvolvimento para Windows Phone 7 – Parte IV

Desenvolvimento para Windows Phone 7 – Parte IV

Criado por Pedro Simões em 1 de Abril de 2011 | 2 comentários

Por Helder Ferreira para o PPLWARE.COM

Utilização dos recursos do dispositivo

Após no último artigo termos analisado os principais controlos disponibilizados para esta plataforma de desenvolvimento, vamos neste artigo utilizar recursos do dispositivo.

Nos dispositivos Windows Phone 7, temos acesso a vários sensores que são incluídos de base nos mesmos, aqui a vantagem dada pela Microsoft é que do lado de quem desenvolve aplicações não é necessário preocupar com questões mais técnicas relativamente aos sensores visto existirem regras do lado dos fabricantes para que todos os dispositivos funcionem da mesma forma.

Deste modo a equipa de desenvolvimento pode focar os esforços nas regras de negócio das suas aplicações e não na criação de vários métodos para funcionarem em dispositivos distintos.

Introdução aos Launchers e Choosers

Nas aplicações Silverlight para Windows Phone são utilizadas estas duas opções para aceder a funcionalidades build-in dos dispositivos, quando executamos um destes métodos a aplicação é desactivada e a aplicação seleccionada é executada. Quando a aplicação termina a nossa aplicação é reactivada. Este processo é chamado de tombstoning em artigos futuros iremos falar mais sobre este processo e do impacto que pode ter nas nossas aplicações visto estarmos a falar de um sistema sem multitasking.

Os Launchers e Choosers estão no namespace Microsoft.Phone.Tasks, por isso temos que incluir uma directiva Using no nosso código para utilizar estes recursos.

Launchers

A forma de utilizar estas classes é comum, ou seja:

  1. Criar uma nova instância da classe;
  2. Atribuir as propriedades à mesma;
  3. Executar o método Show.

Vamos então ver alguns exemplos:

PhoneCallTask – Usado para efectuar chamadas indicando o número a ser marcado, ou podemos também exibir a lista de contactos a partir da qual o utilizador pode seleccionar o contacto para o qual deseja fazer a chamada.

Vamos adicionar no XAML um simples botão para efectuar a chamada,

<Button Name="ButtonDialer" Content="Efectuar chamada"   VerticalAlignment="Bottom" Click="ButtonDialer_Click"   Height="79" Margin="0,0,0,10" />

E no código vamos então adicionar o comportamento,

private void ButtonDialer_Click(object sender, RoutedEventArgs e)
{
// launcher.
PhoneCallTask phoneCallTask = new PhoneCallTask();
// Informação de contacto para o qual desejamos efectuar a chamada
phoneCallTask.PhoneNumber = "(352)-555-5555";
phoneCallTask.DisplayName = "pplware";
// Lançamento do objecto.
phoneCallTask.Show();
}

Corremos o projecto e quando o utilizador clicar no botão a chamada é efectuada.

SmsComposeTask – Assim como para efectuar uma chamada, temos também o launcher para enviar mensagens de texto.

XAML

<Button Name="ButtonSmsr" Content="Enviar sms"
VerticalAlignment="Bottom" Click="ButtonSms_Click"
Height="79" Margin="0,0,0,10" />

CODE

private void ButtonSms_Click(object sender, RoutedEventArgs e)
{
// launcher.
SmsComposeTask smsComposeTask = new SmsComposeTask();
// Informação de contacto para o qual desejamos enviar o sms
smsComposeTask.Body = "Mensagem";
smsComposeTask.To = "(352)-555-5555";
// Lançamento do objecto.
smsComposeTask.Show();
}

EmailComposeTask – Vamos terminar esta secção apresentando o Launcher de envio de email.

XAML

<Button Name="ButtonEmail" Content="Enviar email"
VerticalAlignment="Bottom" Click="ButtonEmail_Click"
Height="79" Margin="0,0,0,10" />

CODE

private void ButtonEmail_Click(object sender, RoutedEventArgs e)
{
// launcher.
EmailComposeTask emailComposeTask = new EmailComposeTask();
// Informação de contacto para o qual desejamos efectuar a chamada
emailComposeTask.To = "xpto@hotmail.com";
emailComposeTask.Subject = "Exemplo de email";
emailComposeTask.Body = "Corpo da mensagem";
// Lançamento do objecto.
emailComposeTask.Show();
}

De notar que se executarmos este launcher no emulador, o sistema vai apresentar uma mensagem indicando que a conta de correio electrónico não se encontra configurada. Mas no caso de estarmos a executar a aplicação directamente num dispositivo é apresentado um ecrã em que podemos seleccionar a conta de correio electrónico a utilizar e após isso a mensagem pronta a ser enviada.

Choosers

A principal diferença dos launchers em relação aos choosers prendesse no facto de neste último caso o sistema lança um evento quando o utilizador efectua uma intervenção.

Vamos ver o caso em que a aplicação não sabe o número para o qual deve efectuar uma chamada e pede a intervenção do utilizador para seleccionar um número da sua lista de contactos.

PhoneNumberChooserTask – Se pretendermos que o utilizador seleccione um contacto existente na sua lista, apenas temos que instanciar o chooser PhoneNumberChooserTask.

Neste caso já é lançado um evento quando o utilizador selecciona o contacto para o qual deseja efectuar a chamada. Nesse evento obtemos o número para o qual o utilizador deseja efectuar a chamada e lançamos o launcher PhoneCallTask da mesma forma que já fizemos anteriormente.

XAML

<Button Name="ButtonDialerChooser" Content="Lançar contactos"
VerticalAlignment="Bottom" Click="ButtonDialerChooser_Click"
Height="79" Margin="0,0,0,10" />

CODE

private void ButtonDialerChooser_Click(object sender, RoutedEventArgs e)
{
PhoneNumberChooserTask phoneNumberChooser = new PhoneNumberChooserTask();
phoneNumberChooser.Completed += new EventHandler<PhoneNumberResult>(phoneNumberChooser_Completed);
phoneNumberChooser.Show();
}   void phoneNumberChooser_Completed(object sender, PhoneNumberResult e)
{
if (e.TaskResult == TaskResult.OK)
{
// Chooser.
PhoneCallTask phoneCallTask = new PhoneCallTask();
// Informação de contacto para o qual desejamos efectuar a chamada
phoneCallTask.PhoneNumber = e.PhoneNumber;
// Lançamento do objecto.
phoneCallTask.Show();
}
}

CameraCaptureTask – Com este método podemos tirar proveito das capacidades da câmara fotográfica presente nos dispositivos. Por exemplo, com um simples botão na nossa aplicação invocamos a aplicação built in do sistema para tirar uma foto ou um vídeo e podemos logo de seguida efectuar o tratamento ou apresentação da mesma.

XAML

<Button Name="ButtonCamera" Content="Tirar foto"
VerticalAlignment="Bottom" Click="ButtonCamera_Click"
Height="79" Margin="0,0,0,10" />
<Image Height="400" x:Name="ContainerImagem" />

CODE

private void ButtonCamera_Click(object sender, RoutedEventArgs e)
{
// Chooser.
CameraCaptureTask cameraCaptureTask = new CameraCaptureTask();
cameraCaptureTask.Completed += new EventHandler<PhotoResult>(cameraCaptureTask_Completed);
// Lançamento do objecto.
cameraCaptureTask.Show();
}
void cameraCaptureTask_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
//simply use the picture.
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(e.ChosenPhoto);
ContainerImagem.Source = bitmapImage;
}
}

De notar neste exemplo, que declaramos o evento cameraCaptureTask.Completed, o que faz com que após o utilizador tirar a foto um evento é lançado na nossa aplicação com o resultado que neste caso corresponde a uma foto.

Nesse evento apenas aplicamos a foto a um BitmapImage (using System.Windows.Media.Imaging;) e após este passo atribuímos a imagem ao controlo de imagem ContainerImagem para conseguirmos visualizar o resultado.

Nota: Caso estejam a utilizar o emulador, a câmara é substituída por uma Webcam instalada no vosso sistema para que seja mais fácil testar a nossa aplicação.

Estes são apenas alguns exemplos de como utilizar Launcher e Choosers, para uma referência completa de todos os métodos existentes podem aceder à ajuda do namespace tasks em namespace Microsoft.Phone.Tasks

Para terminar vamos verificar como utilizar um componente muito em voga nos dispositivos mais actuais e que pode marcar a diferença nas vossas aplicações.

Acelerómetro

Resumindo, não passa de um sensor que consegue detectar alterações à posição actual do dispositivo normalmente em 3 eixos, x,y e z.

A utilização deste tipo de sensores pode ser bastante interessante no âmbito de utilização da nossa aplicação, um dos exemplos mais típicos é por exemplo mudar a música em execução com um shake ao dispositivo.

Vamos ver um exemplo.

XAML

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="618*" />
</Grid.RowDefinitions>   <TextBlock Grid.Column="1" Grid.Row="0" Text="X" />
<TextBlock x:Name="txt_x"  Grid.Column="2" Grid.Row="0"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Y" />
<TextBlock x:Name="txt_y"   Grid.Column="2" Grid.Row="1"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="Z" />
<TextBlock  x:Name="txt_z"  Grid.Column="2" Grid.Row="2"/>
<Button Content="Iniciar" x:Name="btnIniciar" Grid.Column="2" Margin="50,35,129,494" Grid.Row="3" Click="btnIniciar_Click" />
</Grid>

CODE

// Construtor
Accelerometer accelerometer = new Accelerometer();
public MainPage()
{
InitializeComponent();
}   private void btnIniciar_Click(object sender, RoutedEventArgs e)
{
accelerometer.Start();
accelerometer.ReadingChanged += new EventHandler<AccelerometerReadingEventArgs>(accelerometer_ReadingChanged);
}   void accelerometer_ReadingChanged(object sender, AccelerometerReadingEventArgs e)
{
Deployment.Current.Dispatcher.BeginInvoke(() => ProcessAccelerometerReading(e));
}   private void ProcessAccelerometerReading(AccelerometerReadingEventArgs e)
{
// Actualiza os controlos
txt_x.Text = e.X.ToString("0.00");
txt_y.Text = e.Y.ToString("0.00");
txt_z.Text = e.Z.ToString("0.00");
}

Neste exemplo, colocamos algumas caixas de texto numa página e um botão para que o sistema inicie a captura dos dados do acelerómetro.

Quando clicamos no botão o sistema inicia a captura dos dados relativos à sua posição, x,y e z e no evento accelerometer_ReadingChanged delegamos o objecto AccelerometerReadingEventArgs e para a função ProcessAccelerometerReading que por sua vez trata de preencher as caixas de texto com os dados da posição do dispositivo.

Fazemos esta delegação, visto o processo de captura de dados estar a executar numa thread extra, e nestes casos não conseguimos efectuar o binding directo dessa thread à nossa camada de UI (caixas de texto).

Executando o projecto no dispositivo podemos observar a posição actual do mesmo sendo reflectiva nas caixas de texto no ecrã.

Espero que esta breve introdução à utilização dos recursos que são disponibilizados pelos dispositivos vos tenha dado algumas ideias para as vossas aplicações.

Uma vez mais, caso tenham alguma questão não hesitem em enviar mensagem.

Até à próxima e boa programação em Windows Phone 7.

Artigos relacionados:

Desenvolvimento para Windows Phone 7 – Parte III

Desenvolvimento para Windows Phone 7 – Parte III

Criado por Vítor M. em 21 de Março de 2011 | 4 comentários

Por Helder Ferreira para o PPLWARE.COM
Depois de nos últimos artigos termos efectuado a instalação de todas as aplicações necessárias nas nossas máquinas, e agora que já temos todo o ambiente de desenvolvimento funcional, vamos começar a analisar alguns dos controlos que podemos utilizar nas nossas aplicações para Windows Phone 7.

Vou começar por apresentar os controlos específicos para o desenvolvimento em Windows Phone 7:

  • Controlos base;

Neste ponto estão presentes os controlos mais conhecidos do silverlight, para WP7 foi criado um subconjunto mas o comportamento e utilização são em tudo semelhantes.

Não me vou demorar muito neste ponto, se bem que são os controlos que provavelmente mais iremos utilizar no dia-a-dia, não trazem nada de novo em relação ao que já existe no silverlight.

  • Bing Maps;

Se bem que já não é uma novidade, é um controlo que com a utilização da geolocalização do WP7 se torna num controlo muito interessante, vamos ver um exemplo.

Vamos começar por adicionar o controlo a uma página do WP7, para isso basta aceder à toolbox do lado esquerdo e “arrastar” para a nossa página o controlo “Map”.

Caso não esteja disponível, temos que adicionar o controlo ao nosso projecto, para isso basta clicar com o botão direito do rato sobre a toolbox e seleccionar “Choose items”.

No ecrã seguinte basta seleccionar o item “Map”, ao seleccionar ok é adicionado um novo ícone à nossa toolbox com o controlo de mapas.

Neste momento basta correr o projecto e já temos o mapa na nossa aplicação, mas neste momento de pouco nos serve o mapa apresentado desta forma. Vamos lá adicionar mais algumas funcionalidades.

Começamos por adicionar mais alguns botões para responderem ao nosso imput:

Adicionando estes botões vamos criar o código que o sistema vai executar, para que o Visual Studio crie o método basta clicar duas vezes sobre cada um dos botões, de imediato o sistema cria o evento “_Click” e após isso basta adicionar o código de seguida.

Temos que ter em atenção que para que o sistema reconheça o nosso código temos que adicionar o using do namespace do controlo:

Feito, neste momento já conseguimos controlar pelos botões o nível de zoom assim como a vista aérea ou a vista de ruas. Como podem ver, é muito simples utilizar este controlo. Só uma atenção, é apresentada uma mensagem no emulador indicando que não temos as credenciais válidas ao utilizar este controlo. Esta situação é normal, para resolver esta situação é necessário efectuar um registo de desenvolvimento.

Em artigos futuros explicarei como efectuar esse registo e como utilizar as capacidades de geolocalização do dispositivo para sabermos a nossa localização actual e apresentar no mapa.

  • Controlo WebBrowser;

Não muito a dizer sobre este controlo, basta arrastar o controlo para uma página e atribuir o endereço da página a ser visualizada no tag source do mesmo.

E o resultado:

  • Controlo Pivot;

Este controlo pode ser utilizado para transição de páginas, apresentação de dados e tem como principal vantagem a utilização da navegação por defeito do sistema. Ou seja, ao aplicar este controlo nas nossas aplicações vamos herdar a navegação e optimização para utilização por toque do sistema, sem a necessidade de criar código para isso.
O utilizador apenas tem que usar os gestos reconhecidos pelo sistema (Pan, Flick ou swipe) para alternar pelos conteúdos de cada PivotItem.
Vamos ao exemplo.

Uma vez mais basta arrastar o controlo que está na toolbox com o nome de pivot, desta não estavam à espera :D , para a vossa página. Caso o ícone não esteja disponível basta efectuar o mesmo procedimento já explicado em cima e adicionar o controlo à vossa toolbox.
Podemos então criar os que necessitamos e adicionar o conteúdo a cada um dos mesmos.

Exemplo:

E para cada um dos itens vamos adicionar o conteúdo:

Usando este controlo como base de navegação da nossa aplicação é muito simples e conseguimos que o utilizador consiga navegar de uma forma muito simples por várias páginas na nossa aplicação.

  • Controlo Panorama;

Este controlo, utilizado em praticamente todo o sistema operativo, é uma forma de expandir o look and feel do mesmo à nossa aplicação. A grande diferença deste controlo para o Pivot é que, no caso do Pivot cada um dos itens é idealizado para ser visualizado nos limites do dispositivo enquanto no caso do Panorama a página não está limitada aos limites do smartphone e vai sendo apresentada por secções em que o utilizador pode navegar.

Para além disso as animações das várias camadas deste controlo (títulos/conteudo), são apresentadas a velocidades diferentes o que cria um impacto visual muito interessante e que vai informando o utilizador em que “secção” se encontra da página.

Não vou aprofundar mais sobre este componente neste artigo pois futuramente vamos usar este controlo na nossa aplicação.

Aqui fica esta breve apresentação dos controlos mais utilizados nas aplicações para Windows Phone 7, num próximo artigo vamos explorar algumas das capacidades dos dispositivos e do sistema operativo e como aceder às mesmas.

Como sempre o vosso feedback é muito importante. E caso tenham alguma questão não hesitem em enviar.

Artigos relacionados:

PHP é à quinta-feira – Endereço IPv4 ou IPv6?

PHP é à quinta-feira – Endereço IPv4 ou IPv6?

Criado por Pedro Pinto em 17 de Março de 2011 | 11 comentários

De volta à rubrica “PHP é à quinta-feira“, esperamos que os utilizadores contribuam com sugestões e estamos abertos para receber os vossos artigos , para posteriormente publicação, sobre esta super linguagem de scripting “server-side”.

Pois bem, ontem em conversa com um amigo ele questionava-me como colocar no seu site, a indicação se o cliente estava aceder via IPv4 ou IPv6. Vamos ver como fazer um pequeno script php para esta questão.

php_00

Como já referimos em vários artigos, o IPv6 é a nova versão do protocolo IP, e foi desenvolvido para suceder à actual versão (o IPv4). O que motivou o desenvolvimento desta nova versão foi a aproximação da exaustão do espaço de endereçamento e a necessidade de resolver algumas das limitações do IPv4, nomeadamente no que toca a segurança e mobilidade, e simplificar algumas das funcionalidades do protocolo IPv4.

Exemplo de um endereço IPv4 e IPv6

Endereço IPv4: 192.168.10.1

Endereço IPv6: 2000:490:23d0:6700:f82d:b871:ecb8:fbce

Como podemos ver, um endereço IPv6 tem uma representação hexadecimal de blocos de 16 bits, separados por dois pontos ‘:’, por exemplo:

x:x:x:x:x:x:x:x onde os “x” são números hexadecimais

Script em PHP para indicar se o cliente está aceder ao site com um endereço IPv4 ou IPv6.

Considerando que pretendemos apenas saber se o cliente está a aceder via IPv4 ou IPv6, basta apenas verificar o endereço IP do cliente é separado por ponto ‘.’ (IPv4) ou por ‘:’ (IPv6). Coisa simples não é?

ipv4_ipv6

Para a produção do script precisamos de 2 funções essenciais:

  • $_SERVER[‘REMOTE_ADDR’]; – que me permite obter o endereço do cliente
  • strstr – Encontra a primeira ocorrência de uma string (neste caso os dois pontos ‘:’

Script completo

<?php
 $ip=$_SERVER['REMOTE_ADDR'];
 if (strstr($ip, ":")) {
 echo "O seu endereço IPv6 é o: $ip";
 } else {
 echo "O seu endereço IPv4 é o: $ip";
 }   ?>

O script é relativamente simples e pode servir de base para serviços/páginas engraçadas. Lembram-se daqueles sites em que existia uma tartaruga que dançava quando o utilizador tinha um IPv6 (ver aqui)? Ou o bebé que chorava quando o IP do cliente ainda era IPv4? Através do script disponibilizado é simples fazer páginas desse tipo. Basta apenas incluir por exemplo um gif (ex. tartaruga parada) se o  cliente tiver um endereço IPv4 ou um gif animado se o cliente tiver um endereço IPv6.

Ficamos à espera que nos mostrem as vossas ideia :) . Boas programações! Alguém quer ajudar nesta rubrica?

Artigos relacionados

Download: script_ipv4_v6

Actionscript ir para uma frame específica de um SWF externo

Boa tarde a todos,
Este problema surgiu-me à já algum tempo, numa altura em que estava a desenvolver uma página web.
Tendo em consideração o peso do site, criei um projecto .fla inicial e à medida que o utilizador fosse navegando pelas diferentes páginas o projecto faria um loadMovie() das páginas pedidas, de modo a garantir a leveza e rapidez do site.
O problema aconteceu durante a construção da home page, pois o .swf referido tinha uma apresentação inicial que ocupava 250 frames até chegar à parte principal, ou seja, sempre que o utilizador pressiona-se no botão “home” o projecto ia ler as 250 frames desde o inicio até ao fim, o que acabava por ser pouco funcional.
Assim após ler e experimentar várias das soluções sugeridas na web consegui resolver o problema.
Alguns Links investigados:
http://www.sitepoint.com/forums/flas…er-539854.html
http://www.tek-tips.com/viewthread.c…68182&page=223
http://forums.devshed.com/flash-help…er-519005.html
http://www.actionscript.org/forums/s….php3?t=163814
Entre as soluções vinham alguns códigos mais ou menos eficientes como o abaixo apresentado:

Código:

on(press){
loadMovie("swf_externo.swf", _root.movieclip_mc);
}
on(release){
with(_root.movieclip_mc){
gotoAndStop(251);
}
}

Contudo nenhuma das soluções era suficientemente lógica e funcional para o que eu pretendia assim acabei por começar do ZERO e desenvolvi a minha solução para o problema.
Desta feita sem ser necessário o recurso a loadNum(); .onLoadComplete; getNextHighestDepth; ou tantos outros códigos que apenas criam mais confusão ao projecto, concebi um código simples de uma só variável que permite controlar o SWF externo sem problemas.
Neste projecto de exemplo/simples usei duas folhas uma externa e uma principal com dois botões.
Carregando no primeiro botão o utilizador vai ser redireccionado directamente até à frame definida no swf externo;
Carregando no segundo botão o utilizador é redireccionado para o inicio da apresentação do swf externo;
Neste link podem encontrar o meu projecto:
http://www.4shared.com/get/b-9QL-tH/…7A9BE87E.dc322
Espero ter conseguido elucidar sobre este problema que tem sido recorrente nos utilizadores de Flash e programação em Actionscript 2!
Cumps

Desenvolvimento para Windows Phone 7 – Parte II

Desenvolvimento para Windows Phone 7 – Parte II

Criado por Vítor M. em 4 de Março de 2011 | 8 comentários

Por Hélder Ferreira para o PPLWARE.COM
Após o artigo introdutório, em que apresentei uma visão geral sobre o desenvolvimento para o Windows Phone 7, vamos neste artigo “meter as mãos na obra” e criar uma simples aplicação “Olá Mundo” para este sistema.

Ferramentas de desenvolvimento

Vamos considerar que as ferramentas de desenvolvimento já foram instaladas, caso ainda não o tenham feito, neste link tem todos os downloads necessários para a instalação.

Vamos de uma forma sumária percorrer este processo de instalação:

1 – Após o download, basta executar a aplicação para iniciar o processo de instalação;

2 – Aceitamos os termos de utilização e vamos optar pela instalação típica, o setup efectua o download de tudo o que necessita e efectua a instalação de seguida, este processo pode demorar algum tempo;

3 – Após a instalação basta seleccionar para correr de imediato o Visual Studio 2010 Express for Windows Phone.

4 – Após a instalação do Visual Studio 2010, devemos executar o update às ferramentas de desenvolvimento, segundo ponto apresentado no link indicado em cima. Este update disponibiliza várias correcções ao ambiente de desenvolvimento e adiciona algumas funcionalidades, sendo importante destacar o tão falado copy/paste.
Após a instalação do Windows Phone Developer Tools e seu update o nosso sistema já está preparado para iniciar o desenvolvimento de aplicações.

Vamos então iniciar o Visual Studio 2010.

A versão apresentada na imagem corresponde ao Visual Studio 2010 Professional, que uso diariamente, mas as diferenças quepossam encontrar serão poucas.

Criação de um novo projecto para Windows Phone 7

1 – No menu File, seleccionar New Project, é apresentado o seguinte ecrã;

2 – No lado esquerdo, são apresentados todos os templates de projectos que podemos criar, para este exemplo vamos seleccionar Visual C# e Silverlight for Windows Phone.

Do lado direito são logo apresentados os tipos de projectos para Windows Phone 7.

3 – Existem vários projectos disponíveis, alguns já com os controlos mais conhecidos já integrados na aplicação e outros com exemplos de ligação a dados. Nesta fase vamos seleccionar “Windows Phone Application”, podemos a este projecto adicionar qualquer tipo de controlo mais tarde.

Para terminar este passo, vamos seleccionar o nome da nossa aplicação e indicar a directoria onde queremos guardar o nosso projecto e seleccionamos ok.

4 – Neste momento é apresentado o ecrã de arranque da nossa aplicação, todo o projecto já está criado e pronto a ser compilado, mas antes vamos a algumas explicações.

Por defeito o Visual Studio apresenta 3 painéis (dependendo da versão e das configurações), à esquerda a vista de desenho, ao meio a vista de XAML e à direita a vista da solução. Neste caso, está visível a toolbox para que sejam visíveis os controlos que neste momento se podem incluir da página.

  • Vista de desenho, área onde visualmente podemos arrastar controlos a incluir na nossa página, ao seleccionar os controlos é apresentado no lado direito as propriedades do mesmo;
  • Vista de XAML, é uma linguagem baseada em XML usada para posicionar o layout onde os controlos são apresentados na página;
  • Vista da solução, área onde é apresentado todos os ficheiros que compõe o nosso projecto

5 – Vamos agora adicionar um botão para apresentar uma simples mensagem “Olá Mundo”. Para isso na toolbox no lado direito seleccionamos o controlo Button e depois basta desenhar na vista de desenho a área onde queremos que o botão seja apresentado. Podemos verificar que de imediato, na vista de XAML, é adicionado uma nova entrada com a informação desse mesmo botão. Alteramos a tag Name para “btnMensagem”, e colocamos a tag content para “Olá Mundo!” na entrada do botão que foi adicionada no XAML.

6 – Resta criar o método que este botão vai despoletar e adicionar o código para lançar a mensagem. Na vista da solução existe um item “MainPage.xaml” que corresponde à página onde estamos actualmente a trabalhar, nesse item podemos ver que existe um pequeno bullet. Se clicarmos nesse bullet é apesentado um novo ficheiro “MainPage.xaml.cs”.

Este ficheiro é chamado code-behind, é uma classe parcial da nossa página e é nele que está todo o código. Para criar o evento do clique basta clicar duas vezes sobre o botão, o evento é automaticamente gerado no code-behind, neste evento vamos simplesmente adicionar o código para que a mensagem seja apresentada ao utilizador.

private void btnMensagem_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Olá Mundo!!");
}

7 – Vamos então testar a nossa aplicação, para isso basta clicar em F5 ou escolher no menu Debug ->Start Debugging.

O emulador do Windows Phone 7 é automaticamente apresentado e arranca com a nossa aplicação, caso existam erros de compilação o Visual Studio notifica quais e onde se encontram.

Basta clicar no botão que adicionamos e a mensagem é apresentada ao utilizador. Para terminar a aplicação basta fechar o emulador (são apresentadas as opções no quanto superior direito do mesmo).

Como podem ver, é extremamente simples programar para este novo sistema, esta introdução foi apenas para iniciar o nosso projecto e começar a executar a aplicação.

Nos próximos artigos vamos adicionar funcionalidades a esta aplicação, por exemplo, acesso a serviços, acesso a dados, e muitas outras funcionalidades.

Caso tenham ideias sobre funcionalidades que gostariam que fossem apresentadas, não hesitem em enviar as vossas ideias.

Artigos relacionados:

Json–Javascript

Json (JavaScript Object Notation) – O sucessor do XML

Criado por Pedro Pinto em 22 de Fevereiro de 2011 | 34 comentários

JSON – simples para o utilizador ler e escrever…. fácil para as máquinas gerarem e processarem!

Para quem anda pela área da programação, certamente que já teve a necessidade de trocar informação entre uma aplicação servidor e uma aplicação cliente. Numa primeira abordagem, a escolha do formato de dados para intercâmbio de informação entre servidor e cliente é o XML.

No entanto, o formato JSON  tem vindo a ganhar popularidade e é actualmente o formato padrão para muitos serviços disponíveis na Internet, como é o caso do Twitter ou Yahoo.

json_00

O formato JSON foi originalmente criado por Douglas Crockford e é descrito no RFC 4627. O XML tem vindo a ser trocado pelo JSON, uma vez que o JSON é mais rápido de processar, eficiente, e simples de entender.

O formato JSON assenta basicamente em duas estruturas:

  • Uma colecção de pares: chave/valor – Em algumas linguagem de programação tal estrutura é entendida como um objecto, lista, matriz, etc;
  • Uma lista ordenada de valores –  Nas linguagens de programação é caracterizado como um array, vector, lista, etc;

Este tipo de estruturas de dados são transversais a quase todo o tipo de linguagens de programação modernas, o que faz do JSON é excelente escolha no que se refere ao formato para intercâmbio de informação.

Representação das estruturas no formato JSON:
Objecto

Um objecto é um conjunto desordenado de pares chave/valor. No formato JSON, um objecto começa por { (chaveta esquerda) e termina em } (chaveta direita). Cada nome é seguido de : (dois pontos) e os pares chave/valor são separados por , (vírgula).

json_objectoExemplo

{
	color: "azul",
        site: "pplware.com”,
        value: "#f00"
}
Array

Um array é um conjunto de valores ordenados. Um array de valores começa por [ (parênteses recto esquerdo) e termina com ] parênteses recto direito). Os valores encontram-se separados , (vírgula).

json_arrayExemplo:

[ 100, 500, 300, 200, 400 ]
Value

Um value (valor) pode ser uma String (dentro de aspas), um número, ou verdadeiro, false ou null

json_value

String

Uma string é uma sequencia de zero ou mais caracteres unicode. A sequeência é bastante semelhante à utilizada em linguagens de programação como C ou string JAVA.

jason_string

Number

Um número é muito semelhante ao usado nas linguagens de programação C ou Java, excepto os formatos octal e hexadecimal uma vez que não são usados.

json_number

Um exemplo do formato JSON

{"menu": {
	"id": "pplware",
	"value": "100",
	"popup": {
	"menuitem": [
	{"value": "Linux", "Mac": "Windows"},
	{"value": "Android", "iOS": "Windows"},
	{"value": "redes", "apps": "tutoriais"}
	]
	     }
	}}
Em Resumo…

O formato JSON promete, uma vez que possui características que o permitem destacar-se do formato XML. É comum ver actualmente aplicações que usam os dois formatos, nos entanto nota-se que o JSON está a crescer e que as linguagem de programação cada vez mais disponibilizam suporte para este formato. Vamos ver o que nos reserva o futuro.

Para finalizar gostaríamos apenas de saber se já conhecia o JSON?

Artigos relacionados

Homepage: JSON

Criar uma Web App no Chrome

Criar uma Web App no Chrome

Criado por Pedro Simões em 14 de Fevereiro de 2011 | 7 comentários

A guerra dos browsers anda ao rubro. Saem periodicamente novas versões de cada um deles e a cada um desses lançamentos são apresentadas novas funcionalidades. A maioria dessas novidades tenta ser original e dar aos utilizadores uma nova experiência e funcionalidades.

Uma das últimas que o Chrome trouxe para os seus utilizadores foram as WebApps. Hoje vamos dar-vos a conhecer uma forma simples de criarem uma WebApp que mais não é do que um link para o vosso site favorito, o Pplware.

As WebApps são basicamente acessos directos a determinados serviços que estão alojados na Internet. Podem no entanto estar alojadas no vosso PC, tendo para isso a necessidade de serem descarregados ficheiros adicionais. O Chrome já tinha disponível extensões, que não diferem muito do conceito aplicado às WebApps, mas a maior diferença é que as WebApps correm directamente num separador e as extensões têm janelas próprias que são apresentadas da interface do Chrome.

O que nos propomos a apresentar hoje é a criação de uma WebApp que vos colocará um link e um ícone na zona de WebApps da vossa página de novo separador. Alguns de vós vão com certeza argumentar que é muito mais simples a criação de um atalho, mas o que pretendemos é mostrar e explicar a forma simples com que se podem criar WebApps e dar-vos um pequeno empurrão para que comecem a desenvolver as vossas extensões ou WebApps.

Uma WebApp é composta por dois simples ficheiros. Uma imagem no formato PNG e que deve ter 128×128 pixeis e um ficheiro em Jason, de nome manifest (manifest.json). A imagem pode ser escolhida por vós e deve respeitar as dimensões indicadas (128 pixeis por128 pixeis). Se pretenderem podem esta, usar a que foi criada para a WebApp do Pplware.

O conteúdo do ficheiro manifest.json é o que está apresentado abaixo e pode ser obtido aqui:

{
"name": "Pplware",
"description": "Peopleware - Tudo sobre tecnologia, software, informatica,
tutoriais, truques, dicas, windows, mac, linux e internet em portugues",
"version": "1.0",
"icons": {
"128": "ppl.png"
},
"app": {
"urls": [
"http://pplware.sapo.pt/"
],
"launch": {
"web_url": "http://pplware.sapo.pt/"
}
},
"permissions": [
"unlimitedStorage",
"notifications"
]
}

Caso pretendam criar a vossa WebApp devem alterar os seguintes campos:

  • name – Nome que pretendem que a WebApp tenha
  • description – Descrição da WebApp
  • urls – Endereço a que se refere a WebApp
  • launch – Endereço a ser aberto no separador

Coloquem os dois ficheiros numa pasta à vossa escolha e que tenham criado para o efeito. No nosso caso criamos a pasta Pplware e colocámos lá dentro os dois ficheiros (manifest.json e ppl.png).

Agora devem abrir o Chrome para que possamos carregar essa nova WebApp para o vosso browser preferido. Acedam ao menu de ferramentas e escolham as opções Ferramentas e depois Extensões.

No novo separador que se abrir, o separador extensões, devem carregar no botão Carregar extensão não compilada. Será aberta uma janela para que possam indicar a directoria onde têm a vossa WebApp criada. Naveguem até ao local onde deixaram os ficheiros e carreguem no botão OK.

Depois deste passo devem ver no separador Extensões a nova WebApp instalada.

Para testarem se a nova WebApp está carregada e funcional devem apenas abrir um novo separador e depois ai dentro navegarem para a WebApp que criaram e instalaram. No nosso caso é apenas um link para o Pplware.

Podem inclusive criar novas versões que o Chrome avisa-vos das alterações e da actualização efectuada.

Relembramos que este é apenas um exemplo do que pode ser criado. Naturalmente que as WebApps estão desenhadas para aplicações bem mais complexas e que não se devem limitar a ser apenas um link para o vosso site preferido, mas como indicámos no início, este exemplo pode ser apenas a forma de vos iniciar na criação de extensões ou de WebApps. A vossa imaginação é o limite.

Aproveitámos o trabalho que desenvolvemos e publicámos esta WebApp no Chrome Web Store. Podem encontrá-la aqui. Se já tiverem desenvolvido alguma extensão ou WebApp indiquem-nos para que possamos apreciar  vosso trabalho.

Download: Pplware Web App
Homepage: Pplware Web App

ASP.NET–Área Administrativa

ASP.NET – Área Administrativa

Criado por Henrique Graça em 26 de Janeiro de 2011 | 1 comentário

Estamos de volta com mais um tutorial sobre ASP.NET. Hoje iremos começar a criar a área de administração do nosso site. Vamos poder criar empresas, localidades, apagar comentários, ver votações, etc.. Fiquem atentos e participem neste brainstorming de programação.

No último tutorial criamos o nosso modelo de dados e definimos os níveis de acesso da aplicação. Com a definição desses níveis é agora possível adicionar funcionalidades que apenas estão disponíveis para os administradores do nosso site.

1.Administração

Vamos começar por adicionar uma nova páginas por cada tabela na nossa entidade dentro da pasta admin, para assim essas páginas ficarem apenas visíveis a utilizadores com perfil Admin. Estas novas páginas têm de referenciar a master page “Site.Master”.

No final iremos ficar com estas páginas.

De seguida vamos editar a página Empresas.aspx . Adicionamos um titulo, um parágrafo e um Panel, este último irá conter a GridView. O Panel servirá para possibilitar o scroll quando a grid se expande no modo de edição.

Vamos adicionar uma gridView e coloca-la dentro do panel:

De seguida entramos no mode de design e adicionamos uma EntityDataSource à GridView com o nome ”EntityDataSourceEmpresas”, configuramos a ligação e escolhemos como entidade a Tabela Empresas. Marcar todas as checkboxes.

De seguida seleccionamos todo o texto “Criar empresa” e carregamos no icone “Convert to Hyperlink” e escolhemos a página de destino “Create_Empresa.aspx”, ou então no código adicionamos uma tag “<a>” com href para a página.

Vamos abrir a página Create_Empresa.aspx. Nesta página vamos adicionar um titulo, um link que permite voltar à lista de empresas e uma form que vai permitir adicionar os novos valores para uma empresa. Para esta form é adicionada uma nova EntityDataSource, tal e qual como foi configurada anteriormente. Vamos colocar a opção por defeito da form como insert.

De seguida vamos editar o template de insert da nossa form e vamos adicionar uma dropDownList que irá conter as localidades existentes na base de dados. Criamos uma nova entityDatasource que irá apontar para a tabela localidades.  Definimos o Display com a propriedade “Nome” e o value com a propriedade “Id”.

Depois editamos os databindings da dropDownlist e colocamos como binding do SelectedValue a propriedade que faz Bind com a tabela Empresas, neste caso a LocalidadeId. Adicionamos um campo oculto que vai conter a Data de criação do registo.

Para inserirmos a data de criação de registo podemos fazê-lo na base de dados com um campo default ou um trigger. Neste caso vamos fazê-lo no evento ItemInserting do form, onde colocamos o valor da data actual no campo DataCriacao.

Para podermos ver estas alterações em funcionamento, vamos criar os novos items no nosso menu de navegação. Vamos abrir a master page, “Site.Master”

Como podemos ver estas novas páginas foram colocadas num sub-menu do menu Admin. Vamos correr a nossa aplicação e testar as novas funcionalidades. Depois de fazer o login, podemos verificar os novos itens no menu.

Escolhemos a opção Empresas e vemos a nossa lista de empresas ( estão no projecto os inserts necessáros para criar as empresas e localidades). Neste ecrã podemos editar, criar e apagar empresas. Ao escolhermos a opção criar empresa, somos redireccionados para a página de criação. Onde podemos preencher os campos necessários e conseguimos ver uma lista de Localidades.

2. Conclusão

Por hoje damos o tutorial por terminado. No próximo tutorial vamos terminar as nossas páginas e começar a tratar do layout. Em baixo podem fazer download do projecto (Visual Studio 2010). Caso tenham alguma questão já sabem, deixem um comentário em baixo.

Download: GoodToWork [ 331Kb ]