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.

1. ECOSYSTEM
1

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?grou
pid=114
2

3. Apps de consumo de
APIs de Internet para
mobile phones
Raymundo Junior
Desenvolvedor – INdT
Evangelista Nokia de Tecnologia
3

4. Conteúdo
• Device S40
• Estrutura do Projeto
• Main
• Template
• Lib
• Service
• JSON Viewer
• View1
• View2
• View3
• Estudo de Caso
4

5. Device S40
Nokia Developer
• http://www.developer.nokia.com/Devices/Device_sp
ecifications/?filter1=s40
5

6. Estrutura do Projeto
6

7. Main
var main = {
init : function(){
view1.init();
}
};
7

8. Template
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>'
};
8

9. Lib
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);
}
}
};
9

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

11. Service
var URLS = {
'plataformas' : 'index.php?opcao=plataformas',
'devices' : 'index.php?opcao=devices&id={ID}',
'device' : 'index.php?opcao=device&id={ID}'
};
11

12. Service
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);
}
12

13. Service
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);
}
};
13

14. JSON Viewer
LINK: http://jsonviewer.stack.hu/
14

15. JSON Viewer
LINK: http://jsonviewer.stack.hu/
15

16. 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;
}
);
},
16

17. View1
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;
}
17

18. View1
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;
}
};
18

19. 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;
}
);
},
19

20. View2
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;
}
20

21. View2
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;
}
};
21

22. 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;
}
);
},
22

23. View3
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;
}
23

24. View3
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;
}
};
24

25. Estudo de Caso
25

26. Obrigado!
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
26