Desenv. Multi Plataforma Luciano Bassan

Prévia do material em texto

�
UNIVERSIDADE ESTÁCIO DE SÁ
DESENVOLVIMENTO MOBILE
RESENHA
Luciano Maciel Bassan
Trabalho de Desenvolvimento Multi-Plataforma
 
Penápolis 
2018
	
Aplicações nativas x hibridas
Frameworks hibridos:
- Cordova/Phonegap
-Xamarim
Funções em JavaScript tem o mesmo proposito que em Java e C++
Document Object Model 
Árvore Hierárquica
Necessário definir para o JavaScript
Defina as estruturas com suas especicações filhas, como:
HTML -> Head - Body
Head -> filho é o Title
Body -> Tags H1, Tag P, são filhos do Body
Eventos
OnClick 
do tipo "Button" (botão).
Quando o botão for clicado, pega o ID do elemento, com o que tiver dentro do HTML, e aparece um alerta na tela com a mensagem transcrita
JQuery
Biblioteca que utiliza código JS para auxiliar o desenvolvimento.
Utiliza muito JS para diminuir o tamanho do código e reutilizar algo do mesmo código.
Exemplos de Bibliotecas - Jquery, Angular JS, Prototype, Mootools, e +
Vantagem do JQuery
Diminuição da quantidade de códigos
Compatibilidade e Portabilidade do código em diversos navegadores (problemas de alteração de navegador)
Phonegap Build
Permite a criação de de app remotamente (na nuvem) sem precisar da infraestrutura da máquina.
Phonegap Build 
3 principais plataformas de desenvolvimento - android, IOS e Windows Phone.
Quando a aplicação for compilada será necessário geram um aplicativo nativo para cada uma delas.
Android SDK
Mac - Intel Xcode
W7 Vis St 
Adobe Phonegap Build
Conversor Desktop da ADOBE com estrutura Android, IOS e Win Phone para compilar na nuvem.
Phonegap Build é um aplicativo para trabalhos Front-End
Phonegap Build
É possível realizar algumas config. a partir de um XML
Altera o nome, o ícone, a descrição e o autor do app.
NOME do arquivo tem que ser "config.xml"
Padrão para ser configurável dentro do Phonegap Build
Com o arquivo XML criado (config.xml), basta recriar o arquivo ZIP da aplicação e realizar o update da build no Adobe Phonegap Build
para dar upload do icone, tem que colocar ele na mesma pasta e setar ela pelo config.xml
UPLOAD do arquivo ZIP com os 3 arquivos criados - HTML + CSS + CONFIG.XML
Phonegap Build é um serviço remoto que permite a criação de aplicativos remotamente (nuvem), sem precisar da infraestrutura na máquina.
O Phonegap Desktop APP é uma aplicação desktop que permite a criação de um projeto Phonegap. Ela é bem simples e cria toda a estrutura de um projeto Phonegap.
O Phonegap App Developer é um aplicativo para dispositivo mobile que auxilia nos testes de desenvolvimento de aplicações híbridas. Ele vai realizar o download do código e carregar no browser do aparelho. Ótimo para testes rápidos
Podem-se realizar algumas configurações no aplicativo em construção, a partir do código config.xml. Nessas configurações podemos alterar o nome, o ícone, a descrição e o autor do aplicativo.
Adobe Phonegap App 
Aplicativo para testes do programa pelo celular
Sempre puxa a versão mais recente que estiver na nuvem.
Phonegap Desktop App 
Permite criação de um projeto Phonegap no pc
Simples, e cria toda a estrutura de um projeto Phonegap.
Necessário 3 arquivos apenas - HTML CSS E JS
o quarto arquivo CONFIG.XML apenas para configurar a aplicação
Projeto PHONEGAP em si pode possuir plugins, scripts, entre outros arquivos.
 	Para as lojas de publicação, sempre necessário um ID único
 	Sempre salvar o endereço IP que aparece com a porta 3000. Para verificar no dispositivo como o projeto está, necessário ter este IP.
 	Org. de um projeto Phonegap
 	Subpastas cordova, hooks, platforms, plug-ins e www
 	Todos os códigos ficam na pasta www
 	Utilização do Cordova para criação, visualização de projetos Front-End
 	
	Visualização do projeto pelo USB, pelo celular próprio.
 	Configurações do CORDOVA nas Plataformas é dividido por: Desenvolvimento, emulação, teste e publicação
 	Plataforma Android + genérica e amigável de todas.
 	Desenvolvimento - Android SDK
 	Emuladores - Está no SDK
 	Teste em aparelho - qualquer aparelho com essa plataforma
 	Publicação - é necessário uma conta de desenvolvedor, 1 pag.U$25
 	Windows Phone - windows 8.1 ou 10, v. PRO, 64 bits
 	Desenvolvimento - Visual Studio ou Express
 	Emulador - emulador no Visual Studio e processador moderno
 	Teste - registrar o aparelho no sdk e desktop
 	Publicar - U$19 ano
 	IOS - PC MAC
 	Desenvolvimento - XCODE
 	Emulador - XCODE
 	Teste - a partir do XCODE 7, pode testar direto no aparelho
 	Publicar - XCODE + conta des. que custa U$99/ ano
PODEMOS DESENVOLVER EM QUALQUER PLATAFORMA PELO CORDOVA - Limitando-se a XML - CSS- HTML
 	Aprendendo a criar plugins e rodar no avd
 	Plugin da camera
cameraOptions - customiza captura da imagem
Quality - qualidade imagem
destinationType - retorno da imagem (DATA_URL com base64 e FILE_URL que retorna o caminho da imagem)
sourceType - fonte da imagem
- PHOTOLIBRARY - biblioteca de imagem
- CAMERA - para a câmera
- SAVEDPHOTOALBUM - para ser de algum álbum
Recursos Dialogs (prompt)
Recursos CAMERA nativo do dispositivo
 	Conhecendo plug-ins cordova de media, media com tempo, e media gravando áudio
 src - caminho do arquivo de áudio
mediaSuccess - função executada assim que for completada a reprodução, gravação ou parada do arquivo de áudio (opcional)
mediaError - se ocorre erro
mediaStatus - Status do arquivo de áudio
 	Métodos
media.getCurrentPosition: retorna a posição atual do áudio
media.getDuration: retorna a duração do áudio
media.play; inicia o áudio
media.pause: pausa o áudio
media.release; libera os recursos utilizados pela classe
media.seekTo: mover a posição de linha de tempo do áudio
media.startRecord: inicia a gravação do áudio
media.stopRecord; parar a gravação do áudio
media.stop: parar o áudio
Função DEVICE
modelo
cordova (model)
platform - S.O. do dispositivo
uuid - id universar
version - versão do S.O.
accelerometer - acelerômetro
accelerometerSuccess;
accelerometerError;
acelerômetro - Cada vez mais empregado nos aparelhos eletrônicos portáteis, o acelerômetro possibilita uma nova interação com a máquina. Muito mais que avaliar a posição relativa do aparelho e ajustar o visor do celular, o instrumento que mede acelerações está abrindo um leque de alternativas inovadoras.
 	x - no plano cartesiano 
 	y - no plano cartesiano
 	z -no plano cartesiano
 	timestamp - tempo atual em milissegundos
navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError, [accelerometerOptions]);
 	metodo WathAcceleration que pega a posição em intervalo de tempo
 	navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError, );
SQLite - create sqliteteste
	utilização de SQLite
	JQuery Mobile – Biblioteca que utiliza linguagem JavaScript para criação de aplicações mobile Web. Fornece uma estrutura de temas.
	Criar, alterar, listar e remover as anotações.
Todos os componentes do JQuery UI estão disponíveis para ajudar no desenvolvimento do aplicativo: páginas, diálogos, barras de ferramentas, formulários, caixas de texto, botões, entre outros. 
Além disso, o JQuery Mobile foi criado a partir do JQuery, portanto, é possível acessar recursos como, manipulação de evento, comunicação com servidor usando Ajax, imagem para página e efeitos de animação.
	
�