Como criar um aplicativo sem saber programação nativa (Java, Swift ou Objective C)

Como criar um aplicativo pra Android e iOS sem saber Java, Swift ou ObjectiveC

Introdução

Existem diversas maneiras de desenvolver aplicações sem utilizar linguagens nativas. Nesse artigo vou citar especificamente o Apache Cordova e o framework Ionic 2 que roda sobre ele.

Top Empresas - App Híbrido

Princípio

Alguns anos atrás, a única forma de desenvolver aplicativos era utilizando as linguagens, bibliotecas e padrões nativos de cada plataforma. Desenvolvedores Android geralmente utilizam Java, e desenvolvedores iOS utilizam Swift (anteriormente utilizavam Objective C, até a Apple lançar o Swift no mercado, que traz diversas melhorias como facilidade de programação funcional, aumento de performance, diminuição na curva de aprendizado e assim por diante).

Em meados de 2008, surgiu o Phonegap. Basicamente, ele permitia que o desenvolvedor tivesse acesso à uma WebView, onde iria desenvolver todo o visual e lógica da aplicação utilizando HTML, CSS e JAVASCRIPT. O legal era que o Phonegap compilava uma aplicação nativa com a WebView, o que permite acesso aos recursos nativos do aparelho por intermédio de plugins, como Câmera, Vibração, Acelerômetros, Giroscópios, etc. 

Além disso, um dos maiores ganhos é o fato de ser possível escrever o código apenas uma vez, e compilar para diversas plataformas como Android, Windows, iOS e outros com poucas ou até mesmo nenhuma alteração.

Logo em seguida, em 2009, a Apple liberou o desenvolvimento de aplicações com Phonegap. Desenvolvedores Web, que geralmente possuem bastante conhecimento de HTML, CSS e JAVASCRIPT começaram a utilizar essa tecnologia para desenvolvimento de aplicações, que são denominadas "Aplicações Híbridas", por serem um misto de tecnologia Web e tecnologia nativa.

O projeto fez grande sucesso e em 2011 foi comprado pela adobe, e liberado sob a licença Apache, como o nome de Apache Cordova. O nome PhoneGap foi reservado pela Adobe para o seu serviço de build na nuvem, que permite compilar para o iOS, por exemplo, sem a necessidade de um Mac.

É mais lento? Perco performance? Compensa?

Após o surgimento das aplicações híbridas, surgiram diversos movimentos de crítica em relação à performance, pelo fato de não ser nativo, etc. No princípio as diferenças de performance eram notáveis, principalmente pelos Smartphones da época serem mais primitivos.

Hoje, oito anos depois, muita coisa melhorou: tanto a tecnologia do Apache Cordova, que é exaustivamente melhorada e atualizada, quanto os aparelhos que rodam aplicações híbridas de maneira que as diferenças tornam-se imperceptíveis.

É claro que existem áreas como Games, 3D, etc em que a preferência recai sobre o nativo. Cada caso deve ser analisado. Fato é que apesar de trazer diversos benefícios, é uma tecnologia que deve ser muito bem aplicada, assim como qualquer outra, pra trazer ótimos resultados.

Ou seja, não abandone o nativo. Analise. É uma aplicação crítica, que demanda performance ferrenha, animações incríveis, etc? Vá de nativo. É uma aplicação mais simples, com lista de dados baixados do servidor, perfis, etc? O Híbrido resolve com certeza. Algumas aplicações híbridas famosas: Instagram, Twitter. A primeira versão do Uber eu lembro que era híbrido também, mas não sei informar se as novas versões ainda são.

Ionic 2

O Ionic foi lançado em 2013, e rapidamente tornou-se um dos frameworks mais utilizados no mundo do desenvolvimento híbrido. Ele compila o aplicativo utilizando o Cordova, mas poupa o tempo do desenvolvedor trazendo diversas funcionalidades prontas, plugins e desenvolvimento sólido.

A primeira versão do Ionic utilizava o AngularJS 1, um Framework Javascript muito utilizado por desenvolvedores Web, que facilita muito o desenvolvimento SPA (aplicações de página única). O único problema do AngularJS 1 é que possui alguns problemas de performance que prejudicam o desenvolvimento para aparelhos menos potentes.

Recentemente (2016) foi lançado o AngularJS 2, e o Ionic 2 foi idealizado utilizando essa nova versão do framework, trazendo vantagens de performance, programação com TypeScript, compatibilidade com as últimas versões do JavaScript, visual com as últimas técnicas de design, e passou a suportar 3 plataformas: Android, Windows e iOS.

Como isso funciona?

É bem simples. Você vai programar o seu aplicativo usando os recursos do Ionic, que utiliza tecnologias web: HTML, CSS e JavaScript (AngularJS). Se precisar de algum recurso nativo, como a câmera, é só utilizar um plugin (existem os oficiais do Ionic e muitos outros de desenvolvedores independentes).

No final, o Ionic vai utilizar o Apache Cordova para compilar para cada uma das plataformas específicas.

Tiago, você já desenvolveu aplicações híbridas?

Sim, já desenvolvi, vou deixar aqui dois exemplos:

Dia na História
Top Empresas

Como podem ver são aplicações com recursos interessantes como: Localização GPS, Mapas, Login de Usuário, etc.

Quero saber mais sobre isso. Posso falar contigo?

Cooom certezaa!! Me add no skype: tiagosilvapereira1 e no email tiagosilvapereira3@gmail.com e vamos bater altos papos sobre programação. 

Bom é isso aí pessoal. Mais uma carta na manga. Sabe aquele restaurante que te pediu um App de cardápio? Que tal criar ele muito mais rápido, pra várias plataformas e ganhar uma grana legal? É pra se pensar né?

Abraços!!

Links das Tecnologias
Ionic Framework
Ionic 2
Apache Cordova

Responsividade: Projetando para Desktop, Tablets e Smartphones

O que é Responsividade?

Sabe aquele site que você entra pelo celular, e tem que ficar dando "zoom" pra ver as letras e imagens? Além disso, os itens do site parecem perdidos na tela, e é no mínimo chato visualizar os itens e informações. Esses são sites "não-responsivos".

Com a grande popularização de dispositivos móveis, a necessidade de criar sites e aplicações web que se adaptam à qualquer tela cresceu exponencialmente. Pra esse tipo de site, criou-se o termo layout responsivo.

Alguns anos atrás, era comum a criação de dois sites. Um para ser utilizado no computador, e outro pra ser utilizado no celular. Funcionava, mas era pouco prático e dinâmico, além de acarretar outras responsabilidades e problemas, como realizar checagem de dispositivos, redirecionar a página, etc.

Hoje, utilizando técnicas de HTML + CSS, é possível criar sites totalmente responsivos, que se adaptam aos mais variados dispositivos sem nenhum problema.


1. Exemplo de Site que se adapta aos dispositivos

O que devo saber pra criar sites responsivos?

A princípio, deve saber CSS, utilizando os media-queries, que são comandos que delimitam determinadas funcionalidades de acordo com o tamanho da tela. Em outras palavras, as media-queries informam quando determinado comportamento será aplicado dependendo do tamanho da tela do dispositivo.

Exemplos:

/* Aqui especifiquei que a cor da letra do parágrafo é preto, caso não caia nas
condições abaixo */
p {color: black;}

/* Caso esteja em um tablet por exemplo, com largura mínima 768, a cor é vermelho */
@media screen and (min-width: 768px) {
  p {color: red;}
}

/* Em um monitor, a cor seria amarelo */
@media screen and (min-width: 992px) {
  a {color: yellow;}

}

Ao incluir o CSS acima no seu HTML, e acessá-lo em um computador, por exemplo, a cor do texto seria amarelo. Ao acessar no tablet, seria vermelho, e assim por diante. Ou seja, o CSS nos permite especificar comportamentos diferenciados.

Mas são muitas telas e não quero fazer isso na mão

Antes de tudo, gostaria de deixar uma pequena orientação aqui: Antes de partir para o uso de algum framework CSS que facilite tudo isso, aprenda certinho como funcionam as media-queries. Elas serão úteis em várias ocasiões e, nem sempre você precisará de um framework.

Mas, voltando ao assunto, existem sim frameworks CSS que trabalham a parte da responsividade e muitas outras coisas, facilitando a vida do Desenvolvedor. Geralmente trabalham com sistema de Grid, dividindo a tela em linhas e colunas, o que facilita ainda mais o trabalho com responsividade.

Caso já tenha conhecimento de CSS, vale a pena dar uma olhada em alguns desses frameworks e aprender a utilizá-los, pois eles podem sempre agilizar suas tarefas:

Frameworks

Boostrap - O mais conhecido e utilizado atualmente, desenvolvido pelo Twitter

Foundation - Outro Framework muito conhecido e completo

TopCoat - Framework voltado para aplicações Web

Mini-Frameworks - Muito adequados para projetos onde você deseja depender o mínimo de Frameworks, utilizando apenas características básicas como Grids. Seguem alguns:

MinCSS - Possui apenas 995 bytes!! Legal né?

PureCSS - Framework leve e minimalista, para aplicações e sites rápidos. Muito bonito.

Furtive - Outro bem pequeno, menos de 4Kb

Considerações Finais

É isso aí pessoal!! Espero que tenham gostado. Se você está começando agora no desenvolvimento de sites, estude bastante CSS voltado para esta questão de responsividade.

Em breve estarei lançando um post com mais explicações sobre responsividade, provavelmente com a criação de uma pequena página utilizando CSS com Media-Queries e depois, criando a mesma página com algum framework. Fiquem no aguardo. 

E boa sorte nos estudos!! Sucesso. :D