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/guluc3mgul@gul.uc3m.es

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?