UNIVERSIDADPOLITÉCNICADEMADRIDEscuelaTécnicaSuperiordeIngenieríadeSistemasInformáticos
MÁSTERENINGENIERÍAWEBProyectoFindeMáster
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
AutorDiegoCastañoChillarón
TutorLuisFernandodeMingoLópez
1dejuliode2016
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
AGRADECIMIENTOS
Graciasamifamiliayamigosporsuapoyoconstante.
[UPM]MásterenIngenieríaWeb
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
RESUMEN
Sepretendedesarrollarunaplataformasocialparacompartirimágenes.Estoseconseguirá implementando una API REST y un cliente Android. El sistema serádesarrolladousandolassiguientestecnologías:PythonconDjangoRESTFrameworkyJavaconAndroidSDK.
Elobjetivoesaunarenuntrabajoteórico-prácticolosconocimientosadquiridosenlasasignaturasdeVisiónGeneral,PatronesdeDiseño,MetodologíasWebLigerasyDesarrollodeAplicacionesparaSistemasmóviles.
PALABRAS CLAVE Mediosocial,imagen,Android,APIREST
[UPM]MásterenIngenieríaWeb
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
ABSTRACT
Theintentionistodevelopasocialmediaplatformforsharingimages.ThiswillbeaccomplishedbyimplementingaRESTfulAPIandanAndroidclient.Thesystemwillbedevelopedusingthefollowingtechnologies:PythonwiththeDjangoRESTFrameworkandJavawiththeAndroidSDK.
Theaimistomixinatheoretico-practicalprojecttheknowledgeacquiredinthesubjectsofGeneralVision,DesignPatterns,AgileWebMethodologiesandApplicationDevelopmentforMobilesystems.
KEYWORDS Socialmedia,image,Android,RESTAPI
[UPM]MásterenIngenieríaWeb
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
TABLA DE CONTENIDOS
Agradecimientos..............................................................................................................3
Resumen...........................................................................................................................5
Abstract............................................................................................................................7
TabladeContenidos.........................................................................................................9
Objetivosdelproyecto...................................................................................................12Dominio.................................................................................................................................12Alcance...................................................................................................................................12Motivación.............................................................................................................................13
Tecnologíasempleadas..................................................................................................14Arquitecturaglobal................................................................................................................14Cliente....................................................................................................................................15
Android..............................................................................................................................15Manifiesto..........................................................................................................................16Activity...............................................................................................................................17Fragment...........................................................................................................................18VistatabuladaconTabLayoutyViewPager.......................................................................19RecyclerView.....................................................................................................................20SwipeRefreshLayout..........................................................................................................21FloatingActionButton.......................................................................................................22EasyImage..........................................................................................................................23Picasso...............................................................................................................................24Retrofit2............................................................................................................................25GSON.................................................................................................................................26FacebookAndroidSDK......................................................................................................27Fabric.................................................................................................................................28
Servidor..................................................................................................................................29Heroku...............................................................................................................................29Virtualenv..........................................................................................................................30WhiteNoise........................................................................................................................31AmazonS3.........................................................................................................................32Django................................................................................................................................33DJ-Database-URL...............................................................................................................34Gunicorn............................................................................................................................34S3Boto...............................................................................................................................34DjangoRESTFramework....................................................................................................35DjangoRESTFrameworkSocialOauth2............................................................................36PostgreSQL........................................................................................................................37
Entornosdedesarrollo...........................................................................................................38PyCharm............................................................................................................................38AndroidStudio...................................................................................................................39
Desplieguecontinuo..............................................................................................................40GitHub...............................................................................................................................41TravisCI.............................................................................................................................41Heroku...............................................................................................................................41
[UPM]MásterenIngenieríaWeb
Desarrollorealizado.......................................................................................................42Metodología...........................................................................................................................42Inception................................................................................................................................43
ProductBacklog.................................................................................................................43Hojaderuta.......................................................................................................................44
Sprint1:Autenticación..........................................................................................................47SprintBacklog....................................................................................................................47
IniciarsesiónconFacebook.........................................................................................................47IniciarsesiónconTwitter.............................................................................................................47Cerrarsesión................................................................................................................................48Eliminarcuenta............................................................................................................................48
Planificacióndelsprint......................................................................................................49Tareas...........................................................................................................................................49Diseño..........................................................................................................................................50Wireframes..................................................................................................................................52
Implementación.................................................................................................................53Endpoints.....................................................................................................................................53Pruebas........................................................................................................................................53
Pruebasdeaceptación......................................................................................................54IniciarsesiónconFacebook.........................................................................................................54IniciarsesiónconTwitter.............................................................................................................55Cerrarsesión................................................................................................................................56Eliminarcuenta............................................................................................................................57
Sprint2:Publicaciones...........................................................................................................58SprintBacklog....................................................................................................................58
Publicarunaimagen.....................................................................................................................58Visualizarpublicacionesglobales.................................................................................................59
Planificacióndelsprint......................................................................................................60Tareas...........................................................................................................................................60Diseño..........................................................................................................................................61Wireframes..................................................................................................................................63
Implementación.................................................................................................................64Endpoints.....................................................................................................................................64Pruebas........................................................................................................................................64
Pruebasdeaceptación......................................................................................................65Publicarunaimagen.....................................................................................................................65Visualizarpublicacionesglobales.................................................................................................66
Sprint3:Perfiles.....................................................................................................................67SprintBacklog....................................................................................................................67
Eliminarunapublicaciónpropia..................................................................................................67Visualizarperfilpropio.................................................................................................................67Visualizarperfilajeno...................................................................................................................68
Planificacióndelsprint......................................................................................................69Tareas...........................................................................................................................................69Diseño..........................................................................................................................................70Wireframes..................................................................................................................................72
Implementación.................................................................................................................73Endpoints.....................................................................................................................................73Pruebas........................................................................................................................................73
Pruebasdeaceptación......................................................................................................74Eliminarunapublicaciónpropia..................................................................................................74Visualizarperfilpropio.................................................................................................................75Visualizarperfilajeno...................................................................................................................75
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
Sprint4:Relaciones................................................................................................................76
SprintBacklog....................................................................................................................76Buscarusuariosporsunombre...................................................................................................76Empezaraseguiraunusuario.....................................................................................................76Dejardeseguiraunusuario........................................................................................................77Visualizarpublicacionesdeusuariosalosquesigo.....................................................................77
Planificacióndelsprint......................................................................................................78Tareas...........................................................................................................................................78Diseño..........................................................................................................................................79Wireframes..................................................................................................................................81
Implementación.................................................................................................................83Endpoints.....................................................................................................................................83Pruebas........................................................................................................................................83
Pruebasdeaceptación......................................................................................................85Buscarusuariosporsunombre...................................................................................................85Empezaraseguiraunusuario.....................................................................................................86Dejardeseguiraunusuario........................................................................................................86Visualizarpublicacionesdeusuariosalosquesigo.....................................................................87
Arquitecturadelcliente.........................................................................................................88Arquitecturadelservidor.......................................................................................................89
Conclusionesyposiblesmejoras....................................................................................90Resultados..............................................................................................................................90Mejoras..................................................................................................................................90
Bibliografía.....................................................................................................................91
[UPM]MásterenIngenieríaWeb
Página12
OBJETIVOS DEL PROYECTO
En este capítulo se describirán los objetivos de este proyecto, definiendo eldominio,alcanceymotivacióndelmismo.
DominioEste proyecto tiene comoobjetivo principal desarrollar unaplataforma social
paracompartirimágenesendispositivosmóviles.
El objetivo es tanto teórico como práctico, se busca llevar a la práctica losconceptos aprendidos durante el Máster en Ingeniería Web para aplicarlos a unproyecto innovador que explore las posibilidades de las tecnologías existentesconstruyendounsistemaútilenelmundoreal.
Así,enestetrabajoteórico-prácticoseaplicanlosconocimientosadquiridosenlas asignaturas de en las asignaturas de VisiónGeneral (el concepto deweb social),Patrones de Diseño (en concreto los patronesMVP),MetodologíasWeb Ligeras (enconcreto SCRUM) yDesarrollo deAplicaciones para Sistemasmóviles (programaciónparaAndroid).
Para desarrollar esta plataforma se implementará una API REST que seráconsumidadesdeunclienteAndroid.Elsistemaseráimplementadusandolassiguientestecnologías:PythonconDjangoRESTFrameworkparaelservidoryJavaconAndroidSDKparaelcliente.
AlcanceComoresultadosdeesteproyecto,sebuscaproducirunaseriedeartefactos,en
concreto:
1. UnrepositorioconelcódigodelaAPIRESTpública.2. UnrepositorioconelcódigodelaaplicaciónAndroid.
Laintenciónesqueestosrepositoriospúblicossirvancomobaseextensibleparadesarrollarcualquiertipodeplataformademediossociales.
Queda fueradel alcancedel proyectoel desarrollodeunmodelodenegocioentornoalaplataformadesarrollada.
Enesteproyectonoseconsiderarátampocoeldesarrollodeclientesparaotrasplataformasnativas(iOS,WindowsPhone,Blackberry,etc.).Tampocoseexploraráenestetrabajolaposibilidaddeextenderlafuncionalidadconunaaplicaciónweb.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página13
Motivación Delasdiezaplicacionesmáspopularesdelmundoenlaactualidad,lamitadsonplataformasdemediossociales:Facebook,Snapchat,Instagram,YouTubeyTwitter.
Estepredominiodelosmediossocialesentrelasaplicacionesmóvilesvienedadoporunconjuntodetendencias,tantosocialescomoeconómicasytecnológicas.
Enelámbitodelosocial,laproliferacióndelasplataformasdecontenidodigitalha supuesto la democratización de la producción de contenidos, convirtiendo a losusuariosdeconsumidoresaprosumidores.
Enelcampotecnológico,apartirdelarevolucióndelaweb2.0secomprobóquelas grandes plataformas podían beneficiarse de abrir sus interfaces, por lo que lamayoría comenzaron a ofrecer APIs REST públicas, como es el caso de Facebook oTwitter.
Este giro hacia las arquitecturas ligeras, viene acompañadodeuna tendenciahaciadesarrollarlosclientesenellenguajenativodelosdispositivos,estoesiOSparaiPhone, Java para Android, y frecuentemente una versión web para dispositivos deescritorio,comohacenTwitter,Facebook,InstagramoYouTube,entreotros.
En cuanto a los factores económicos encontramos que la popularización deserviciosPaaS(PlatformasaService)dehostingcomoAmazonWebServicesoHerokubrindanlaoportunidaddecomenzarproyectosdeplataformaconuncosteinicialmuybajoonuloyescalarlosmásadelante.
SumadoaldesarrollodeclientesenplataformasabiertascomoAndroidprovocaquelabarreradeentradaparacomenzaradesarrollarmediossocialesseamásbajaquenunca.
[UPM]MásterenIngenieríaWeb
Página14
TECNOLOGÍAS EMPLEADAS
Enestecapítulosedescriben las tecnologías involucradaseneldesarrollodelproyecto.
Arquitecturaglobal Elsiguientediagramaquedescribelaarquitecturaglobaldelsistema:
Se trata de un sistema distribuido cliente-servidor. Nuestra API REST sehospedaráenHeroku,tantoelservidordebasededatosquefuncionaconPostgreSQLcomoelservidorwebGunicornqueseocupaderesponderalaspeticionesHTTP. HacemosusodelosservidoresdeFacebookyTwitteralaccederasusrespectivasAPIspúblicasparaautenticaralosusuariosdenuestrosistema. Se utiliza además la infraestructuradeAmazonWebServices, en concreto suservicio de almacenamiento y distribuciónde ficheros estáticosS3 paradescargar alservidordeHerokudelagestióndeficherosdeimagenyhacerelsistemamásfácilmenteescalable.
ElclienteserálaaplicaciónAndroidqueseejecutaeneldispositivomóvil,queharápeticionesHTTPalasAPIsyrecibirádatosenformadeJSONeimágenesestáticas.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página15
Cliente A continuación se profundizará en cada una de las tecnologías y elementosutilizadoseneldesarrollodelclienteparadispositivosmóviles.
Android Android es un sistema operativo basado en Linux optimizado para usarse endispositivosmóviles conpantalla táctilqueha sidodesarrolladoporGoogle.Androidofrecesoporteparamultituddetamañosyresolucionesdepantallayestádisponibleenmásde70idiomasdistintos.
SeescogiódesarrollarelclientedenuestrosistemaparaAndroidporqueesdedistribucióngratuitaycódigolibre,bajolicenciaApache2.0.
Además es el sistema
operativomásusadoendispositivosmóviles en la actualidad con unacuotademercadodel62.33%frenteal23.01%de iOS (OperatingSystemMarketShare,2016).
En este proyecto nos centraremos en desarrollar una aplicación que seacompatible con las versiones iguales o posteriores aAndroid 4.1 (JellyBean), lo cualsuponesoportarel96%detodoslosterminalesAndroidenuso,talycomosemuestraenlasiguientetabla(PlatformVersions,2016):
Versión Nombre NºAPI Distribución2.2 Froyo 8 0.1%
2.3.3-2.3.7 Gingerbread 10 2.0%4.0.3-4.0.4 IceCreamSandwich 15 1.9%
4.1.x JellyBean
16 6.8%4.2.x 17 9.4%4.3 18 2.7%4.4 KitKat 19 31.6%5.0 Lollipop 21 15.4%5.1 22 20.0%6.0 Marshmallow 23 10.1%
[UPM]MásterenIngenieríaWeb
Página16
Manifiesto ElficheroAndroidManifest.xmlesunarchivoenformatoXMLquecontienetodaaplicaciónAndroidensuraízyquepresentaalsistemaoperativolainformaciónesencialsobrenuestraaplicación.(ManifestoIntro,2016)
Sirveportantoparadefinirparámetrostalescomoelnombredelpaquetedelaaplicación, sus componentes (actividades, servicios, etc.), permisos especiales paraaccederaAPIsprotegidasolasbibliotecasconlasquesedebeenlazarlaaplicaciónalserempaquetada.
ElficheroManifestdenuestraaplicaciónseguirálasiguienteestructura:
Vemos como en nuestro caso se define el nombre del paquete, dos permisos
especialesparaaccederaInternetyalalmacenamientoexterno,dosmetadatosy lasactividadesquecompondránlaaplicación.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página17
Activity Una actividad es un componente fundamental de una aplicación Android.Representaunaacción concretaqueel usuariopuede realizar y está asociadaaunaventanaenlaquemuestrasuinterfazdeusuario.
Cadaactividad implementadadeberáextender laclaseActivity (o sus subclases,como AppCompatActivity) cuya interfaz de usuario se define mediante XML en sucorrespondiente ficherode layout quemás tarde semostrará comocontenidode laactividad.Porejemplo,elficherodelayoutdelaizquierdaproducelainterfazdeusuariodeladerecha:
En cada aplicación se establece una de las
actividades como “actividad principal”, que será laprimera en cargar.Una actividadpodrá lanzar otrasactividadespormediodeIntents.
Cadaactividadtienesupropiociclodevida,conmétodosquesedisparanaltransitardeunestadoaotro.Paracapturarcualquieradeestoseventosbastaconsobrescribirelmétodocorrespondiente.
[UPM]MásterenIngenieríaWeb
Página18
Fragment Un fragmento es un componente que representa un comportamiento o unaporcióndeinterfazdeusuariodentrodeunaactividad.
Unasolaactividadpuedecontenermúltiples fragmentosyasuvezunmismofragmento puede ser reutilizado en múltiples actividades. Podemos pensar en losfragmentoscomountipode“sub-actividad”.
Los fragmentos también pueden ser útiles para definir interfaces de usuariobasadasenpaneles,quesemuestrenconunouotrolayoutsegúneltamañoyresolucióndelapantallaoeltipodedispositivo,etc.
Losfragmentostienensupropiociclodevida(muysimilaraldelasactividades)aunquesevenafectadosporelestadodelaactividadqueloscontiene,esdecir,siunaactividadestáenestadodepausa,todoslosfragmentosquecontengatambiénestaránenpausa,etc.
Deformaanálogaalasactividades,losfragmentostambiénutilizanunficheroXMLparadefinirsulayout.
EnesteproyectosehahechousodelosfragmentosenconjuntoconloselementoTabLayoutyViewPagerparaconseguirunaactividadconpestañas,quepermitacargardinámicamente un fragmento con una interfaz de usuario u otra según la pestañaseleccionada.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página19
VistatabuladaconTabLayoutyViewPager La vistaTabLayout esunelementode layout quenospermite renderizar unaseriedepestañasnavegables.ElcomponenteViewPagernospermitepaginarunaseriedefragmentosdemaneraordenada.Sicombinamosestosdoselementosdelasiguientemanera(Esquenazi,2016):
Conseguiremosunavistaconunpestañasquepermitepasardeunfragmentoaotro,manteniendoelestadodecadafragmento:
[UPM]MásterenIngenieríaWeb
Página20
RecyclerView ElelementoRecyclerViewesunaversiónmásavanzadayflexibledelelemento
ListView. Este elemento es un contenedor paramostrar grandes conjuntos de datossobreloscualessepuedehacerscrolldemaneramuyeficientemanteniendounnúmerolimitadodevistasenmemoria(Google,2016). SeutilizaráestaaproximaciónenlugardelListViewrudimentarioparapermitirhacerscrollsobreunnúmeroindeterminadodeimágenessinconsumirtodalamemoriadisponible.Másadelanteseexplicarácómoseimplementóun“scrollinfinito”haciendousodeestemismoelemento. ParautilizarunRecyclerViewenunlayoutdecualquieractividadofragmento,seutilizaelsiguienteXML:
Para implementar un RecyclerView habrá que implementar también unadaptador(extendiendodeRecyclerView.Adapter)queseocupedeproveerdeunavista(ViewHolder)acadaítemdelconjuntodedatosyungestordelayoutqueseocupedemediryposicionarlasvistasdelosítemsasícomodelaestrategiaaseguircuandolosítemsnoseanvisiblesparaelusuario(extendiendodeRecyclerView.LayoutManager).
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página21
SwipeRefreshLayout ElelementoSwipeRefreshLayoutpermitecapturareleventoenelqueelusuariointentahacerscrollhaciaarribaenunRecyclerViewcuandoyasehaalcanzadoeltope.BastaconrodearelRecyclerViewdelasiguientemanera:
La actividad que instancie este elemento deberá implementar la interfazOnRefreshListenerparasernotificadacuandoelusuariorealiceelgestoderefrescar.
Ahora,cuandoelusuariohagaelgestodeswipevertical(arrastrarlalistahaciaabajo),semostraráunaanimacióndecargahastaquelaclase manejadora de eventos llame asetRefreshing(false),notificandodequelalistaya ha sido refrescada para esconder laanimación.
[UPM]MásterenIngenieríaWeb
Página22
FloatingActionButton Elbotóndeacciónflotante,comúnmenteabreviado“FAB”esuncomponentevisualdeAndroidquenospermitecolocarunbotónqueflotaenprimerplano.
ParautilizarlobastarodearelcontenidosobreelquesequierecolocarelbotónconunFrameLayoutyañadirelelementoFloatingActionButtondentrodelmismo,deestaforma:
Mostraráunainterfazdeusuariocomolasiguiente:
Normalmente se utiliza para desarrollarinterfaces de usuario donde existe una acciónpredominante o especialmente importante queconviene que sea accesible en todomomento sinresultarintrusivoparalanavegaciónenelrestodelaaplicación.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página23
EasyImage EasyImage es una biblioteca libre paraAndroid que permite seleccionar unaimagen desde la galería o tomar una foto con la cámara sin necesidad de crear unmontóndecódigorepetitivo.(Kwiecień,2015) ParaañadirloalproyectobastaconañadirsudependenciaGradle:
Y añadir al manifiesto los permisos para poder almacenar las imágenescapturadasenelalmacenamientoexterno(tarjetaSD): Ahora,parahacerunafotopodemosinvocaralmétodo: Mientrasqueparapermitirseleccionarunaimagendesdelagaleríainvocamos: Encualquieradeloscasos,laimagenseráretornadaalaactividadqueinvocóala biblioteca, por loque, para acceder a la imagen seleccionada, la actividaddeberásobrescribirelmétodoonActivityResultdeestamanera:
DondeimageFileesunareferenciaalarchivodeimagencreadooseleccionado.
[UPM]MásterenIngenieríaWeb
Página24
PicassoPicasso es una biblioteca paraAndroid que sirve para descargar, transformar y
cachearimágenesdemaneramuysimplificada. LainstalacióndePicassoesmedianteunadependenciaGradle:
Picassonorequiereañadirpermisosespecialesalmanifiesto. ParacargarunaimagenenunavistaapartirdesuURL,utilizamoslossiguientesmétodosencadenados:
Enestecasolaimagenesescaladayrecortadaparaencajarenlavista.Picassoseocupadedescargarycargarlasimágenes,cacheándolasautomáticamenteparaevitarhacerpeticionesduplicadas.
PordefectoPicassoaplicaunapolíticadecacheodedosniveles:primerobuscarálaimagenenmemoriaRAM.Sinosehavisualizadorecientemente,noseencontraráenRAM,yentoncespasaráabuscarlaimagenendisco.Silaimagenrequeridatampocoseencuentraalmacenadaendisco,entoncessíserealizaráunanuevapeticióndedescarga.
Siunapeticióndedescargafallase,Picassoseocupadere-hacerdichapetición
hastatresvecesconsecutivas,despuésdelascuales,fallarádeformasilenciosa. Picassopermiteaplicartambiéntransformacionesconelmétodotransform.Enel siguiente ejemplo se muestra el código usado para definir y aplicar unatransformaciónquehacelasimágenescirculares:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página25
Retrofit2 Retrofit esun clienteHTTP paraAndroid y Java. Laprincipal funcionalidaddeRetrofitesquepermitedefinirunaAPIHTTPcomounainterfazJavamedianteelusodeanotacionesespeciales.
LainstalaciónserealizamediantelasiguientedependenciadeGradle:
ParadefinirlainterfazdenuestraAPIcreamosunainterfazdondecadamétodosecorrespondaconuntipodepeticióndistinto.Así,diferentesendpointscondiferentesmétodosHTTPutilizaránunmétododistinto.
Retrofit permite especificar parámetros a pasar como parte de laURL con laanotación @Path, como parámetros GET utilizando la anotación @Query o comocamposdeunformularioPOSTutilizandolaanotación@Field.
Paralasubidadeimágenesseutilizalaanotación@MultipartqueespecificaquesetratadeunapeticiónPOSTfragmentadadondelaimagenformapartedelcuerpodedichapetición.
UnejemplodeinterfazhechaconRetrofit2:
Para consultar la interfaz definida debemos utilizar Retrofit para generar unservicioquelaimplemente.Unavezcreadoelserviciopodremosejecutarlaspeticionesdefinidas de forma tanto síncrona como asíncrona. En nuestro caso, al trabajar conAndroidsóloutilizaremospeticionesasíncronasparaquenuestra interfaznodejederesponderdurantelacarga:
[UPM]MásterenIngenieríaWeb
Página26
GSON GsonesunabibliotecadeJavaquesepuedeusarparaconvertirobjetosdeJavaensurepresentaciónJSON.TambiénpuedeserusadoparaconvertirunacadenaJSONasuobjetoJavaequivalente.
Gson puede funcionar con objetos Java arbitrarios, incluyendo objetos pre-existentesdeloscualesnosetieneelcódigofuente.
Existenunospocosproyectosdecódigoabiertoquepuedanconvertirobjetos
JavaaJSON.LamayoríanosoportanelusodelascoleccionesgenéricasdeJava.Gsonconsideraestocomounobjetivoesencialensudiseño.
En este proyecto la biblioteca Gson se usa en conjunto con Retrofit 2 paraconvertirlosdatosrecibidosdesdenuestraAPIRESTenformatoJSONanuestrospropiosobjetosJava. Para crear los objetos en Java se deben utilizar anotaciones especiales. Ennuestrocasosehautilizadolaherramientawebhttp://www.jsonschema2pojo.orgparagenerarlasclaseswrapper.
BastaconpegarelcódigoJSONdeseado,seleccionarJSONcomotipodeorigenyGson como estilo de anotación. Las clases generadas utilizan las anotacionesGSON@Exposey@SerializedName(“nombre”)pararealizarelmapeoentreatributosJSONyatributosJava.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página27
FacebookAndroidSDK Facebookesunaredsocialconmásde1,65billonesdeusuariosactivosalmesafechade31demarzode2016.(Newsroom,s.f.) ElSDKdeFacebookparaAndroidpermitealaspersonasiniciarsesiónennuestraaplicaciónmedianteeliniciodesesiónconFacebook.Alhacerlo,laspersonasconcedenalaaplicaciónpermisoparaobtenerinformaciónorealizaraccionesenFacebookensunombre.(Facebook,2016) PodemosinstalarelSDKmedianteladependenciaGradle:
HaydosmodosdeimplementareliniciodesesiónconFacebookenAndroid:
• Clase LoginButton: proporciona un botón que puedes añadir a tu interfaz deusuario. Mantiene el identificador de acceso actual, y puede iniciar y cerrarsesionesdeusuario.
• Clase LoginManager: para comenzar inicios de sesión sin emplear ningún
elementodelainterfazdeusuario.
Ennuestrocasoseutilizólaprimeraaproximación,utilizandoelbotónpordefectoqueproporcionaFacebook.Paraellohayqueutilizarelsiguientelayout:
Quesemostrarácomoelsiguientebotón:
[UPM]MásterenIngenieríaWeb
Página28
Fabric FabricesunabibliotecadesarrolladaporTwitterdirigidaamóvilesqueintegraherramientasdemonitorizaciónyanálisisdeerrores,asícomoelSDKoficialdeTwitter.
ElSDKdeTwitterparaAndroidpermitealosusuariosiniciarsesiónennuestraaplicaciónmedianteeliniciodesesiónconTwitter.Alhacerlo,laspersonasconcedenalaaplicaciónpermisoparaobtenerinformacióndesiperfildeTwitter.
PodemosinstalarFabricmediantelassiguientesdependenciasGradle:
Parapoderutilizarelbotónde“IniciarsesiónconTwitter”deberemosutilizarelsiguientelayout:
Quesemostrarácomoelsiguientebotón:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página29
Servidor Acontinuaciónsedescribenendetallecadaunadelastecnologíasempleadaseneldesarrollodelservidor.
HerokuHeroku es una plataforma de alojamiento de aplicaciones en la nube. Fue
fundadoen2007yadquiridoporSalesforceen2011.
Ofreceunanuevamaneradeconstruirydesplegaraplicacionesweb.Permitealosdesarrolladoresinvertirsutiempoendesarrollarelcódigodelaaplicaciónenlugardegestionandoservidores,despliegues,operacionesoelescaladoderecursos.(Heroku,2016) SehaescogidoHerokuparahospedarelservidorwebdenuestrosistemayaqueofrece un plan gratuito con certificado SSL compartido que se adapta a nuestrasnecesidades y además permite configurar rápidamente un entorno de integracióncontinuaconGithubyTravis,comoseverámásadelante. Herokuesunaplataformaquepermitedesplegar lasaplicacionesmedianteelsistema de control de versionesGIT. Las aplicaciones son desplegadas en instanciasaisladasllamadasdynos. LosdynosrecibeneltráficoHTTPquelesllegaatravésdelosrouters.Undynoesunprocesoquepuedeejecutarmuchos tiposdeaplicaciones,por loquedeberá serconfigurado mediante un fichero Procfile que especifique qué comando ejecutar aliniciareldyno.Porejemplo,paradesplegarunservidorGunicornconnuestraaplicaciónPythonutilizaríamosunProcfileconestalínea:
Herokupermiteañadirrecursosexternosaunaaplicacióndada,comopuedeserunabasededatosPostgreSQL.
Otrade lasventajasdeHerokuesquenospermiteescalar lasaplicacionesde
forma automática, incrementando el número de dynos u otros recursos de nuestraaplicación.
[UPM]MásterenIngenieríaWeb
Página30
Virtualenv Un entorno virtual es una herramienta que mantiene las dependenciasrequeridas por diferentes proyectos en sitios separados, creando entornos virtualesPythonparaellos.
Resuelveeldilemadel“proyectoXdependedelaversión1.xpero,elproyectoYnecesita la4.x”,ymantieneeldirectoriodepaquetesglobal limpioymanejable.Porejemplo, permite trabajar en un proyecto que requiere Django 1.3 mientras quetambiénmantienesunproyectoquerequiereDjango1.0.
VirtualenvesunaherramientaparacrearentornosPythonaislados.Virtualenv
crea un directorio que contendrá todos los ejecutables necesarios para usar lospaquetesqueunproyectoPythonnecesitará.
Para crear un crear un fichero requirements.txt con las dependencias delproyectoactual,bastaejecutar:
Ahorael fichero requirements.txt contendrá lasdependenciasnecesariaspara
ejecutarelproyectoencualquiersistema:
Paracrearunentornovirtual,utilizamoselcomando:
Paraactivarelentornovirtualcreado,seutilizaelcomando:
Parainstalarestasdependenciasenelentornoseejecutaelcomando:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página31
WhiteNoise WhiteNoiseesunpaquetePythonquesimplificademaneraradicalelactodeservirficherosestáticosenaplicacioneswebPython.
Conunparde líneasdeconfiguraciónWhiteNoisepermitequeunaaplicaciónweb sirva sus propios ficheros estáticos, haciéndola una unidad auto-contenida quepuedeserdesplegadaencualquiersitiosindependerdenginx,AmazonS3niningúnotroservicioexterno.EsespecialmenteútilenHeroku,OpenShiftyotrosproveedoresPaaS.
EstádiseñadoparafuncionarbienconCDNsparasitioswebconaltotráficodemodoquenohayaquesacrificarrendimientoenvirtuddelasimplicidad.
WhiteNoisefuncionaconcualquieraplicacióncompatibleconWSGIperotienealgunasfuncionalidadesdeconfiguraciónautomáticaespecíficasparaDjango.
WhiteNoiseseocupacumplirconlasbuenasprácticas,porejemplo:
• Servir el contenido comprimido (con gzip, manejando cabecerascorrectamente,etc.)
• Ponercabecerasconcachéslejanasenelfuturoenelcontenidoquenovayaacambiar.
EnnuestrocasoWhiteNoiseseusaráparaservirsolamentelosficherosestáticospropiosdelainstalaciónpordefectodeDjango.LosficherosdeimagensubidosporlosusuariosseránservidosdesdeunainstanciaS3deAmazon.
[UPM]MásterenIngenieríaWeb
Página32
AmazonS3 S3(SimpleStorageService)esunserviciodealmacenamientoenlanubeofrecidoporAmazonWebServices.Estádiseñadoparaconseguirquelacomputaciónaescalawebseamássencillaparalosdesarrolladores. Amazon S3 tiene una interfaz simple para sus servicios web que pueden serutilizadosparaalmacenaryrecuperarcualquiertipodedatos,encualquiermomento,desdecualquierpartedelaweb.
AmazonS3 daaccesoa cualquierdesarrolladora lamisma infraestructuradealmacenamientodedatosaltamenteescalable,deconfianza,rápidaybarataqueutilizaAmazonparaejecutarsupropiaredglobaldesitiosweb.Esteserviciotieneporobjetivomaximizar los beneficios de la escala y ceder esos beneficios a los desarrolladores.(Amazon,2016) El servicio está estructurado en torno a la creación cubos (buckets), que soncontenedoresvirtualessobreloscualessepuedenalmacenarorecuperarficherosdecualquiertipodenominadosobjetos(objects). Enelcasodeesteproyectoseutilizaráunúnicocuboparaalmacenaryrecuperarlasimágenesdelosusuariosdenuestraaplicación.
ElplangratuitodeAmazonS3duraunañoeincluye(Amazon,2016):
• 5GBdealmacenamientoestándaralmes
• 20.000solicitudesGETalmes
• 2.000solicitudesPUTalmes MásadelanteveremoscómoseutilizóelpaqueteBotoparaintegrarS3conelsistemadealmacenamientopropiodeDjango.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página33
Django Django es un frameworkweb paraPython que propicia el desarrollo rápido,limpioypragmático.
Fueconstruidopordesarrolladoresexperimentadosyseencargadesolucionarlamayoríadecomplejidadestípicasdeldesarrollowebparaquelosdesarrolladoressepuedan concentrar en escribir la aplicación sin necesidad de reinventar la rueda. Esgratuitoydecódigoabierto. Djangofuediseñadoparaayudaralosdesarrolladoresaconvertiraplicacionesdeconceptoaimplementacióntanrápidocomoseaposible.
Se toma la seguridadmuy en serio y ayuda a los desarrolladores a evitar loserroresdeseguridadmáscomunes.
AlgunosdelossitioswebconmástráficodelaWebdeleganenlahabilidadde
Djangoparaescalardemanerarápidayflexible.(Django,2016) La comunidaddeDjangodefine suarquitectura comoMTV (Model-Template-View),aunquequeseasemejaaunestiloarquitectónicoMVPconVistaPasiva,dondelosllamadostemplatessonenrealidadlasvistasylasviewssonpresentadores. SehaescogidotrabajarconDjangoporqueesunframeworkqueesusadoporlasplataformassocialesmásgrandesdeInternet,comosonInstagram,Pinterest,DisqusoBitBucket,entreotras.(Alex,2016)
[UPM]MásterenIngenieríaWeb
Página34
DJ-Database-URL DJ-Database-URLesunautilidadparaDjangoquepermiteutilizarunavariablede entornoDATABASE_URL dinámicapara configurar tu aplicación, de formaque sepuedanutilizarbasesdedatosexternascomosifueranrecursos.(kennethreitz,2016)
Gunicorn GunicornesunservidorPythonWSGIHTTPparaUNIX.EsunaversiónportadaaPythondelproyectoUnicornoriginadoporlacomunidaddellenguajeRuby.ElservidorGunicorn esampliamentecompatibleconvarios frameworksweb, se implementadeforma sencilla, es ligero en cuanto a recursos del servidor y es bastante rápido.(Gunicorn,2016) EnnuestrocasoloutilizaremosparaservirnuestraaplicaciónbasadaenDjango.GunicornseejecutaráportantoenlasinstanciasdynodeHeroku.
S3Boto Boto es un paquete que presenta las interfaces necesarias para utilizar losserviciosdeAmazondesdePython.EnconcretonosinteresalainterfazqueofreceparacomunicarnosconS3. UtilizaremosS3BotoparatrabajarsobreS3deformatransparenteconDjango,sustituyendoelsistemadealmacenamientoquetraepordefecto.Paraelloañadiremoslassiguientelíneasalficherosettings.py:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página35
DjangoRESTFramework Django REST Framework es un paquete potente y flexible para Django quepermitecrearAPIsRESTdeformarápidaysencilla. Incluye utilidades que se ocupan del enrutamiento, serialización (soportandofuentesdedatosconosinORM),autorización(porJWT,OAuthuOAauth2),paginación,validación,permisos,controldeexcepcionesypruebas. ParacrearnuestraAPIdeberemosimplementarunaclaseserializerqueseocupedeobtener la representaciónenel formatoadecuadoparacadaunode losmodelosDjangoquequeramoshaceraccesibles. Unavezdefinidoelserializerdebemos implementar lospresentadores(views)queseocuparándeatenderlaspeticionesparacadaendpointconcretodenuestraAPI. DjangoRESTframeworkproporcionaclasesgenéricasquepodemosutilizarparaimplementarlosendpointsmáscomunes:Vistadeunalistadeobjetos,vistadedetalledeunobjeto,vistaparalacreacióndeobjetos,vistaparalaeliminacióndeobjetos…etc.
[UPM]MásterenIngenieríaWeb
Página36
DjangoRESTFrameworkSocialOauth2 EstemóduloextiendelafuncionalidaddeDjangoRESTFrameworkeintegralospaquetespython-social-authyoauth2dentrodelmismo.
ElobjetivodeestepaqueteesayudaramontarlaautorizaciónsocialdenuestraAPI REST. Además también puede servir para montar nuestro propio proveedor deautenticaciónOAuth2.
Podemosinstalarestepaquetemedianteelcomando:
AñadimoslassiguienteaplicacionesalavariableINSTALLED_APPSlocalizadaenelficherosettings.pydenuestroproyectoDjango:
Y añadimos las siguientes expresiones a nuestra lista de URLs localizada enurls.py:
AñadimosaldiccionarioREST_FRAMEWORKlocalizadoensettings.pylasiguienteclave:
Si,porejemplo,queremospermitirque losusuariosseautentiquenmedianteloginsocialenFacebook,bastaconañadiraAUTHENTICATION_BACKENDSlassiguientelíneas:
Ahora, para autenticarse como usuario de Facebook, bastaría enviar unacabeceracomolasiguienteencadapeticiónqueserealicealaAPI:
Authorization:Bearerfacebook<TokenOAuth2obtenidodelSDK>
Elpaqueteseocuparádecomprobarlavalidezdeltokenyderegistraralusuarioenbasededatosencasodequenoexistaconanterioridad.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página37
PostgreSQL PostgreSQLesunsistemadebasededatosrelacionalydecódigoabiertoconmásde15añosdedesarrolloyunaarquitecturaprobadaquesehaganadounafuertereputación por su confiabilidad, integridad de datos y corrección. (The PostgreSQLGlobalDevelopmentGroup,2016) Puede ejecutarse sobre la mayoría de sistemas operativos, cumple con lasnormas ACID y soporta claves foráneas, joins, vistas, triggers y procedimientosalmacenadosendistintoslenguajes. Seescogiótrabajarconunabasededatosrelacionalfrenteaunano-relacionalporque previsiblemente trabajaremos sobre conjuntos de datos grandes pero bienestructurados,conmuchastablasrelacionadasentresíyconvarios joinsennuestrasconsultas.
Además, en pruebas de rendimiento, PostgreSQL ha demostrado superar asolucionesNoSQLbasadasendocumentos,comoMongoDB,encuantoavelocidadderespuestaaconsultasyeficienciadelalmacenamientoendisco.(Polishchuk,2016)
[UPM]MásterenIngenieríaWeb
Página38
EntornosdedesarrolloEnesteapartadosedescribenlosentornosdetrabajoutilizadosparadesarrollar
tantoelservidorenPythoncomoelclienteenJava.
PyCharm PyCharmesunentornodetrabajomultiplataformaparaPythondesarrolladoporJetBrains. Incluye autocompletado de código inteligente, inspecciones de código,subrayado de errores en tiempo real y sugerencias de arreglos rápidos, junto conrefactorizacionesdecódigoautomáticasycapacidadesdenavegación. PyCharm incluyeademásunacoleccióndeherramientaspordefectoentre lasqueseencuentran:Undepuradorintegrado,unejecutordepruebas,unperfiladordePython, una terminal nativa, despliegue con los principales sistemas de control deversiones (GIT,SVN, etc.), herramientas de bases de datos y terminal SSH integradaentreotras.(JetBrains,2016)
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página39
AndroidStudio Android Studio esel entornodedesarrollooficial deAndroid. EstábasadoenIntellijIDEAyfueconstruidoparaacelerareldesarrolloenAndroidyayudaracrearlasaplicacionesconlamayorcalidadposibleparacadadispositivoAndroid. Ofrece herramientas pensadas a medida para desarrolladores Android,incluyendoeleditadoricodecódigo,ladepuración,pruebasyherramientasparamedirelrendimiento.(Google,2016)
[UPM]MásterenIngenieríaWeb
Página40
Desplieguecontinuo Paraagilizareldesarrollodelservidorsecreóunaforjacondesplieguecontinuoquepermitierairdesplegandoelcódigoenproduccióndeformaautomáticasiempreycuandopasarasinerroresunabateríadepruebasfuncionales.
Paraestosehizousodetresplataformascoordinadas:Heroku,GithubyTravis.
1. Se realiza un push con una nueva funcionalidad implementada sobre elrepositoriodeGithub.
2. UnavezagregadosloscambiosalrepositorioremotoTravisCI lodetectaylanzaunprocesoparaejecutarlabateríadepruebas.
3. SilabateríadepruebasseejecutósinerroressenotificaaHerokudequehayunanuevaversiónestableadesplegarenproducción.Sino,eldesplieguesefrenayTravismostraráelerrorcorrespondiente.
4. HerokutomaelcódigodelaramamasterdelrepositorioylodespliegasegúnloindicadoensuficheroProcfile.
Acontinuaciónsedescribebrevementecadaunadeestasplataformas.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página41
GitHub GitHub es una plataformaweb que permite compartir repositorios con otros
usuarios.Actualmentecuentaconmásde38millonesdeproyectos.
GitHub utiliza el protocolo de control de versiones GIT y lo integra en unaplataformaquesimplificaelflujodetrabajoparalosdesarrolloscolaborativosmedianteelusodeforks,wikisytickets(issues).
TravisCI TravisCI es una plataformaweb que nos permite lanzar pruebas demaneraautomáticacadavezqueactualicemosunrepositorio. ParautilizarTravisCIdebemosañadirunfichero.travis.ymlqueespecifiquedequétipodeproyectosetratayquécomandoutilizarparalanzarlabateríadepruebas.Ennuestrocasoelficherocontienelosiguiente:
Heroku En Heroku, el despliegue automático de una aplicación se puede configurardesdeelpaneldecontrol,enlapestaña“Deploy”talycomosemuestraacontinuación:
NótesequeestáconectadoaunrepositoriodeGithubenlaramamásteryque
estámarcadalacasillade“EsperaraqueCIpaselaspruebasantesdedesplegar”.
[UPM]MásterenIngenieríaWeb
Página42
DESARROLLO REALIZADO
Enestecapítulosedescribenlosprocesosytécnicasutilizadosparallevaracaboeldesarrollodelproyecto.
Metodología SehaoptadoporaplicarelmétododegestiónágilSCRUMduranteeldesarrollodeesteproyectoporqueseconsideraquelosrecursosyplazossonfijosy,sinembargo,elalcancepuedeservariable.Separteportantodeunaplanificacióntemporalyapartirdeestaseelaboraráunahojaderutaconlasfuncionalidadesaimplementarencadasprint. SCRUMesunmétodoágildegestiónparaprocesosdedesarrollodesistemasbasado en la primacía de las interacciones entre personas por encima de ladocumentaciónexhaustiva. Serealizaráncuatroentregasconsprintsdeunasemana.Sehaescogidohacersprints semanales para tener un ciclo de retroalimentación más corto que permitarectificarerroresdeestimacióndemanerarápidaytemprana,y,depaso,simplificarlaplanificacióndelossprints.
Serealizarándostiposdepruebas:Porunladopruebasfuncionalesautomáticaspara la API que se ejecutarán en la plataformaTravisCI como parte del sistema dedesplieguecontinuo.Porotroladoserealizaránpruebasdeaceptaciónmanualesparaasegurarquesecumpleelcomportamientodescritoenlashistoriasdeusuario.
No se realizarán pruebas automatizadas de la interfaz de usuario enAndroid
porque se considera que los sprints son demasiado cortos, la fecha de entrega esdemasiado tempranay la interfaz sufrirádemasiadoscambiosdeunaentregaaotracomoparaquemerezcalapenaimplementarpruebasautomáticas,lascualessuponenungrancoste.(Selenium,2016)
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página43
Inception Enesteapartadosedescribeelprocesoprevioaldesarrolloseguidoparagenerarlahojaderuta.
ProductBacklogAcontinuaciónseenumerantodaslasfuncionalidadesqueseplantearon
inicialmentedurantelafasedeInception:
§ IniciarsesiónconFacebook§ IniciarsesiónconTwitter§ Cerrarsesión§ Eliminarcuenta§ Publicarunaimagen§ Visualizarpublicacionesglobales§ Eliminarunapublicaciónpropia§ Visualizarperfilpropio§ Visualizarperfilajeno§ Buscarusuariosporsunombre§ Empezaraseguiraunusuario§ Dejardeseguiraunusuario§ Visualizarpublicacionesdeusuariosalosquesigo§ Dar“megusta”aunapublicación§ Añadiruncomentarioaunapublicación§ Recibirnotificacionesde“megusta”§ Recibirnotificacionesdecomentarios§ IniciarsesiónconGoogle+§ Iniciarsesiónconusuarioycontraseña§ Registrarunacuentaconemail§ Recuperarcontraseña§ Recibirnotificacionescuandounusuariocomienceaseguirme§ Visualizarmisseguidores§ Visualizarusuariosalosquesigo
[UPM]MásterenIngenieríaWeb
Página44
Hojaderuta EnelpresenteapartadosemuestracómoseasignaroncostesyvaloracadaunadeestasfuncionalidadesparacalcularsuROIypoderasícomponerunahojaderuta.
Los valores de los coste están dados en puntos de historia (Story Points),tomando como unidad de referencia que un punto de historia equivale al coste dedesarrollarunafuncionalidaddeiniciodesesión. Lascifrasdelvalorsonlasresultantesderepartir500puntosdevalorentretodaslasfuncionalidades,segúnelvalorqueaportaránalusuario. El ROI que se muestra es simplemente un cociente Valor/Coste con finescomparativos.Funcionalidad Coste(SPs) Valor ROIIniciarsesiónconFacebook 1 50 50IniciarsesiónconTwitter 1 50 50Cerrarsesión 1 25 25Eliminarcuenta 1 25 25Publicarunaimagen 3 75 25Visualizarpublicacionesglobales 1 25 25Eliminarunapublicaciónpropia 1 20 20Visualizarperfilpropio 2 40 20Visualizarperfilajeno 1 40 40Buscarusuariosporsunombre 2 25 12,5Empezaraseguiraunusuario 1 25 25Dejardeseguiraunusuario 1 25 25Visualizarpublicacionesdeusuariosalosquesigo 1 25 25Dar“megusta”aunapublicación 1 15 15Añadiruncomentarioaunapublicación 2 15 7,5Recibirnotificacionesde“megusta” 1 10 10Recibirnotificacionesdecomentarios 1 10 10IniciarsesiónconGoogle+ 1 5 5Iniciarsesiónconusuarioycontraseña 1 10 10Registrarunacuentaconemail 1 5 5Recuperarcontraseña 1 5 5Recibirnotificacionescuandounusuariocomienceaseguirme 1 5 5Visualizarmisseguidores 1 10 10Visualizarusuariosalosquesigo 1 10 10
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página45
Teniendoen cuenta losdatosobtenidosde la estimaciónanteriorpasamosaelaborarlasiguientehojaderuta,concuidadodequecadaentregaaportemenosvalorque la anterior pero que los costes de todas las entregas se mantenganaproximadamenteconstantes. Así,seagruparonfuncionalidadesparadarlasiguientehojaderuta:
Entrega1:Autenticación§ IniciarsesiónconFacebook§ IniciarsesiónconTwitter§ Cerrarsesión§ Eliminarcuenta
Entrega2:Publicaciones
§ Publicarunaimagen§ Visualizarpublicacionesglobales
Entrega3:Perfiles
§ Eliminarunapublicaciónpropia§ Visualizarperfilpropio§ Visualizarperfilajeno
Entrega4:Relaciones
§ Buscarusuariosporsunombre§ Empezaraseguiraunusuario§ Dejardeseguiraunusuario§ Visualizarpublicacionesdeusuariosalosquesigo
Entrega5:Interacciones
§ Dar“megusta”aunapublicación§ Añadiruncomentarioaunapublicación§ Recibirnotificacionesde“megusta”§ Recibirnotificacionesdecomentarios
Entrega6:Autenticaciónavanzada
§ IniciarsesiónconGoogle+§ Iniciarsesiónconusuarioycontraseña§ Registrarunacuentaconemail§ Recuperarcontraseña
Entrega7:Interaccionesavanzadas
§ Recibirnotificacionescuandounusuariocomienceaseguirme§ Visualizarmisseguidores§ Visualizarusuariosalosquesigo
[UPM]MásterenIngenieríaWeb
Página46
Comosepuedeobservarenlasiguientetabla,loscostesdecadaentregasemantienenprácticamenteconstantesmientrasqueelvaloresdecreciente:
# Entrega Coste(SP) Valor
1 Autenticación 4 150
2 Publicaciones 4 100
3 Perfiles 4 100
4 Relaciones 5 50
5 Interacciones 5 50
6 Autenticaciónavanzada 4 25
7 Interaccionesavanzadas 3 25
Como sólo se dispone de tiempo suficiente como para realizar 4 sprints, serealizarán las cuatro primeras entregas. El resto de funcionalidades quedan comofuturasmejoras.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página47
Sprint1:Autenticación Aquí se describen los pasos seguidos para analizar, diseñar, implementar yprobarlasfuncionalidadesdelprimersprint.
SprintBacklog Aquí se describen sistemáticamente las historias de usuario asociadas a lasfuncionalidadesdeestesprint.IniciarsesiónconFacebookDescripción Comousuarioquieroiniciarsesiónmediantemicuentade
Facebookparaautenticarmeenlaaplicación.Conversación Usuario solicita iniciar sesión utilizando Facebook à
Sistemasolicitaintroducirsuscredenciales.Usuario introducesuscredencialesà Sistemacompruebaloscredencialesymuestrapantallaprincipaloerror.
Criteriosdeaceptación
Unavezelusuariohaabiertolaaplicación,cuandosolicitainiciar sesión con Facebook el sistema solicita suscredenciales.Una vez ha introducido sus datos, si son correctos semuestralapantallaprincipaldelaaplicaciónysinonotificaelerror.
IniciarsesiónconTwitterDescripción Comousuarioquieroiniciarsesiónmediantemicuentade
Twitterparaautenticarmeenlaaplicación.Conversación UsuariosolicitainiciarsesiónutilizandoTwitteràSistema
solicitaintroducirsuscredenciales.Usuario introducesuscredencialesà Sistemacompruebaloscredencialesymuestrapantallaprincipaloerror.
Criteriosdeaceptación
Unavezelusuariohaabiertolaaplicación,cuandosolicitainiciarsesiónconTwitterelsistemasolicitasuscredenciales.Una vez ha introducido sus datos, si son correctos semuestralapantallaprincipaldelaaplicaciónysinonotificaelerror.
[UPM]MásterenIngenieríaWeb
Página48
CerrarsesiónDescripción Como usuario quiero cerrar sesión para abandonar la
aplicación.
Conversación UsuariosolicitacerrarsesiónàSistemaregresaalapantallainicial.
Criteriosdeaceptación
Unavezheiniciadosesión,cuandosolicitocerrarsesión,laaplicaciónregresaalapantallaprincipal.
EliminarcuentaDescripción Comousuarioquieroeliminarpermanentementemicuenta
paraquenosemantengantodosmisdatosalmacenadosenlaaplicación.
Conversación Usuario solicita eliminar su cuenta à Sistema solicitaconfirmarlaoperación.UsuarioconfirmalaoperaciónàSistemaeliminalacuentapermanentementeymuestrapantallaprincipal.
Criteriosdeaceptación
Habiendoiniciadosesión,cuandoelusuariosolicitaeliminarsucuenta,elsistemamuestraunmensajedeconfirmación.Unavezsemuestraelmensajedeconfirmación,sielusuarioconfirmalaacción,elsistemaeliminalacuentayvuelvealapantallaprincipal.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página49
Planificacióndelsprint A continuación se describen las actividades llevadas a cabo durante laplanificacióndelsprint.Tareas En esta sección se detallan las tareas que fue necesario realizar paraimplementarcadahistoriadeusuario.
• IniciarsesiónconFacebook
1. CrearSerializerdelaclaseUser.2. CrearendpointsenlaAPI.3. Probarendpoints.4. InstalarSDKdeFacebook.5. CrearLoginActivityyGlobalFeedActivity.6. Añadirbotónallayout.7. AñadirendpointsalservicioRetrofit.8. CrearcontroladorFacebookLoginController.
• IniciarsesiónconTwitter
1. CrearendpointsenlaAPI.2. Probarendpoints.3. InstalarSDKdeFabric.4. Añadirbotónallayout.5. AñadirendpointsalservicioRetrofit.6. CrearcontroladorTwitterLoginController.
• Cerrarsesión
1. Añadirbotónallayout.2. AñadircontroladorLoginController.
• Eliminarcuenta
1. CrearendpointenlaAPI.2. Probarendpoints.3. Añadirbotónallayout.4. AñadirendpointsalservicioRetrofit.5. CrearcontroladorDeleteAccountController.
[UPM]MásterenIngenieríaWeb
Página50
Diseño ElsiguientediagramadesecuenciarepresentaelcasotípicodeautenticaciónpormediodeunaAPIdeterceros,enestecasoFacebook:
EnprimerlugarlaaplicaciónAndroidhaceunapeticiónalservidordeFacebook(atravésdesuSDK)identificándoseconunusuarioycontraseñaysolicitandountokendeacceso.
ElservidordeFacebookcompruebaloscredencialesycontestaconunerrorountokendeaccesoOAuth2.ElclientemantendráestetokenenmemoriayloenviaráenlacabeceradecadapeticiónqueserealicealaAPIpropiadenuestroproyecto.
ElservidorutilizaráeltokenrecibidoenlacabeceraparaautenticaralusuariodeFacebookyloasociaráconunusuarioDjango.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página51
En Android aplicamos el estilo arquitectónico MVC. Existirá un singletonLoginController responsable demantener el controlador social concreto que se estéusando,yaseaeldeTwitteroFacebook,deinicializarlosymanejarlos.
El controlador tendrá también acceso a la actividadde login LoginActivity asícomoalservicioquerealizalasllamadasalaAPISocialMediaService.
SocialMediaService,porsuparte,realizalasllamadasalaAPIparacomprobarsi
elusuarioautenticadoexisteyrecuperarsusdatosenunarespuestaUserResponse.Porotro lado,paraeliminar lacuenta,el controladorDeleteAccountController
haceunapeticiónalservicioparaborraralusuarioactivo:
[UPM]MásterenIngenieríaWeb
Página52
Wireframes Paralashistoriasdeusuariodeestesprintseesbozarondosvistas.Unaprimeradeiniciodesesión:
Yotrapantallaconelperfildelusuariodesdelacualsepuedesolicitartantolaeliminacióndelacuenta(“Deleteaccount”)comoelcierredesesión(“Logout”):
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página53
Implementación Acontinuaciónsedescribeendetallelaimplementaciónquesellevóacabo.Endpoints
Paraestaentregaseimplementaronlossiguientesendpoints:
MétodoHTTP Path Funcionalidad
GET /api/v0/users/self/ Recupera la informaciónsobreelusuarioactual.
DELETE /api/v0/users/self/ Elimina la cuenta del usuario actualpermanentemente.
Pruebas Se implementó lasiguientebateríadepruebas funcionalespara losendpointscreados:
[UPM]MásterenIngenieríaWeb
Página54
Pruebasdeaceptación UnavezprobadaimplementadoelclientequeconsumelaAPI,serealizaronlassiguientespruebasdeaceptaciónmanuales.IniciarsesiónconFacebook
Unavezheabiertolaaplicación,cuandosolicitoiniciarsesiónconFacebookelsistemamesolicitamiscredenciales:
Unavezhe introducidomisdatos, si soncorrectos sememuestra lapantalla
principaldelaaplicaciónysinomenotificaelerror:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página55
IniciarsesiónconTwitter Unavezheabiertolaaplicación,cuandosolicitoiniciarsesiónconFacebookelsistemamesolicitamiscredenciales:
Unavezhe introducidomisdatos, si soncorrectos sememuestra lapantallaprincipaldelaaplicaciónysinomenotificaelerror.
[UPM]MásterenIngenieríaWeb
Página56
Cerrarsesión Unavezelusuariohainiciadosesión,puedesolicitarcerrarlapulsandoelbotón“Logout”:
Laaplicaciónregresaalapantallaprincipal:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página57
Eliminarcuenta Habiendoiniciadosesión,elusuariopuedesolicitareliminarsucuenta,pulsandoelbotón“Deleteaccount”:
El sistema muestra entonces un mensaje de confirmación y, si el usuarioconfirmalaacción,pulsando“Deleteaccountforever”,elsistemaeliminalacuentayvuelvealapantallaprincipal:
[UPM]MásterenIngenieríaWeb
Página58
Sprint2:Publicaciones A continuación se describen los pasos seguidos para analizar, diseñar,implementaryprobarlasfuncionalidadesdelsegundosprint.
SprintBacklog Aquí se describen sistemáticamente las historias de usuario asociadas a lasfuncionalidadesdeestesprint.PublicarunaimagenDescripción Como usuario quiero publicar una imagen junto con un
títuloparacompartiresecontenidoconotrosusuario.Conversación Usuario solicita publicar una imagenà Sistema permite
seleccionar entre tomar una nueva foto con la cámara oseleccionarunaimagendelagalería.Usuariosolicitaunade lasopcionesàSistemalepermitetomarunafotografíaoseleccionarunaimagendependiendodelaopciónseleccionada.UsuarioseleccionaunaimagenotomaunanuevafotoàElsistema muestra una vista previa de la imagen y solicitaintroduciruntítulo.UsuariointroduceuntítuloysolicitapublicarlaimagenàElsistemapublicalaimagenyregresaalapantallaprincipal.
Criteriosdeaceptación
Unaveziniciadasesión,cuandoelusuariosolicitapublicaruna imagen, entonces la aplicación permite seleccionarentretomarunafotooseleccionardesdelagalería.Una vez el usuario ha tomado o seleccionado una foto,cuandoel usuario introduceun título y solicitapublicarla,entoncesel sistemapublica la imagenyvuelve lapantallaprincipal.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página59
VisualizarpublicacionesglobalesDescripción Como usuario quiero visualizar las publicaciones que han
hechotodoslosusuariosdelaaplicaciónordenadasdemásamenosreciente.
Conversación Usuario solicita visualizar las publicaciones globales àSistemamuestraunalistaconlaspublicaciones.UsuariosolicitavermáspublicacionesàElsistemaañademáspublicacionesalalista.Usuario solicita actualizar la lista de publicacionesà Elsistema vacía la lista de publicaciones y añade laspublicacionesactualizadasalalista.
Criteriosdeaceptación
Unaveziniciadasesión,cuandoelusuariosolicitavisualizarlas publicaciones globales, entonces la aplicaciónmuestraunalistadepublicacionesordenadas.Unavezsehanmostradoalgunaspublicaciones,cuandoelusuario solicita ver más, entonces el sistema añade máspublicacionesalalista.Unavezsehanmostradoalgunaspublicaciones,cuandoelusuario solicita actualizar la lista, entonces la aplicaciónvacíalalistayañadelaspublicacionesactualizadas.
[UPM]MásterenIngenieríaWeb
Página60
Planificacióndelsprint A continuación se describen las actividades llevadas a cabo durante laplanificacióndelsprint.Tareas En esta sección se detallan las tareas que fue necesario realizar paraimplementarcadahistoriadeusuario.
• Publicarunaimagen1. AbrircuentaenAmazonS32. ConfigurarDjangoparausarS3conBoto3. AñadirmodeloPublicationaDjangopararepresentarunapublicación.4. CrearserializerparaobjetosPublication5. AñadirendpointparacrearobjetoPublication.6. Probarendpoint.7. AñadiralproyectoAndroidlabibliotecaEasyImage.8. Añadiralaactividadprincipalunbotónparasolicitarlacapturadeimagen.9. Añadir a la actividad un diálogo que permita seleccionar entre cámara y
galería.10. Implementarcontroladorquemanejelacapturayseleccióndeimágenes.11. Crearvistadepublicaciónparaañadirtítuloalaimagentomada.12. AñadiralservicioRetrofitunmétodoparapublicarlaimagen.13. Añadiralcontroladorunmétodoparapublicarlaimagendesdelavistade
publicación.• Visualizarpublicacionesglobales
1. ConfigurarpaginaciónglobaldeDjangoRESTFramework.2. AñadirendpointparavisualizarlistadePublicaciones.3. Probarendpoint.4. Crearlayoutparavisualizarunalistadepublicaciones.5. Crearviewholderparavisualizarunapublicación.6. AñadiralservicioRetrofitunmétodopararecuperarunalistade
publicacionespaginadas.7. CrearcontroladorGlobalFeedControllerquemanejelacargasucesivade
publicacionesylaactualizacióndelfeed.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página61
Diseño Para la subida de imágenes se planteó implementar un controladorPublishControllerqueseencarguemanejarlacreacióndeunobjetoPublicationdesdelapantalladepublicaciónconelficherodeimagenytítulosprovenientesdelaactividadPublishActivity:
Porotrolado,paralavisualizacióndelaspublicaciones,seplanteólaexistenciade un controlador abstractoAbstractFeedController que se ocupara de coordinar ladescargaypresentacióndepublicaciones, implementando la funcionalidadde“scrollinfinito”,esdecir,descargandonuevaspublicacionesamedidaquesehacescroll:
[UPM]MásterenIngenieríaWeb
Página62
EladaptadorComplexFeedAdapterseocupadeasignaracadaobjetodeunalistaa visualizar una vista determinada. Por ejemplo, a un objeto de la clasePublicationResponseleasignaráunavistaPublicationViewHolder.Deestemodo,elfeeddepublicacionesglobalessimplementeextiendedeAbstractFeedController:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página63
Wireframes Paralashistoriasdeusuariodeestesprintseesbozarontresvistas.Primeroundiálogoparapermitirseleccionarentresubirunaimagendelagaleríaotomarunafotoconlacámara.Unaveztomadaoseleccionadalaimagensepasaráaunavistapreliminardondesepermiteintroduciruntítuloypublicarlaimagenpulsandoelbotón“Publish”:
Por último se esbozó una vista para una lista de publicaciones. Para cadapublicaciónsemuestraelavatardelautor,sunombredeusuario,eltiempodesdequefuepublicada,sutítuloyunbotóndeborradoencasodequelapublicaciónseapropia:
[UPM]MásterenIngenieríaWeb
Página64
Implementación Acontinuaciónsedescribeendetallelaimplementaciónquesellevóacabo.Endpoints Paraestaentregaseimplementaronlossiguientesendpoints:
MétodoHTTP Path Funcionalidad
POST /api/v0/publications/ CreaunnuevoobjetoPublication.
GET /api/v0/publications/ Recuperalistadepublicacionesglobales.
Pruebas Se implementó lasiguientebateríadepruebas funcionalespara losendpointscreados:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página65
Pruebasdeaceptación UnavezprobadaimplementadoelclientequeconsumelaAPI,serealizaronlassiguientespruebasdeaceptaciónmanuales.Publicarunaimagen Unaveziniciadasesión,elusuariosolicitapublicarunaimagentocandoelbotónflotanteconeliconodelacámaradefotos.Entonceslaaplicaciónpermiteseleccionarentretomarunafotooseleccionardesdelagalería:
Una vez el usuario ha tomado o seleccionado una foto, cuando el usuariointroduceuntítuloysolicitapublicarla,entonceselsistemapublicalaimagenyvuelvelapantallaprincipal:
[UPM]MásterenIngenieríaWeb
Página66
VisualizarpublicacionesglobalesUna vez iniciada sesión, el usuario puede solicitar visualizar las publicaciones
globales,tocandolapestañaconel iconodelgloboterráqueoohaciendoelgestodedeslizar (swipe) hasta dicha pestaña. Entonces la aplicación muestra una lista depublicacionesordenadas:
Unavezsehanmostradoalgunaspublicaciones,elusuariopuedesolicitarver
máspublicacioneshaciendoscroll,entoncesel sistemaañademáspublicacionesa lalistademanerainvisible.
Elusuariopuedetambiénsolicitaractualizarlalista,haciendoelgestodedeslizar
haciaabajolalista,entonceslaaplicaciónmostraráunaanimacióndecargayactualizarálalista:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página67
Sprint3:PerfilesA continuación se describen los pasos seguidos para analizar, diseñar,
implementaryprobarlasfuncionalidadesdeltercersprint.
SprintBacklog Aquí se describen sistemáticamente las historias de usuario asociadas a lasfuncionalidadesdeestesprint.
EliminarunapublicaciónpropiaDescripción Como usuario quiero eliminar una publicación que he
publicadoanteriormenteparaquenoestéaccesibleen laplataforma.
Conversación UsuariosolicitaeliminarunapublicaciónpropiaàSistemamuestradialogoysolicitaconfirmación.UsuarioconfirmaàSistemaeliminalapublicación.
Criteriosdeaceptación
Unaveziniciadasesión,cuandoelusuariosolicitaeliminaruna publicación, el sistema mostrará un diálogo deconfirmación. Una se ha mostrado el diálogo, cuando elusuario confirma, entonces el sistema elimina lapublicación.
VisualizarperfilpropioDescripción Comousuarioquierovisualizarmiperfilparavermispropias
estadísticasypublicaciones.
Conversación Usuario solicita visualizar perfilà Sistemamuestra perfilcon avatar del usuario, número de publicaciones,seguidores,seguidosylistadepublicaciones.
Criteriosdeaceptación
Unaveziniciadasesión,cuandoelusuariosolicitevisualizarelperfilpropio,elsistemamostraráunavistaconavatardelusuario, número de publicaciones, seguidores, seguidos ylistadepublicaciones.
[UPM]MásterenIngenieríaWeb
Página68
VisualizarperfilajenoDescripción Comousuarioquierovisualizarunperfilajenoparaversus
estadísticasypublicaciones.
Conversación Usuario solicita visualizar perfilà Sistemamuestra perfilcon avatar del usuario, número de publicaciones,seguidores,seguidosylistadepublicaciones.
Criteriosdeaceptación
Unaveziniciadasesión,cuandoelusuariosolicitevisualizarunperfilajeno,elsistemamostraráunavistaconavatardelusuario, número de publicaciones, seguidores, seguidos ylistadepublicaciones.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página69
Planificacióndelsprint A continuación se describen las actividades llevadas a cabo durante laplanificacióndelsprint.Tareas En esta sección se detallan las tareas que fue necesario realizar paraimplementarcadahistoriadeusuario.
• Eliminarunapublicaciónpropia1. AñadirendpointparadestruirunobjetoPublicationpropio.2. Probarendpoint.3. Añadirbotóndeborradoallayout.4. Modificarviewholderparamostrarbotónsilapublicaciónespropia.5. AñadiralservicioRetrofitunmétodoparaeliminarunapublicación.6. Implementarcontrolador.
• Visualizarperfilpropio
1. Añadirendpointpararecuperardatossobreelusuarioactual.2. Añadirendpointpararecuperarpublicacionesdelusuarioactual.3. Probarendpoints.4. AñadiralservicioRetrofitmétodospararecuperarusuarioactualysus
publicaciones.5. ImplementarcontroladorgenéricoAbstractFeedController.6. ExtenderAbstractFeedControllerparaelperfilpropio.
• Visualizarperfilajeno
1. Añadirendpointpararecuperardatossobreunusuario.2. Añadirendpointpararecuperarpublicacionesdeunusuario.3. Probarendpoints.4. AñadiralservicioRetrofitmétodospararecuperarusuarioactualysus
publicaciones.5. ImplementarcontroladorgenéricoAbstractFeedController.6. ExtenderAbstractFeedControllerparaunperfilajeno.
[UPM]MásterenIngenieríaWeb
Página70
Diseño Para implementar la eliminación de publicaciones se creó unDeletePublicationControllerqueesllamadoporlavistaSelfPublicationViewHolder:
Se planteó extender el funcionamiento del adaptador ComplexFeedAdapterdefinido con anterioridad con el fin de poder reutilizar el controladorAbstractFeedController en todos los feeds: para visualizar publicaciones globales, deusuariosseguidos,delperfilpropioodeperfilesajenos.
Esteadaptadorseocupadedeterminarlapresentaciónquetendrácadaobjetodentrodelalista,dadasuposiciónysutipo.
Así,porejemplo,unobjetoUserResponsesevisualizarácomounacabeceradeusuario, mientras que un objeto PublicationResponse se visualizará como unapublicación:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página71
De este modo, tanto el perfil ajeno como el propio son extensiones delAbstractFeedAdapter:
[UPM]MásterenIngenieríaWeb
Página72
Wireframes Paralashistoriasdeusuariodeestesprintseesbozarondosvistas.Unaprimeraparavisualizarnuestropropioperfildeusuarioyquepermitacerrarsesiónoborrarlacuenta:
Yotraparavisualizarelperfildeunusuariocualquiera,quepermitaempezaraseguirodejardeseguiradichousuario:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página73
Implementación Acontinuaciónsedescribeendetallelaimplementaciónquesellevóacabo.Endpoints
Paraestaentregaseimplementaronlossiguientesendpoints: MétodoHTTP Path Funcionalidad
DELETE /api/v0/publications/{id}/ Elimina un nuevo objetoPublication.
GET /api/v0/users/self/publications/ Recupera lista de publicacionesdelusuarioactivo.
GET /api/v0/users/{id}/ Recupera datos de un usuariocualquiera.
GET /api/v0/users/{id}/publications/ Recupera publicaciones de unusuariocualquiera.
Pruebas Se implementó lasiguientebateríadepruebas funcionalespara losendpointscreados,tantolalistadepublicacionespropiascomoajenas:
[UPM]MásterenIngenieríaWeb
Página74
Pruebasdeaceptación UnavezprobadaimplementadoelclientequeconsumelaAPI,serealizaronlassiguientespruebasdeaceptaciónmanuales.Eliminarunapublicaciónpropia Una vez iniciada sesión, el usuario puede solicitar la eliminación de unapublicaciónpulsandoelbotónconeliconodelcubodebasura.Elsistemamostraráundiálogodeconfirmación:
Unasehamostradoeldiálogo,cuandoelusuarioconfirma,entonceselsistemaeliminalapublicación:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página75
VisualizarperfilpropioUna vez iniciada sesión, el usuario puede solicitar visualizar el perfil propio
seleccionando lapestañaconel iconodeusuarioohaciendoswipehastaseleccionardicha pestaña. El sistema mostrará una vista con avatar del usuario, número depublicaciones,seguidores,seguidosylistadepublicaciones:
Visualizarperfilajeno Unaveziniciadasesión,elusuariopuedesolicitarvisualizarelperfildecualquierusuario,paraellosolotienequepulsarsobresunombreofotodeperfilencualquierpublicación,entonceselsistemamostraráunavistaconavatardelusuario,númerodepublicaciones,seguidores,seguidosylistadepublicaciones:
[UPM]MásterenIngenieríaWeb
Página76
Sprint4:RelacionesA continuación se describen los pasos seguidos para analizar, diseñar,
implementaryprobarlasfuncionalidadesdelcuartoyúltimosprint.
SprintBacklog Aquí se describen sistemáticamente las historias de usuario asociadas a lasfuncionalidadesdeestesprint.BuscarusuariosporsunombreDescripción Comousuarioquierobuscarotrosusuariosenlaplataforma
parapoderseguirlos.
Conversación UsuariosolicitabuscarusuariosàSistemamuestracampodebúsquedaypermiteintroducirlaconsulta.UsuariointroduceunaconsultaysolicitabuscarusuariosàSistemamuestrausuariosresultadodelaconsultaypermiteaccederasuperfil,seguirloodejardeseguirlo.
Criteriosdeaceptación
Habiendoiniciadosesión,cuandoelusuariosolicitabuscarusuarioselsistemalepermiteintroducirunaconsulta.Habiendo escrito una consulta, cuando el usuario solicitabuscar,elsistemamuestrausuariosresultadodelaconsultaypermiteaccederasuperfil,seguirloodejardeseguirlo.
EmpezaraseguiraunusuarioDescripción Como usuario quiero seguir a otros usuarios para
suscribirmeasuspublicaciones.
Conversación Usuario solicita seguir a un usuarioà Sistema guarda larelacióndeseguimiento.
Criteriosdeaceptación
Habiendoiniciadosesión,cuandoelusuariosolicitaseguiraunusuario,elsistemaconfirmalaacciónyguardalarelacióndeseguimiento.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página77
DejardeseguiraunusuarioDescripción Comousuarioquierodejardeseguiraunusuarioparadejar
deestarsuscritoasuspublicaciones.
Conversación Usuario solicita dejar de seguir a un usuarioà Sistemadeshacelaaccióndeseguiradichousuario.
Criteriosdeaceptación
Habiendoiniciadosesión,cuandoelusuariosolicitadejardeseguiraunusuario,elsistemaconfirmalaacciónyeliminalarelacióndeseguimiento.
VisualizarpublicacionesdeusuariosalosquesigoDescripción Como usuario quiero visualizar las publicaciones que han
hecholosusuariosdelaaplicaciónalosquesigoordenadasdemásamenosreciente.
Conversación Usuariosolicitavisualizarlaspublicacionesdelosusuariosalos que sigue à Sistema muestra una lista con laspublicaciones.UsuariosolicitavermáspublicacionesàElsistemaañademáspublicacionesalalista.Usuario solicita actualizar la lista de publicacionesà Elsistema vacía la lista de publicaciones y añade laspublicacionesactualizadasalalista.
Criteriosdeaceptación
Unaveziniciadasesión,cuandoelusuariosolicitavisualizarlaspublicacionesdelosusuariosalosquesigue,entonceslaaplicaciónmuestraunalistadepublicacionesordenadas.Unavezsehanmostradoalgunaspublicaciones,cuandoelusuario solicita ver más, entonces el sistema añade máspublicacionesalalista.Unavezsehanmostradoalgunaspublicaciones,cuandoelusuario solicita actualizar la lista, entonces la aplicaciónvacíalalistayañadelaspublicacionesactualizadas.
[UPM]MásterenIngenieríaWeb
Página78
Planificacióndelsprint A continuación se describen las actividades llevadas a cabo durante laplanificacióndelsprint.Tareas En esta sección se detallan las tareas que fue necesario realizar paraimplementarcadahistoriadeusuario.
• Buscarusuariosporsunombre1. Añadirendpointparalabúsquedadeusuarios.2. Probarendpoint.3. AñadiralservicioRetrofitmétodoparabuscarusuarios.4. CrearcontroladorgenéricoUserFeedController.5. Extendercontroladorparalabúsquedadeusuarios.
• Empezaraseguiraunusuario1. DefinirmodeloFollowquerepresentaunarelacióndeseguimiento.2. Añadirendpointparacrearrelacionesdeseguimiento.3. Probarendpoint.4. AñadiralservicioRetrofitmétodoparaseguiraunusuario.5. ImplementarcontroladorFollowController.
• Dejardeseguiraunusuario
1. Añadirendpointparaeliminarrelacionesdeseguimiento.2. Probarendpoint.3. AñadiralservicioRetrofitmétodoparadejardeseguiraunusuario.4. Añadir al controlador FollowController método para dejar de seguir a un
usuario.
• Visualizarpublicacionesdeusuariosalosquesigo1. Añadirendpointparavisualizarlistadepublicacionesdelosusuariosalosque
sigo.2. Probarendpoint.3. Añadir al servicio Retrofit un método para recuperar una lista de
publicacionesdelosusuariosalosquesigopaginadas.4. Crear controlador HomeFeedController que maneje la carga sucesiva de
publicacionesylaactualizacióndelfeed.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página79
Diseño Para implementar la búsqueda de usuarios se implementó un controladorAbstractUserFeedController que utiliza un nuevo adaptador UserFeedAdapter paraasignarvistasdeltipoUserSearchViewHolderacadaobjetodetipoUserResponse:
ParaimplementarlafuncionalidaddeseguirydejardeseguirseimplementóuncontroladorFollowControllerqueesllamadodesdelasvistasUserSearchViewHolderyUserProfileHeaderViewHolder:
[UPM]MásterenIngenieríaWeb
Página80
Por último, para la visualización de publicaciones de los usuarios seguidos seextendióunavezmáselcontroladorAbstractFeedController:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página81
Wireframes Paralashistoriasdeusuariodeestesprintseesbozarontresvistas.Unaprimeraparabuscarusuariosporsunombre:
Paraempezaraseguirodejardeseguiraunusuario,sepodráutilizarelbotónqueapareceenlavistadebúsquedaoelqueapareceensupropioperfil:
[UPM]MásterenIngenieríaWeb
Página82
Por último será necesaria otra vista para visualizar las publicaciones de losusuarios a los que sigo, pudiendo reutilizar la que se desarrolló para visualizar laspublicacionesglobales:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página83
ImplementaciónAcontinuaciónsedescribeendetallelaimplementaciónquesellevóacabo.
Endpoints
Paraestaentregaseimplementaronlossiguientesendpoints: MétodoHTTP Path Funcionalidad
GET /users/?search={search}
Permite buscar usuarios según sunombre.
POST /users/{id}/followers/
Añade un usuario a la lista deseguidoresdeotrousuario.
DELETE /users/{id}/followers/{id}
Elimina un usuario de la lista deseguidoresdeotrousuario.
GET /publications/home/
Recupera la lista depublicacionesde los usuarios a los que sigue elusuarioactual.
Pruebas
Se implementó la siguiente batería de pruebas funcionales para el endpoint debúsquedadeusuarios:
[UPM]MásterenIngenieríaWeb
Página84
Se implementó la siguiente batería de pruebas funcionales los endpoints de
creaciónyeliminaciónderelacionesdeseguimiento:
Por último se añadió la siguiente batería de pruebas para el endpoint depublicacionesdeusuariosseguidos:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página85
Pruebasdeaceptación UnavezprobadaimplementadoelclientequeconsumelaAPI,serealizaronlassiguientespruebasdeaceptaciónmanuales.Buscarusuariosporsunombre
Habiendoiniciadosesión,elusuariopuedesolicitarbuscarusuariospulsandosobrelapestañaconeliconodelalupaohaciendoswipehastallegaralamisma.Elsistemalepermiteintroducirunaconsultaenuncampodetexto.Habiendoescritounaconsulta,cuandoelusuariosolicitabuscar,elsistemamuestrausuariosresultadodelaconsultaypermiteaccederasuperfil,seguirloodejardeseguirlo:
[UPM]MásterenIngenieríaWeb
Página86
EmpezaraseguiraunusuarioHabiendoiniciadosesión,elusuariopuedesolicitarseguiraunusuario,yaseadesde
lapantalladebúsquedaodesdeelperfildeunusuarioconcreto,pulsandoelbotónde“Follow”:
DejardeseguiraunusuarioHabiendoiniciadosesión,elusuariopuedesolicitardejardeseguiraunusuario,ya
seadesdelapantalladebúsquedaodesdeelperfildeunusuarioconcreto,pulsandoelbotónde“Unfollow”.Elsistemaconfirmalaacciónyeliminalarelacióndeseguimiento:
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página87
VisualizarpublicacionesdeusuariosalosquesigoUnaveziniciadasesión,elusuariopuedesolicitarvisualizarlaspublicacionesdelos
usuariosalosquesigue,tocandolapestañaconeliconodelacasaohaciendoelgestode deslizar (swipe) hasta dicha pestaña. Entonces la aplicaciónmuestra una lista depublicacionesordenadas:
Unavezsehanmostradoalgunaspublicaciones,elusuariopuedesolicitarvermáspublicacioneshaciendoscroll,entoncesel sistemaañademáspublicacionesa lalistademanerainvisible.
Elusuariopuedetambiénsolicitaractualizarlalista,haciendoelgestodedeslizarhaciaabajolalista,entonceslaaplicaciónmostraráunaanimacióndecargayactualizarálalista:
[UPM]MásterenIngenieríaWeb
Página88
Arquitecturadelcliente A continuación se describe la arquitectura del cliente que emergió fruto derealizarrefactorizacionesyrespetarlaarquitecturainicialdelframeworkdeAndroid. Se puede comprobar que se trata de una arquitecturaMVC tradicional queagrupalasclasesenlossiguientespaquetes:
Podemosvesqueloscontroladoresestánagrupadossegúnsudominio,mientrasquelosmodelossedividenenentidades,APIsyexcepciones.Porúltimo,lasvistassehan organizado en paquetes para diferenciar entre actividades, adaptadores,fragmentos,viewholdersyvistaspersonalizadas.
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página89
Arquitecturadelservidor A continuación se describe la arquitectura del servidor que emergió fruto derealizarrefactorizacionesyrespetarlaarquitecturainicialdelframeworkdeDjangoRESTFramework. SepuedecomprobarquesetratadeunaarquitecturaMVP-PVqueagrupalasclasesenlossiguientespaquetes:
En primer lugar hay cuatro directorios: api, media,socialmediayvenv.
EldirectorioapialbergaelsubsistemaresponsabledemanejarlaAPIREST.Eldirectoriomediaesdondesesubiránlasimágenesdurantelaspruebas(enproducciónseutilizaráAmazonS3).
Lacarpetasocialmediacontieneelcódigoreferentealaspropiedadesglobalesproyectoytodossussubsistemas.
Por último, el directorio venv se utiliza paraalmacenarlasdependenciasdelentornovirtual.
En el directorio raíz encontramos ficheros deconfiguración para el servidor (.env, .gitignore, .travis.yml,Procfile, requirements.txt, runtime.txt) así como labasededatosqueseutilizaparaejecutarlaspruebas(db.sqlite3).
[UPM]MásterenIngenieríaWeb
Página90
CONCLUSIONES Y POSIBLES MEJORAS
A continuación se valoran los resultadosobtenidosdel desarrollodel sistemacompleto.
Resultados Entansolocuatroentregascortassehapodidodesarrollarcompletamenteunaplataformaparacompartir imágenesendispositivosAndroid,consusfuncionalidadesmásbásicas.
SehademostradoquesepuedenutilizarserviciosPaaScomoHerokuyAmazonWebServicesparahospedaramuybajocoste(gratisenestecaso)elservidorocupadodeatenderlaAPIpública.
Como resultados de este proyecto queda disponible públicamente el código
tantodel cliente comodel servidordesarrollados, en sus respectivos repositoriosdeGitHub:
• Repositoriodelcliente:https://github.com/dowrow/social-media-android• Repositoriodelservidor:https://github.com/dowrow/social-media-server
Laintenciónesquecualquierapuedadesarrollarunaplataformademediosocialcon
facilidadapartirdeestosrepositorios,simplementemodificandolosmodelosasociadosaunapublicación.Deestemodo,seríarelativamentesencillodesarrollar,porejemplo,unaplataformaparacompartirvideoenlugardeimágenes.
MejorasQuedanpendientesdedesarrollarcomofuturasmejoraslashistoriasdeusuario
quefuerondefinidasenellafaseinicialdeconceptualización,quequedaronagrupadasencuatroentregas:
# Entrega Coste(SP) Valor
4 Relaciones 5 50
5 Interacciones 5 50
6 Autenticaciónavanzada 4 25
7 Interaccionesavanzadas
3 25
DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid
DiegoCastañoChillarón Página91
BIBLIOGRAFÍA
Alex.(30de06de2016).PopularWebsitespoweredbyDjango.ObtenidodeCodeCondo:http://codecondo.com/popular-websites-django/
Amazon.(20deJuniode2016).AmazonS3-Welcome.ObtenidodeAmazonWebServicesDocumentation:http://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html
Amazon.(20deJuniode2016).FreePlan.ObtenidodeAmazonWebServices:https://aws.amazon.com/es/free/
Django.(20deJuniode2016).Home.ObtenidodeDjangoProject:https://www.djangoproject.com/
Esquenazi,N.(1deMayode2016).GooglePlayStyleTabsusingTabLayout.ObtenidodeGithub:https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout
Facebook.(1deJuniode2016).FacebookDeveloperCenter.ObtenidodeFacebookLoginforAndroid:https://developers.facebook.com/docs/facebook-login/android
Google.(20deJuniode2016).Features.ObtenidodeAndroidDeveloperCenter:https://developer.android.com/studio/features.html
Google.(10deJuniode2016).RecyclerView.ObtenidodeAndroidDeveloperCenter:https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html
Gunicorn.(20deJuniode2016).Home.ObtenidodeGunicorn:http://gunicorn.org/Heroku.(1deJuniode2016).About.ObtenidodeHeroku:
https://www.heroku.com/aboutJetBrains.(6deJuniode2016).PyCharmFeatures.ObtenidodeJetBrains.com:
https://www.jetbrains.com/pycharm/features/kennethreitz.(20deJuniode2016).dj-database-url.ObtenidodeGithub:
https://github.com/kennethreitz/dj-database-urlKwiecień,J.(1deEnerode2015).RepositoriodeEasyImage.ObtenidodeGithub:
https://github.com/jkwiecien/EasyImageManifestoIntro.(1deJuniode2016).ObtenidodeAndroidDeveloperCenter:
https://developer.android.com/guide/topics/manifest/manifest-intro.htmlNewsroom.(s.f.).Companyinfo.ObtenidodeFacebooknewsroom:
https://newsroom.fb.com/company-info/OperatingSystemMarketShare.(20deJuniode2016).Obtenidode
NetMarketShare.com:https://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpcustomd=1
PlatformVersions.(6deJuniode2016).ObtenidodeAndroidDeveloperCenter:https://developer.android.com/about/dashboards/index.html
[UPM]MásterenIngenieríaWeb
Página92
Polishchuk,A.(6deJuniode2016).PostgreSQLvsMondoDB.ObtenidodeAirPair:https://www.airpair.com/postgresql/posts/sql-vs-nosql-ko-postgres-vs-mongo
Selenium.(6deJuniode2016).ToAutomateorNottoAutomate?ObtenidodeIntroducingSelenium:http://www.seleniumhq.org/docs/01_introducing_selenium.jsp
ThePostgreSQLGlobalDevelopmentGroup.(1deJuniode2016).About.ObtenidodePostgreSQL:https://www.postgresql.org/about/