PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS

(ESOFT6S)

Henrique Vignando

  • Mestre em Ciências da Computação (UEM)
  • Bacharel em Informática (UEM)
  • Líder técnico e engenheiro de dados e software na Mentorstec
  • 9 anos em desenvolvimento de software
  • 2 anos com engenharia de dados
  • 1 ano com liderança técnica.
  • Palestrante no Pentaho Day 2019.
  • Entusiasta cultural das rotinas e pipelines de dados, arquitetura de software, boas práticas e padronizações
  • Algoritmos e Lógica de Programação I
  • Algoritmos e Lógica de Programação II
  • Estruturas de Dados I
  • Estruturas de Dados II
  • Programação Orientada a Objetos
  • Banco de Dados I
  • Banco de Dados II
  • Programação web

Premissas

Ementa

Ambientes de desenvolvimento (IDEs, linguagens de programação, etc).

Questões de implementação: tamanho da aplicação, fator de forma da tela, compilação para um dispositivo específico ou para dispositivos múltiplos, limitações dos dispositivos.

Programas de desenvolvimento de conteúdo e entretenimento digital para dispositivos móveis.

Bibliotecas de desenvolvimento de programas gráficos para diversas plataformas.

Desenvolvimento de aplicativos multiplataforma.

Objetivos

Aprimorar conceitos relacionados à programação de dispositivos móveis; Desenvolver habilidades de programação para multiplataformas e "internet das coisas"; Criar aplicativos com qualidade e em conformidade com as exigências do mercado digital.

Justificativa

A utilização de dispositivos móveis e a "internet das coisas" são cada vez mais presente, sendo necessário ao aluno que tenha conhecimento nessa área, pois é inteiramente relacionada ao desenvolvimento de sistemas envolvendo a internet.

BIBLIOGRAFIA

MEDNIEKS, Zigurd; DORNIN, Laird; MEIKE, G. Blake; NAKAMURA, Masumi; ZANOLLI, Rafael.. Programando o Android - 2. ed. rev. e apm / 2012, São Paulo: Novatec, 2012.

 

HORSTMANN, Cay S.; CORNELL, Gary.. Core Java [registro eletrônico] - 8. ed. - / 2010, São Paulo: Pearson, 2010.

 

DEITEL, Paul J.; DEITEL, Harvey M.; DEITEL, Abbey; MORGANO, Michael; TORTELLO, João Eduardo Nóbrega.. Android para programadores: uma abordagem baseada em aplicativos / 2013, Porto Alegre: Bookman, 2013.

Contexto do desenvolvimento Mobile

História do Mobile

A história do telefone móvel, começou em 1973, quando foi efetuada a primeira chamada de um telefone móvel para um telefone fixo. Foi a partir de Abril de 1973 que todas as teorias comprovaram que o celular funcionava perfeitamente, e que a rede de telefonia celular sugerida em 1947 foi projetada de maneira correta.

Gerações

1

DynaTAC 8000x

1kg 30cm

Anos 80'

2

TDMA, CDMA, GSM

SMS e tela colorida

Anos 90'

3

2G

gravação de video MP3

Anos 00'

4

3G e 4G 

Smartphones

Anos 10'

A era dos Apps

IBM Simon e sua base de carregador (1994) 

  • Foi um PDA (personal digital assistant) portátil com tela de toque, projetado pela IBM e fabricado pela Mitsubishi Electric.
  • A BellSouth Cellular Corp. distribuiu o Simon nos Estados Unidos entre agosto de 1994 e fevereiro de 1995, vendendo 50.000 unidades.
  • O Simon foi o primeiro PDA a incluir recursos de telefonia.
  • A bateria durava apenas uma hora e os telefones flip tornaram-se cada vez mais finos, o que levou à sua morte.

A era dos Apps

Menos de cinco anos desde o lançamento da loja de aplicativos da Apple, os aplicativos móveis se tornaram uma das principais maneiras pelas quais as pessoas se comunicam, compram, organizam suas vidas, tocam ou até mesmo trabalham.

1993

IBM lança Simon com tela touchscreen com botoes de calendário, contatos, calculadora e notepad

RIM lança o primeiro BlackBerry 

2002

2007

Apple lança

primeiro Iphone

com apps padrão como: camera, mapas e previsão do tempo

Apple lança Iphone 3G com Apple Store

Jul/2008

Out/2008

Google lança HTC Dream

com 1° Android e 

Android Market

+1 Bilhão de downloads na Apple Store

2009

Ago/2010

+1 Bilhão de downloads no Android Market

Samsung lança o primeiro tablet Galaxy

Set/2010

http://tectriadebrasil.com.br/wp-content/uploads/2012/11/Aplicativos2.jpg

A era dos Apps

Jan/2011

+10 Bilhões de downloads na Apple Store 

1 Milhão de apps para Smartphones

+10 Bilhões de downloads no Android Market

~94 min em apps

~72 min na web

Dez/2011

Mar/2012

+25 Bilhões de downloads na Apple Store

Google muda de Android Market para Google Play

+50 milhões de downloads do Instagram 

Abr/2012

Mai/2012

+1 Bilhão de downloads do Angry Birds

+15 Bilhões de downloads no Google Play

http://tectriadebrasil.com.br/wp-content/uploads/2012/11/Aplicativos2.jpg

A era dos Apps

perspectiva dos smartphones

2013

+35 Milhões de smartphones vendidos

+54 Milhões de smartphones vendidos

Uber chega no Brasil

2014

2015

+47 Milhões de smartphones vendidos

Twitter inaugura a era da live

+48 Milhões de smartphones vendidos

Pokemon Go é lançado (AR)

2016

2017

+47 Milhões de smartphones vendidos

Facebook atinge +2 Bilhões de usuários

http://especiais.g1.globo.com/economia/tecnologia/a-vida-na-era-dos-apps/

2019

+43 Milhões de smartphones vendidos

Instagram encerra contagem de curtidas 

+44 Milhões de smartphones vendidos

Brasil é 2° em horas de videos no smartphone

2018

A era dos Apps

http://especiais.g1.globo.com/economia/tecnologia/a-vida-na-era-dos-apps/

Plataformas de Desenvolvimento

Plataformas de Desenvolvimento

https://en.wikipedia.org/wiki/Mobile_app_development

Plataformas de Desenvolvimento

Projeto da disciplina

"iFarm"

Projeto da disciplina

"iFarm"

O seu Antonio é proprietário de uma fazenda onde ele planta soja e milho. Durante as safras, ele precisa tirar várias duvidas sobre as doenças que possam ser abatidas sobre essas culturas. Para tirar sua duvida ele entra em contato com um engenheiro agrônomo e marca uma visita técnica.

Porém não é sempre que se tem um profissional a sua disposição. E seu Antonio acaba por perder parte da sua safra para doenças que ele poderia ter tratado.

Problemática

Projeto da disciplina

"iFarm"

O iFarm é um aplicativo que vai fazer a ponte entre o seu Antonio e um profissional (Eng. Agrônomo).

  • Temos um app para ser acessado como agricultor
  • E outro app para ser acesso como profissional

Dessa forma o Agricultor poderá buscar os serviços de um profissional a sua disposição para tirar suas duvidas sobre sua safra.

Problemática

Projeto da disciplina

"iFarm"

Prototipagem

  • O Figma é um editor de gráficos vetoriais e uma ferramenta de prototipagem. É principalmente baseado na Web.
  • Tutorial Completo de FIGMA - Ferramenta GRÁTIS para Design de Interfaces

https://www.youtube.com/watch?v=vg-INqhKD5c&t=330s

Introdução ao Android

Introdução ao Android

Você sabia que não foi o Google que criou o Android? 

  • O sistema operacional Android foi criado em 2005 por uma startup chamada Android Inc. Que foi comprada pela Google e se tornou a equipe que criou este SO.
  • Apenas em outubro de 2008 que tivemos o lançamento oficial do Android no mercado com o primeiro smartphone Android, o HTC Dream.
  • A maior inovação trazida pelo Android foi o fato de ser uma plataforma aberta, com todos seu código fonte disponível para download e customização, inclusive para fins comerciais como bem tem feito a Samsung nos últimos anos, que hoje fatura mais com o Android do que o próprio Google.

Introdução ao Android

Introdução ao Android

Open Handset Alliance e o Android

  • A Open Handset Alliance (OHA) é um grupo formado por gigantes do mercado de telefonia de celulares liderados pelo Google.
  • Alguns integrantes do grupo estão nomes consagrados como Intel, HTC, LG, Motorola, Samsung, Sony Ericsson, Toshiba, Huawei, Sprint Nextel, China Mobile, T-Mobile, ASUS, Acer, Dell, Garmin e muito mais.
  • O objetivo do grupo é definir uma plataforma única e aberta para celulares.
  • Outro objetivo dessa aliança é criar uma plataforma moderna e flexível para o desenvolvimento de aplicativos corporativos.
  • Todos se beneficiando são beneficiados pelo grupo OHA: os fabricantes de celulares, os usuários comuns, as empresas em geral e os desenvolvedores de aplicativos.

Introdução ao Android

Sistema operacional Linux

  • Android é baseado no kernel do Linux.
  • Gerenciamento de memória os processos, threads, segurança dos arquivos e pastas, redes e drivers.
  • Cada aplicativo no Android dispara um novo processo no sistema operacional.
  • Toda a segurança do Android é baseada na segurança do Linux.
  • Para cada aplicação instalada no aparelho é criado um usuário no sistema operacional para ter acesso à sua estrutura de diretórios.

Introdução ao Android

Máquina virtual Dalvik

  • É uma JVM (Java Virtual Machine) que é otimizada para execução em dispositivos móveis.
  • O bytecode (.class) é compilado e é convertido para o formato .dex (Dalvik Executable), que representa a aplicação do Android compilada.
  • Os arquivos .dex e outros recursos como imagens são compactados
    em um único arquivo com a extensão .apk (Android Package File), que representa a aplicação final, pronta para ser distribuída e instalada.
  • O sistema de build utilizado é o Gradle, o qual é independente do
    Android Studio e pode ser executado separadamente

Introdução ao Android

Máquina virtual Dalvik

Introdução ao Android

Máquina virtual ART (Android Runtime)

  • Android 4.4 (KitKat) foi criada com o objetivo de substituir a Dalvik.
  • Android 5.0 (Lollipop), o ART se tornou a máquina virtual padrão.
  • Uma das melhorias do ART é a compilação Ahead-of-time (AOT), que tem o objetivo de otimizar o código ao máximo para melhorar o desempenho do aplicativo.
  • O ART também tem um melhor funcionamento do Garbage Collector (GC) e
    apresenta melhorias no suporte ao debug de aplicativos.
  • Google afirma que o ART apresenta um desempenho muito melhor.

Introdução ao Android

Introdução ao Android

Arquitetura da Plataforma

  • O Android é uma pilha de software com base em Linux de código aberto criada para diversos dispositivos.
  • As camadas dessa pilha são: Linux Kernel, abstração de hardware (HAL), bibliotecas nativas, estrutura do Java API e aplicativos do sistema

Introdução ao Android

Arquitetura da Plataforma - Camada do Linux Kernel

  • Fundação da plataforma Android é o kernel do linux.

  • ART confia no kernel do Linux para cobrir funcionalidades como encadeamento e gerenciamento de memória de baixo nível.

  • O kernel do Linux permite que o Android aproveite os recursos de segurança principais e que os drivers dos fabricantes.

Introdução ao Android

Arquitetura da Plataforma - Camada de abstração de hardware (HAL)

  • fornece interfaces padrão que expõem as capacidades de hardware do dispositivo para a estrutura da Java API de maior nível.
  • A HAL consiste em módulos de biblioteca, que implementam uma interface para um tipo específico de componente de hardware.

Introdução ao Android

Arquitetura da Plataforma - Camada de Bibliotecas nativas

  • Os serviços principais do sistema Android, como ART e HAL, são implementados por código nativo que exige bibliotecas nativas programadas em C e C++.
  • A plataforma Android fornece as Java Framework APIs para expor a funcionalidade de algumas dessas bibliotecas nativas aos aplicativos. Por exemplo, é possível acessar OpenGL ES pela Java OpenGL API da estrutura do Android para adicionar a capacidade de desenhar e manipular gráficos 2D e 3D no seu aplicativo.

Arquitetura da Plataforma - Camada de Bibliotecas nativas

  • Os serviços principais do sistema Android, como ART e HAL, são implementados por código nativo que exige bibliotecas nativas programadas em C e C++.

Introdução ao Android

Arquitetura da Plataforma - Camada da Estrutura do Java API

  • O conjunto completo de recursos do SO Android está disponível pelas APIs programadas na linguagem Java.
  • Essas APIs formam os blocos de programação que você precisa para criar os aplicativos Android simplificando a reutilização de componentes e serviços de sistema modulares e principais

Introdução ao Android

  • Sistema de visualização rico e extensivo útil para programar a IU de um aplicativo,
  • Gerenciador de recursos, fornecendo acesso a recursos sem código como strings localizadas, gráficos e arquivos de layout
  • Gerenciador de notificação que permite que todos os aplicativos exibam alertas personalizados na barra de status
  • Gerenciador de atividade que gerencia o ciclo de vida dos aplicativos e fornece uma pilha de navegação inversa
  • Provedores de conteúdo que permite que aplicativos acessem dados de outros aplicativos, como o aplicativo Contatos, ou compartilhem os próprios dados

Introdução ao Android

Arquitetura da Plataforma - Camada de Aplicativos do sistema

  • O Android vem com um conjunto de aplicativos principais para envio de SMS, calendários, navegador de internet, contatos etc.

  • Esses apps não têm status especial entre os aplicativos que o usuário opta por instalar.

  • Portanto, um aplicativo terceirizado pode se tornar o navegador da Web, o aplicativo de envio de SMS ou até mesmo o teclado padrão do usuário.

Introdução ao Android

Arquitetura da Plataforma - Camada de Aplicativos do sistema

  • Os aplicativos do sistema funcionam como aplicativos para os usuários e fornecem capacidades principais que os desenvolvedores podem acessar pelos próprios aplicativos.

  • Por exemplo: se o seu aplicativo quiser enviar uma mensagem SMS, não é necessário programar essa funcionalidade — é possível invocar o aplicativo de SMS que já está instalado para enviar uma mensagem ao destinatário que você especificar.

Introdução ao Android

Versões do Android

  • Android 1.5 (Cupcake) - abril de 2009, apresenta melhorias para o SO, camera e GPS e surge os widgets.
  • Android 1.6 (Donut) - setembro de 2009,  inovou e fez o Android falar e escutar com Text-To-Speech (TTS), e Speech-To-Text (STT).
  • Android 2.0 e 2.1 (Eclair) - outubro de 2009 e depois atualizado em janeiro de 2010, trouxe uma interface de usuário diferenciada e adicionou os Live Wallpapers, suporte a múltiplas contas do Google melhorias no SO, câmeras, mapas e o suporte ao HTML5.
  • Android 2.2 (Froyo) - maio de 2010, melhorias de desempenho do SO como o compilador JIT (Just-In-Time) e uma engine de JavaScript mais rápida. Foram adicionados recursos clássicos como o USB Tethering e Wi-Fi Hotspot

Introdução ao Android

Versões do Android

  • Android 2.3 (Gingerbread) - dezembro de 2010, novidades na câmera, pois era possível alternar entre a câmera frontal e traseira e suporte ao NFC.
  •  Android 3.0 (Honeycomb) - fevereiro de 2011, SO totalmente focado nos tablets. Deixou de ter botões físicos, e os botões de voltar e início (home) passaram a fazer parte da barra de navegação dentro da tela com touch screen.
  • Android 4.0 (Ice Cream Sandwich) - outubro de 2011, unificou a plataforma de desenvolvimento entre smartphones e tablets.
  • Android 4.1 (Jelly Bean) - junho de 2012, melhorias no suporte às animações, deixando a interface mais sensível ao toque e fluida.

Introdução ao Android

Versões do Android

  • Android 4.4 (KitKat) - outubro de 2013, trouxe o Android para todos, pois conseguiu executar o SO mesmo em dispositivos com menos de 512MB de RAM
  • Android 5.0 (Lollipop) - novembro de 2014, foi o maior release focado na interface de usuário, usabilidade, animações e experiência do usuário. Nasceu então o Material Design.
  • Android 6.0 (Marshmallow) -  Google I/O 2015 foi anunciado o Android M, modelo de permissões em tempo de execução, chamado Runtime Permissions.

Android Livros

Projeto da disciplina

Protótipo do "iFarm"

Exemplos do Figma

Conceitos de Material Design

Projeto da disciplina

Protótipo do "iFarm"

Primeira interação do Agricultor na APP

Configurações básicas e ambiente para desenvolvimento Android

Configurações básicas e ambiente para desenvolvimento Android

Agenda

  • Android SDK
  • Android Studio
  • AVD / Emuladores
  • Hello World
  • Estrutura do projeto
  • Kotlin

Android SDK

SDK (Software Development Kit)

  • O Android SDK é o software utilizado para desenvolver aplicações no Android, que tem um emulador para simular o celular, ferramentas utilitárias e uma API completa para a linguagem Java e Kotlin, com todas as classes necessárias para desenvolver as aplicações.
  • Embora o SDK tenha um emulador, também é possível plugar um celular real na porta USB do computador e executar os aplicativos diretamente no celular. Isto facilita muito os testes em aparelhos reais e torna o desenvolvimento bem mais produtivo.

Android SDK

Requisitos de software e sistema

  • O SDK é suportado nos seguintes sistemas operacionais: Windows, Mac OS, Linux e Chrome OS.

Android SDK

Requisitos de software e sistema

  • Ambientes de desenvolvimento suportados:
    • Android Studio (Intellij) e
    • Eclipse utilizando o plug-in Android Development Tools (ADT) para integrar o emulador ao Eclipse. Necessário JDK 6 no mínimo.

Plataforma - versão do Android

Requisitos de software e sistema

  • Ambientes de desenvolvimento suportados:
    • Android Studio (Intellij) e
    • Eclipse utilizando o plug-in Android Development Tools (ADT) para integrar o emulador ao Eclipse. Necessário JDK 6 no mínimo.

API Level 1 -> Android 1.0

API Level 2 -> Android 1.1

API Level 3 -> Android 1.5 (Cupcake)

API Level 4 -> Android 1.6 (Donut)

API Level 5 -> Android 2.0

API Level 6 -> Android 2.0.1

API Level 7 -> Android 2.1 (Eclair)

API Level 8 -> Android 2.2 (Froyo)

API Level 9 -> Android 2.3 (Gingerbread)

API Level 10 -> Android 2.3.3

Android SDK

Plataforma - versão do Android

Dados coletados durante um período de sete dias encerrado em July 13, 2020.
As versões com menos de 0,1% de distribuição não são exibidas.

Android SDK

Plataforma - versão 10 Android

Crie experiências de app com tema escuro e navegação por gestos. Ofereça compatibilidade com as novas proteções para privacidade e segurança do usuário. Incremente seus apps com codecs de alto desempenho, melhor biometria, inicialização mais rápida do app, Vulkan 1.1, NNAPI 1.2, dobráveis, 5G e muito mais.

Android Studio

Sobre

  • Android Studio é uma (IDE) para desenvolvimento Android.
  • Foi anunciado em 16 de Maio de 2013 no Google I/O.
  • Android Studio está sob a Licença Apache 2.0.
  • É Baseado no software IntelliJ IDEA de JetBrains.
  • Está disponível para download em Windows, Mac OS X and Linux,
  • Substituiu Eclipse Android Development Tools (ADT) como a IDE primária do Google de desenvolvimento nativo para Android.

Android Studio

Características

  • Suporte para compilações baseadas em Gradle.
  • Refatoração específica para Android e reparações rápidas.
  • Ferramentas de Lint para capturar performance, usabilidade, compatibilidade de versão e outros problemas.
  • Possui um assistente baseado em predefinições com designs e componentes comuns de Android.
  • Rico editor de layout que permite que usuários arrastem componentes de interface de usuário, opção de pré-visualizar layouts em várias configurações de tela.
  • Suporte para a criação de apps para Android Wear.
  • Suporte nativo para a Google Cloud Platform.

Android Studio

Pré-requisitos de Hardware

  • 4 GB de memória, o emulador utiliza 1 GB e o restante utilizado pelo IDE
  • 2 GB de disco, 500 MB é para o IDE e 1.5 GB é para as imagens de sistema do emulador Android
  • 1.280 x 800 mínimo para resolução de tela.

Android Studio

Hello World

New Project...

Hello World

Gradle Build ...

Gradle é um sistema de automação de compilação open source que se baseia nos conceitos de Apache Ant e Apache Maven e introduz uma linguagem de domínio específico baseada em Groovy em vez do XML (Maven) para declarar a configuração do projeto

Hello World

Primeiro código Android

<TextView
  android:id="@+id/helloTextView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Hello World!"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintLeft_toLeftOf="parent"
  app:layout_constraintRight_toRightOf="parent"
  app:layout_constraintTop_toTopOf="parent" />

src/main/res/layout/activity_main.xml

package com.unicesumar.esoft.helloworld

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    var helloTextView: TextView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        helloTextView = findViewById<TextView>(R.id.helloTextView)
        helloTextView!!.text = "Olá ESOFT6S"

        helloTextView!!.setOnClickListener {
            Toast.makeText(applicationContext, 
            		"Bem vindo ao Android com Kotlin",
                    Toast.LENGTH_LONG).show()
        }
    }
}

src/main/java/com/unicesumar/esoft/helloworld/MainActivity.kt

Hello World

run...

but before... install AVD

Hello World

run...

but before... set AVD name and play

Hello World

run app...

Hello World

run app...

Estrutura básica do projeto

Estrutura básica do projeto

app

  • na pasta java em com.unicesumar.esoft.helloworld fica todos os arquivos Kotlin (ou Java) da app -  o código de "negócio" da aplicação, como por exemplo MainActivity.kt
  • na pasta res (de resource) ficam todos os arquivos de layout, imagens que usaremos nos projetos, assim como arquivos de configurações. Ou seja, tudo o que não é código o Android entende como um recurso
    • drawable: é onde fica as imagens que utilizaremos no nosso aplicativo.
    • layout: é onde fica os arquivos xml relacionados ao layout do App
    • mindmap: é onde fica os ícones do App
    • values: é onde fica os arquivos de colors, strings e styles.

Estrutura básica do projeto

app

  • na pasta manifest fica o arquivo AndroidManifest.xml é nele que centraliza as configurações de como a aplicação irá se comportar em sua execução no Android.
  • É nesse arquivo que ficaram registradas todas Activities da nossa app. Isso é feito de forma automática pelo Android Studio

Estrutura básica do projeto

Gradle Scripts

  • O arquivo build.gradle do projeto contém configurações relacionadas ao projeto todo, como as configurações de repositórios de dependências, versão do plugin do Gradle e versão do Kotlin
  • O arquivo build.gradle do módulo contém configurações referentes ao aplicativo em si, como versão mínima do sistema, versão de compilação e também as bibliotecas necessárias
  • O arquivo gradle.properties contém as propriedades fixas do projeto

Resumo

  • No evento Google I/O de 2017, foi feito o anúncio de que Kotlin seria oficialmente a linguagem para desenvolvimento Android
  • De acordo com a equipe do Android, a escolha do Kotlin se deve ao fato de ela ser uma ótima linguagem e tornar a criação de aplicativos mais produtiva e divertida
  • Outro ponto chave é que todo ecossistema Android é compatível com
    Kotlin
    , então tudo o que já foi desenvolvido, todas as bibliotecas do Android funcionam sem a necessidade de serem reescritas
  • Os principais pontos da linguagem são: interoperabilidade, concisão e proteção contra nulos.

Kotlin

Resumo

  • No evento Google I/O de 2017, foi feito o anúncio de que Kotlin seria oficialmente a linguagem para desenvolvimento Android
  • De acordo com a equipe do Android, a escolha do Kotlin se deve ao fato de ela ser uma ótima linguagem e tornar a criação de aplicativos mais produtiva e divertida
  • Outro ponto chave é que todo ecossistema Android é compatível com
    Kotlin
    , então tudo o que já foi desenvolvido, todas as bibliotecas do Android funcionam sem a necessidade de serem reescritas
  • Os principais pontos da linguagem são: interoperabilidade, concisão e proteção contra nulos.

Kotlin

Interoperabilidade

  • É a capacidade de uma linguagem se comunicar com outra.
  • Quando dizemos que o Kotlin tem total interoperabilidade com Java, isso significa que podemos utilizar códigos que foram escritos em Java no nosso código em Kotlin

Kotlin

public class Calculadora {
  public int somar(int a, int b) {
  	return a+b;
  }
}
val calc = Calculadora()
val resultado = calc.somar(2,2)
println(resultado)

Java

Kotlin

Concisa

  • Quando falamos que Kotlin é uma linguagem concisa, basicamente estamos falando que precisamos escrever menos código para fazer a mesma coisa que uma outra linguagem faria com mais código

Kotlin

Button bt_login = (Button) findViewById(R.id.bt_login);
bt_login.setOnClickListener(new View.OnClickListener()
  {
    @Override
    public void onClick (View v){
      efetuarLogin();
    }
  });
bt_login.setOnClickListener{
	efetuarLogin()
}

Java

Kotlin

Null Safety

  • O famoso NullPointerException (NPE), é um tipo de erro muito comum no desenvolvimento de software. Quando temos um erro de referência nula no nosso programa significa que estamos tentando acessar um objeto que ainda não possui um espaço alocado na memória RAM da máquina
  • Kotlin possui uma característica que é a proteção contra nulos (null safety). Isso diminui drasticamente os erros do tipo NPE e ela resolve isso de uma forma muito prática
  • Em Kotlin, por padrão nenhuma variável ou objeto pode ter um valor nulo, logo, dificilmente você encontrará um erro de NPE

Kotlin

Kotlin

String nomeUsuario = null;
var nomeUsuario :String = null

Java

Kotlin

  • Esse código simplesmente não compila porque a variável nomeUsuario não pode ter um valor igual a null "Null can not be a value of a non-null type String"

Null Safety

  • Quando falamos que Kotlin é uma linguagem concisa, basicamente estamos falando que precisamos escrever menos código para fazer a mesma coisa que uma outra linguagem faria com mais código

Kotlin

Dicas básicas

  • https://play.kotlinlang.org/
  • Variáveis mutáveis  
    • var numero:Int = 0 
  • Variáveis imutáveis
    • val numero:Int = 0 
  • Listas imutáveis e mutáveis
    • val lista = listOf(1,2,3,4)
    • val lista = mutableListOf(1,2,3,4)
      

Desafio da Aula
Hello World Android

com Kotlin

Principais Conceitos do desenvolvimento Android

Anatomia da plataforma Android

Principais Conceitos do desenvolvimento Android

Anatomia da plataforma Android

Agenda

  • Activity
  • Intent
  • Classe R
  • Views

Activity

Activity ou simplesmente atividade

  • É Um dos componentes mais comuns no desenvolvimento
  • Podemos entender uma Activity como uma tela do nosso aplicativo, onde colocamos componentes visuais de interação com o usuário – como botões, caixas de texto, caixas de seleção etc
  • Om aplicativo pode possui várias Activities, mas não há problema se ele possuir uma única
  • Em um App, devemos eleger uma Activity como principal, geralmente chamada de MainActivity. É ela que é apresentada ao usuário quando ele inicia o aplicativo

Activity

Empilhamento das Activity

  • Cada Activity pode iniciar outras Activities para executar tarefas diferentes (Intent)
  • Quando isso acontece, a Activity que foi iniciada é empilhada sobre a
    anterior
  • Assim o Android vai criando uma pilha de navegação e a partir do momento em que você vai clicando nos botões de voltar, e as Activities vão sendo desempilhadas e voltando uma a uma

Activity

Empilhamento das Activity

Activity

Criando uma Activity

  • Criar uma classe e herdar da classe Activity do Android. Dessa forma a classe passará a ter todos as características de uma Activity

Activity

Métodos de callback

  • Os métodos de callback do sistema são métodos da Activity que são acionados pelo sistema operacional quando acontece alguma alteração de estado
  • O principal método é o onCreate, único obrigatório e é responsavel pela construção da Activity
  • Este método recebe a variável savedInstanceState: Bundle? que é passado pelo o próprio sistema operacional
  • A variável savedInstanceState guarda informações do estado da Activity, quais componentes estão na tela e informações que o usuário tenha preenchido
  • É fundamental a chamada super.onCreate(savedInstanceState)

Activity

Métodos de callback ciclo de vida

Activity

Definindo o conteúdo de uma Activity

  • Definir o conteúdo que aparecerá na tela, para isso o Android possui o método setContentView. Para esse método funcionar, é preciso passar o
    conteúdo que vamos montar na tela para ele.
  • Existem 2 formas de passar esse conteúdo:
    • criando todo o layout da tela com código em Kotlin e passar como parâmetro para o método setContentView
    • utilizar um arquivo xml e indicá-lo no método setContentView

Intent

O coração do Android

  • A classe android.content.Intet está presente em todos os lugares e representa uma mensagem da aplicação para o sistema operacional, solicitando que algo seja realizado, e representa um importante papel na arquitetura do Android para integrar diferentes aplicar
  • Cabe ao sistema operacional interpretar essa mensagem e tomar as providências necessárias, que pode ser para abrir uma simples aplicação, fazer uma ligação para determinado número ou até abrir o browser em uma determinada página da internet

Intent

Envio de uma mensagem ao Android

  • Intent representa uma "ação que a aplicação deseja executar
  • A tradução de intent para o português é "intenção", podemos dizer que uma intent representa a intenção da aplicação de realizar determinada tarefa.
  • Na pratica essa intenção é enviada ao sistema operacional como uma mensagem, chamada de broadcast. Ao receber a mensagem, o SIstema operacional tomará as decisões necessárias, dependendo do conteúdo da mensagem, ou seja, de sua intenção.

Intent

Uma Intent pode ser utilizada para

  • enviar uma mensagem para o sistema operacional;
  • abrir uma nova tela da aplicação, utilizando o método startActivity(intent)
  • solicitar ao sistema operacional que ligue para determinado número de celular;
  • abrir o browser em um determinado endereço da internet;
  • exibir algum endereço, localização ou rota no Google Maps,
  • executar algum processamento pesado em segundo plano usando as classes BroadcastIntentReceiver e Service
  • enviar uma mensagem para outra aplicação para executar outro processo
  • abrir o Google Play para fazer a instalação de determinado aplicativo;
  • etc...

Intent

Intent

Resumo

Uma intent é entre muitas coisas a forma utilizada para fazer com que
aplicações em processos diferentes se comuniquem, utilizando uma mensagem
que, dependendo de seu conteúdo, pode ser interceptada por qualquer aplicação.

Intent

Ex. Intent explícita - navegando pelas activities

  • esta modelo de Intent satisfaz a solicitação no componente do aplicativo.
  • É necessário o nome de classe Activity ou serviços que desejamos iniciar.

Intent

Ex. Intent implícita - Visualização dos contatos cadastrado no celular

  • Como é possível usar uma "ação" para executar determinada tarefa, o próprio Android já tem diversas ações-padrão que ao serem requisitadas executam determinadas tarefas.
  • Um exemplo de ação seria: "Android, quais são os contatos cadastrado no celular? Quando o Android recebe a mensagem ele responde: "Sim, é claro, disponha".
  • Para isso o Android já tem diversas ações predefinidas, uma delas é exibir e buscar os Contatos da agenda.

Classe R

Durante o processo de desenvolvimento de um aplicativo, é comum o programador precisar acessar algum recurso através do código

  • Recurso pode ser uma imagem, um arquivo xml de layout, uma configuração de cor ou texto ou até mesmo o id de um objeto especifico. Para facilitar o acesso aos recursos do projeto
  • Android possui uma classe chamada R . Simples assim mesmo, uma única letra em maiúsculo.
  • O nome R é uma abreviação de "Resources" (Recursos). A ideia de chamar a classe somente de R é facilitar a vida do desenvolvedor.

Views

As Views (visualizações) são todos os componentes visuais que podem ser usados na criação de um aplicativo.

  • A classe android.view.View é a classe base de qualquer outro componente que podemos usar em uma Activity.
  • Cada subclasse de View precisa implementar o método onDraw(Canvas),
    responsável por desenhar o componente na tela.
  • Botões, caixas de texto, caixas de seleção, objetos de imagens etc., todos são derivados da classe View.

Views

Hierarquia da View

Views

Principais componentes

TextView (visualização de texto)

  • É um componente de visualização de texto, usado quando queremos mostrar alguma informação escrita para o usuário.
  • Ele pode ser definido pela tag <TextView /> , e podemos usar sua propriedade text para definir o texto exibido na tela.

Views

Principais componentes

EditText (edição de texto)

  • É o componente que usamos quando queremos que o usuário informe algo ao aplicativo, conhecido também como caixa de texto.
  • O EditText pode ser definido pela tag <EditText/> , e ele também possui a propriedade text , em que podemos definir algum texto.
  • Outra propriedade de uso muito comum nesse componente é a propriedade hint (sugestão) é como o placeholder do HTML

Views

Principais componentes

Button (botão)

  • Esse componente cria um botão na tela e pode disparar alguma ação.
  • Um botão pode ser definido pela tag <Button /> e também possui a propriedade text para definir o texto do botão.

Views

Principais componentes

LinearLayout (layout linear)

  • É um pouco diferente das outras Views porque ele faz parte da família do ViewGroup (grupo de visualização)
  • Sua função é agrupar outros componentes dentro dele.
  • Podemos definir um layout linear através da tag <LinearLayout /> .
  • Esse componente possui uma propriedade orientation (orientação) que define como os componentes serão exibidos dentro do layout.
    • Orientação horizontal ou vertical

Views

Altura e a Largura de uma View

Em todas as Views, é obrigatório que se definam duas
propriedades, layout_width (largura) e layout_height
(altura)

  • Caso você não as defina, o código não vai compilar, e também não há um valor padrão para elas, ou seja, você sempre terá que as definir!

Views

Principais componentes

LinearLayout - orientação Horizontal

Views

Principais componentes

LinearLayout - orientação Vertical

Views

Altura e a Largura de uma View

Podemos definir essas propriedades de 3 maneiras.

  1. Largura ou altura fixa em dp (pixel independente de densidade)
  2. Usando a constante wrap_content. Esta opção indica que esta largura ou altura será variável de acordo com o conteúdo dela
  3. Usando a constante match_parent . Ela indica que o componente tomará todo o espaço disponível em relação ao layout em que ele está inserido

Views

findViewById

Localizando uma visualização pelo id

  • Quando precisamos acessar algum elemento que foi definido no arquivo de layout, precisamos localizar ele pelo seu id.
  • Para isso, usamos o método findViewById, que está disponível na Activity
  • O método localiza no layout uma View a partir de um "id" passado

Projeto da disciplina

Protótipo do "iFarm"

APP do Agricultor - Splash Screen

Projeto da disciplina

Protótipo do "iFarm"

APP do Agricultor

Navegando da Splash Screen para primeira tela da app

carregar a lista de contatos do Android

Projeto da disciplina

Protótipo do "iFarm"

APP do Agricultor

Construir a tela de consulta, com os elementos de input de texto e botão

Partes fundamentais do desenvolvimento Android

Banco de dados, Mapas/GPS, Multimídia - Camera

Banco de Dados no Android

SQLite

  • O Android tem integração com o SQLite, um leve e poderoso banco de dados,
  • Por meio dele é possível utilizar um banco de dados normalmente em uma  aplicação android.
  • Embora o armazenamento em banco de dados seja a forma mais comum de persistência, o Android também permite que arquivos sejam salvos facilmente, além de ter um sistema simples de persistência de chave e valor chamado de preferências.

Banco de Dados no Android

SQLite

  • Cada aplicação pode criar um ou mais banco de dados, que ficam localizados na seguinte pasta, relativa ao nome do pacote do projeto:
    • /data/data/nome_pacote/databases/

Um banco de dados é visível somente à aplicação que o criou.

Banco de Dados no Android

Classe SQLiteOpenHelper

  • A plataforma Android nos disponibiliza uma classe chamada
    SQLiteOpenHelper. Com sua implementação é possível criar um banco de dados, tabelas, gerenciar versões e posteriormente utiliza-la para inserir, deletar, atualizar e buscar dados do banco de dados.
  • A vantagem de se implementar diretamente essa classe é que terá o controle total do seu banco de dados
  • A desvantagem é que é uma abordagem muito mais trabalhosa em relação a código
  • Opção ORM com biblioteca Room

Banco de Dados no Android

Biblioteca Anko SQLite

  • O objetivo dessa biblioteca é deixar o desenvolvimento de aplicativos com Kotlin mais rápido e mais fácil.
  • O Anko pode ser dividido em quatro partes diferentes:
    • Anko Commons
    • Anko Layouts
    • Anko SQLite
    • Anko Coroutines

Banco de Dados no Android

Adicionando Anko SQLite ao projeto

  • No arquivo build.gradle (Module: app) adicione a dependência e click em Sync Now:
implementation "org.jetbrains.anko:anko-sqlite:0.10.4"

Banco de Dados no Android

Criando o banco de dados do projeto

  • A biblioteca Anko provê uma classe chamada ManagedSQLiteOpenHelper , que nada mais é do que uma abstração em cima da classe
    SQLiteOpenHelper .
  • Seu intuito é fazer o gerenciamento do banco de dados, desde a criação até a manipulação de dados
  • Para criação do banco de dados da nossa aplicação, é só criar uma classe que estende a classe ManagedSQLiteOpenHelper

Banco de Dados no Android

Criando o banco de dados do projeto

class MinhaAppDatabase(context: Context) : 
	ManagedSQLiteOpenHelper(ctx = context, 
    	name = "minhaApp.db", version = 1) { }

Banco de Dados no Android

Criando o banco de dados do projeto

Próximos passos:

  • implementar o método onCreate()
    • ​criar a tabelas
  • ​implementar singleton para interação com o banco na em qualquer parte da app
    • database.use { }

Mapas e GPS

Google Maps

  • Uma das funcionalidades que mais chamam a atenção na plataforma do Android e a grande facilidade para se construir uma aplicação integrada ao Google Maps, ate mesmo utilizando recursos de localização por GPS.
  • Suas principais funcionalidades são:
    • Controle de zoom,
    • Tipo de visualização por rua e satélite,
    • Desenho de imagens (marcadores) no mapa
    • Leitura das coordenadas de latitude e longitude
    • etc ...

Mapas e GPS

Google Maps

  • Existe ainda uma gama de possibilidades que podem ser exploradas com geolocalização para melhorar a experiência do usuário com seu aplicativo
  • Obter a localização do usuário na plataforma Android nunca foi uma tarefa complexa, é realmente uma tarefa fácil e com as atualizações de API essa interação sempre é melhorada.

Mapas e GPS

Google Maps v2

  • Versão 1 foi descontinuada em 2012
  • Versão 2 é chamada de "Google Mapas Android API v2"
  • Na nova versão, todo o framework de maps foi criado utilizando vetores para suportar as visualizações 2D e 3D
  • Vantagens:
    • Ganho significativo no desempenho
    • Interações e animações mais fluidas
    • Visualização 3D é feita automaticamente

Mapas e GPS

Google Maps v2

  • A principal melhoria foi a utilização de fragments, que é um tipo especial de view que funciona como um componente reutilizável e pode ser inserido em qualquer lugar do seu layout
  • Na API versão 1, só era possível exibir um mapa de cada vez na tela

Mapas e GPS

  • Latitude: Distância em graus de qualquer ponto da Terra em relação à linha do equador.
  • Longitude: Distância em graus de qualquer ponto da Terra em relação ao Meridiano de Greenwich

Antes de "codar"... precisamos entender o que é Latitude e Longitude

Mapas e GPS

Hello World do mapa com Android

  • Instalar Google Play services SDK: lib que contém as classes da API de mapas
  • new project
  • selecionar Google Maps Activity

Mapas e GPS

Hello World do mapa com Android

  • Obter a chave no Google Maps API
    • values/google_maps_api.xml

Mapas e GPS

Hello World do mapa com Android

  • Conhecendo a view Fragment
    • ​layout/activity_maps.xml
  • ​Conhecendo a MapsActivity
    • ​método onMapReady
      • ​googleMap.addMarker()
      • googleMap.moveCamera()

Fotos, audios e videos

  • Com o Android é possível reproduzir fotos, audios e videos disponíveis no aparelho e acessar a camera de uma forma relativamente simples
  • Os principais formatos de arquivos suportados pela API são:
    • Imagens: jpg, png e gif
    • Audio: mp3, midi, 3gp, ogg, m4a e wav
    • Video: mp4 e 3gP
  • No Android Studio com AVD é possível simular um cartão de memória (SD-Card) e acessar seus arquivos.

Multimídia - Camera

Cronograma

  • Trabalhando com Permissões
  • Trabalhando com cartão de memória (sdcard)
  • Carregando uma Foto (imagem)
  • Carregando um Audio (musica)
  • Carregando um Video
  • Abrindo uma imagem da galeria
  • Trabalhando com a Camera

Multimídia - Camera

Multimídia - Camera

Trabalhando com Permissões (>= Android 6.0)

  • Cada aplicativo Android é executado em uma caixa de proteção de acesso limitado, chamado sandbox 
  • Se um aplicativo precisa usar recursos ou informações fora de sua própria sandbox, o aplicativo deve solicitar a permissão apropriada
  • É preciso declarar que o aplicativo precisa de uma permissão listando a permissão no manifesto do aplicativo e, em seguida, solicitando que o usuário aprove cada permissão no tempo de execução

Multimídia - Camera

Trabalhando com Permissões (>= Android 6.0)

  • Os princípios básicos para se trabalhar com permissões:
    • Solicite permissões no contexto, quando o usuário começa a interagir com o recurso que as requer
    • Não bloqueie o usuário. Sempre forneça a opção de cancelar um fluxo telas relacionado às permissões
    • Se o usuário negar ou revogar uma permissão de que um recurso precise, de permissão normalmente e seu aplicativo para que o usuário possa continuar usando seu aplicativo, possivelmente desativando o recurso que requer a permissão
    • Não assuma nenhum comportamento do sistema

Multimídia - Camera

Trabalhando com Permissões

if (
    checkSelfPermission(Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_DENIED &&
    checkSelfPermission(Manifest.permission.CAMERA) == PackageManager.PERMISSION_DENIED
) {
    // Permission denied
    requestPermissions(
        arrayOf(Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA),
        PERMISSION_CODE
    );
} else {
    // Permission granted
}
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>

Trabalhando com cartão de memória (sdcard)

Multimídia - Camera

Trabalhando com cartão de memória (sdcard)

upload de arquivos para sdcard

Multimídia - Camera

Carregando uma Foto (imagem)

Multimídia - Camera

val file = File(
  Environment.getExternalStorageDirectory(),
  	"/Pictures/capa_single.png"
  )
  
val decodeStream = BitmapFactory.decodeStream(FileInputStream(file))
image_view.setImageBitmap(decodeStream)

Multimídia - Camera

Carregando um Audio (musica)

val uri: Uri = Uri.fromFile(
    File(
        Environment.getExternalStorageDirectory(),
        "/Music/GENERAL_SKY_A_QUESTAO.mp3"
    )
)
val mediaPlayer: MediaPlayer? = MediaPlayer().apply {
    setAudioStreamType(AudioManager.STREAM_MUSIC)
    setDataSource(applicationContext, uri)
    prepare()
    start()
}

Multimídia - Camera

Carregando um Video

val file = File(
    Environment.getExternalStorageDirectory(),
    "/Movies/Aerial_Shot_Of_City.mp4"
)
video_view.setVideoPath(file.path)

val mediaController = MediaController1(this)
mediaController?.setAnchorView(video_view)
video_view.setMediaController(mediaController)
video_view.start()

Multimídia - Camera

Abrindo uma imagem da galeria

val intent = Intent(Intent.ACTION_PICK)
intent.type = "image/*"
startActivityForResult(intent, IMAGE_PICK_CODE)

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (resultCode == Activity.RESULT_OK && requestCode == IMAGE_PICK_CODE){
        image_view.setImageURI(data?.data)
    }
}

Multimídia - Camera

Trabalhando com a Camera

  • E bastante comum aplicações para dispositivos móveis terem que utilizar a câmera do celular integrada na aplicação
  • O Android possui a classe android.hardwar.Camera para esta funcionalidade
  • Essa classe é complexa de ser utilizada pois ela prove todo recurso de acesso a camera, mas basicamente será necessário utilizar o método takePicture() para tirara foto, onde o desenvolvedor terá que controlar o estado completo da câmera

Multimídia - Camera

Trabalhando com a Camera

  • Mas no Android é possível apenas integrar aplicações que já existem
  • Quando aplicação precisar tirar uma foto, basta chamar a aplicação nativa da câmera para fazer este trabalho
  • Como resultado a aplicação nativa da câmera vai devolver um objeto
    Bitmap, que representa uma imagem no Android
  • O usuário pode tirara foto da mesma forma que já está acostumado utilizando o próprio app de camera

Multimídia - Camera

Exemplo da Camera

val intent = Intent(MediaStore.ACTION_IMAGE_CAPTURE)
startActivityForResult(intent, CAMERA_CODE)

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (resultCode == Activity.RESULT_OK) {
        if (requestCode == CAMERA_CODE) {
            val cameraImage: Bitmap = data!!.extras!!.get("data") as Bitmap
            image_view.setImageBitmap(cameraImage)
        }
    }
}

Projeto da disciplina

Protótipo do "iFarm"

APP do Agricultor

Configurar banco de dados da aplicação

Inserir e recuperar dados de consulta

Projeto da disciplina

Protótipo do "iFarm"

APP do Agricultor

Pegar localização geográfica do Agricultor
Salvar a localização da duvida

Projeto da disciplina

Protótipo do "iFarm"

APP do Agricultor

Tirar uma foto da planta/local da duvida

Desenvolvimento Mobile Híbrido

com React Native

Write once, run anywhere!

Desenvolvimento Mobile Hibrido

com React Native

Agenda

  • Introdução: Fatos e Motivações
  • Categorias
  • React Native

Desenvolvimento Mobile Hibrido

Introdução: Fatos

  • Um Hybrid Mobile App é como qualquer outro Native Mobile App, que pode ser instalado em dispositivos e publicado em lojas de aplicativos.

  • Eles podem acessar o hardware do dispositivo, como câmera, acelerômetro, GPS e assim por diante.

  • A maioria são baseados em HTML5, CSS3 e JavaScript, sendo essas as principais tecnologias. Exceto Xamarin (C#)

  • Exige um menor custo no desenvolvimento comparado com os nativos

Introdução: Motivações

  • Existem várias plataformas móveis, como iOS, Android, Windows, além de muitas outras novas, o ambiente de desenvolvimento e as linguagens de programação são diferentes para cada um deles.

  • Se a app precisa precisa estar em todas essas plataformas, será necessário várias equipes e diferentes.

  • Aplicativos móveis híbridos podem ser desenvolvidos para várias plataformas usando uma única base de código.

    No entanto, algum código especializado precisa ser escrito para cada plataforma para aproveitar as APIs nativas para ela.

Desenvolvimento Mobile Hibrido

Categorias de aplicativos móveis híbridos:

  • Baseados em WebView

  • Cross-compiled Hybrid Apps

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

  • Cada plataforma móvel nativa tem um controle / componente comum chamado WebView, que é um navegador Chromeless ("navegador enxuto")
  • Este componente é utilizado para abrir conteúdo web (HTML, CSS e JavaScript) hospedado localmente

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

  • Apple - iOS: é chamado de WKWebView, que usa toda a otimização de desempenho, como o motor Nitro JavaScript usado pelo navegador Safari
  • Google - Android: o WebView utiliza o mecanismo de renderização e o tempo de execução JavaScript do Chromium (navegador Chrome). A partir da versão Android (5.0) Lollipop existe um novo recurso chamado Updatable WebView, que permite atualizar apenas o WebView do seu aplicativo híbrido.

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

  • Para um aplicativo híbrido este é o componente mais importante e tem um papel significativo no desempenho do aplicativo.
  • Os exemplos de plataforma de desenvolvimento e estruturas mais usados que implementam essa abordagem são Cordova, Ionic Framework, KendoUI Mobile, F7, Mobile Angular UI, Onsen UI entre outros.

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

Projeto Crosswalk

  • Crosswalk é um projeto de código aberto que permite aos desenvolvedores de aplicativos incorporar WebView personalizado em seu aplicativo híbrido.
  • Com esses avanços, os aplicativos híbridos tornaram-se capazes de usar os recursos mais recentes da web, como WebRTC para comunicação multimídia em tempo real e WebGL para renderização gráfica avançada.

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

Apache Cordova / Phonegap

  • O Apache Cordova / Phonegap tem uma arquitetura que divide sua biblioteca nativa em uma seção central e componentes conectáveis ​​chamados plug-ins. Isso ajuda a reduzir o tamanho mínimo de um aplicativo híbrido.
  • Usar apenas os plug-ins necessários para um aplicativo específico.
  • Um plug-in inclui código nativo para um recurso específico e uma interface JavaScript expondo a funcionalidade nativa
  • Ele também permite que as comunidades contribuam com o desenvolvimento de plug-ins de código aberto

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

Nativo para JS Bridge

  • Precisamos chamar nosso código nativo a partir de JS e obter resultados para JS também.
  • Essa ponte tem duas funções:
    • permitir que JS chame qualquer método nativo
    • permitir que métodos nativos executem callbacks em JS.

Desenvolvimento Mobile Hibrido

Aplicativos híbridos baseados em WebView

Nativo para JS Bridge

  • A ponte compreende diferentes implementações em diferentes plataformas
  • Android: os objetos Java são empacotados no WebView e podem ser chamados a partir do JS
  • iOS: o JS chama um esquema de URL específico, que é interpretado pelo código nativo.
  • A ponte reversa é uma função JS global simples que é chamada pelo WebView passando argumentos especiais, como callbacks

Desenvolvimento Mobile Hibrido

Cross-compiled Hybrid Apps

Desenvolvimento Mobile Hibrido

Cross-compiled Hybrid Apps

  • Essa proposta trás uma compilação cruzada de vários aplicativos nativos a partir de uma única linguagem de programação. Por exemplo, o desenvolvedor irá codificar usando uma única linguagem, que será ser convertida em tempo de compilação ou tempo de execução em componentes de linguagem nativa
  • Esse método utilizam uma ponte / mapeamento de componentes nativos para suas construções customizadas na linguagem de programação destinada ao desenvolvimento
  • Principais e exemplos: React Native, Vue Native, Xamarin (C #) e outros.

Desenvolvimento Mobile Hibrido

Cross-compiled Hybrid Apps - Geração de código

  • "Plataforma cruzada" no sentido de que essa abordagem mapeou chamadas em JS para chamadas que gerenciam a UI nativa para plataformas nativas.

  • Por exemplo: um componente React Native que renderiza texto em um aplicativo móvel será traduzido em dois componentes separados: [TextView] para Android e [UIView] para iOS.

  • Portanto, não está compartilhando componentes entre plataformas, mas sim está compartilhando código.

Desenvolvimento Mobile Hibrido

Cross-compiled Hybrid Apps - Orquestramento

  • É por isso que se diz que está sendo construindo um aplicativo nativo real.

  • O código JS é executado e orquestra os controles nativos de UI

  • Isso significa que o componente de UI nativo deve ser suportado pela implementação dessa abordagem

Desenvolvimento Mobile Hibrido

Cross-compiled Hybrid Apps - Viés

  • Se houver muitas personalizações nativas, o projeto envolverá três bases de código separadas:

    • duas para gerenciar sua IU para Android e iOS

    • uma base de código compartilhada onde ficará o código do controlador.

  • Caso do Airbnb:

Desenvolvimento Mobile Hibrido

“Mesmo que o código nos recursos do React Native fosse quase totalmente compartilhado entre as plataformas, apenas uma pequena porcentagem do nosso aplicativo era React Native ... Como resultado, acabamos oferecendo suporte ao código em três plataformas em vez de duas.”

Cross-compiled Hybrid Apps - Viés

  • Hybrid-Native são ótimas soluções com uma série de benefícios, suas principais são:

    • Capacidade de construir uma UI nativa real usando JavaScript

    • Alto grau de compartilhamento de código.

  • Se deseja misturar uma solução de "plataforma cruzada" em uma base de código nativa existente, tem habilidades nativas e planeja direcionar apenas para iOS e Android, essa é a melhor opção!

Desenvolvimento Mobile Hibrido

Comparativo

Desenvolvimento Mobile Hibrido

Principais tecnologias

Desenvolvimento Mobile Hibrido

React Native

Framework

  • O React Native pode ser definido como:

    • um framework que consiste em uma série de ferramentas que viabilizam a criação de aplicações mobile nativas para as plataformas iOS e Android utilizando o desenvolvimento front-end (HTML, CSS e JS)

React Native

Contexto

  • É um projeto desenvolvido pelo Facebook durante em um Hackathon em 2013 

  • Sua primeira aparição pública em janeiro de 2015, no evento React.js Con

  • Código fonte aberto https://github.com/facebook/react-native/

React Native

Funcionalidades importantes

  • Hot Reloading
  • Usar código nativo (Java/Kotlin e Objective-C/Swift) - para apps legadas
  • Debug pelo Dev Tools dos navegadores
  • Componentização
  • Virtual DOM -> chamadas nativas

React Native

Chamadas Nativas

  • Android:
    • Android Runtime: para o código Java.
    • JSCore Virtual Machine: para o código JavaScript.
  • iOS:
    • Native Runtime: para códigos Objective-C/Swift.
    • JSCore Virtual Machine: para o código JavaScript.
  • IMPORTANTE: todo início de comunicação é iniciado pelo lado nativo, já que os eventos de toque na tela são tratados na parte nativa da aplicação

React Native

Dev

  • gerando logo - https://apetools.webprofusion.com/#/tools/imagegorilla
  • aplicando icone no android
  • splash screen no android + status bar
  • navegação
    • https://reactnavigation.org/docs/getting-started
    • npm install @react-navigation/native
    • npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
    • npm install @react-navigation/stack
  • Telas
    • Cadastro
      • Chip: https://callstack.github.io/react-native-paper/chip.html
        • npm install react-native-paper / npm install react-native-vector-icons / 
      • Slider: https://github.com/callstack/react-native-slider
        • npm install @react-native-community/slider --save
    • Home
      • Axio: https://github.com/axios/axios

Projeto da disciplina

"iFarm"

APP do Profissional

Protótipo do app no Figma (cadastro)

Hello word com React Native

UniCesumar ESOFT Programação Para Dispositivos Móveis

By Henrique Vignando

UniCesumar ESOFT Programação Para Dispositivos Móveis

  • 281