terça-feira, 2 de maio de 2017

Introdução ao Cordova

O Apache Cordova é uma framework gratuita e de código aberto para criar apps multiplataformas usando Html 5. Este tipo de aplicação é também chamado de app híbrido.

O Html sempre permitiu criar aplicações multiplataformas tendo navegadores como clientes, mas carecia de ter acesso às funcionalidades nativas do celular (Câmera, acesso aos contatos, GPS) – o Cordova veio preencher esta lacuna. Mais recentemente o Progressive Web Apps também vem atender esta mesma situação, sem necessidade de publicar app em loja.

O Apache Cordova consiste nos seguintes componentes:

  1. Código fonte para um container de aplicação nativo, para cada plataforma móvel suportada;
  2. Conjunto de Apis Core que provê à aplicação web acesso às funcionalidades nativas do dispositivo, que normalmente não são suportadas por aplicações no navegador;
  3. Conjunto de ferramentas para gerenciar
    1. processo de criação de aplicação
    2. o ciclo de vidas de plugins
    3. construir aplicações nativas (com o uso das SDKs nativas)
    4. testar aplicações em emuladores e simuladores

A aplicação nativa do Cordova contém um Web View (componente Nativo que permite navegar em páginas). Quando a aplicação é iniciada, ela abre a página inicial (html) e segue o fluxo em um navegador padrão, podendo carregar mais recursos (javascript, imagens, json) e modificar a página dinamicamente.

Vantagens do Cordova

  1. Fácil de aprender, se você for um desenvolvedor web poderá utilizar seu conhecimento para gerar um app
  2. Acesso às funcionalidades nativas
  3. Gratuito
  4. Código aberto
  5. Grande comunidade, com mais de 50.000 perguntas feitas no stackflow http://stackoverflow.com/tags/cordova/info
  6. Escreve uma vez e pode fazer múltiplas distribuições

Desvantagens

  1. Documentação pobre
  2. Mais lento que o nativo
  3. Precisa usar outra framework para os componentes (Ionic etc), já que o Cordova é apenas um Wrapper
  4. Bugs no plugin
  5. Nem todos dispositivos são iguais, e o acesso as funcionalidades do celular pode ser diferente


 

Qual a Diferença de Cordova e Phonegap?

Phonegap é o nome do projeto original, criado pela startup Nitobi por volta de 2009. Em 2011 a empresa foi comprada pela Adobe e o o código aberto do que veio a se tornar o Cordova foi doado ao Apache Foundation.

Hoje o Phonegap é uma distribuição de Cordova mantida pela Adobe.

Como funciona o Cordova?

A interface do Cordova é um web view (componente que permite navegação). A compilação do Cordova apenas pega o Html, CSS e Javascript e disponibiliza juntamente com a App, como recursos normais acessíveis por qualquer navegador.

Funcionalidade Nativa do Dispositivo

O acesso a funcionalidades nativas dos dispositivos é feito por plugins, que disponibilizam uma API para o Javascript. Estes plugins são escritos em códigos nativos, e por isso é necessário ter instalado o SDK das diferentes plataforms que você pretende distribuir.
Há plugins oficiais da comunidade (que tem o prefixo cordova-plugin) e os não oficiais.

O que é possível construir com o Cordova?

Praticamente qualquer tipo de aplicação, mas o Cordova é melhor em buscar dados no servidor, mostrar para o usuário e reagir a entrada de informações.
Também é possível criar apps com base de dados local, como o LokiJS

Limitações

Desempenho

Como o acesso às funcionalidades nativas dependem de plugins, não é interessante criar aplicativos que dependem exclusivamente de CPU e GPU

Disponibilidade de Plugins

Se algum plugin para uma funcionalidade não estiver disponível, você precisará de cria-lo ou esperar alguém fazê-lo.

Web View

O Web view é uma funcionalidade específica de cada plataforma, e por isso pode ter comportamento diferente.
Se necessário é possível utilizar o CrossWalk para ter um web view customizado.

Formas de desenvolvimento

Cross-platform (CLI) workflow: mais indicado se você deseja criar apps multiplataformas.
A linha de comando copia os arquivos necessários para cada plataformas nos subdiretórios corretos e as configurações necessárias, abstraindo os scripts shell de baixo nível.

Platform-centered workflow: quando estiver focando em uma única plataforma e precisa modificar baixo nível. Você poderá misturar componentes nativos com componentes Cordova baseado na Web.

Ao mudar a forma de desenvolvimento do Cross-Plataform (CLI) para a opção específica é um caminho sem volta.

Compilação

É possível fazer o build da aplicação local ou no Phonegap Build Service, que gera os binários para você sem precisar tem o específico de cada plataforma – como no caso do IOS que demanda um Mac.

Referências para o Post

An Introduction to Cordova: Basics por Wernher-Bel Ancheta em Janeiro de 2016

Introduction to Apache Cordova por John M. Wargo em Julho de 2014 com 8 páginas de informações

Curso Building an App With Cordova por Reginald Dawson de Novembro de 2015 com duas aulas iniciais gratuitas e o vídeo abaixo, que mostra mais um pouco sobre configuração de ambiente, criação do Html para o Cordova e resultado para o emulador:

Curso online de Cordova & PhoneGap: Apps mobile com HTML, CSS e JS por Sérgio Lopes com a primeira aula disponível gratuitamente

Curso Multiplatform Mobile App Development with Web Technologies no Coursera

sábado, 8 de abril de 2017

Fontes de estudo de Regex

Busca em textos é uma tarefa rotineira, não somente para a programação. Pode ser para buscar conteúdo para encontrar uma informação relevante, validar alguma entrada de dados ou filtrar informação a ser processada por um software. Para todas as tarefas o Regular Expression (Regex) pode ajudar e há bons cursos para aprendizagem:

Curso de Regex no CodeSchool (Parte Introdutória é gratuita)
https://www.codeschool.com/courses/breaking-the-ice-with-regular-expressions

Curso de Regex com algumas aulas gratuitas:
https://www.lynda.com/Regular-Expressions-tutorials/Using-Regular-Expressions/85870-2.html

Tutorial de Regex com introdução e vários exercícios que podem ser praticados no próprio navegador:
http://regextutorials.com/

Ferramenta para testar expressões Regex:
http://www.regexpal.com/

Tabela com algumas expressões:
https://www.cheatography.com/davechild/cheat-sheets/regular-expressions/

Exercícios para treinar Regex:
https://www.hackerrank.com/domains/regex/re-introduction


Algumas anotações sobre alguns recursos

Repetição

Permite definir repetir a busca do caractere anteriormente informado
  • + = encontra uma ou mais repetições do caractere anterior
  • * = encontra zero ou mais repetições do caractere anterior
  • ? = o caractere anterior se torna opcional
  • {min,max} retorna o número de repetições definidos
    • {3,} encontra no mínimo 3 caracteres
    • {,2} encontra no máximo 2 caracteres
    • {4,5} encontra de 4 a 5

Symbol Set (Grupo de símbolos)

Define um conjunto de caracteres a serem considerados na busca
  • /[a-z]/ = considerada qualquer caractere de a até z
  • /[a-zA-Z]/ = considerada qualquer caractere de a até z ou de A até Z, a ordem de caractere aqui não faz diferença
  • /[a-z]/i = acha a mesma coisa do anterior. o i é um modificador para informar que é case insensitive

Exclusão

  • ^ = Para definir uma exceção de caractere
  • /[^abc]/ = encontra qualquer caracter exceto abc

Pré definidos

\s = acha espaço, tab, nova linha
\w = mesma coisa de letras e números /[a-zA-Z0-9]
\d = mesma coisa de /[0-9]/
\D = qualquer coisa diferente /[0-9]/

Posição

Encontra considerando posição do texto
  • ^ = começo de linha
  • $ = término de linha

Agrupar Pesquisas
  • () cria um grupo que pode ser usado depois
  • \1,\2 repete a busca do grupo já citado
  • (?=CARACTER) busca que olha o próximo caracter sem adiciona-lo na seleção
  • Para usar o grupo do regex para substituição, basta usar $1 para aproveitar o grupo
    (?:expressão) Para ignorar o grupo para reutilização ou substituição

quinta-feira, 23 de março de 2017

Hospedagem com o Firebase

O Firebase é uma opção bastante simples de se utilizar, especialmente se você estiver montando MVP ou quer disponibilizar um teste rápido na Web. Com a ideia de ser serverless (facilitar a vida do desenvolvedor em não criar um backend), simplifica-se o desenvolvimento de cenários sem necessidades de recursos além de armazenamento por exemplo.

Toda as funcionalidades da hospedagem estão listadas em Firebase Hosting:

  • Atendimento em uma conexão segura (SSL configurado por padrão, o que já atende em protótipos de Progressive Web Apps)
  • Entrega rápida de conteúdo (por usar SSD e CDN parar entrega ao usuário)
  • Implementação rápida com o uso de  Linha de comando
  • Reversões com um clique, mantendo históricos de atualizações
  • Versão de entrada gratuita, independente de tempo. Para ver mais detalhes veja em Firebase Princing.
  • Importante: Hospedagem limitada a conteúdo estático. Ou seja, nada de rodar sua aplicação web com Node.Js por exemplo

Linha de comando

Os comando do Firebase CLI podem ser conhecidos em Referência da Firebase CLI

Instalando o Firebase CLI:

  1. É necessário ter o Node.Js instalado
  2. Instalar o módulo : npm install -g firebase-tools

Um resumo para colocar um site em produção seria:

  1. firebase init (Cria a aplicação, com perguntas em passo a passa)
    1. Por padrão, a aplicação acessa o um subdiretório public
  2. firebase serve (Inicia um servidor local web, para testar a aplicação)
  3. firebase deploy (Para publicar a aplicação)
    1. É possível utilizar o argumento –only para orientar a configuração direcionada a hosting, database e storage

O Firebase ainda oferece serviços para Armazenamento e Base de Dados.

É simples e não é bala de prata! Se sua aplicação precisa de escalar conheça quem começou com o MVP no Firebase e teve dificuldades depois. Veja o post Reasons Not To Use Firebase e uma boa resposta da pergunta When is Firebase not a good choice? no Quora para entender até quando utilizar o Firebase.