8º Encontro FEMUG SP + 8º Encontro Mobile Dev Group São Paulo

Olá pessoal venho anunciar o nosso primeiro encontro do ano, esse encontro será uma parceria com o grupo FEMUG-SP. O grupo organizado pelo Daniel Filho, para quem não conhece o grupo vai uma breve descrição:

O “Front-End Meet-Up Group” é um projeto que nasceu da necessidade de unir os desenvolvedores Front-End de São Paulo, e então tornou-se uma idéia coletiva, para que o acesso à informação seja feito em qualquer lugar que haja interesse do aprendizado.

 

O FEMUG realiza encontros periódicos sem um local fixo cada mês uma empresa fica responsável por seder o espaço para o evento, neste mês o encontro será realizado na BlackBerry. O Tema ainda não foi definido, ele é fechado dias antes do evento, para acompanhar a discussão sobre o encontro acesse a lista no seguinte link: http://bit.ly/FEMUG-SP

As conversas sobre o encontro começaram no ano passado Demian Borba, conheceu Daniel Filho no FEEC Brasil em Recife, isso mesmo em Recife nós conhecemos o grupo de São Paulo. E nesse mês será um prazer receber o FEMUG nas instalações da BlackBerry Brasil, também convidamos os integrantes do Mobile Dev Group São Paulo participarem do encontro. Quem não acompanha o nosso Dev Group no Facebook vai perguntar “Que grupo é esse?”. No final do ano passado em uma reunião realizada entre os managers do Brasil decidimos mudar o nome dos grupos de “BlackBerry Dev Group” para “Mobile Dev Group”.

Essa mudança visa abrir os grupos para desenvolvedores de outras plataformas, com o foco no enriquecimento do conhecimento entre os desenvolvedores independente da plataforma, atualmente temos muitas tecnologias convergentes em várias plataformas, por exemplo, AIR, Unity e Phone Gap. O Apoio da BlackBerry aos grupos continua com o mesmo foco os desenvolvedores.

E agora chega de “Blá Blá Blá” vamos ao que interessa o encontro será nesta Quarta-feira, 15 de Janeiro de 2014 às 20:00h no Escritório da BlackBerry Brasil:

Centro Empresarial Nações Unidas, Torre norte – 35º andar
Av. das Nações Unidas, 12901 – Itaim Bibi
São Paulo

Interessado em participar do evento por favor se inscrever no seguinte link: http://www.eventick.com.br/femug-sp-8

E até lá pessoal.

 

 

 

Limites do LocalStorage

Sempre quando falo de localStorage as pessoas me perguntam: “Qual o limite do LocalStorage?” sempre respondia o valor padrão de 5MB, mas esse valor é apenas uma especificação da W3C. Segundo ela:

A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future.

Ela sugere(não é obrigatório) que o espaço reservado por origem seja de 5MB e no futuro esse limite pode ser atualizado, a origem citada anteriormente no caso é por cada domínios. As variações a1.exemplo.com , a2.exemplo.com , a3.exemplo.com são considerada a mesma origem.

Em nosso caso o espaço disponível para o localStorage em aplicações em HTML5 na plataforma BlackBerry 10 é de 25MB, para armazenamento de texto 25MB é muita informação. Caso chegue ao limite do armazenamento será levantada uma exceção : QUOTA_EXCEEDED_ERR.

Caso queria saber o limite de armazenamento do seu browser, existe esse teste online: http://arty.name/localstorage.html

Segundo o site citado acima podemos modificar o limite de armazenamento no Opera, Firefox e no Chrome/Safari/IE

Utilizando localStorage para armazenar dados no Device

localstorage

No HTML5 uma features mais utilizada para aplicações móveis é o armazenamento local. Ou DOM Storage como é chamado, ele foi introduzido na especificação da Web Applications 1.0 depois também adicionada na especificação da W3C Web Storage. Com o DOM Storage podemos armazenar dados do usuário no device de forma fácil e segura, em comparação aos cookies, esse recurso era a única opção de armazenamento local sem o uso de plugin foi fortemente utilizado quando o HTML era somente para Desktop.

LocalStorage é um dos recursos do DOM Storage que vamos abordar nesse post, com ele podemos armazenar dados apenas em formato de texto, mas claro podemos contornar essa limitação. Vamos a um exemplo básico de armazenamento.

No código acima adicionamos uma variável com nome “device” que irá armazenar a String “BlackBerry”. Para visualizar se a informação foi realmente salva, vamos em developer tools em seu browser ou no “debug mode” caso esteja “buildando” em seu device, depois Resources > LocalStorage e procuramos a informação device no painel. Como podemos ver na imagem abaixo:

Captura de Tela 2013-12-22 às 13.36.22

Agora que sabemos que a informação foi salva vamos resgatar esse valor com o seguinte código:

No código acima passamos a função getItem e como parâmetro passamos a key do dado que queremos resgatar, na linha seguinte apenas damos um alert para exibir a informação.

Caso queria remover essa informação do localStorage utilizamos o seguinte código:

Agora vamos para um exemplo prático aplicando essas três funções que virmos acima, no caso: salvar, ler e excluir os dados no localStorage.

O Exemplo é bem simples ele verifica se tem o dado “name”, caso tenha, exibe o nome. Caso contrário adiciona um input para cadastrar o dado. Quando o nome é exibido também adicionamos um button para chamar a função de excluir os dados. Nos Exemplos anteriores apenas adicionamos e removemos algumas strings, para trabalhar com objetos no localStorage precisamos usar a Classe JSON, com ela é possível fazer a ponte entre texto e objetos.

No código acima verificamos se existe um dado com uma key “user”, caso exista ele resgata a informação na variável “texto” em seguida converte o texto em objeto com a classe JSON através da função parse que passamos como parâmetro o nosso texto armazenado no localStorage, na sequência adicionamos o conteúdo no body do nosso arquivo. Caso o usuário não tenha nenhuma informação salva, o código irá criar um objeto “user” e em seguida “stringificar” o nosso objeto assim salvado os dados em nosso localStorage. Esse exemplo não é muito funcional apenas exemplifica como é salvar um objeto em nosso localStorage.

Agora vamos partir para um exemplo mais funcional, vamos montar uma todo-list utilizando localStorage, desta vez vamos separar o código no arquivo todo-list.html, js/app.js e css/style.css. Caso queira baixar o exemplo ele e os anteriores estão disponíveis no gitHub no seguinte link: https://github.com/fellyph/Tutorial-bbUI/tree/master/localstorage

Inicialmente nosso HTML:

Nosso CSS:

Detalhe para o ultimo seletor que trata quando o item da lista possui o atributo data-done igual a true, ele vai adicionar uma linha sobre o texto.

Agora o nosso JS:

Tentei comentar os pontos mais importantes do código, no exemplo acima o usuário pode cadastrar as tasks que serão vinculadas uma data, quando o usuário clica no item da lista a propriedade “data-done” muda entre true ou false. caso o usuário queira limpar sua listas de task clica no botão “Limpar tarefas…” o código irá varrer da lista os itens com valor da propriedade data-done igual a true e retirar da lista.

Além do LocalStorage temos o SessionStorage, a diferença entre os dois é que o sessionStorage como o nome sugere ele guarda as informações apenas na seção ou seja no caso de um app mobile, quando o app é finalizado a informação é removida.

Use o Input type apropriado para cada tipo de dado

Com o HTML5 foram introduzidos os novos inputs types isso representou um ganho enorme para os usuários mobile que utilizam formulários em seu app e site, utilizar o input type correto é muito importante para experiência do usuário. Nesse tutorial vou listar os principais inputs type para você utilizar em sua aplicação.

date

Este campo é preparado para receber uma data, será exibido para o usuário um calendário para cadastrar a informação. O resultado da utilização do input é o seguinte:

IMG_00000575

time

Este campo campo é utilizado para realizar cadastro de hora. Da mesma forma do date ele irá habilitar um interface adaptada para cadastro da informação.

IMG_00000576

month

Campo é similar ao date mas resgata apenas a entrada de mês e ano sem o time zone.

IMG_00000572

number

Input para cadastro específico de números, para o usuário mobile ele exibe apenas o teclado numérico como a imagem a seguir:
input_number

range

Cria um elemento slide para receber um valor dentro de um intervalo especificado pelas propriedades min e max.

range

color

Permite ao usuário selecionar uma cor específica retornando um valor hexadecimal.

IMG_00000571

url

Este elemento cria uma validação para url em invoca um teclado específico para o cadastro da info.

email

Assim como o type url esse item realiza uma validação esperando uma info com @. Caso o usuário tente cadastrar uma informação inválida teremos o seguinte alerta:

IMG_00000582

tel

Input Similar ao number com apenas números, mas com o teclado semelhante ao discador:

IMG_00000581

search

Neste campo é adicionado um “x” no canto esquerdo quando é adicionado algum conteúdo, o “x” tem a função de limpar o conteúdo. Como o nome sugere este Input é utilizado em campos de busca.

search

Esse itens além de ter o suporte no Blackberry 10 também tem suporte nas maiorias dos browsers e muito coisa nova esta vindo por ai. Além de novos inputs temos novas propriedades que será o tema do próximo post sobre input.

O código dos exemplos confere aqui :

https://github.com/fellyph/Tutorial-bbUI/tree/master/tutorial-input/www

O último encontro do ano – Dev Group São Paulo

E lá se foi mais um ano e nós do dev group São Paulo vamos comemorar mais um que se passa, muito cliche essa frase mas sempre bom confraternizar. E vamos fechar o ano com um Happy Hour especial no dia 19 de dezembro as 19h e todos estão convidados.

E o local do nosso encontro será no Ibotirama 2004:
Rua Augusta, 1236
Consolação
São Paulo

Mapa:

http://www.ibotiramabar.com.br/mapa_acesso3.html?f=q&source=s_q&hl=pt-BR&geocode=&q=rua+augusta,+1236,+consola%E7%E3o,+s%E3o+paulo&sll=-14.179186,-50.449219&sspn=104.33955,228.339844&ie=UTF8&z=17&iwloc=A