Desenvolvimento de aplicações Mobile
Híbridas
Giuliano Prado de Morais Giglio
giucontato@gmail.com
www.giulianoti.tk
Sobre mim...
❏ Desenvolvedor há quase 25 anos.
❏ Certified Java, Oracle DB, PMBOK
❏ Mestre em Ciência da Computação pela UFF
❏ Consultor Portugal Telecom, Thomsons Reuters, Handycom, Provider IT
❏ Um dos poucos fãs restantes de Fórmula 1 e Rock’n Roll :)
E sobre você?
❏ Estuda na área de TI?
❏ Trabalha com TI?
❏ Sabe programação para a web?
❏ É o cara do JavaScript? (Não vale só JQuery ;} )
❏ Já fez um app para mobile?
Bem vindo!
Programa
1. Introdução ao Desenvolvimento de Dispositivos móveis
2. Ambiente para o desenvolvimento de Aplicativos para Dispositivos móveis 3. Desenvolvimento Híbrido de Aplicativos para Dispositivos Móveis
•
Framework de desenvolvimento (Cordova, PhoneGap e Ionic) e tecnologias envolvidas•
Persistência de dados em arquivos, na memória e em bancos de dados4. Estudo de Caso
5. Processo de criação e publicação de um aplicativo
para um dispositivo móvel
Avaliações
● São 03 avaliações
● Média final composta pela média aritmética das avaliações
○
70% - Aprovado
○
< 70% - Prova final
● Datas:
○
1ª aval: 29/04/20 (P2)
○
2ª aval: 24/06/20 (P2)
○
Trabalho: 01/07/20 (P1)
○
Prova final: 15/07/20
Materiais de estudo
● Material usado em aula (slides)
● Livros indicados
● Apostilas
● Se encontram no site indicado:
www.giulianoti.tk →
menu >@UFES → Desenvolvimento Mobile
Em contato
● Precisamos estar todos em contato!
● Muitas informações precisam ser passadas a todos;
● Duas formas:
○
Faça seu cadastro de seu e-mail no site indicado no link @UFES. Clique no link de cadastro
○
Em seu celular, instale o aplicativo EDMODO e crie sua conta.
■
Adicione a nossa classe pelo código
sjne3m
Em contato
Adicionando a classe (grupo)
1 2
3
Desenvolvimento de aplicações Mobile Híbridas
Aula 01 – “Mobiling”
Giuliano Prado de Morais Giglio
giucontato@gmail.com
www.giulianoti.tk
Introdução | Treinamento
❏ Discutir conceitos de desenvolvimento para dispositivos móveis.
❏ Em especial as soluções híbridas.
❏ Conhecer Apache Cordova
❏ Aprender a:
❏ Organizar
❏ Construir
❏ Testar
❏ Acessar recursos na nuvem
❏ Salvar arquivos locais
❏ Usar bancos de dados
❏ Utilizar recursos de hardware (Câmera, GPS, etc...)
❏ Por meio de um Estudo de Caso!
Introdução | Treinamento
❏ O que eu vou precisar?
❏ Recomendamos um notebook (Windows, Mac ou Linux)
❏ Java JDK 8+
❏ http://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads- 2133151.html
❏ Gradle
❏ https://gradle.org/gradle-download/
❏ Node e NPM
❏ https://nodejs.org/en/download/
❏ Android Studio
❏ https://developer.android.com/studio/index.html
❏ Navegador Chrome
❏ https://www.google.com.br/chrome/browser/desktop/
❏ Um editor de texto avançado, à sua escolha.
❏ Ex: VSCode, Notepad++, Sublime, Gedit, Atom….
❏ Na dúvida instale o https://code.visualstudio.com/
Introdução | Mobilidade....
1973
Motorola apresenta o primeiro telefone celular.
1984
Nokia apresenta o Mobira Talkman
1992
Nókia lança o primeiro telefone com tamanho
“digital”
Dos
90s
aos00s
Nokia 5110, 8210, RAZR V3...
2002
RIM Blackberry 5810 (Voltado a dados, suporte a ligações)
2000
Ericsson R380 primeiro aparelho vendido como
“smartphone”
2007
Primeiro iPhone
2008
Primeiro Android Google G1
Mobilidade
Introdução | Popularização dos smartphones...
Explosão de Dispositivos
Popularização dos Smartphone
Introdução | Popularização dos smartphones...
Conectividade
1980s
23.000 - 1.4M assinantes 2.4 kpbs velocidade
$ 3.995 preço do celular Não havia transmissão de dados
1990s 91M assinantes 64 kpbs velocidade 35 SMS por americano Baixar 1 mp3 de 3
minutos em 10 minutos.
2000s 2.7B assinantes
144 kpbs a 2Mbps vel.
144 SMS por americano Baixar 1 mp3 de 3
minutos em menos de 1 minuto.
Streaming
2010s
50% dos 7B habitantes possuem 4G.
64 kpbs velocidade Baixar 1 mp3 de 3
minutos em 15 segundos.
Baixar 1 filme de 2h em 5 minutos.
Acesso a música, vídeo, e jogos via streaming.
Armazenamento
Wearables “Vestíveis” | Breve história...
❏ Dispositivos computacionais pervasivos
❏ Relógios, pulseiras, chapéus, jaquetas, óculos…
❏ Ideias de dispositivos vestíveis surgiram 1980s.
❏ Técnologias móveis viabilizaram esses conceitos.
❏ Android Wearable
❏ Lançado pelo Google em 2014
❏ WatchOS
❏ Lançando pela Apple junto com o
iWatch, em 2015.
Wearables “Vestíveis” | Algumas soluções interessantes
TomTom
Equipamentos esportivos
NUZZLE
Coleira
“Invisibles”
Smart “Tatoos”
Smart “Home”
Casas Inteligentes
SmartTVs
❏ Diferentes Sistemas Operacionais
❏ Android TV
❏ Apple TV
❏ Tizen (Samsung)
❏ WebOS (LG)
❏ Suporte a aplicativos.
❏ Lojas
❏ Lojas de Conteúdo
❏ Jogos por streaming
❏ Substituição de Consoles?
Carros Inteligentes
Computação “Ubíqua”
❏ Conceito de engenharia de software e ciência da computação onde a
computação não acontece somente em desktops e notebooks, e sim em todos os lugares.
❏ Interações acontecem por meio de vários dispositivos.
❏ Entrada e Saída acontecem por meio de
sensores, internet, entrada do usuários,
etc.
Internet das Coisas | “IoT”
Quantidade de Informação | “Big Data”
Quantidade de Informação | “Big Data”
98.000+tweets
695.000+atualizações de status
11+ milhões mensagens instantâneas 700.000 buscas no Google
168+ milhões e-mails enviados 1.820+ TB de dados gerados
A cada 60 segundos...
Mercado Móvel | Alguns números
❏ Mercado de Aplicativos deve chegar a 190 bi em 2020.
https://www.statista.com/topics/1002/mobile-app-usage/
Mercado Móvel | Alguns números
❏ Uso do aplicativo x uso da versão em web para dispositivos móveis.
https://www.statista.com/topics/1002/mobile-app-usage/
Mercado Móvel | Alguns números
❏ Crescimento no número de Downloads de Apps na Apple Store
https://www.statista.com/topics/1002/mobile-app-usage/
Mercado Móvel | Alguns números
❏ Tempo gasto por tipo de aplicativo.
https://www.statista.com/topics/1002/mobile-app-usage/
Mercado Móvel | No Brasil
https://www.serasaexperian.com.br/amplie-seus-conhecimentos/blog/o-mercado-mobile-brasileiro-em-numeros
Mercado Móvel | No Brasil
https://www.serasaexperian.com.br/amplie-seus-conhecimentos/blog/o-mercado-mobile-brasileiro-em-numeros
Mercado Móvel | No Brasil
https://www.serasaexperian.com.br/amplie-seus-conhecimentos/blog/o-mercado-mobile-brasileiro-em-numeros
Monetização | Como ganhar dinheiro com aplicativos?
Monetização | Venda direta
❏ Lojas de aplicativos oferecem suporte a aplicativos pagos.
❏ Pagamento é feito pela plataforma.
❏ Parte da receita é dividida com a loja.
O Minecraft Pocket Edition é o aplicativo com maior valor de venda direta na Google Play Store.
Oficialmente lançado em 2011, a Minecraft é um jogo, e sai por US $ 6,99 por download.
Monetização | “FREEMIUM”
❏ Download é gratuito.
❏ Acesso aos recursos básicos liberados.
❏ Recursos avançados pagos no App.
❏ Lojas suportam APIs de pagamento.
O Clash os Clains permite que os jogadores joguem de graça, mas diversos recursos e avanços no jogo são facilitados por meio de pagamento.
Monetização | Assinatura
❏ Download gratuito.
❏ Todas as funcionalidades são bloqueadas por padrão.
❏ Pagamento regular para manter o acesso ao App.
O app Luminosity possui exercícios para
desenvolvimento de habilidades lógicas, possui assinatura mensal de $ 11.99 e anual de $ 59.99.
Possui avaliação 5 estrelas por mais de 93 mil usuários.
Monetização | CROWDFUNDING
❏ Modelo colaborativo.
❏ Ideias são apresentadas em plataformas de Crowdfunding
❏ O valor necessário para execução é apresentado.
❏ Pessoas interessadas pagam pela ideia.
A Startuo Shadow é um exemplo, com o aplicativo de monitoramento de sono obtiveram $ 82.000 de quase 4 mil usuários dispostos a pagar pelo
aplicativo.
Monetização | Advertising
❏ Download gratuito.
❏ Todos os recursos são liberados gratuitamente.
❏ Propagandas são exibidas durante o uso do app.
❏ Método utilizado por 63% dos Apps.
❏ Mercado de 53.4 bilhões de dólares.
Já te convenci a estudar
desenvolvimento para dispositivos
móveis?
Ecossistemas Móveis | Principais Plataformas
Android iOS Windows Phone
Android | Principais Características
❏ Plataforma defendida pelo Google e Mantido pela Open Handset Alliance.
❏ “Accelerate innovation in mobile and offer consumers a richer, less expensive, and better mobile experience.”
❏ Desenvolvido em C (Core) C++ e Java (UI)
❏ Código fonte livre com componentes proprietários.
❏ Foco em smartphones, tablet computers, Android TV, Android Auto and Android Wear.
❏ Versão mais nova: Android Nougat (7.*)
❏ Principais fabricantes HTC, Samsung, LG, Asus,
Motorola (Lenovo).
Android | Principais Características
❏ Compatibility Test Suite (CTS)
❏ Conjunto de testes automatizados e especificações técnicas.
❏ Define quem pode ser chamado de “Android”.
❏ Google não licencia seus softwares proprietários para plataformas não compatíveis.
❏ Não há Google Play!, GMail, Google Maps...
❏ Existem plataformas baseadas em Android não licenciadas.
❏ Kindle Fire
❏ Android != Linux!
❏ É baseado no Linux
❏ Não é uma distribuição como
o Ubuntu, Fedora, Arch...
Android | Desenvolvimento
❏ Ferramentas, frameworks e SDK gratuitos.
❏ Android Studio.
❏ Android SDK
❏ Linguagem de desenvolvimento utilizada é Java (Java 6)
❏ Outras linguagens que rodam na JVM possuem portabilidade:
❏ Scala, Groovy, Kotlin…
❏ Diversas soluções híbridas compatíveis
❏ Ionic, PhoneGap, Xamarin*
❏ Muitos frameworks, componentes e bibliotecas livres disponíveis.
❏ Github
Dificuldades
❏ Framework de desenvolvimento verboso
❏ Muito trabalho mesmo para tarefas simples.
❏ A linguagem predominante é uma versão antiga do Java.
❏ Embora existam várias linguagens
compatíveis, usam o mesmo framework.
❏ Ciclo de vida específico.
iOS | Principais Características
❏ Surgiu junto com o iPhone.
❏ Baseado no MacOSX
❏ Baseado em Unix (Darwin)
❏ Chamado de iPhone OS
❏ Posteriormente, mudou de nome para iOS.
❏ Desenvolvido em C, C++ (core), Objective-C e, mais recentemente, Swift (UI, Apps).
❏ Código fonte fechado, proprietário.
❏ Com componentes de código aberto.
❏ Licenciado junto ao Hardware da Apple.
❏ Desenvolvido para tablets e smartphone.
❏ Base para o tvOS, watchOS…
iOS | Desenvolvimento
❏ Ferramentas, frameworks e SDKs gratuitos.
❏ Mas rodam apenas em OS X.
❏ Que rodam apenas em hardware Apple.
❏ XCode
❏ Objective-C, Swift
❏ Muitos frameworks, componentes e bibliotecas livres disponíveis.
❏ Github
Dificuldades
❏ Necessidade de possuir hardware da Apple.
❏ Ciclo de vida específico.
❏ Muita base de código e documentação em
Objective C.
Windows Mobile | Principais Características
❏ Desenvolvido pela Microsoft
❏ Baseado no Windows para Desktop
❏ Desenvolvido em C, C++ (core) e C# (UI, Apps)
❏ Código fonte fechado, proprietário.
❏ É sucessor de outras tentativas da microsoft no mundo móvel: Windows Mobile, Zune, Kin, Pocket PC.
❏ Versão base compartilhada com a versão para desktop e XBox.
❏ Aplicações podem executar em mais de um ambiente.
Windows Mobile | Desenvolvimento
❏ Visual Studio
❏ Roda apenas no Windows.
❏ Suporte às múltiplas linguagens suportadas pelo .NET:
❏ C#, Basic, F#, C++
❏ Muitos frameworks, componentes e bibliotecas livres disponíveis.
❏ Github
Dificuldades
❏ Quebra de versões
❏ Quem usa Windows Mobile?
Escrever bons aplicativos para todas as plataformas é
complexo e MUITO trabalhoso!
Web App responsivos
❏ Diante da dificuldade de atingir múltiplas plataformas, vários
desenvolvedores e empresas optaram por web apps responsivas.
❏ A aplicação nada mais é que uma página web
❏ Quando instalada no dispositivo é apenas uma “casca” para o navegador.
❏ HTML5, CSS, JavaScript...
Web App responsivos | Vantagens
❏ Utiliza-se os mesmos conhecimentos da Web
❏ Atualização rápida e independente de lojas e do usuário.
❏ Desenvolve-se apenas uma vez
❏ Compatível com web, telefones, tablets, etc.
❏ Não é necessário atender nenhuma especificidade de
plataforma.
Web App responsivos | Desvantagens
❏ É sempre necessário estar conectado na internet para abrir o App no dispositivo.
❏ É necessário o ‘download’ da aplicação em todo acesso a ela.
❏ Não dá para confiar nas redes móveis…
❏ Não é possível acessar nenhum recurso do dispositivo além do que é oferecido em um browser.
❏ Não é possível customizar de forma nativa ou através de plugins o
comportamento do app em alguma plataforma.
É difícil entregar uma experiência compatível com a
nativa usando um Web App Responsivo...
Desenvolvimento Híbrido | Conceitos
❏ Aproveitar as vantagens das Web Apps Responsivas
❏ Tecnologia da Web (HTML5, JavaScript, CSS...)
❏ Desenvolver uma vez e conseguir executar em diferentes plataformas.
❏ Sem as limitações dessas web apps:
❏ Disponíveis no aparelho, mesmo sem internet.
❏ Acessar recursos de hardware
❏ Customizar comportamentos nativos específicos de plataformas
❏ Solução híbrida
❏ Proposta de utilização de um navegador para executar o App.
❏ Os arquivos da página web ficam disponibilizados no dispositivo.
❏ Criação de plugins para dar acesso, via JavaScript, a recursos nativos:
❏ Câmera, GPS, biometria...
Desenvolvimento Híbrido | PhoneGap
❏ História:
❏ Surgiu em 2008, criado pela Nitobi Software
❏ Comprada pela Adobe em 2011, junto com toda a Nitobi
❏ 2011 código é doada à Apache Foundation
❏ Se tornou o Apache Cordova
❏ PhoneGap hoje
❏ Oferece Recursos adicionais e facilidades sobre o
Apache Cordova.
Desenvolvimento Híbrido | Ionic
❏ História
❏ Criado em 2013
❏ Junção de frameworks estabelecidos
❏ AngularJS, Bootstrap
❏ Baseado no Apache Cordova
❏ Por que?
❏ Foco em produtividade.
❏ Componentização.d
Desenvolvimento Híbrido | Intel XDK
❏ História
❏ Criado em 2013
❏ Oferece um kit robusto de ferramentas
❏ Desenho de interface
❏ Edição de código
❏ Sem linha de comando :)
❏ Baseado em Apache Cordova
❏ Por que Intel XDK?
❏ Ambiente integrado
❏ Sem necessidade de domínio de linha de comando.
❏ Facilidades adicionadas à execução e empacotamento de aplicativos.
Aplicações Cross platform
❏ Além das aplicações híbridas, nativas e web apps responsivas existem as soluções cross-plataforma.
❏ São soluções em que se escreve código neutro e ele é compilado, de forma nativa para diferentes plataformas.
❏ Xamarin
❏ Código escrito em C#
❏ Suporta iOS, Android e Windows Mobile
❏ Ambiente de desenvolvimento completo
❏ Suporte a criação de código nativo para recursos específicos.
❏ ReactNative
❏ Código escrito em “HTML” e JavaScript
❏ Bind de marcação com componentes nativos.
❏ Compatível com iOS, Android e Windows Mobile.
❏ Linguagem e framework conhecidos pela comunidade.
São muitas opções!!! Qual a melhor?
Por onde começar?
Apache Cordova | Introdução
❏ É a base para várias soluções híbridas
❏ PhoneGap, Ionic, Intel XDK…
❏ Ambiente de desenvolvimento livre
❏ Roda em Windows, Linux e Mac.
❏ Amplo suporte a plugins
❏ Constantemente atualizados.
❏ Comunidade ativa.
❏ Muitos plugins de terceiros no GitHub
❏ Livre
Apache Cordova | Arquitetura
Desenvolvimento Web | O que você precisa saber?
❏ Utilizado para definir o leiaute das páginas.
❏ Utilizado com base em tags no formato
<footer>...</footer>
❏ Define elementos da página.
❏ Suporta marcações de estrutura (cabeçalho, ênfase, barra de
navegação, imagem, botões, etc).
❏ Utilizado para definir a apresentação das páginas.
❏ Define regras de formatação.
❏ Existem frameworks responsivos: Bootstrap.
❏ Muitos leiautes prontos.
❏ Temas para dispositivos móveis (Material e Flat design)
❏ Adiciona comportamento dinâmicos às páginas.
❏ Provavelmente é, hoje, a principal linguagem de programação do mundo.
❏ Ubíqua.
❏ Infinidade de ferramentas, editores, bibliotecas e recursos para aprender e utilizar.
❏ Dica: Domine JavaScript.
