Desenvolvimento de aplicativos móveis
   com Phonegap e Sencha Touch
          Prof. Leonardo Soares




             Campus Garanhuns
                                   S
Sobre o curso

S Carga-horária: 28 horas

S Dias na semana: quinta-feira

S Pré-requisitos:
  S Conhecimento em HTML
  S Conhecimento em JavaScript
  S Conhecimento em Java e Orientação a objetos

S Critérios de aprovação:
  S Projeto do término do curso
  S Até 25% de faltas
Sobre o professor

• Mestre em engenharia de software pela UFCG

• Professor do Instituto Federal de Pernambuco

• Forum Nokia Champion (2007, 2008)
E vocês?


• Como se chamam?

• Quais as perspectivas com o curso?

• Já programam para dispositivos móveis?
Por que estamos neste curso?


• 253 milhões de celulares no Brasil [Anatel/2012]

• 27 milhões são smartphones (14% da população
  brasileira) [MMA-IMA2012]
• Aproximadamente 50 bilhões de downloads de
  aplicativos realizados [Google-Apple/2012]
• Mais  de 5 bilhões de doláres pagos                aos
  desenvolvedores [Google-Apple/2012]
O Que iremos aprender no
              curso?

S O que são aplicativos móveis

S Rápidamente HTML e Javascript

S Padrões de projeto

S Diferença entre aplicações nativas e aplicações móveis para
  web

S Desenvolvimento de aplicações com PhoneGap

S Desenvolvimento de aplicações com Sencha Touch 2

S Integração de ambos
Afinal, o que são
                    smartphones?

•   Combinação dos recursos de telefones
    móveis com a computação (daí surge o termo
    smart)
•   Principais características destes aparelhos:
      •   Sistema operacional aberto a aplicações
      •   Telas maiores que o convencional
      •   Teclado QWERTY ou touch-screen
      •   Conectividade de alta velocidade: 3G, WI-FI

•   O uso como telefone praticamente passa
    para o segundo plano
E tablets?


  • Computador móvel com tela
    touchscreen de 5” a 12”
  • Removemos as limitação das telas
    pequenas dos smartphones,
    aproveitando todos seus benefícios
  • Mais processamento e memória em
    comparação aos smartphones
  • Mesmo sistema operacional
Usos de smartphones e
              tablets

•   Como uma extensão de nosso computador
•   Para uso de recursos de GPS e câmera
•   Como nossa carteira (NFC)
•   Como forma de acompanhar nossos exercícios físicos
•   Avaliar a situação de nosso carro
•   Dentre outras possibilidades…
Qual o nosso alvo com o
desenvolvimento para dispositivos
            móveis
Mas também pode incluir…
O Que precisamos saber?


• Precisamos entender o que muda em relação ao
  desenvolvimento para desktop

• Conhecer os sistemas operacionais móveis
  existentes

• Definir a linguagem de programação que será
  utilizada
O Que muda em relação ao
desenvolvimento tradicional?


S Nossos aplicativos passarão a “ir” com seus usuários

S Em geral são adaptadas a estes dispositivos

S Podemos trazer o diferencial de nossa aplicação ao usar
  os recursos que os dispositivos móveis nos oferecem
Aplicações legais
Market share dos sistemas
      operacionais


 Mercado em 2012 (Gartner)
       0%     2%                Symbian
                     5%
                6%
                                RIM

                                iOS
                      19%
                                Microsoft
                           3%   Mobile
       65%
                          0%    Linux

                                Android
Qual linguagem de
       programação utilizar?

S Android – Java e C++

S Windows Phone – C#

S iOS – Objective C

S Dentre outros..
Aplicações nativas


• São desenvolvidas utilizando a linguagem de
  programação padrão suportada pelo sistema
  operacional

• Em geral são mais rápidas e possuem maior acesso
  aos recursos dos dispositivos

• Aplicações são instaladas diretamente no smartphone
  ou tablet

• Normalmente são baixadas através de lojas de
  aplicativos como Play Store ou AppStore
Desenvolvimento de
           aplicações nativas




E para desenvolver para Symbian, Windows Phone, Bada ou Blackberry
Qual o problema?


S Um aplicativo para cada sistema operacional
  S Tempo e custo

S Conhecer várias linguagens de programação
  S Tempo, custo e dificuldade em encontrar pessoal
     capacitado
Qual a solução? Aplicações
              web

S Uma vez prontas funcionam em qualquer browser
  independente de sistema operacional

S Utilizamos apenas uma linguagem, com recursos padronizados
  que facilitam o desenvolvimento

S Porém trazem alguns problemas:
  S Acesso limitado aos recursos do hardware
  S Necessidade de conexão com a Internet
  S Falta de padronização nos componentes visuais da aplicação
  S Não podem ser comercializadas em app stores
Qual a solução? Aplicações
          híbridas
S O ideal seria escrever apenas um código que pudesse
  ser executado/compilado para todas as plataformas

S Melhor a linguagem utilizada fosse fácil de aprender e
  padronizada

S Um intermediário entre as aplicações nativas e
  aplicações para web

S Trás o verdadeiro conceito de Write once, Run anywhere
Aplicações híbridas
Por que desenvolver com
  estes frameworks é legal?

S A curva de aprendizado de HTML, CSS e JS é
  extremamente baixa

S Estamos trabalhando com tecnologias muito recentes

S Há grandes empresas por trás
  S MIT
  S Adobe
  S Micosoft
  S Dentre outras…
Comparativo entre aplicações
  nativas, web e híbridas

               Nativas   Web   Híbridas
   Cross-       Não      Sim     Sim
 plataforma
 Empacotada     Sim      Não     Sim
  App Store     Sim      Não     Sim
   API do       Sim      Não     Sim
 dispositivo
Sencha Touch


S É um framework para construção de aplicativos móveis
  cross-plataform baseados em HTML5, JavaScript e CSS

S Muito utilizado principalmente para construir a interface
  gráfica da aplicação (com um visual similar às aplicações
  nativas)
Interação de um aplicativo
              Sencha


                          Nosso aplicativo




É um browser sem bordas
e botões
Funcionalidades do Sencha
           Touch
Plataformas suportadas –
      Sencha Touch
Plataformas suportadas –
      Sencha Touch
PhoneGap


S É um framework para construção de aplicativos móveis baseados
  em HTML5, JavaScript e CSS

S Difere do SenchaTouch pelo seu foco ser em oferecer recursos
  nativos dos dispositivos móveis às aplicações que o utilizam

S Sua API em JavaScript faz a ponte entre os recursos nativos dos
  dispositivos (que precisariam ser acessados através de uma
  linguagem de programação nativa) com a nossa aplicação
  HTML/JS
Funcionalidades do PhoneGap
Desenvolvimento com
    PhoneGap
Funcionamento - PhoneGap




           Créditos: Introduction to PhoneGap/Mihail Corlan
Plataformas suportadas -
       PhoneGap
PhoneGap + Sencha Touch




     Créditos: Creating and distributing mobile web applications with PhoneGap/James Pearce
PhoneGap + Sencha Touch




    Créditos: Creating and distributing mobile web applications with PhoneGap/James Pearce

Introdução ao desenvolvimento de aplicativos com PhoneGap e Sencha Touch

  • 1.
    Desenvolvimento de aplicativosmóveis com Phonegap e Sencha Touch Prof. Leonardo Soares Campus Garanhuns S
  • 2.
    Sobre o curso SCarga-horária: 28 horas S Dias na semana: quinta-feira S Pré-requisitos: S Conhecimento em HTML S Conhecimento em JavaScript S Conhecimento em Java e Orientação a objetos S Critérios de aprovação: S Projeto do término do curso S Até 25% de faltas
  • 3.
    Sobre o professor •Mestre em engenharia de software pela UFCG • Professor do Instituto Federal de Pernambuco • Forum Nokia Champion (2007, 2008)
  • 4.
    E vocês? • Comose chamam? • Quais as perspectivas com o curso? • Já programam para dispositivos móveis?
  • 5.
    Por que estamosneste curso? • 253 milhões de celulares no Brasil [Anatel/2012] • 27 milhões são smartphones (14% da população brasileira) [MMA-IMA2012] • Aproximadamente 50 bilhões de downloads de aplicativos realizados [Google-Apple/2012] • Mais de 5 bilhões de doláres pagos aos desenvolvedores [Google-Apple/2012]
  • 6.
    O Que iremosaprender no curso? S O que são aplicativos móveis S Rápidamente HTML e Javascript S Padrões de projeto S Diferença entre aplicações nativas e aplicações móveis para web S Desenvolvimento de aplicações com PhoneGap S Desenvolvimento de aplicações com Sencha Touch 2 S Integração de ambos
  • 7.
    Afinal, o quesão smartphones? • Combinação dos recursos de telefones móveis com a computação (daí surge o termo smart) • Principais características destes aparelhos: • Sistema operacional aberto a aplicações • Telas maiores que o convencional • Teclado QWERTY ou touch-screen • Conectividade de alta velocidade: 3G, WI-FI • O uso como telefone praticamente passa para o segundo plano
  • 8.
    E tablets? • Computador móvel com tela touchscreen de 5” a 12” • Removemos as limitação das telas pequenas dos smartphones, aproveitando todos seus benefícios • Mais processamento e memória em comparação aos smartphones • Mesmo sistema operacional
  • 9.
    Usos de smartphonese tablets • Como uma extensão de nosso computador • Para uso de recursos de GPS e câmera • Como nossa carteira (NFC) • Como forma de acompanhar nossos exercícios físicos • Avaliar a situação de nosso carro • Dentre outras possibilidades…
  • 10.
    Qual o nossoalvo com o desenvolvimento para dispositivos móveis
  • 11.
    Mas também podeincluir…
  • 12.
    O Que precisamossaber? • Precisamos entender o que muda em relação ao desenvolvimento para desktop • Conhecer os sistemas operacionais móveis existentes • Definir a linguagem de programação que será utilizada
  • 13.
    O Que mudaem relação ao desenvolvimento tradicional? S Nossos aplicativos passarão a “ir” com seus usuários S Em geral são adaptadas a estes dispositivos S Podemos trazer o diferencial de nossa aplicação ao usar os recursos que os dispositivos móveis nos oferecem
  • 14.
  • 15.
    Market share dossistemas operacionais Mercado em 2012 (Gartner) 0% 2% Symbian 5% 6% RIM iOS 19% Microsoft 3% Mobile 65% 0% Linux Android
  • 16.
    Qual linguagem de programação utilizar? S Android – Java e C++ S Windows Phone – C# S iOS – Objective C S Dentre outros..
  • 17.
    Aplicações nativas • Sãodesenvolvidas utilizando a linguagem de programação padrão suportada pelo sistema operacional • Em geral são mais rápidas e possuem maior acesso aos recursos dos dispositivos • Aplicações são instaladas diretamente no smartphone ou tablet • Normalmente são baixadas através de lojas de aplicativos como Play Store ou AppStore
  • 18.
    Desenvolvimento de aplicações nativas E para desenvolver para Symbian, Windows Phone, Bada ou Blackberry
  • 19.
    Qual o problema? SUm aplicativo para cada sistema operacional S Tempo e custo S Conhecer várias linguagens de programação S Tempo, custo e dificuldade em encontrar pessoal capacitado
  • 20.
    Qual a solução?Aplicações web S Uma vez prontas funcionam em qualquer browser independente de sistema operacional S Utilizamos apenas uma linguagem, com recursos padronizados que facilitam o desenvolvimento S Porém trazem alguns problemas: S Acesso limitado aos recursos do hardware S Necessidade de conexão com a Internet S Falta de padronização nos componentes visuais da aplicação S Não podem ser comercializadas em app stores
  • 21.
    Qual a solução?Aplicações híbridas S O ideal seria escrever apenas um código que pudesse ser executado/compilado para todas as plataformas S Melhor a linguagem utilizada fosse fácil de aprender e padronizada S Um intermediário entre as aplicações nativas e aplicações para web S Trás o verdadeiro conceito de Write once, Run anywhere
  • 22.
  • 23.
    Por que desenvolvercom estes frameworks é legal? S A curva de aprendizado de HTML, CSS e JS é extremamente baixa S Estamos trabalhando com tecnologias muito recentes S Há grandes empresas por trás S MIT S Adobe S Micosoft S Dentre outras…
  • 24.
    Comparativo entre aplicações nativas, web e híbridas Nativas Web Híbridas Cross- Não Sim Sim plataforma Empacotada Sim Não Sim App Store Sim Não Sim API do Sim Não Sim dispositivo
  • 25.
    Sencha Touch S Éum framework para construção de aplicativos móveis cross-plataform baseados em HTML5, JavaScript e CSS S Muito utilizado principalmente para construir a interface gráfica da aplicação (com um visual similar às aplicações nativas)
  • 26.
    Interação de umaplicativo Sencha Nosso aplicativo É um browser sem bordas e botões
  • 27.
  • 28.
  • 29.
  • 30.
    PhoneGap S É umframework para construção de aplicativos móveis baseados em HTML5, JavaScript e CSS S Difere do SenchaTouch pelo seu foco ser em oferecer recursos nativos dos dispositivos móveis às aplicações que o utilizam S Sua API em JavaScript faz a ponte entre os recursos nativos dos dispositivos (que precisariam ser acessados através de uma linguagem de programação nativa) com a nossa aplicação HTML/JS
  • 31.
  • 32.
  • 33.
    Funcionamento - PhoneGap Créditos: Introduction to PhoneGap/Mihail Corlan
  • 34.
  • 35.
    PhoneGap + SenchaTouch Créditos: Creating and distributing mobile web applications with PhoneGap/James Pearce
  • 36.
    PhoneGap + SenchaTouch Créditos: Creating and distributing mobile web applications with PhoneGap/James Pearce

Notas do Editor

  • #6 Motivaçãopara a criação de aplicativospara smartphones e tablets
  • #8 Seráquesabemos o quesão smartphones?
  • #14 Adaptaraotamanho da telaAdaptaraoteclado e formas de entradaLimitação de bateriaLimitação de espaçoem discoLimitação de rede