Android/ Google/ Mobile

Android Wear, guia inicial para desenvolvedor

Moto-360-Android-Wear

Ontem o Google surpreendeu todo mundo com um SDK específico para wearables que são dispositivos pareados com seus aparelhos com Android, basicamente o Google Wear é um Google Now, só que em seu pulso e evita assim você fica toda hora com aquela mania de tirar e colocar o celular do bolso para ver notificações ou compromissos.

Não é novidade nenhuma em termos técnicos, A própria Samsung já tinha um SDK para o Galaxy Gear e uma série de aplicativos especificos para conectar com os seus aparelhos.

A diferença do SDK da Samsung para o seu Gear e o Google Wear é que será um SDK bem abrangente, não vai ficar só funcionando apenas com Samsung Galaxys e Samsung Galaxy Gear, você pode comprar qualquer smartphone com Android e o Motorola Wear ou LG Wear que são os dois modelos lançados justamente com o Google Wear e parear ambos e boom! Você tem eles perfeitamente casados, fico imaginando aqui quantos Google Wear Xing Lings vão aparecer depois dessa novidade, já que smartphones Xing Lings estão com os dias contados no Brasil.

Pois bem, me inscrevi no Preview do SDK e ganhei acesso ao SDK, para encurtar um pouco o post e fazer valer cada imagem, que por sí só valem mais do que mil palavras, eu gravei um rápido video no Youtube como será esse workflow de desenvolvedores usando o SDK do Google Wear.

O código fonte está disponível no GitHub.

Dev. Software/ Dicas/ Google/ HTML 5/ HTML5 / CSS3

Web Tracing framework do Google ajuda você se livrar do código porco

wft3

O Google acabou de lançar o Web Tracing framework, uma espécie de Adobe Scout, só que para coisas feitas em Javascript, que usem qualquer manipulação de conteúdo seja Canvas, WebGL, de tudo ele consegue capturar aquilo que está rodando a 60fps no navegador.

Eu testei a ferramenta e aqui vai a dica: USEM, ajuda de verdade.

Como fazer?

Primeiro Passo: Faça o Download da extensão para o Google Chrome.

Segundo passo: Clique no botão WTF (What the fuck), traduzindo (Que merda é essa) e vai aparecer o depurador para você fazer o enabled.

wtf

Terceiro passo: Comece a capturar, para isso isso a extensão cria um controle inferior direito para você começar a fazer a captura de dados, veja abaixo:

wtf2

Eu acho que é uma grande vantagem para quem criar coisas em Javascript, não é novidade para quem já conhece linguagens compiladas, basicamente é um depurador avançado para você conhecer mais de perto o que tanto afeta a performance de sua App, Jogo, enfim, tudo que você quer se livrar de porcaria que pode impedir da melhor performance.

Ferramenta MUST HAVE para quem cria jogos em Javascript.

Flex/ Google/ MapQuest

Mapquest 7.1.1 e o Bug do infoWindow com componentes Flex 4.6+

map_quest_blog_post

Tive a oportunidade de trabalhar com o Map Quest, já que o Google Maps foi descontinuado para aplicações Flex/Flash. A grande diferença do Mapquest é que ele é mais leve e possui uma API quase completa como no Google.
A unica grande diferença é seu suporte e a comunidade que usa.

A última versão deles a 7.1.1 tinha um bug que vinha rolando desde Outubro do ano passado onde não era possível inserir componentes do Flex 4.6 dentro das janelas dos pontos marcados no mapa e que até hoje não foi resolvido. Confesso que não foi fácil resolver esse problema.

E que problema é esse?

É basicamente assim, você tem uma aplicação que usa o Mapquest, e nele você precisa adicionar controles Flex ao seu ponto no mapa para fazer alguma interação, Se você está no Flex 4.0 para baixo, funciona tudo perfeito, roda tranquilo e redondo, só que quando você passa para a última versão do 4.6 SDK em diante até o 4.8 a coisa começa a desandar, então os controles não são mostrados, já que o content do componente não é adicionado ao tileMap.

Eu suponho que a falta de atualização seja depois das declarações da Adobe, assim como outras empresas deixaram de suportar.

Em fim, se você trabalha com MapQuest em sua aplicação Flex e que ela esteja usando o Flex 4.6 você deve usar esse Hack para funcionar.

1 – Crie uma conta gratuita de desenvolvedor
2 – Baixe aqui o MapQuest para Flex.
3 – Crie um novo projeto Flex no seu Flash Builder.
4 – Importe esse projeto exemplo e explore.

Dica importante: Para Mobile não funciona, você tem que usar o componente CallOut do próprio Flex Mobile.

Até a próxima.

Dicas/ Dicas e truques/ Google/ HTML 5/ HTML5 / CSS3/ Web 2.0

Coloque seu site ou aplicativo web no modo turbo

rocket launch

Se você é fanático por performance e tem acesso shell/root ao seu servidor, vai aqui uma dica muito importante para optimizar todas as páginas que você serve para seus leitores/usuários.

Se seus serviços forem sob o teto do servidor Apache HTTP, então você precisa conhecer urgente o mod_pagespeed que acelera o processo de carregamento do aplicativo/sites a níveis de grandes sites como Google.com e facebook.com

Só para você ter uma idéia, meu site com todas as técnicas que abordei em meu arquivo .htaccess ele beirava os 6.5s para carregar por completo para você leitor. Depois que eu ativei o mod_pagespeed o tempo passou para 1.65s e o melhor de tudo isso, banda e processos foram economizados.

O que o mod_pagespeed faz na verdade?

Ele basicamente optimiza tudo que você deixou para depois e acabou esquecendo de fazer ou simplesmente não deu tempo devido a pressão sofrida no trabalho para liberar uma release.

Então através de filtros pré-definidos via String na sua configuração o mod_pagespeed cria diretivas de rápido acesso permitindo que você faça performance à baixo nível no servidor.

O mod_pagespeed é um santo remédio, porém você deve usa-lo com cautela, já que boa parte de seus filtros ainda são experimentos e nunca se sabe o que poderá causar de ruim para sua aplicação.

 

Pagespeed e derivados

Existem outros módulos no apache que é importante frizar bem para que você não continue achando que o pagespeed é o único salvador da pátria, outros módulos foram usados em meu problema, porém o pagespeed de fato teve um ganho muito mais considerado deixando ele agir sobre os arquivos estáticos.

Módulos que também usei e que são necessários para o pagespeed rodar.

Mod – rewrite

Mod – headers

Mod – deflate

 

Esses módulos podem ser instalados perfeitamente em seu servidor Apache usando os seguintes comandos.

 

Instalando o módulo rewrite.

a2enmod Nome_do_Modulo

 

O comando a2enmod, basicamente diz, Apache2 habilite modulo X, se você quiser ver todos os módulos habilitados em seu servidor Apache, basta ir em cd /etc/apache2/mods-enabled/

e dar um ls

 

Como instalar em um servidor Ubuntu/CentOS/Debian/Fedora

Baixe o módulo pagespeed diretamente aqui, links estão do lado direito.

Uma vez que você escolheu o pacote correto para sua distribuição linux, use o comando wget para baixar o pacote.

root@li437-29:~# wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb

 

Como eu tenho um sistema operacional Ubuntu 64 bits usei o pacote acima.

Uma vez que o download completou, basta executar os seguintes comandos se você estiver no Ubuntu.

dpkg -i mod-pagespeed-*.deb
apt-get -f install

Se estiver no CentOS ou Fedora, execute

yum install at  (if you do not already have 'at' installed)
rpm -U mod-pagespeed-*.rpm

 

Depois disso, só habilitar o pagespeed no Apache, usando o comando a2enmod

a2enmod pagespeed

Pronto, seu módulo pagespeed está habilitado e pronto para executar, agora basta configurar os filtros que vem nele para melhorar o desempenho.

Por padrão o módulo é desabilitado justamente por que você precisa configura-lo antes de sair usando, afinal o Google não quer que seu site saia fora do ar antes mesmo de você coloca-lo em modo turbo.

Para isso, abra o arquivo de configuração do pagespeed que fica na pasta /etc/apache2/mods-enabled e use um editor que você esteja confortável em usar, eu uso o Vim, tem gente que gosta de outros e por ai vai. Para abrir é simples, vi pagespeed.conf

O arquivo vem basicamente assim.

# Turn on mod_pagespeed. To completely disable mod_pagespeed, you
# can set this to "off".
ModPagespeed on
 
# Direct Apache to send all HTML output to the mod_pagespeed
# output handler.
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
 
# If you want mod_pagespeed process XHTML as well, please uncomment this
# line.
# AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER application/xhtml+xml
 
# The ModPagespeedFileCachePath and
# ModPagespeedGeneratedFilePrefix directories must exist and be
# writable by the apache user (as specified by the User
# directive).
ModPagespeedFileCachePath "/var/mod_pagespeed/cache/"
ModPagespeedGeneratedFilePrefix "/var/mod_pagespeed/files/"
 
# Override the mod_pagespeed 'rewrite level'. The default level
# "CoreFilters" uses a set of rewrite filters that are generally
# safe for most web pages. Most sites should not need to change
# this value and can instead fine-tune the configuration using the
# ModPagespeedDisableFilters and ModPagespeedEnableFilters
# directives, below. Valid values for ModPagespeedRewriteLevel are
# PassThrough, CoreFilters and TestingCoreFilters.
#
# ModPagespeedRewriteLevel PassThrough
 
# Explicitly disables specific filters. This is useful in
# conjuction with ModPagespeedRewriteLevel. For instance, if one
# of the filters in the CoreFilters needs to be disabled for a
# site, that filter can be added to
# ModPagespeedDisableFilters. This directive contains a
# comma-separated list of filter names, and can be repeated.
#
# ModPagespeedDisableFilters rewrite_images
 
# Explicitly enables specific filters. This is useful in
# conjuction with ModPagespeedRewriteLevel. For instance, filters
# not included in the CoreFilters may be enabled using this
# directive. This directive contains a comma-separated list of
# filter names, and can be repeated.
#
ModPagespeedEnableFilters rewrite_javascript,rewrite_css
ModPagespeedEnableFilters collapse_whitespace,elide_attributes
 
# ModPagespeedDomain
# authorizes rewriting of JS, CSS, and Image files found in this
# domain. By default only resources with the same origin as the
# HTML file are rewritten. For example:
 
# ModPagespeedDomain cdn.myhost.com
#
# This will allow resources found on http://cdn.myhost.com to be
# rewritten in addition to those in the same domain as the HTML.
#
# Wildcards (* and ?) are allowed in the domain specification. Be
# careful when using them as if you rewrite domains that do not
# send you traffic, then the site receiving the traffic will not
# know how to serve the rewritten content.
 
# Other defaults (cache sizes and thresholds):
#
# ModPagespeedFileCacheSizeKb 102400
# ModPagespeedFileCacheCleanIntervalMs 3600000
# ModPagespeedLRUCacheKbPerProcess 1024
# ModPagespeedLRUCacheByteLimit 16384
# ModPagespeedCssInlineMaxBytes 2048
# ModPagespeedImageInlineMaxBytes 2048
# ModPagespeedCssImageInlineMaxBytes 2048
# ModPagespeedJsInlineMaxBytes 2048
# ModPagespeedCssOutlineMinBytes 3000
# ModPagespeedJsOutlineMinBytes 3000
 
# Bound the number of images that can be rewritten at any one time; this
# avoids overloading the CPU. Set this to 0 to remove the bound.
#
# ModPagespeedImageMaxRewritesAtOnce 8
 
# You can also customize the number of threads per Apache process
# mod_pagespeed will use to do resource optimization. Plain
# "rewrite threads" are used to do short, latency-sensitive work,
# while "expensive rewrite threads" are used for actual optimization
# work that's more computationally expensive. If you live these unset,
# or use values 
SetHandler mod_pagespeed_beacon
 
# Uncomment the following line if you want to disable statistics entirely.
#
# ModPagespeedStatistics off
 
# This page lets you view statistics about the mod_pagespeed module.
 
Order allow,deny
# You may insert other "Allow from" lines to add hosts you want to
# allow to look at generated statistics. Another possibility is
# to comment out the "Order" and "Allow" options from the config
# file, to allow any client that can reach your server to examine
# statistics. This might be appropriate in an experimental setup or
# if the Apache server is protected by a reverse proxy that will
# filter URLs in some fashion.
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_statistics
 
# Page /mod_pagespeed_message lets you view the latest messages from
# mod_pagespeed, regardless of log-level in your httpd.conf
# ModPagespeedMessageBufferSize is the maximum number of bytes you would
# like to dump to your /mod_pagespeed_message page at one time,
# its default value is 100k bytes.
# Set it to 0 if you want to disable this feature.
ModPagespeedMessageBufferSize 100000
 
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_message
 
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_referer_statistics

O que você precisa habilitar primeiro é o módulo.

 ModPagespeed on

Depois configurar onde ele vai guardar os caches

  ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
  ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"

Coloque em um diretório de sua preferência.

Com apenas isso, você já vai notar uma significante mudança no carregamento de seu site ou App em 50%. Tem muita configuração para você fazer através de filtros.

Os filtros que utilzei foram esses.

 ModPagespeedEnableFilters combine_css

O filtro combine_css já diz, tudo ele combina tudo que você tem de CSS em um único arquivo.

Outro filtro que usei foi o minificador de Javascript.

ModPagespeedEnableFilters rewrite_javascript

Em caso de você esquecer de minificar seu código javascript, ele faz automático para você.

Outro bastante importante é a configuração das imagens, elas tem um peso absurdo quando o negócio é carregamento.

Eu usei os seguintes filtros.

 ModPagespeedEnableFilters inline_images,recompress_images,resize_images

Peço para carregar todas as imagens em inline, tudo junto, comprima elas e faça um resize caso necessário.

 

Claro que os filtros que eu usei são específicos para meu caso, embora ele vá servir também para vocês na maioria dos casos, recomendo ler os pro e contras de qualquer filtro que você habilite na documentação do Google pageSpeed, que por sinal é bem completa.

E depois disso tudo? Como faço para testar?

Existem diversas ferramentas on-line que analisam o conteúdo do site para você e diz onde está errando, inclusive no próprio site do Page speed, o Google disponibiliza o Page speed Insights, detalhando tudo que você precisa saber para corrigir os erros e melhorar a performance do site.

O mais legal do Pagespeed Insights é a possibilidade de você testar o carregamento em Desktop e Mobile.

Outra ferramenta que fiz bastante uso em meu problema, foi o Full Page Test da Pingdom, para ver se realmente o Pagespeed tinha afetado a performance do site.
No Google Page Speed Insights meu site carregou em 680ms quase 1 segundo. No Pingdom os resultados foram mais reais digamos assim. Carregados em 1.65s.

Sem tudo isso do Pagespeed meu site estaria sendo carregado em meros 5 ou 6 segundos, isso por que boa parte de seu conteúdo é texto.

É isso, escrevei outro post de como eu consegui reduzir o consumo de memória do servidor servindos 50 visitas /segundo nesse blog depois que mudei para servidores novos.
Foi uma grande aventura configurar o Apache e o MySQL para reduzir o consumo de memória.

Flash/ Flex/ Google

SDK do Google Maps para Flash e Flex será descontinuado pelo Google

Infelizmente como tudo na vida, temos as três fases, início, meio e fim.

A última parte doi mais ainda quando você ver que tem certas prioridades para serem vencidas no Google como o uso geral. Salvar milhões do que minoria. E esse pensamento é bem certo quando você detém aquilo que criou.

O Google acabou de anunciar que vai descontinuar a versão do SDK do Flash/Flex que ele tem para plataforma Flash, e focando seus esforços apenas na plataforma Javascript que tem ai uma infinidade de funções e com versões sendo liberadas bem mais rápidas do que para a versão para Flash.

Calma ai, não se desespere, o Google não vai dar um shutdown total no projeto, ele só não irá mais implementar novas funções, e corrigirá apenas falhas críticas e problemas de segurança, você continuará usando o Google Maps Component em suas apps Flex/Flash.

Dicas/ Flex/ Google/ MAX 2008 SF/ Negócios

Rastreie todas as ações do usuário em sua aplicação Flex ou Flash com Google Analytics

Foi anunciado no MAX 2008 SF uma parceria entre Adobe, Google e algumas outras empresas a possibilidade de rastrear todas as ações que o usuário fizer em sua aplicação Flex/Flash.

Imagine você poder fazer métricas agora usando o Google Analytics para seu conteúdo Flash/Flex?

Do ponto de vista de desenvolvimento, isso é ótimo, mais uma ferramenta para interagir com serviços cloud.
Do ponto de vista de negócios, isso agora não limita mais campanhas publicitárias fazerem todo seu conteúdo Flash/Flex serem rastreados, se caso eles usem o Google Analytics para fazer métricas.

Bateu agora a lembrança que a Gringo usa muito Flash nas peças de seus clientes e essa notícia cai como uma luva para suas necessidades.

Para saber mais sobre como usar o Google Analytics AS3 tracker, veja o vídeo abaixo de demonstração e visite os links abaixo.

Documentação para implementação.
Projeto Google Analytics for Flash no google code
Download das bibliotecas necessárias.

Actionscript/ AS 3.0/ Dev. Software/ Flex 3/ Flex Componentes/ Google/ Labs/ Open-source

Criando um tradutor em Flex usando o Google

Essa também veio lá do meu blog em inglês. Como criar uma ferramenta de tradução em Flex usando os recursos on-line que o google tem?

Google está cada vez mais entrando na esfera do Flash player e outras plataformas deixando-as consumir seus serviços, prova disso foi os outros testes feitos anteriormente à isso.

Para usar o serviço de tradução do Google é bem simples, ele respondendo com formato de dados em JSON, REST, XML, TXT no Flex fica mais fácil.

Para encurtar muito nessa explicação aqui abaixo você tem o código fonte da aplicação. Lembrando que para executá-la. É necessário você baixar o código fonte dele, devido ter algumas dependências de classes.

Código fonte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="626">
	</mx><mx :Script>
		< ![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import com.adobe.serialization.json.JSON;
			[Bindable]public var googleText:String = "http://ajax.googleapis.com/ajax/services/language/" ;
			[Bindable]public var tsrc:String ="translate?v=1.0&q=";
			[Bindable]public var lanpair:String = "&langpair=";
			[Bindable]public var pairCode:String = "%7C";
			private function onJSONLoad(event:ResultEvent):void
			{
				var rawData:String = String(event.result);
				if(JSON.decode(rawData).responseData.translatedText !=null){
				var decoded:String =JSON.decode(rawData).responseData.translatedText;
				}else {
					decoded = "None support";
				}
				txtdest.text = decoded;
			}
		]]>
	</mx>
	<mx :Array id="langFrom">
		<mx :Object  value="auto" label="Select Language"/>
		<mx :Object  value="ar" label="Arabic"/>
		<mx :Object  value="bg" label="Bulgarian"/>
		<mx :Object  value="zh-CN" label="Chinese"/>
		<mx :Object  value="hr" label="Croatian"/>
		<mx :Object  value="cs" label="Czech"/>
		<mx :Object  value="da" label="Danish"/>
		<mx :Object  value="nl" label="Dutch"/>
		<mx :Object  value="en" label="English"/>
		<mx :Object  value="fi" label="Finnish"/>
		<mx :Object  value="fr" label="French"/>
		<mx :Object  value="de" label="German"/>
		<mx :Object  value="el" label="Greek"/>
		<mx :Object  value="hi" label="Hindi"/>
		<mx :Object  value="it" label="Italian"/>
		<mx :Object  value="ja" label="Japanese"/>
		<mx :Object  value="ko" label="Korean"/>
		<mx :Object  value="no" label="Norwegian"/>
		<mx :Object  value="pl" label="Polish"/>
		<mx :Object  value="pt" label="Portuguese"/>
		<mx :Object  value="ru" label="Russian"/>
		<mx :Object  value="es" label="Spanish"/>
		<mx :Object  value="sv" label="Swedish"/>
	</mx>
	<mx :Array id="langTo">
		<mx :Object  value="ar" label="Arabic"/>
		<mx :Object  value="bg" label="Bulgarian"/>
		<mx :Object  value="zh-CN" label="Chinese (Simplified)"/>
		<mx :Object  value="zh-TW" label="Chinese (Traditional)"/>
		<mx :Object  value="hr" label="Croatian"/>
		<mx :Object  value="cs" label="Czech"/>
		<mx :Object  value="da" label="Danish"/>
		<mx :Object  value="nl" label="Dutch"/>
		<mx :Object  value="en" label="English"/>
		<mx :Object  value="fi" label="Finnish"/>
		<mx :Object  value="fr" label="French"/>
		<mx :Object  value="de" label="German"/>
		<mx :Object  value="el" label="Greek"/>
		<mx :Object  value="hi" label="Hindi"/>
		<mx :Object  value="it" label="Italian"/>
		<mx :Object  value="ja" label="Japanese"/>
		<mx :Object  value="ko" label="Korean"/>
		<mx :Object  value="no" label="Norwegian"/>
		<mx :Object  value="pl" label="Polish"/>
		<mx :Object  value="pt" label="Portuguese"/>
		<mx :Object  value="ru" label="Russian"/>
		<mx :Object  value="es" label="Spanish"/>
		<mx :Object  value="sv" label="Swedish"/>
	</mx>
	<mx :ComboBox id="langFromCbx" prompt="Select a language" x="28.5" y="64" dataProvider="{langFrom}"/>
	<mx :HTTPService id="googleTransService"
		 url="{googleText + tsrc+txtsource.text + lanpair + String(langFromCbx.selectedItem.value)+pairCode+String(langToCbx.selectedItem.value)}"
		 useProxy="false" showBusyCursor="true" result="onJSONLoad(event)"  resultFormat="text"/>
	<mx :TextArea id="txtsource" x="28.5" y="124" width="569" height="116"/>
	<mx :TextArea id="txtdest" x="28.5" y="274" width="569" height="248"/>
	<mx :Button x="473.5" y="61" label="Translate" click="googleTransService.send()" width="124" height="28"/>
	<mx :ComboBox id="langToCbx" x="222.5" y="64" prompt="Select a language" dataProvider="{langTo}"></mx>
	<mx :Label x="30.5" y="45" text="Translate from:"/>
	<mx :Label x="28.5" y="98" text="Text to Translate"/>
	<mx :Label x="28.5" y="248" text="Result Text translated"/>
	<mx :Label x="222.5" y="45" text="Translate To:"/>
[Update] Alguns códigos exibidos neste post podem não aparecer corretamente, devido a um problema antigo em um plug-in para exibir código fonte. Pedimos desculpas.

Actionscript/ AS 3.0/ Flex Componentes/ Google

Criando sua primeira aplicação com o Google Maps AS3.0 API

Continuando depois do último post feito sobre esse estupendo, helvis,…, igual ao rapaz de Quixeramobim, Ceará. Vamos aos passos.

Antes de começar a ler o resto do post e bateu a preguiça de ler? Bom, eu pensei nisso também, então tá aqui a solução pronta.

Primeiro passo

Gere uma Google Map API Key para ter acesso externo aos mapas do google. Como? Clique aqui.

O que é esse Google Map API Key?
É um controle que o google faz para saber quantas aplicações ou acessos estão sendo feito em suas aplicações para servir como referência de suas pesquesas.
O Principal objetivo do GMA Key é justamente deixar você usar o serviço sem precisar autenticá-lo toda vez que for usar.
Não existe limitação de uso ou qualquer outra forma de bloqueio, porém o google pede que se o seu aplicativo tiver mais que 500mil pageview que entre em contato com eles para eles poderem te ajudar melhor nisso aumentando sua capacidade para que seu serviço não sofra com isso.

Aceite os termos do contrato, após isso submeta uma URL para que o google saiba onde será localizado o aplicativo, por exemplo você pode colocar apenas o site da sua empresa ou seu sem precisar especificar ao certo qual path(diretório) será guardado o aplicativo.

Copie o código que o Google vai lhe dar, geralmente é um conjunto imenso de caracteres, procure guardar em um bloco de notas da vida.

Minha chave de código é essa:

1
ABQIAAAAfRPIvINtjZu3PtRGVoq7mBQogceLfcZe7FekjL-2SpDGGlJNIRRAbExTAlOd6Y5xk8V9kGtfjzffFw

Mesmo eu colocando aqui publicamente a chave ela só funcionará no meu domínio, uma forma de proteger o serviço para cada domínio.

Lembre-se que não é necessário ter uma conta do Google para fazer isso, o que é mais legal ainda.

Segundo passo

Baixe o SDK do Google

O SDK do Google Maps As3.0 API, contém documentação de todas suas classes e um .swc que tanto pode ser usado no Flash quanto no Flex, por ambos os produtos suportarem a linguagem Actionscript 3.0.
Caso você esteja lendo esse post e usa Flash, espere por outro tutorial voltado para Flash, já que esse aqui será voltado apenas para desenvolvedores Flex.

Feito o Download do pacote que é um arquevo *.zip, por favor descompacte usando algum software .zip, supondo eu que aqui só tenha desenvolvedores ou aspirantes de desenvolvedores, obviamente maior parte aqui sabe usar um descompactador.

Hora de ir para o Flex Builder.

1. Crie um projeto Novo no Flex Builder
2. Nomeie o projeto como GoogleFlexMap
3. Clique em Finish

Na estrutura de diretório do projeto criado existe uma pasta chamada Libs, dentro dessa pasta você vai jogar o arquevo map_flex_1_1.swc que você estraiu do arquevo SDK zipado.
Não precisa de tanto detalhe basta copiar o arquevo, selecionar a pasta e dá um simples CTRL+V.

Feito isso, seu projeto vai suportar a API do Google Maps. Hora de começar a Programar.

Crie uma nova classe em AS3.0 no Flex. Para criar siga os passos:
1. File > New > Actionscript Class
2. Use o Package para a classe de seu gosto, eu usei o com.igorcosta
3. Por regra de convenção Classes em Actionscript é mais aceitas a primeira letra ser Maiúscula
4. Nomeie para GoogleFlexMap
5. Estenda o GoogleFlexMap usando o SuperClass, clique em Browser e escolha UIComponent para ser estendida.
6. Clique em OK

Se você seguiu tudo certo, você terá um novo arquevo gerado com a seguinte sintaxe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
package com.igorcosta
{
	import mx.core.UIComponent;
 
	public class GoogleFlexMap extends UIComponent
	{
		public function GoogleFlexMap()
		{
			super();
		}
 
	}
}

Nota: Como o google criou uma API genérica para Flash/Flex você vai precisar usar esse tipo de artifício para garantir que ele será adicionado a classe UIComponent que faz uso de criar controles da tela.

Então para encurtar mais eu fiz uma classe simples que vai definir um novo Componente no qual terá o nome definido de GoogleFlexMap igual a classe criada.

Segue a classe completa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
package com.igorcosta
{
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ZoomControl;
 
	import flash.events.Event;
	import flash.geom.Point;
 
	import mx.core.UIComponent;
	import mx.events.FlexEvent;
 
	public class GoogleFlexMap extends UIComponent
	{
 
		private var _largura:Number = 650;
		private var _altura:Number = 500;
		private var _mapa:Map;
		private var _tipomapa:Array = ["hibrido","normal","fisico","satelite"];
		private var _key:String;
		private var _controleZoom:Boolean = false;
		private var _controlePosicao:Boolean = false;
		private var _controleTipo:Boolean = false;
 
		public function GoogleFlexMap()
		{
			super();
			super.addEventListener(FlexEvent.INITIALIZE,init);
 
		}
		private function init(event:Event):void {
			 this.width = _largura;
			this.height = _altura;
			// Iniciando o Objeto Map
			_mapa = new Map();
			_mapa.key =_key;
			_mapa.addEventListener(MapEvent.MAP_READY,criarUIMapa);
			_mapa.setSize( new Point (this.width, this.height));
				if(_controleZoom){
				_mapa.addControl( new ZoomControl());
				}
				if(_controleTipo){
					_mapa.addControl(new PositionControl());
				}
				if(_controleTipo){
					_mapa.addControl(new MapTypeControl());
				}
			// adiciona o _mapa ao UIComponent;
			this.addChild(_mapa);
		}
		public function get ControleZoom():Boolean{
			return _controleZoom;
		}
		public function set ControleZoom(value:Boolean):void {
			_controleZoom = value;
		}
		public function get ControlePosicao():Boolean{
			return _controlePosicao;
		}
		public function set ControlePosicao(value:Boolean):void {
			_controlePosicao = value;
		}
		public function get ControleTipo():Boolean {
			return _controleTipo;
		}
		public function set ControleTipo(value:Boolean):void {
			_controleTipo = value;
 
		}
		public function get key():String{
				return _key;
		}
		public function set key(value:String):void {
			_key = value;
		}
		private function criarUIMapa(event:Event):void {
			_mapa.setCenter( new LatLng(40.736072,-73.992062),14,MapType.HYBRID_MAP_TYPE);
		}
	}
}

A classe facilita muito o uso. Então ela tem propriedades específicas que faz fácil o uso.

Terceiro Passo

Usando o Componente criado

Simplesmente você fará assim

1
2
3
4
5
6
7
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:google="com.igorcosta.*"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
  	<google :GoogleFlexMap
  		key="ABQIAAAAfRPIvINtjZu3PtRGVoq7mBQogceLfcZe7FekjL-2SpDGGlJNIRRAbExTAlOd6Y5xk8V9kGtfjzffFw"
  		width="100%" height="100%"/>
</mx>

Feito, você verá um resultado bem mais simples. Fácil não é?

[ATUALIZADO]

Como sempre a pressa é inimiga da perfeição, Fiz algumas alterações na classe e coloquei agora mais controles de forma mais fácil.

Tá com preguiça de fazer tudo isso? Baixe aqui o projeto completo feito.

Actionscript Frameworks/ AS 3.0/ Flex/ frameworks/ Google/ Open-source/ Web 2.0

Google Maps Actionscript 3.0 API Finalmente

Finalmente o tão aguardado, flamigerado e esperado por todos que trabalham com a plataforma Flash Player ( Flex/Flash/AIR), esperaram por essa grande notícia no última conferência Where 2.0 em San Francisco,US.

Google finalmente ajudou e muito a comunidade deixando de lado um pouco o aspecto de criar apenas para AJAX ou HTML.

Anterior à isso só existiam 2 produtos o UMap que usa o OpenMaps e Microsoft Map e o do Yahoo!.

O grande problema desses mapas é que para o Brasil fica muito restrito o acesso e não tem tanta riqueza de detalhes como o Google possui.

No próximo post, vocês vão ver como montar o ambiente, ou melhor projeto para começar a criar.