MÁSTER EN INGENIERÍA WEB Proyecto Fin de...

UNIVERSIDADPOLITÉCNICADEMADRIDEscuelaTécnicaSuperiordeIngenieríadeSistemasInformáticos

MÁSTERENINGENIERÍAWEBProyectoFindeMáster

DesarrollodeunaplataformasocialparacompartirimágenesendispositivosAndroid

AutorDiegoCastañoChillarón

TutorLuisFernandodeMingoLópez

1dejuliode2016


AGRADECIMIENTOS

Graciasamifamiliayamigosporsuapoyoconstante.

[UPM]MásterenIngenieríaWeb


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


ABSTRACT

Theintentionistodevelopasocialmediaplatformforsharingimages.ThiswillbeaccomplishedbyimplementingaRESTfulAPIandanAndroidclient.Thesystemwillbedevelopedusingthefollowingtechnologies:PythonwiththeDjangoRESTFrameworkandJavawiththeAndroidSDK.

Theaimistomixinatheoretico-practicalprojecttheknowledgeacquiredinthesubjectsofGeneralVision,DesignPatterns,AgileWebMethodologiesandApplicationDevelopmentforMobilesystems.

KEYWORDS Socialmedia,image,Android,RESTAPI


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


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



Pruebasdeaceptación......................................................................................................65Publicarunaimagen.....................................................................................................................65Visualizarpublicacionesglobales.................................................................................................66

Sprint3:Perfiles.....................................................................................................................67SprintBacklog....................................................................................................................67

Eliminarunapublicaciónpropia..................................................................................................67Visualizarperfilpropio.................................................................................................................67Visualizarperfilajeno...................................................................................................................68



Pruebasdeaceptación......................................................................................................74Eliminarunapublicaciónpropia..................................................................................................74Visualizarperfilpropio.................................................................................................................75Visualizarperfilajeno...................................................................................................................75


Sprint4:Relaciones................................................................................................................76

SprintBacklog....................................................................................................................76Buscarusuariosporsunombre...................................................................................................76Empezaraseguiraunusuario.....................................................................................................76Dejardeseguiraunusuario........................................................................................................77Visualizarpublicacionesdeusuariosalosquesigo.....................................................................77



Pruebasdeaceptación......................................................................................................85Buscarusuariosporsunombre...................................................................................................85Empezaraseguiraunusuario.....................................................................................................86Dejardeseguiraunusuario........................................................................................................86Visualizarpublicacionesdeusuariosalosquesigo.....................................................................87

Arquitecturadelcliente.........................................................................................................88Arquitecturadelservidor.......................................................................................................89

Conclusionesyposiblesmejoras....................................................................................90Resultados..............................................................................................................................90Mejoras..................................................................................................................................90

Bibliografía.....................................................................................................................91


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.


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.


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.



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%


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.



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.


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.



VistatabuladaconTabLayoutyViewPager La vistaTabLayout esunelementode layout quenospermite renderizar unaseriedepestañasnavegables.ElcomponenteViewPagernospermitepaginarunaseriedefragmentosdemaneraordenada.Sicombinamosestosdoselementosdelasiguientemanera(Esquenazi,2016):

Conseguiremosunavistaconunpestañasquepermitepasardeunfragmentoaotro,manteniendoelestadodecadafragmento:


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).



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.


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.



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.


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:



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:


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.



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:


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:



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.


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:



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.


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.



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)


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:



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.


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.



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)


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)



AndroidStudio Android Studio esel entornodedesarrollooficial deAndroid. EstábasadoenIntellijIDEAyfueconstruidoparaacelerareldesarrolloenAndroidyayudaracrearlasaplicacionesconlamayorcalidadposibleparacadadispositivoAndroid. Ofrece herramientas pensadas a medida para desarrolladores Android,incluyendoeleditadoricodecódigo,ladepuración,pruebasyherramientasparamedirelrendimiento.(Google,2016)


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.



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”.


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)



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


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



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


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.



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.


Unavezelusuariohaabiertolaaplicación,cuandosolicitainiciarsesiónconTwitterelsistemasolicitasuscredenciales.Una vez ha introducido sus datos, si son correctos semuestralapantallaprincipaldelaaplicaciónysinonotificaelerror.


Página48

CerrarsesiónDescripción Como usuario quiero cerrar sesión para abandonar la

aplicación.

Conversación UsuariosolicitacerrarsesiónàSistemaregresaalapantallainicial.


Unavezheiniciadosesión,cuandosolicitocerrarsesión,laaplicaciónregresaalapantallaprincipal.

EliminarcuentaDescripción Comousuarioquieroeliminarpermanentementemicuenta

paraquenosemantengantodosmisdatosalmacenadosenlaaplicación.

Conversación Usuario solicita eliminar su cuenta à Sistema solicitaconfirmarlaoperación.UsuarioconfirmalaoperaciónàSistemaeliminalacuentapermanentementeymuestrapantallaprincipal.


Habiendoiniciadosesión,cuandoelusuariosolicitaeliminarsucuenta,elsistemamuestraunmensajedeconfirmación.Unavezsemuestraelmensajedeconfirmación,sielusuarioconfirmalaacción,elsistemaeliminalacuentayvuelvealapantallaprincipal.



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.


Página50

Diseño ElsiguientediagramadesecuenciarepresentaelcasotípicodeautenticaciónpormediodeunaAPIdeterceros,enestecasoFacebook:

EnprimerlugarlaaplicaciónAndroidhaceunapeticiónalservidordeFacebook(atravésdesuSDK)identificándoseconunusuarioycontraseñaysolicitandountokendeacceso.

ElservidordeFacebookcompruebaloscredencialesycontestaconunerrorountokendeaccesoOAuth2.ElclientemantendráestetokenenmemoriayloenviaráenlacabeceradecadapeticiónqueserealicealaAPIpropiadenuestroproyecto.

ElservidorutilizaráeltokenrecibidoenlacabeceraparaautenticaralusuariodeFacebookyloasociaráconunusuarioDjango.



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:


Página52

Wireframes Paralashistoriasdeusuariodeestesprintseesbozarondosvistas.Unaprimeradeiniciodesesión:

Yotrapantallaconelperfildelusuariodesdelacualsepuedesolicitartantolaeliminacióndelacuenta(“Deleteaccount”)comoelcierredesesión(“Logout”):



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:


Página54

Pruebasdeaceptación UnavezprobadaimplementadoelclientequeconsumelaAPI,serealizaronlassiguientespruebasdeaceptaciónmanuales.IniciarsesiónconFacebook

Unavezheabiertolaaplicación,cuandosolicitoiniciarsesiónconFacebookelsistemamesolicitamiscredenciales:

Unavezhe introducidomisdatos, si soncorrectos sememuestra lapantalla

principaldelaaplicaciónysinomenotificaelerror:



IniciarsesiónconTwitter Unavezheabiertolaaplicación,cuandosolicitoiniciarsesiónconFacebookelsistemamesolicitamiscredenciales:

Unavezhe introducidomisdatos, si soncorrectos sememuestra lapantallaprincipaldelaaplicaciónysinomenotificaelerror.


Página56

Cerrarsesión Unavezelusuariohainiciadosesión,puedesolicitarcerrarlapulsandoelbotón“Logout”:

Laaplicaciónregresaalapantallaprincipal:



Eliminarcuenta Habiendoiniciadosesión,elusuariopuedesolicitareliminarsucuenta,pulsandoelbotón“Deleteaccount”:

El sistema muestra entonces un mensaje de confirmación y, si el usuarioconfirmalaacción,pulsando“Deleteaccountforever”,elsistemaeliminalacuentayvuelvealapantallaprincipal:


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.


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.



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.


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.


Página60


• 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.



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:


Página62

EladaptadorComplexFeedAdapterseocupadeasignaracadaobjetodeunalistaa visualizar una vista determinada. Por ejemplo, a un objeto de la clasePublicationResponseleasignaráunavistaPublicationViewHolder.Deestemodo,elfeeddepublicacionesglobalessimplementeextiendedeAbstractFeedController:



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:


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:



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:


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:



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.


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.


Unaveziniciadasesión,cuandoelusuariosolicitevisualizarelperfilpropio,elsistemamostraráunavistaconavatardelusuario, número de publicaciones, seguidores, seguidos ylistadepublicaciones.


Página68

VisualizarperfilajenoDescripción Comousuarioquierovisualizarunperfilajenoparaversus

estadísticasypublicaciones.

Conversación Usuario solicita visualizar perfilà Sistemamuestra perfilcon avatar del usuario, número de publicaciones,seguidores,seguidosylistadepublicaciones.


Unaveziniciadasesión,cuandoelusuariosolicitevisualizarunperfilajeno,elsistemamostraráunavistaconavatardelusuario, número de publicaciones, seguidores, seguidos ylistadepublicaciones.




• 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.


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:



De este modo, tanto el perfil ajeno como el propio son extensiones delAbstractFeedAdapter:


Página72

Wireframes Paralashistoriasdeusuariodeestesprintseesbozarondosvistas.Unaprimeraparavisualizarnuestropropioperfildeusuarioyquepermitacerrarsesiónoborrarlacuenta:

Yotraparavisualizarelperfildeunusuariocualquiera,quepermitaempezaraseguirodejardeseguiradichousuario:



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:


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:



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:


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.


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.


Habiendoiniciadosesión,cuandoelusuariosolicitaseguiraunusuario,elsistemaconfirmalaacciónyguardalarelacióndeseguimiento.



DejardeseguiraunusuarioDescripción Comousuarioquierodejardeseguiraunusuarioparadejar

deestarsuscritoasuspublicaciones.

Conversación Usuario solicita dejar de seguir a un usuarioà Sistemadeshacelaaccióndeseguiradichousuario.


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.


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.


Página78


• 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.



Diseño Para implementar la búsqueda de usuarios se implementó un controladorAbstractUserFeedController que utiliza un nuevo adaptador UserFeedAdapter paraasignarvistasdeltipoUserSearchViewHolderacadaobjetodetipoUserResponse:

ParaimplementarlafuncionalidaddeseguirydejardeseguirseimplementóuncontroladorFollowControllerqueesllamadodesdelasvistasUserSearchViewHolderyUserProfileHeaderViewHolder:


Página80

Por último, para la visualización de publicaciones de los usuarios seguidos seextendióunavezmáselcontroladorAbstractFeedController:



Wireframes Paralashistoriasdeusuariodeestesprintseesbozarontresvistas.Unaprimeraparabuscarusuariosporsunombre:

Paraempezaraseguirodejardeseguiraunusuario,sepodráutilizarelbotónqueapareceenlavistadebúsquedaoelqueapareceensupropioperfil:


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:



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:


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:



Pruebasdeaceptación UnavezprobadaimplementadoelclientequeconsumelaAPI,serealizaronlassiguientespruebasdeaceptaciónmanuales.Buscarusuariosporsunombre

Habiendoiniciadosesión,elusuariopuedesolicitarbuscarusuariospulsandosobrelapestañaconeliconodelalupaohaciendoswipehastallegaralamisma.Elsistemalepermiteintroducirunaconsultaenuncampodetexto.Habiendoescritounaconsulta,cuandoelusuariosolicitabuscar,elsistemamuestrausuariosresultadodelaconsultaypermiteaccederasuperfil,seguirloodejardeseguirlo:


Página86

EmpezaraseguiraunusuarioHabiendoiniciadosesión,elusuariopuedesolicitarseguiraunusuario,yaseadesde

lapantalladebúsquedaodesdeelperfildeunusuarioconcreto,pulsandoelbotónde“Follow”:

DejardeseguiraunusuarioHabiendoiniciadosesión,elusuariopuedesolicitardejardeseguiraunusuario,ya

seadesdelapantalladebúsquedaodesdeelperfildeunusuarioconcreto,pulsandoelbotónde“Unfollow”.Elsistemaconfirmalaacciónyeliminalarelacióndeseguimiento:



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:


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.



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).


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



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


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/

MÁSTER EN INGENIERÍA WEB Proyecto Fin de...

Documents

Transcript of MÁSTER EN INGENIERÍA WEB Proyecto Fin de...