37

Worklight exemplo

Embed Size (px)

Citation preview

Page 1: Worklight exemplo
Page 2: Worklight exemplo

Mobile - O próximo passo na evolução da computação

Host/Mainframe

Cliente/Servidor

Web/Desktop

Mobile/Wireless/Cloud

Mobile é diferente:

• Transformação no modelo de negócios

• Ciclos mais rápidos, mais interativos

• Novos ambientes para suportar

Page 3: Worklight exemplo

Não é só o FrontEnd que está mudando...

Page 4: Worklight exemplo

Native Apps

Requer conhecimentos específicos, maior custo e tempo para desenvolver. Pode entregar uma melhor experiência final ao usuario

Native Application

Device APIs

1001010101011101001010010010101110100100110101010101001001001011110010011001010101001010101010010101010101010101010111111000001010101010101001001010101010101000111101010001111010100111010101111100101101111010001011001110

Hybrid Apps -

Código WEB com a utilização de código nativo para uso específico, garantindo melhor experiência do usuário.

Native Shell

Web Native

Device APIs

<!DOCTYPE html PUBLICcreated 2003-12</p></body></html>

10010101010111010010101010101010010010010111100100110010

Hybrid Apps - Web

Código HTML5 e bibliotecas do Worklight empacotada na aplicação em native shell.

Native Shell

Web Code<!DOCTYPE html PUBLIC<html><! - - created 2003-12-1<head><title>XYZ</title</head></body></html>

Device APIs

Web Apps

Escreva em HTML5 JavaScript e CSS3. Rápido e barato para desenvolver, porem menos poderoso que o nativo

Mobile Browser

Web Code

<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - <head><title>XYZ</title></head><body></p></body></html>

Browser Access Downloadable Downloadable Downloadable

Browser Access Hybrid Apps - Web Hybrid Apps - Mixed

Native Apps

Desenvolvimento Móvel

Page 5: Worklight exemplo

Arquitetura Worklight

Page 6: Worklight exemplo

Worklight Studio

Eclipse Juno/Kepler• Nativo, Hibrido, WebOtimizações para cada ambiente• Código comum vs Personalizado• Opções para desenvolvimento nativo• Skins para cada tipo de dispostivoIntegração com bibliotecas

Integração com SDKs• Emuladores e ambiente de teste• Integração com Android SDK, Xcode e Visula Studio

Page 7: Worklight exemplo

Single DOM – WYSIWYG

Page 8: Worklight exemplo

Simuladores para teste (não nativo)

Page 9: Worklight exemplo

Worklight Console - Conexão com Backend

Page 10: Worklight exemplo

Primers - dojox/app• http://dojotoolkit.org/reference-guide/1.9/dojox/app.html

*

Page 11: Worklight exemplo

Sencha Touchhttp://www.sencha.com/products/touch/

Page 12: Worklight exemplo

INSTALAÇÃO DO WORKLIGHT

Page 13: Worklight exemplo

Instalação Java

*

Page 14: Worklight exemplo

Instalação Eclipse Kepler/Juno

*

Page 15: Worklight exemplo

Instalação Plugin

Eclipse → Help

Page 16: Worklight exemplo

CRIANDO UM APP HIBRIDO

Page 17: Worklight exemplo

Livraria

■ App consulta serviço REST/JSON do Google Books

■ Consulta por autor e titulo■ Programa é escrito em JS (main.js)

com Jquery■ Interface em HTML 5 + Dojo■ https://github.com/plucena/Livros■ http://percivallucena.com/livros.apk■ http://percivallucena.com/livros.ipa

Page 18: Worklight exemplo

Criando o Projeto

Page 19: Worklight exemplo

Estrutura do Projeto

Page 20: Worklight exemplo

Index.html – Ambiente Visual – Dojo/

Page 21: Worklight exemplo

Index.html

Page 22: Worklight exemplo

Index.html

Page 23: Worklight exemplo

Código Comum vs Customizações

Common code placedin primary file

Environment optimization code is maintained separately

Page 24: Worklight exemplo

API REST GoogleBooks

Page 25: Worklight exemplo

client.js

Page 26: Worklight exemplo

client.js

Page 27: Worklight exemplo

O App

Page 28: Worklight exemplo

Arquitetura Worklight

Page 29: Worklight exemplo

Adpters

Page 30: Worklight exemplo

Worklight Adapters

■ Serviços Disponíveis para o app móvel no Servidor Worklight

■ Conectar a outros sistemas■ Conectar a middleware: BDS,

JMS, Webservices

Page 31: Worklight exemplo

Worklight SQL Adapter

■ Permite que o app se conecte a Bds MySQL, Oracle e DB2

■ Driver JDBC deve ser copiado para\server\lib

Page 32: Worklight exemplo

Worklight SQL Adapter

■ Implementação em JS■ Configuração em XML

Page 33: Worklight exemplo

Worklight SQL Adapter – SQLAdapter.xml

Page 34: Worklight exemplo

Worklight SQL Adapter – SQLAdapter-impl.js

1 – WL.Server.createSQLStatement é usado para criar a consulta

2- Função JS no caso GetAcounts vai ser disponibilizada para o cliente com parametrização cliente recebe JSON como resposta

Page 35: Worklight exemplo

Código Cliente para chamar adapter / Resposta JSON

Page 36: Worklight exemplo

Perguntas

Page 37: Worklight exemplo

Obrigado