1

ECOSYSTEM

2

Interação Nokia Developer

http://www.developer.nokia.com Twitter: @nokiadev_brasil

Grupo Devs S40 no Nokia Developer http://www.developer.nokia.com/Co

mmunity/Discussion/group.php?groupid=114

Apps de consumo de APIs de Internet para mobile phones

3

Raymundo Junior Desenvolvedor – INdT

Evangelista Nokia de Tecnologia

4

• Device S40

• Estrutura do Projeto

• Main

• Template

• Lib

• Service

• JSON Viewer

• View1

• View2

• View3

• Estudo de Caso

Conteúdo

Device S40

5

Nokia Developer • http://www.developer.nokia.com/Devices/Device_sp

ecifications/?filter1=s40

6

Estrutura do Projeto

7

var main = {

init : function(){

view1.init();

}

};

Main

8

var template = {

'item_view1' : '<div class="item-view1" onclick="mwl.switchClass(\'#content\',\'view*\',\'view2\');view2.init(\'{ID}\');">{TEXT}</div>',

'item_view2' : '<div onclick="mwl.switchClass(\'#content\',\'view*\',\'view3\');view3.init(\'{ID}\');">{TEXT}</div>',

'item_view3' : '<div>{TEXT}</div>'

};

Template

9

var lib = { call: function(url, successCallback, errorCallback){ var request = new XMLHttpRequest(); try { request.open("GET", url, true); request.onreadystatechange = function(){ if (request.readyState == 4) { if (request.status == 200) { successCallback(eval('(' + request.responseText + ')')); } else { errorCallback("error status: " + request.status); } } }; request.send(null); } catch (e) { errorCallback("error try: " + e); } } };

Lib

10

var BASE_URL = 'http://justkaws.com/json/';

Service

11

var URLS = {

'plataformas' : 'index.php?opcao=plataformas',

'devices' : 'index.php?opcao=devices&id={ID}',

'device' : 'index.php?opcao=device&id={ID}'

};

Service

12

getView2 : function(id, success, error) {

var url = service.getUrl('devices').replace("{ID}", id);

lib.call(url, success, error);

},

getView3 : function(id, success, error) {

var url = service.getUrl('device').replace("{ID}", id);

lib.call(url, success, error);

}

Service

13

var BASE_URL = 'http://justkaws.com/json/'; var URLS = { 'plataformas' : 'index.php?opcao=plataformas', 'devices' : 'index.php?opcao=devices&id={ID}', 'device' : 'index.php?opcao=device&id={ID}' }; var service = { getUrl: function(id) { return BASE_URL + URLS[id]; }, getView1 : function(success, error) { var url = service.getUrl('plataformas'); lib.call(url, success, error); }, getView2 : function(id, success, error) { var url = service.getUrl('devices').replace("{ID}", id); lib.call(url, success, error); }, getView3 : function(id, success, error) { var url = service.getUrl('device').replace("{ID}", id); lib.call(url, success, error); } };

Service

JSON Viewer

14

LINK: http://jsonviewer.stack.hu/

JSON Viewer

15

LINK: http://jsonviewer.stack.hu/

16

init : function(){ document.getElementById('title-view1').innerHTML = "Plataformas NOKIA"; service.getView1( function(data){ view1.render(data); },function(data){ document.getElementById('view-content1').innerHTML = data; } ); },

View1

17

render : function(data){ var dados = data.json; var limit = dados.length; var itemTemplate = template.item_view1; var itens = ""; for (var x = 0; x< limit; x++){ var params = dados[x].platform + '[!{#?#?#}!]' + dados[x].id; itens += itemTemplate.replace("{TEXT}", dados[x].platform).replace("{ID}", params); } document.getElementById('view-content1').innerHTML = itens; }

View1

18

var view1 = { init : function(){ document.getElementById('title-view1').innerHTML = "Plataformas NOKIA";

service.getView1( function(data){ view1.render(data);

},function(data){ document.getElementById('view-content1').innerHTML = data;

} ); },

render : function(data){ var dados = data.json;

var limit = dados.length;

var itemTemplate = template.item_view1; var itens = "";

for (var x = 0; x< limit; x++){ var params = dados[x].platform + '[!{#?#?#}!]' + dados[x].id;

itens += itemTemplate.replace("{TEXT}", dados[x].platform).replace("{ID}", params); }

document.getElementById('view-content1').innerHTML = itens;

} };

View1

19

init : function(args){ var vetor = args.split('[!{#?#?#}!]'); document.getElementById('title-view2').innerHTML = vetor[0]; service.getView2( vetor[1], function(data){ view2.render(data); },function(data){ document.getElementById('view-content2').innerHTML = data; } ); },

View2

20

render : function(data){ var dados = data.json; var limit = dados.length; var itemTemplate = template.item_view2; var itens = ""; for (var x = 0; x< limit; x++){ var params = dados[x].name + '[!{#?#?#}!]' + dados[x].id; itens += itemTemplate.replace("{TEXT}", dados[x].name).replace("{ID}", params); } document.getElementById('view-content2').innerHTML = itens; }

View2

21

var view2 = { init : function(args){

var vetor = args.split('[!{#?#?#}!]');

document.getElementById('title-view2').innerHTML = vetor[0];

service.getView2( vetor[1], function(data){

view2.render(data); },function(data){ document.getElementById('view-content2').innerHTML = data;

} );

},

render : function(data){ var dados = data.json;

var limit = dados.length;

var itemTemplate = template.item_view2; var itens = "";

for (var x = 0; x< limit; x++){ var params = dados[x].name + '[!{#?#?#}!]' + dados[x].id;

itens += itemTemplate.replace("{TEXT}", dados[x].name).replace("{ID}", params);

} document.getElementById('view-content2').innerHTML = itens;

} };

View2

22

init : function(args){ var vetor = args.split('[!{#?#?#}!]'); document.getElementById('title-view3').innerHTML = vetor[0]; service.getView3( vetor[1], function(data){ view3.render(data); },function(data){ document.getElementById('view-content3').innerHTML = data; } ); },

View3

23

render : function(data){ var dados = data.json; var limit = dados.length; var itemTemplate = template.item_view3; var itens = ""; for (var x = 0; x< limit; x++){ itens += itemTemplate.replace("{TEXT}", dados[x].label + ": " + dados[x].value); } document.getElementById('view-content3').innerHTML = itens; }

View3

24

var view3 = { init : function(args){

var vetor = args.split('[!{#?#?#}!]');

document.getElementById('title-view3').innerHTML = vetor[0];

service.getView3( vetor[1], function(data){

view3.render(data); },function(data){ document.getElementById('view-content3').innerHTML = data;

} );

},

render : function(data){ var dados = data.json;

var limit = dados.length;

var itemTemplate = template.item_view3; var itens = "";

for (var x = 0; x< limit; x++){ itens += itemTemplate.replace("{TEXT}", dados[x].label + ": " + dados[x].value);

}

document.getElementById('view-content3').innerHTML = itens; }

};

View3

25

Estudo de Caso

26

Raymundo Junior Desenvolvedor – INdT Evangelista de Tecnologia

E-mail: raymundo.ferreira-junior@indt.org.br

Twitter: twitter.com/justkaws

Site: justkaws.com

Blog: blog.justkaws.com

Obrigado!