CLIENTEAPIRESTCONLUNGOJS
ADOLFOSANZDEDIEGOOCTUBRE2013
1ACERCADE
1.1ELGULElGULeselGrupodeUsuariosdeLinuxdelaUC3M.Grupodepersonasconinquietudesentornoalainformática.ConlaideacomúndelautilizaciónypromocióndelSoftwareLibre.Quedamosdevezencuandoyorganizamosactividadessobretodoesto.Elpuntodeunióneslalistadecorreoqueestáabiertaatodoelmundo.
1.2¿DÓNDEENCONTRARNOS?Twitter:Lista:Ftp:Web:Podcast:Blog:Linkedin:
http://twitter.com/[email protected]
ftp://ftp.gul.uc3m.eshttp://www.gul.uc3m.es
http://holamundo.gul.es/http://planeta.gul.uc3m.es/
http://www.linkedin.com/groups?gid=3451836
1.3ADOLFOSANZDEDIEGOAntiguoprogramadorwebJEEHoyendía:ProfesordeFPdeinformática:Hardware,SistemasOperativosRedes,Programación
FormadorFreelance:Java,AndroidJavaScript,jQueryJSF,Spring,HibernateGroovy&Grails
Megustaprogramar
1.4HACKALOVER
ParalosamantesdeloshackathonesMeetup:
Twitter:Blog:LinkedIn:
YouTube:
http://www.meetup.com/Hackathon-Lovers/
http://twitter.com/HackathonLovershttp://hackathonlovers.tumblr.com/
http://www.linkedin.com/groups/Hackathon-Lovers-6510465
http://www.youtube.com/channel/UCRwSe7jK-y62BMvIiNBV1qw
1.5TWEETSSENTIMENT
Esunanalizadordetweetsqueextraeinformaciónsemánticaparaconocersielsentimientogeneraldelostweetsdeundeterminadotemaespositivoonegativo.Web:Twitter:
http://tweetssentiment.com/http://twitter.com/TweetsSentiment
1.6¿DONDEENCONTRARME?Minick:asanzdiegoAboutMe:GitHub:Twitter:Blog:LinkedIn:Google+:
http://about.me/asanzdiegohttp://github.com/asanzdiegohttp://twitter.com/asanzdiego
http://asanzdiego.blogspot.com.eshttp://www.linkedin.com/in/asanzdiego
http://plus.google.com/+AdolfoSanzDeDiego
1.7CRÉDITOSEstastransparenciasestánhechascon:https://github.com/asanzdiego/markdownslides
1.8LICENCIAEstastransparenciasestánbajounalicencia:
Elcódigodelosprogramasestánbajounalicencia:
CreativeCommonsReconocimiento-CompartirIgual3.0
GPL3.0
1.9FUENTESTransparencias
Código
SlideShareDeckSlidesRevealSlidesPlainHTML
https://github.com/asanzdiego/curso-api-restful-lungojs-client-2013/tree/master/src
2APIS¿PARAQUÉ?
2.1APLICACIÓNESTÁNDAR
2.2INTRODUCIMOSAPI
2.3SEPARACIÓNROLES
2.4¿YAHORAQUÉ?
2.5SERVICIOSEXTERNOS
2.6APPSCLIENTES
2.7APPSDESERVICIOS
2.8APPSMIXTAS
2.9PLATAFORMA
2.10¿QUIENEXPONEAPIS?
2.11¿QUIENEXPONEAPIS?
2.12¿QUIENEXPONEAPIS?
2.13EXPONLASTÚ
2.14EXPONLASTÚ
2.15EXPONLASTÚ
3APISRESTFUL
3.1¿QUÉESREST?REST(RepresentationalStateTransfer)esunatécnicadearquitecturadesoftwareparasistemashipermediadistribuidoscomolaWorldWideWeb.EnRESTunaURL(UniformResourceLocator)representaunrecurso.SepuedeaccederalrecursoomodificarlomediantelosmétodosdelprotocoloHTTP:
GET,POST,PUT,DELETE
3.2EJEMPLOAPIhttp://myhost.com/talkGET>Devuelvetodaslascharlas.POST>Crearunanuevacharla.
http://myhost.com/talk/123GET>Devuelvelacharlaconid=123PUT>Actualizalacharlaconid=123DELETE>Borralacharlaconid=123
3.3MANEJODEERRORESSepuedenutilizarloserroresdelprotocoloHTTP:200Successful201Created202Accepted301MovedPermanently400BadRequest401Unauthorised402PaymentRequired403Forbidden404NotFound405MethodNotAllowed500InternalServerError501NotImplemented
3.4¿PORQUÉREST?Esmássencillo(tantolaAPIcomolaimplementación).Esmásrápido(peticionesmáslijerasquesepuedencachear).Esmultiformato(HTML,XML,JSON,etc.).SecomplementamuybienconAJAX.
3.5RESTVSRESTFULRESTserefiereauntipodearquitecturadesoftwareSeutilizacomonombreSeutilizacomoporejemplo:success=éxito.
SiunserviciowebesRESTfulindicaqueimplementadichaarquitectura.SeutilizacomoadjetivoSeutilizacomoporejemplo:successful=éxitoso).
3.6RESTVSRESTFULAveceselfulseconfundeconfull=completo.YserefierealosservicioswebRESTfull
YserefierealosservicioswebREST(sinelfull)
AquellosqueimplementanunaAPIcontodoslosmétodosdelprotócoloHTTP.
AquellosqueNOimplementanunaAPIcontodoslosmétodosdelprotócoloHTTP.
4CLIENTESMULTIDISPOSITIVO
4.1DISTINTOSDISPOSITIVOS
4.2DISTINTOSOS
4.3DISTINTOSOS
4.4DISTINTOSNAVEGADORES
4.5¡¡¡SOCORRO!!!
4.6ALRESCATE
4.7GRACEFULDEGRADATION
4.8GRACEFULDEGRADATION
4.9PROGRESSIVEENHANCEMENT
4.10PHONEGAP
5LUNGO.JS
5.1COMPETIDORESjQTouch:SenchaTouch:
jQueryMobile:hammer.js:
http://jqtjs.com/
http://www.sencha.com/products/touch/http://jquerymobile.com/
http://eightmedia.github.io/hammer.js/
5.2¿PORQUÉLUNGO?
5.3¿LICENCIAGPL?
5.4¿ESPAÑOL?
5.5PUESNO
5.6MEGUSTA
5.7ABURRIDO
6CÓDIGO
6.1APLAUSOS
6.2DIRECTORIOSPuedesusarlaestructuradedirectoriosquequieras.Yoheusadoesta:html:losHTMLconunacarpetaparacadaentidaddeldominojs:losJSconunacarpetaparacadaentidaddeldominolib:carpetaconlasdependenciasaotrosproyectosLungodependedeQuoqueesunalibreríadelosmismosauotresde'tipo'jQueryenfocadaamóviles
6.3JS/UTIL.JS//Searh$$('document').ready(function(){Lungo.dom('input[type=search]').on('keyup',...);});
//ServerURLvarutil_server_url="http://localhost:3000";
//ErrorNotificationvarutil_errorNotification=function(message,error){Lungo.Notification.error(message,"","warning-sign",2);};
//MétodosRESTvarutil_ajaxGet=function(url,data,callback){$$.get(util_server_url+url,data,...,'json');};varutil_ajaxPost=function(url,data,callback){...};varutil_ajaxPut=function(url,data,callback){...};varutil_ajaxDelete=function(url,data,callback){...};
6.4HTML/TALK/TALK-ADD.HTML<bodyclass="app"><sectionid="main"data-transition=""><headerdata-title="AddTalk"class="extended"></header><footer><nav><ahref="talk-list.html"data-icon="list"></a><ahref="talk-add.html"data-icon="plus"class="active"></a></nav></footer><articleid="main-article"class="activelist"><divclass="form"><fieldset><label>NAME:</label><inputtype="text"id="talkName"/></fieldset>...</div><div><ahref="#addTalk"id="addTalk"class="button">Add</a><ahref="talk-list.html"class="buttoncancel">Cancel</a></div></article></section></body>
6.5HTML/TALK/TALK-ADD.HTML
6.6JS/TALK/TALK-ADD.JS$$('#addTalk').tap(function(){
vardata={talkName:$$("#talkName").val(),talkDate:util_stringToDate($$("#talkDate").val()),talkSpeaker:$$("#talkSpeaker").val(),talkSpeakerMail:$$("#talkSpeakerMail").val(),talkPoints:$$("#talkPoints").val()};
//senddatatoserverutil_ajaxPost('/talk',data,function(json){if(!json||json.error){util_errorNotification('ERRORaddingtalk',json.error);}else{util_successNotification('Talksaved',function(){window.location.replace('talk-list.html');});}});});
6.7HTML/TALK/TALK-EDIT.HTML<bodyclass="app"><sectionid="main"data-transition=""><headerdata-title="EditTalk"class="extended"></header><navdata-control="groupbar"><ahref="#editTalkArticle"...>Edit</a><ahref="#deleteTalkArticle"...>Delete</a></nav><footer>...</footer><articleid="editTalkArticle"class="listindentedscroll">...</article><articleid="deleteTalkArticle"class="listindentedscroll">...</article></section></body>
6.8HTML/TALK/TALK-EDIT.HTML
6.9HTML/TALK/TALK-EDIT.HTML
6.10JS/TALK/TALK-GET.JS$$('document').ready(function(){
vartalkId=util_urlParams["talkId"];
//getdatafromserverutil_ajaxGet('/talk/'+talkId,{},function(json){if(!json||json.error){util_errorNotification('ERRORretrievingtalk',json.error);}else{vartalk=json;console.log('Talkretrieved');drawTalk(talk);}});
//drawdatavardrawTalk=function(talk){$$("#talkName").val(talk.talkName);...};});
6.11JS/TALK/TALK-UPDATE.JS$$('#saveTalk').tap(function(){
vartalkId=util_urlParams["talkId"];
vardata={talkName:$$("#talkName").val(),...};
//senddatatoserverutil_ajaxPut('/talk/'+talkId,data,function(json){if(!json||json.error){util_errorNotification('ERRORsavingtalk',json.error);}else{util_successNotification('Talksaved',function(){window.location.replace('talk-list.html');});}});});
6.12JS/TALK/TALK-DELETE.JS$$('#deleteTalk').tap(function(){
vartalkId=util_urlParams["talkId"];
//senddatatoserverutil_ajaxDelete('/talk/'+talkId,{},function(json){if(!json||json.error){util_errorNotification('ERRORdeletingtalk',json.error);}else{util_successNotification('Talkdeleted',function(){window.location.replace('talk-list.html');});}});});
6.13HTML/TALK/TALK-LIST.HTML<bodyclass="app"><sectionid="main"data-transition=""><headerdata-title="TalksList"class="extended"></header><footer><nav><ahref="talk-list.html"data-icon="list"class="active"></a><ahref="talk-add.html"data-icon="plus"></a></nav></footer><articleid="main-article"class="activelistindentedscroll"><divclass="form"><fieldsetdata-icon="search"><inputtype="search"placeholder="Search..."></fieldset></div><ulid="talks"></ul></article></section></body>
6.14HTML/TALK/TALK-LIST.HTML
6.15HTML/TALK/TALK-LIST.HTML
6.16JS/TALK/TALK-LIST.JS$$('document').ready(function(){
//getdatafromserverutil_ajaxGet('/talk',{},function(json){if(!json||json.error){util_errorNotification('ERRORretrievingtalks',json.error);}else{drawTalks(json);}});
//drawdatavardrawTalks=function(talks){for(vari=0;i<talks.length;i++){vartalk=talks[i];$$("#talks").append('<lidata-action="search"class="selectable">'+'<ahref="talk-edit.html?talkId='+talk._id+'">'+'<strong>'+talk.talkName+'</strong></a></li>');}};});
7DEMO
8¿ALGUNAPREGUNTA?