apps de consumo de apis de internet para mobile phones
DESCRIPTION
Web Apps é um modo fácil e rápido de se construir aplicações para Série 40, entretanto existe o desafio de fazer uma App consumir APIs de Internet. Este webinar tem como objetivo mostrar métodos e boas práticas de consumo de APIs de Internet para a Web Apps Série 40.TRANSCRIPT
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: [email protected]
Twitter: twitter.com/justkaws
Site: justkaws.com
Blog: blog.justkaws.com
Obrigado!