Developing mobile apps

One approach to the development of multi-platform mobile apps

Transcript

1. Phonegap
2. About me codebroken.wordpress.com github.com/lucasbrigida @lucas_brigida
3. User Devices Interfaces para diferentes devices e OS
4. Mobile World You'll need a Ninja Power ...or many programmers and money
5. Operating Systems Languages IOS Objective C Android Java ‘Harmony’ / C++ BlackBerry Java J2ME WebOS HTML, CSS and JS Windows Phone 7 .NET bs Bada C++ Mobile Universe
6. Smartphones (Brasil) 2010 2011 2012 (expected) 0 2 4 6 8 10 12 14 16 Vendas(smartphone) millions Um dos mercados mais promissores em arrecadação monetária através de app móveis Via IDC(http://www.idclatin.com/news.asp?ctr=bra&id_release=2213)
7. Mobile http://m.facebook.com Facebook (android) Browser (Web App) Native
8. Native Web Cross-platform X ✔ Linkable X ✔ Discoverable ✔ X Device APIs ✔ X Real World
9. Native Web Hybrid Cross-platform X ✔ ✔ Linkable X ✔ ✔ Discoverable ✔ X ✔ Device APIs ✔ X ✔ Real World
10. Alcatel-Lucent Zynga Microsoft Travelocity Vodafone Wikipedia Salesforce.com Who use?
11. What is Phonegap?
12. Paradise Bridge
13. Paradise Bridge
14. Work with Phonegap Phonegap App Build The Write Less, Do More
15. <canvas> <audio> <video> Web SQL localStorage Sockets Cache Manifest HTML5
16. JQuery DOM Libraries Dojo Zepto XUI
19. Sencha Style Libraries Jquery Mobile Jo LungoJS JQtouch
23. EaselJS Game Libraries CraftyJS GameJS LimeJS LimeJS
24. QUnit Test Libraries DominatorJS Jasmine thumbsJs
28. → Javascript vai muito além do que você imagina. → Javascript é orientado a eventos. ¹ → Noção de callbacks. → Noção de closure. → Javascript é assíncrono. → Operações lógicas são absurdas as vezes. (0.1+0.2 != 0.3) HTML5 + JAVASCRIPT+CSS3+CANVAS === STATE OF THE ART WEB Javascript ¹ Exemplo do garçom.
29. → Integração do (produto, serviço) com plataformas de terceiros. Ex: Facebook, Twitter. → Consumo de serviço de terceiros para o seu produto. Ex: Processamento de Imagens (Detectação de rostos) - “face.com” → Noção de OAuth. 3rd APIs
32. $.getJSON("http://search.twitter.com/search.json?callback=?&q=wewebconf", function (data) { $(".tweet").remove(); $(".alert").hide(); for(i in data.results){ var tweet = data.results[i]; console.log(tweet); var img = tweet.profile_image_url; var text = tweet.text; var user = tweet.from_user; var model='<li class="tweet"><a href="#tweet-dialog" data-rel="dialog" data-transition="none" onclick="setTweetDialog(this);"><img src='+img+' height="79"/><h3>'+user+'</h3><p>'+text+'</p></a></li>'; $("#trends-list").append(model); } $("#trends-list").listview('refresh'); $("#trends-list li").css('visibility','visible'); }); Demo – Twitter Search API * Using Jquery and Jquery Mobile
33. NodeJS Make your API Javascript Server-Side V8 Engine ECMA 5 Interface SO
34. NodeJS Apache vs. Nginx (Request)
35. NodeJS Apache vs. Nginx (Memory)
36. “Aplicações com grandes acessos, chegam a receber mais de 30 mil requisições por segundo.” “No Apache para cada requisição é criada uma thread (Alocado 1MB na RAM).” Quantos megabytes necessito para atender meus usuários? NodeJS
37. 30 Gigabytes de RAM NodeJS
38. Arquitetura Horizontal NodeJS Server A Server B Server C Server D Alta Complexidade Alto Custo (Ociosidade) Alto grau de dificuldade de manutenção Sentido da Escalabilidade
39. Arquitetura Vertical – On Demand NodeJS Server A Storage Baixa Complexidade Baixo Custo (Ociosidade) Baixo grau de dificuldade de manutenção Memory
40. NodeJS
41. NodeJS Run command in Shell: curl http://npmjs.org/install.sh | sh
42. NodeJS Run command in Shell: npm install express
43. Making... Blog: www.codebroken.wordpress.com Twitter: @lucas_brigida Mail: lucasbrigida@gmail.com
44. Thank You! Blog: www.codebroken.wordpress.com Twitter: @lucas_brigida Mail: lucasbrigida@gmail.com