MÁSTER EN DESARROLLO DE APLICACIONES Y SERVICIOS PARA...
63
UNIVERSIDAD POLITÉCNICA DE MADRID ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA DE SISTEMAS INFORMÁTICOS MÁSTER EN DESARROLLO DE APLICACIONES Y SERVICIOS PARA MÓVILES Proyecto Fin de Máster Aplicación para iOS “MENI” Ovidiu Mircea Moldovan Tutor: Francisco Jaime Serradilla García Julio 2017
Transcript of MÁSTER EN DESARROLLO DE APLICACIONES Y SERVICIOS PARA...
UNIVERSIDADPOLITÉCNICADEMADRID
ESCUELATÉCNICASUPERIORDEINGENIERÍADESISTEMAS
INFORMÁTICOS
MÁSTERENDESARROLLODEAPLICACIONESY
SERVICIOSPARAMÓVILES
ProyectoFindeMáster
AplicaciónparaiOS“MENI”
OvidiuMirceaMoldovan
Tutor:FranciscoJaimeSerradillaGarcía
Julio2017
menilaappsocial
1
menilaappsocial
2
menilaappsocial
3
Agradecimientos
“Lapacienciaesunárbolderaízamarga,perodafrutosmuydulces”diceunrefránpersa.Amifamiliaporqueyaeshoradecompartirtambiénlosfrutos.
menilaappsocial
4
menilaappsocial
5
Resumen
meniesunaaplicaciónquesurgecomoposiblesoluciónaretoscotidianosdelasociedad.Enestemomentocuenta conunclienteparaAndroidyunPlandeNegocioque lapretendematerializar.
Enresumidascuentas,estamemoriaversasobreeldesarrollodeunaappparaelsistemaoperativoiOS,centradaeniPhone,paraversionesposterioresalaiOS8.0.
Losrequisitosdelamismaapuntanalanecesidaddecreary/oapoyarcampañaspromovidasporpersonasuorganismos(públicosoprivados)yqueelordenenqueselistentengacomoreferencia la cercanía a un punto geográfico configurador por el usuario (barrio, ciudad,comunidadetc.).
Estaapphasidodiseñadadetalformaquelalógica,olapartemáspesada,delback-endseencuentracoordinadaporservicioswebdeAmazon(AWS),mientrasqueeldispositivoseráunaherramientavisualparalainteracciónconlosusuariostomandodeestemodolafuncióndefront-end.EstacapaestápensadaencumplirconlasrecomendacionesdeAppleybuscaobtenerunaexperienciadeusuariobasadaenlausabilidad.
menilaappsocial
6
menilaappsocial
7
Abstract
Meniisamobileappthatemergesasapossiblesolutiontosociety’severydaychallenges.Atthismoment,ithasaclientforAndroidandaBusinessPlanthatintendstopromoteit. Inshort,thisreportisaboutthedevelopmentofanappfortheiOSoperatingsystem,focusedoniPhones,withminimumiOSversion8.0 Itsrequirementspointtotheneedtocreateand/orsupportcampaignspromotedbypeopleororganizations(publicorprivatesector)andthattheorderinwhichtheyarepresentedisbasedontheproximitytoageographicpointconfiguredbytheuser(neighbourhood,City,community,etc.). It has been designed in such a way that the logic, the heavier part, of the back-end iscoordinated by Amazon Web Services (AWS), while the device will be a visual tool forinteraction with users thereby assuming the front-end function. This layer is thought tocomplywithApplerecommendationsandseekstoprovideagreatuserexperience.
menilaappsocial
8
menilaappsocial
9
Índice
AGRADECIMIENTOS 3RESUMEN 5ABSTRACT 7ÍNDICE 9ÍNDICEDETABLAS 11ÍNDICEDEFIGURAS 13NOTACIÓN 14
CAPÍTULO1:INTRODUCCIÓN 15
1.1HISTÓRICO 151.2OBJETIVOS 161.3ESTRUCTURADELAMEMORIA 17
CAPÍTULO2:LITERATURA 19
2.1PROCESOPARAELDESARROLLODESOFTWARE 192.2SISTEMASOPERATIVOSMÓVILES 202.3DISEÑOAPPMÓVIL 212.3.1LENGUAJESDEPROGRAMACIÓN 212.3.2HERRAMIENTASYMARCOSDESARROLLO 222.6BACK-ENDCLOUDYSERVICIOS 222.6.1CLOUDS 222.6.2PROVEEDORESDESERVICIOSYSERVICIOS 232.6.3CLAUDIA.JS 24
CAPÍTULO3:PAUTASDEDISEÑOPARAAPLICACIONESMÓVILESIOSYAWS 25
3.1APPSIOS 253.1.1PRINCIPIOSDEDISEÑODEINTERFACESGRÁFICASDEAPPLE-FRONT-END 263.1.2PATRONESDEDESARROLLODEAPLICACIONES 263.2BACK-END-AWS 273.2.1.SERVICIOS 27
CAPÍTULO4:ANÁLISIS 29
4.1PROBLEMÁTICA 294.2REQUISITOSDELSISTEMA 294.2.1NOFUNCIONALES 294.2.2FUNCIONALES 294.3CASOSDEUSO 314.3.1DIAGRAMA 31
CAPÍTULO5:DISEÑO&DESARROLLO 33
menilaappsocial
10
5.1ARQUITECTURAFRONT-END 335.2DISEÑOARQUITECTURABACK-END 335.2.1DIAGRAMA 345.2.2GESTIÓNDESERVICIOS 345.2.3ESTRUCTURAYMODELOSDEDATOS 355.2.4PROCEDIMIENTOS 375.2.5HERRAMIENTASUSADAS 385.3DISEÑOFRONT-END 385.3.1VISTAS 395.3.2TEMÁTICAEICONOGRAFÍA 405.3.3CONTROLESEINTERACCIÓN 405.4DESARROLLODELAAPLICACIÓN 415.4.1HERRAMIENTASYLIBRERÍASUTILIZADAS 415.4.2IMPLEMENTACIÓNDEVISTASYCONTROLADORES 425.4.3IMPLEMENTACIÓNDESERVICIOSYUTILIDADES 43
CAPÍTULO6:EVALUACIÓNYPRUEBAS 47
6.1PRUEBASREQUISITOSEINTERFACESGRÁFICAS 476.2EVALUACIÓNDELAAPLICACIÓN 476.3PRUEBASBACK-END 496.4RESUMEN 50
CAPÍTULO7:CONCLUSIONES 53
7.1TRABAJO 53EXISTEUNATENDENCIAEVIDENTEAPOTENCIARLASAPPSDELOSMÓVILESCONMBAASAPROVECHANDOLAEXISTENCIAYUSOEXTENDIDODECONEXIONESDEDATOSDEESTOSDISPOSITIVOS.APROVECHARTODALAPOTENCIAQUEOFRECEUNDATACENTERMIENTRASQUEENLAAPPSOLOSEPROCESALAINTERACCIÓNDELUSUARIOABREEL
CAMINOAUNAINFINIDADDEPOSIBILIDADES. 537.2PRÓXIMOSPASOS 537.3CONCLUSIÓNFINAL 54
BIBLIOGRAFÍA 55
ANEXOS 57
ANEXOS1.PANTALLAZOS 57
menilaappsocial
11
índicedetablas
Tabla 1 - Notación ................................................................................................................. 14Tabla 2- Cloud Services (http://www.datamation.com, 2017) ............................................... 24Tabla 3 - Llamadas API (Postman) ....................................................................................... 50
menilaappsocial
12
menilaappsocial
13
Índicedefiguras
Figura 1 - Pantalla principal cliente Android (prototipo) ........................................................ 16Figura 2 - Modelo en cascada ............................................................................................... 20Figura 3 - Modelo AGILE ....................................................................................................... 20Figura 4 - MVC iOS ............................................................................................................... 25Figura 5 - Arquitectura librerías iOS ...................................................................................... 27Figura 6 - Diagrama casos de uso meni ............................................................................... 31Figura 7 - Arquitectura AWS (back-end) ............................................................................... 34Figura 8 - Modelo de datos ................................................................................................... 35Figura 9 - Vistas meni ........................................................................................................... 39Figura 10 - Logo meni ........................................................................................................... 40Figura 11 - Paleta colores meni ............................................................................................ 40Figura 12 - Uso CPU ............................................................................................................. 47Figura 13 - Uso Memoria ....................................................................................................... 48Figura 14 - Uso Energía ........................................................................................................ 48Figura 15 - Uso HHDD .......................................................................................................... 48Figura 16 - Uso red ............................................................................................................... 49Figura 17 - Meni Postman API calls ...................................................................................... 49Figura 18 - Launch screen .................................................................................................... 57Figura 19 - Pantalla inicio ...................................................................................................... 57Figura 20 – Vista acceder con usuario y contraseña ............................................................ 58Figura 21 – Vista registrarse como nuevo usuario ................................................................ 58Figura 22 – Vista lista campañas .......................................................................................... 59Figura 23 – Vista crear nueva campaña ............................................................................... 59Figura 24 – Vista menú lateral .............................................................................................. 60Figura 25 – Vista mapa ......................................................................................................... 60Figura 26 – Vista campaña ................................................................................................... 61Figura 27 – Vista perfil usuario .............................................................................................. 61Figura 28 – Vista Disclaimer ................................................................................................. 62Figura 29 – Vista oculta - Invictus ......................................................................................... 62
menilaappsocial
14
Notación
AWS AmazonWebServices
SDK Kitdedesarrollodesoftware
front-end&back-end
front-endeslapartedelsoftwarequeinteractúaconelolosusuariosyelback-endeslapartequeprocesalaentradadesdeelfront-end(Wikipedia)
app Aplicaciónsoftware(móvil)
SO SistemaOperativo
framework Marcodedesarrollo
IDE Entornodedesarrollointegrado
Cloud Serviciosdecomputaciónenlanube,remotos
CPD Centrodeprocesamientodedatos
IaaS Infrastructureasaservice-Infraestructuracomoservicio(Cloud)
PaaS Platformasaservice-Plataformacomoservicio(Cloud)
SaaS Softwareasaservice-Softwarecomoservicio(Cloud)
SECaaS Securityasaservice-Seguridadcomoservicio(Cloud)
MBaaS Mobileback-endasaservice-Back-endparamóvilescomoservicio(Cloud)
Serverlesscomputing
Computación“sinservidor”
API ApplicationProgrammingInterface-Interfazdeprogramacióndeaplicaciones
Gateway Pasarelaopuertadeenlace
UI UserInterface-Interfazdeusuario
US Userstory-Historiadeusuario
CRUD Acrónimode"Crear,Leer,ActualizaryBorrar"
Cluster Conjuntodeequiposinformáticosorecursos
Tabla 1 - Notación
menilaappsocial
15
Capítulo1:IntroducciónSobreelmodeloactualdesociedadSilverioBarriagaescribe:“Ladescripciónde lasociedadactualpuede,aveces,arrojarelnegroresultadodeuncolectivodesorientado,perdidoensu identidadeincapazdeencontrarpuntosestablesdereferenciasobreloscualesconstruirunosvaloresquedensentidoalajetreomundial.”.Alapar,losretossocialessehanmultiplicadoysonmuycomplejos.
Eneste contextoadministracionespúblicas yONGsestán luchandopara fomentar laparticipaciónsocialyelvoluntariado.LagranmayoríadeestosesfuerzosademásdesermuycostososnoobtienenunROIsuficientementeeficiente.Porejemplo,enelReinoUnido“1decada5ONGsgastamenosdel50%desupresupuestoenbeneficencia”[1].EnelcasodeOXFAMseestimaquesolo54,7%deldineroacaballegandoalaspersonasqueatienden[2].
Porotro lado, seobservaqueuna faltade inversiónenmarketing revierteenunos resultadosdeingresos pésimos [3]. Entendemos pues, que promover nuevas formas y/o canales para llegar alpúblicoesunanecesidadimperiosaparareducirelpesodeestosgastosenlospresupuestosdelasONGsypotenciarsuimpactosocial.
Elcasodelasadministracionespúblicasesaúnmáscomplejoyaqueseencuentranenlaparadojadetenerqueofrecerunaseriedeservicios(comoel fomentode lasensibilización,de laparticipaciónciudadanayelvoluntariadoetc.)a lavezqueseenfrentana lareduccióndesuspresupuestos.EnAndalucía, por ejemplo, la Junta ha reducido su inversión en acciones de sensibilización yconcienciación en el Tercer Plan Andaluz de Voluntariado en un 36,41% entre 2010 y 2014 [4].Asimismo,lasadministracionespúblicastienenquebuscarfórmulascadavezmásinnovadorasparacumplirconsuscometidos.
Por otro lado, los datos sobre la colaboración de la población española en causas sociales hanexperimentadounimportantecrecimiento.LacolaboracióneconómicaconlasONGshaaumentadode un 20,4% a un 31,7% especialmente entre los jóvenes demenos de 24 años. Sin embargo, laparticipaciónactivaenaccionesdevoluntariadoregistraunsensibledescensodecasi2%enunaño.
meniseplanteacomounaposiblesolucióninnovadorapararesponderaloscomplejosretossocialesdenuestrasociedadactualatravésdelasnuevastecnologías.Sedeseacrearcomunidadounentornocolaborativoquetomeelcrowdsourcing,yenciertamedidaelcrowdfunding,comopiedrasangularesdeunadinámicadondelatecnologíaeslafundación.
1.1 Histórico Menisurgecomoidea,emanadaelcontextoanteriormenteexpuesto,desolucióntecnológicaparael retopropuestoporHack4Good [5].Hack4Goodesunhackathondóndesebuscansoluciones tecnológicas a problemas sociales. En menos de 48 horas un equipointerdisciplinar, formado por Marian Moldovan (ingeniero), Loredana Stan (politóloga) yOvidiuMoldovan(ingeniero),consiguencrearunprototipodelaaplicaciónconunclientedeAndroid.
menilaappsocial
16
Figura 1 - Pantalla principal cliente Android (prototipo)
TantolaconceptualizacióndelaideacomolavalidacióndelaaplicaciónfuecoordinadaporLoredana.Esta aplicación, que se llamóGIVR en un principio, obtuvo el 3er puesto. También comopremiolosmiembrosdelequipofueronbecadosparacursardosmásteresenDireccióndeEmpresas.ElTrabajodeFindeMasterdeOvidiuparaelMBAesbásicamentelacreacióndeunBusinessPlanparaestaaplicación.
1.2Objetivos
Como objetivo general se tiene que apuntar la aplicación de la tecnología común en lasolucióndeproblemassociales.
Losobjetivosconcretospasanporconstruirunaaplicaciónintuitivayusablebasadaenlageolocalizaciónqueservirápara crear campañas socialesporun ladoynavegarentre lascampañasexistentes,cercadelusuarioysinperjuiciodesuámbitoorecursosquenecesita,porotrolado.
Laaplicacióndebetenerundiseñoescalableymodularizadodeformaquesepuedenañadirfácilmentefuncionalidadesyampliarelnúmerodeusuarios.
Como objetivo secundario se debe asegurar la fácil adaptación de la aplicación a otrosdispositivoscomoporejemplolosiPads.
Esteproyectotienecomoobjetivosindirectos:
● Fomentaryfacilitarlaparticipacióntantoenvoluntariadocomo en cualquier otrotipodemecenazgodecausassociales.
menilaappsocial
17
● Localizaryfiltrardeformapersonalizadalascausassocialesquedespiertaninterésenlosusuarios.
● Levantarunoscanalesdecomunicacióndirectosentrepersonasyentidadessocialesdetodotipo.
● FomentodepolíticaseiniciativasRSCparalasempresasdetodotipoytamaño.
1.3Estructuradelamemoria
ResumenTFMEnesteapartadosebuscadarunavisióngeneraldelproyecto.
Capítulo.1-IntroducciónalproblemaquesebuscasolucionarElprimercapítuloversasobreelproyectocontadodesde laperspectivadelproblemaquepretendesolucionarylosobjetivosaalcanzar.
Capítulo.2AspectostécnicosgeneralesSWEl segundocapítulobuscadar,deunamaneracondensada,unavisiónde la ingenieríadesoftwareoelciclodevidadeunproductosoftware.
Capítulo3:AspectostécnicossolucionesmóvilesEltercercapítulotratadereducirenenfoquealcampoconcretodelasapps(aplicaciones)móviles.
Capítulo4:RequisitosyanálisisproblemáticaEnelcuartocapítuloseconfrontanlosrequisitosconlasolucióntecnológicaseleccionada
Capítulo5:DiseñoeimplementacióndelasoluciónEl sistema con su diseño y procedimientos de implementación quedan patentes en estecapítulo5.
Capítulo6:EvaluaciónypruebasdelasoluciónElcapítulo6presentaunpasofundamentalenlavidadecualquiersistemasoftware:diseñoyresultadosdelaspruebas.
Capítulo7:ConclusionesfinalesypróximospasosLasconclusionesyaprendizajesestándetalladasenestecapítulo7.
Bibliografíayreferenciasusadas
AnexosAquíselistanlasdiferentespantallasdelaaplicaciónenelestadodedesarrolloactual.
menilaappsocial
18
menilaappsocial
19
Capítulo2:LiteraturaElsiglopasadofuemarcadoporelhercúleodesarrollodelascienciasdelacomputación.Eltransistor revolucionó el procesamiento automático de la información y estas prácticasllevaronasuvezaunarevolucióntecnológica,sinprecedentes,entodoslosámbitosdelassociedadeshumanas.
Laevolucióndeltransistortienecomoresultadopalpableyenpocasdécadaslasmáquinasfísicas(hardware)pasandesercolosos,comoelColossusMarkI,aocuparunespaciosimilaraungranodearroz[6]comoel“micromotem^3”.Estaevoluciónnecesariamenteconllevalaevolucióndelossistemasoperativos(software)deestosdispositivosylaadaptacióndelosmismosenfuncióndelpapelquejueganenlarelaciónconelserhumano.Lascrecientescomplejidadesde lossistemasseacarreanasuvezelestablecimientode lafigura del ingeniero de software. La siguiente definición puede ser la más correcta: “Laingenieríadesoftwareeslaaplicacióndeunenfoquesistemático,disciplinadoycuantificablealdesarrollo,operaciónymantenimientodesoftware,yelestudiodeestosenfoques,esdecir,laaplicacióndelaingenieríaalsoftware.Integramatemáticas,cienciasdelacomputaciónyprácticascuyosorígenesseencuentranenlaingeniería.”[7]Laaplicaciónsistémicaenlaplanificación,parasuposteriorimplementación,delciclodevidade un sistema SW queda retratada en el proyecto software. Este documento engloba lacrónicaesperadasobrelavidadeunsistemaoproductosoftwaredesdelafasedeideahastasuobsolescencia.
2.1Procesoparaeldesarrollodesoftware
TípicamenteunproyectoSWincluyeestasfases:● obtenciónyanálisisderequisitos,● diseño,● implementación,● verificación● mantenimiento.
Estospasossehanintentadoperfeccionarconcretizandovariasmetodologías.CaberecordarelclásicoModeloenCascadaconsusrígidasfases:
menilaappsocial
20
Figura 2 - Modelo en cascada
El otro modelo o modelos, ya que tienen una serie de variantes, aspira a reemplazar alanteriorponiendolasbasesenunmodelomáságil.LasmetodologíasAgiletienenensubaseelmanifiestoágil[8]queenumeraunaseriedeprincipios.Unaformaextremadamentesimplederesumirestasmetodologíasseríadecirquesonciclositerativosquesimulan,enuntiempomuycorto,lametodologíaencascadaparaconstruirdeformaincrementalelSW.
Figura 3 - Modelo AGILE
2.2Sistemasoperativosmóviles
Losteléfonosmóvilessehanbeneficiadodelaumentodelapotenciadecálculo,ylareduccióndeltamañodelosprocesadores,queenconjuntoconlaincorporacióndenuevosactuadores
Especificación de requisitos
Diseño del software Construcción o
Implementación del software Integración Pruebas (o validación) Despliegue (o
instalación) Mantenimiento
Modelo Desarrollo en Cascada
1.Especificación de requisitos
2.Diseño del software
3.Construcción o Implementación SW
4.Integración
5.Pruebas (o validación) 6.Despliegue (o
instalación) 7.Mante
Requisitos
Tareas - Sprint Backlog
Entregable
Reunión diaria
menilaappsocial
21
y sensores (pantalla táctiles etc.) les permiten y requieren tener sus propios sistemasoperativos.EstosSOsonadaptadosalascapacidadesdelosdispositivosylosdosprimerosenporcentajedeuso,AndroideiOS,tienencomoKernelsdistribucionesdeLinuxyDarwinrespectivamente,lasdosbasadasenUNIX.
Noscentraremosenelsistemaqueesobjetodeestetrabajo:iOS.EsteesunSOliberadoen2007porAppleparasusdispositivos iPhoneyiPodparaposteriormenteincorporarloalastabletasiPad.HayquedestacarqueesunSOmulti-hilo(2010)quedisponedeunasistentevirtual,Siri,ytieneunatiendadeaplicacionespropias,laAppStore.
2.3Diseñoappmóvil
Lossmartphones,teléfonosinteligentes,vienenequipadosconlasfuncionalidadesbásicas.Ademásdeéstas,cadafabricanteañadeunaseriedeaplicacionessoftware,oaplicacionesmóviles que aportan valor añadido al usuario. Es muy habitual encontrar ya instaladasaplicacionesdecorreoelectrónico,agenda,calendario,navegadorwebetc.
A parte de esto cada fabricante aporta un marco de desarrollo, frameworks, y demásherramientas para que puedan crear más aplicaciones. Siempre que se cumpla con losrequisitosdelfabricantecualquierapuedellegarapublicaraplicacionesparaplataformasconcientosdemillonesdeusuarios.
Unrequisitoimprescindibleeslalicenciadedesarrollador.Cadaplataformalagestionaasumanera. Otro requisito es el conocimiento del lenguaje de programación usado para laconstruccióndelasapps.
2.3.1Lenguajesdeprogramación
Aunqueexistenframeworksquepermitensaltarseesterequisitotantoparaaplicaciones[9]comoparajuegos[10]esposiblequenosirvanparasistemassoftwaremáscomplejos.
MientasqueparaAndroidseutilizaellenguajeJAVAparaiOSseutilizaObjective-CoSwift.
“Objective-C es un lenguaje de programación orientado a objetos, creado como unsuperconjuntodeCparaqueimplementaraunmodelodeobjetosparecidoaldeSmalltalk.“[11]
Swiftesunlenguajedeprogramaciónmoderno,liberadoporApple(2014),queseintegraconCocoayCocoa-TouchypuedeusarcualquierlibreríadeObjective-C[12].
menilaappsocial
22
2.3.2Herramientasymarcosdesarrollo
AppledisponedelIDE,entornodedesarrollo,paramacOS,iOSydemásproductos,llamadoXcodeJuntoalosSDKs,kitsdedesarrollosoftware.EnelcasodelosSDKdeiOSestosvienenpreinstalados.
2.6Back-endcloudyservicios
Cuandohablamosde“Cloud”enelcontextodelainformáticanosreferimosalosserviciosdecomputaciónremotos,esdecirqueseutilizanatravésdelasredes,principalmenteInternet.Lossistemasinformáticossepresentancomoservicios.
2.6.1Clouds
ElconceptodeCloudesparecidoalconceptodeMainframe.Atravésdeunaredsetieneaccesoaunidadesdeprocesamientopotentes.Ladiferenciaconstaen laexistenciade losCPD, centro de procesamiento de datos, o Data Center en inglés. Los Clouds ya no sonenormessistemasmonolíticossinoecosistemasoinfraestructurasqueoperanendosniveles.EnelnivelHWestáformadoporungrannúmerodeequiposespecializadosydedicados.ElnivelSWporotroladoactúaconindependenciaoesagnósticoalnivelfísico.
El valor añadido aportado por estos sistemas, aparte de la agilidad, rendimiento,mantenimientoetc. loencontramosenelcostereducido, laescalabilidady laelasticidad,distribucióngeográfica,rápidodespliegueyautomatizacióndetareasdeactualizaciónetc.,así como la abstracción del nivel físico. Entre las desventajas más importantes están ladependencia de los proveedores y de una conexión a la red, así como la fiabilidad y laseguridadquetodavíatienenquemadurarentodoslossistemascloudconocidos.
Lossistemascloudpuedenser:
● Públicos: se comparten los recursos (red, datos, procesamiento etc.) con otrasorganizacionesdentrodelmismoespaciofísico.
● Privados:losCloudsqueseoperanparaunsolocliente.Sesueleconsiderarunabuenaopciónparalasorganizacionesquerequierenunextradeseguridadyrecursos.
● Híbridos: o sistemas Cloud compuestos por tipos diferentes y que se mantienenseparados, pero pueden proveer los recursos necesarios para una mismaorganización. Un buen ejemplo sería una organización que disponga de un Cloudprivado y necesite puntualmente aún más recursos que obtendría de un Cloudpúblico,bajodemanda.
● ExistenotrascategoríasdelascualeslamásinteresantepornombrarseríanlosCloudcomunitariosquesecorrespondeaaquellosqueestéusadopororganizacionesde
menilaappsocial
23
una comunidad, o grupo, que comparten intereses (seguridad, nivel de servicio,requisitoslegalesetc.).
LosserviciosCloudsepartenasuvezdemenoramayorgradodeinteraccióndelclienteconlainfraestructura(virtualizada).Asítenemoslossiguientes[13]:
● IaaSInfrastructureasaservice-Infraestructuracomoservicio(Cloud)-Esteservicioofrece una infraestructura de computación, red y almacenamiento, de formavirtualizada es decir simula ser un entorno real. AWS,Microsoft Azure oGoogleComputeEnginesonejemplosespecíficosdeIaaS.
● PaaSPlatformasaservice-Plataformacomoservicio(Cloud)-típicamenteserefiereaentornosdedesarrollo,basesdedatososervidoresweb.GoogleAppEngineesunejemplo.
● SaaSSoftwareasaservice-Softwarecomoservicio(Cloud)-enestacapalosusuariostienenaccesosoloaaplicacionesconcretas.GoogleDocsoGmailsonunosejemplosrepresentativos.
● SECaaSSecurityasaservice-Seguridadcomoservicio(Cloud)-serefierealusodeservicios de seguridad de terceros integrados en la propia infraestructura de laorganización.AWSCognitoesunejemplosignificativo.
● MBaaSMobileback-endasaservice-Back-endparamóvilescomoservicio(Cloud)-estoaludealosserviciosofrecidosadesarrolladoresdeaplicacioneswebymóvilparaconectar a través de APIs a almacenamiento Cloud. Los servicios pueden incluirgestióndeusuarios,notificacionespushetc.
● Serverlesscomputing-Computación“sinservidor”-enestecasolosrecursosnosonmanejadosporelclienteysolotienequeresponderporlosrecursosusados,esdecirson separados de cualquier tipo de gestión de máquinas virtuales o servidores.Ejemplo de este tipo lo podemos encontrar en los principales proveedores:AWSLambda,MicrosoftAzureFunctions,GoogleCloudPlatformCloudFunctions.
2.6.2Proveedoresdeserviciosyservicios
Algunos proveedores y servicios se hanmencionado ya. Los proveedores de este tipo deserviciosmásrelevantesyloqueofrecensepuedeobservarenlasiguientetabla:
menilaappsocial
24
Tabla 2- Cloud Services (http://www.datamation.com, 2017)
2.6.3Claudia.js
Claudia.js [14] es unaherramientaOpen Source de desplieguede proyectos enAWS confacilidad.ConcretamentesetratadeldesplieguedeproyectosdeNode.jsaAWSLambdayAPIGateway.
menilaappsocial
25
Capítulo3:PautasdediseñoparaaplicacionesmóvilesiOSyAWSEn las aplicaciones móviles el diseño está inspirado en el patrón de arquitecturaMVC,modelo-vista-controlador.
Android usa MVP (Modelo, Vista, Presentador) donde se reemplaza el Controlador porPresentadorquenotieneconocimientode lavistaysecomunicaconellaatravésdeunainterfazyactúadeproxyentrelavistayelmodelo.
iOStieneuncasoparecidosoloqueelcontroladorsiconocelaexistenciadelasvistas.Aquítampocoexisteinterfazentrevistaymodeloyaqueelcontroladorcapturaygestionatodoslosprocesosnecesariosdeestasdos.
3.1AppsiOS
MVCeslapiedraangulardecualquieraplicacióniOS.
● Modelo: es lapartedecódigoquedefineygestiona losdatosde laapp.Tambiénpuedealojarelanalizador/traductor(parser)dedatosocódigorelacionadoconlared.
● Vista: la interfazdeusuario,UI,es la fachadade laappcompuestaporelementosgráficostípicosyreusables.
● Controlador:laclasemediadorentrelavistayelmodelo.Enocasionesnoconocelavistaquegestionayaquesepuedecomunicarconunaabstracciónvíaunprotocolo[15].
Figura 4 - MVC iOS
Modelo
Controlador
Vista
menilaappsocial
26
3.1.1PrincipiosdediseñodeinterfacesgráficasdeApple-front-end
Appleestableceorecomiendaunaspautasparaeldiseñodeinterfacesgráficasparaoptimizarlausabilidaddelasmismas[16].Semencionancomoelementosdiferenciadores:laclaridadde loscontenidos, ladiferenciaobtenidagraciasa la fluidezdelmovimientoyel correctotamañodeloscontenidosqueocupantodalapantallasinartificios,asícomolaprofundidadoladiferenciacióndelascapasvisualesylainteracciónnaturalconlasmismas.
● IntegridadEstética:representaelgradoenquelaaparienciaycomportamientodeunaaplicaciónseintegranconsufunción.
● Consistencia:laaplicaciónincorporalasfuncionalidadesycomportamientosquelosusuariosconocenyesperan.
● Manipulación directa: los contenidos de la pantalla permiten a los usuarios elentendimientodesusacciones,asícomoelresultadovisibledelasmismas.
● Retroalimentación(feedback):lasaplicacionesdevuelvenunarespuestaperceptibleacadaaccióndelusuario.
● Metáforas: La gente aprendemás rápidamente cuando los objetos y las accionesvirtualesdeunaaplicaciónsonmetáforasdeexperienciasfamiliares,yaseaenraizadasenelmundorealodigital.
● Controldeusuario:eniOSlosusuariostomandecisionesmientraslasappssololassugieren.
Losprincipaleselementosde la interfaz son construidos gracias al frameworkUIKit. Estoselementossedividenentresramasprincipales:
● Barras:queayudanalusuarioasituarseonavegarporlaaplicación,asícomootrostiposdeacciones.
● Vistas: que contienen los elementos visibles para los usuarios y que permitenactuacionescomodesplazamientos,reorganización,borradoetc.
● Controles: son actuadores y tramitan información, como por ejemplo botonesinterruptoresetc.
3.1.2Patronesdedesarrollodeaplicaciones
Como se ha visto el paradigma MVC es un principio fundamental del desarrollo deaplicacionesiOS.Eldesarrollocomienzaconlasinterfacesdeusuario.
menilaappsocial
27
Las funcionalidades de las aplicaciones son impulsadas poreventos ya que la interacciónentrelosusuariosy laUIesposiblegraciasa laprogramaciónorientadaaeventos(event-drivenprograming).
EnparaleloalacreacióndelaUIsecreaelrestodelaarquitecturausandolasframeworksdeFoundationyCoreDataparalosmodelosdedatosysugestiónparadespuésconstruirlacapadecontrolgraciasalosframeworksdeCocoaTouchconSwiftuObjective-C.
LaarquitectadeiOSestáparticionadaencapastalcomosepuedeverenlasiguientefigura:
Figura 5 - Arquitectura librerías iOS
3.2Back-end-AWS
Acontinuación,seexpondránlosserviciosqueofreceAWSyquesonrelevantesparaesteproyectotalycomosedefinenenladocumentacióndelosmismos:aws.amazon.com/es/.
3.2.1.Servicios
● AWSCognito:esunservicioquepermiteregistraryfacilitarelaccesodelosusuariosaaplicacioneswebymóvilestantodelaformaclásicaconusuarioycontraseñacomoatravésdeproveedoresdeidentidadsocialcomoFacebook,Googleetc.
Cocoa Touch Address Book UI Framework, EventKit UI Framework, GameKit Framework, iAd Framework, MapKit Framework, Message UI Framework, Notification Center Framework, PushKit Framework, Twitter Framework, UIKit Framework
Media
Assets Library Framework, AV Foundation Framework, AVKit Framework,Core Audio, CoreAudioKit Framework, Core Graphics Framework, Core Image Framework, Core Text Framework, Core Video Framework, Game Controller Framework, GLKit Framework, Image I/O Framework, Media Accessibility Framework, Media Player Framework, Metal Framework, OpenAL Framework, OpenGL ES Framework, Photos Framework, Photos UI Framework, Quartz Core Framework, SceneKit Framework, SpriteKit Framework
Core Services Accounts Framework,Address Book Framework, Ad Support Framework, CFNetwork Framework, CloudKit Framework, Core Data Framework, Core Foundation Framework, Core Location Framework, Core Media Framework, Core Motion Framework, Core Telephony Framework, EventKit Framework , Foundation Framework, HealthKit Framework, HomeKit Framework, JavaScript Core Framework, Mobile Core Services Framework, Multipeer, NewsstandKit Framework, PassKit Framework, Quick Look Framework, Safari Services Framework, Social Framework, StoreKit Framework, System Configuration Framework, WebKit Framework
Core OS Accelerate Framework, Core Bluetooth Framework, External Accessory Framework, Generic Security Services Framework, Local Authentication Framework, Network Extension Framework,
menilaappsocial
28
● AWS SNS: este servicio de notificaciones ymensajes de publicación o suscripciónadministradoparacoordinarlaentregadelosmismosaclientesopuntosdeconexiónsuscritos.
● AWS S3: servicio de almacenamiento de objetos con sencilla interfaz deadministraciónweb.
● AWSLambda:AWSLambdaesunserviciodeinformáticasinservidoresqueejecutael código como respuesta a eventos y administra automáticamente los recursosinformáticossubyacentes.
● AWSPrivateVPC:AmazonVirtualPrivateCloud(AmazonVPC)permiteaprovisionarunaseccióndelanubedeAmazonWebServices(AWS)aisladadeformalógica,enlaquepuedelanzarrecursosdeAWSenunaredvirtualquedefina.
● AWSDynamoDB:AmazonDynamoDBesunserviciodebasededatosnorelacionalrápidoyflexibleparatodaslasaplicacionesquerequierenlatenciasconstantesydemerosmilisegundos a cualquier escala. Se trata de una base de datos totalmenteadministradaen lanube,compatibleconmodelosdealmacenamientodedatosdevalordeclaveydedocumentos.
● Elastic Search:AmazonElasticsearch Service facilita la implementación, el uso yelescaladodeElasticsearchparaelanálisisdelogs,labúsquedadetextocompleto,lamonitorización de aplicaciones y muchomás. Amazon Elasticsearch Service es unserviciocompletamenteadministradoqueponeasualcancelasAPIdeusosencilloylas capacidades en tiempo real de Elasticsearch junto con la disponibilidad,escalabilidadyseguridadrequeridasporlascargasdetrabajodeproducción.
● AWSAPI-Gateway:AmazonAPIGatewayesunserviciototalmenteadministradoquefacilita a los desarrolladores la creación, la publicación, el mantenimiento, lamonitorizaciónylaproteccióndeAPIacualquierescala.
menilaappsocial
29
Capítulo4:AnálisisEnestecapítuloseprofundizaenelproblemaconcretoquenecesitamosresolver,sedesglosaenrequisitosysedetallaencasosdeuso.
4.1Problemática
Senecesitadesarrollarunaaplicación intuitivayusable basadaen la geolocalizaciónqueserviráparacrearcampañassocialesporunladoynavegarentrelascampañasexistentes,cercadelusuarioysinperjuiciodesuámbitoorecursosquenecesita,porotrolado.
4.2Requisitosdelsistema
4.2.1NofuncionalesPlataforma:iOSapp
Usuarios:
● Particulares
● Organizacionessinánimodelucro
● Empresas
● Administraciones
Perfilesusuarios:Normal
Tareastécnicas
● Disclaimersdeprivacidadyproteccióndedatos
● Logotipo
● Nombredeproducto
● Landingpage
● UI/UXapp
● Próximaversión-diseñodegamificación
4.2.2Funcionales
HistoriasdeUsuario(US)-Comousuarioquiero...
● Poderhacerloginysignupconcorreoycontraseña
menilaappsocial
30
○ siguiente versión se añadirá la posibilidad de hacer login con Facebook oGoogle
○ seactivarálaseguridadpermitiendoverificacióndecorreoySMS
● Poderverperfilconcontribuciones
○ siguienteversiónseañadirácambionombreusuarioeemail
● Podereliminarcuentausuario
● Poderhacerlogoutdelaapp
● Podervercampañascercanas
○ Por defecto si no hay una posición GPS real se tomará como referencia elcentrodeMadrid
● Poderbuscarcampaña
○ porlocalización
○ textodeladescripción
○ nombre
○ productos
○ servicios
● Podervercampaña(contodoslosdatosrelevantes)
● Podercolaborarenunacampaña
○ convariasaportaciones
○ verelcontactodelacampaña
○ tenerlaposibilidaddeescribirunmensajedecorreoelectrónico
○ siguienteversiónsehabilitaráunchat
● Podercrearcampaña
○ Nombre,descripción(500caracteres),datosdecontacto,ubicación,fechadecaducidad,opcionalmenteenlacewebydatosdecontactoalternativo
○ Añadirbienesyserviciosaunacampaña
○ Elegirfotocampaña(URL)
menilaappsocial
31
4.3Casosdeuso
4.3.1Diagrama
Figura 6 - Diagrama casos de uso meni
menilaappsocial
32
menilaappsocial
33
Capítulo5:Diseño&DesarrolloLa motivación de elegir una aplicación móvil para implementar la solución ya ha sidoargumentada.SepodríadecirqueoptarporlaplataformaiOSsedebearazonespragmáticas.Aunteniendomenosusuariosestossuelengastarmás [17]encomprasyportantoseríanbuenoscandidatosparaunaplataformademicromecenazgoycrowdsourcing.
5.1Arquitecturafront-end
Laarquitecturadelaaplicación,enlapartedefront-end,seguirálospatroneshabitualesdelaplataformaimplementandoelMVC.
Lagestióndeusuarioconlaspantallasdeloginyregistrotendránunainterfazconelback-endatravésdeunasclasesespecíficasdegestióndeserviciosdeAWS.
Lagestióndecampañas,incluidascreaciónybúsqueda,pasaránporunainterfazAPIenlazadaaAWSgraciasenclaudia.js.
Lasdemásvistassongeneradasconinformaciónpreexistente,porejemplo,eldisclaimer,oconinformaciónrecolectadaduranteelusodelaaplicación,lavistadelperfildeusuario.EnlasvisitasnomencionadasseutilizanprincipalmentelibreríaspropiasparagenerarmapaseinteraccionarconclientesdecorreooFacebook/Twitter.
5.2Diseñoarquitecturaback-end
LasdecisionesdediseñosetomanunavezcontempladoslosrequisitosyconfrontadosconlosserviciosdeAWS.ParecequelamejoropciónesusarvariosdelosparadigmasdeCloudyaqueelMBaaSresultainsuficienteparacubrirlasfuncionalidadesrequeridas.
Asítenemoselentorno,clusterizado,delosserviciosdeAmazoncomoPaaS.UsamosAWSCognitocomoproveedordeseguridadparaloginantenuestrosusuariosportantoseusaelparadigma SECaaS. Por último, gracias a su fácil uso, se usa Claudia.js para desplegarfuncioneslambdaparaElasticsearchyAPIconelback-endloquesepuedeconsiderarcomoserverlesscomputing.
menilaappsocial
34
5.2.1Diagrama
Figura 7 - Arquitectura AWS (back-end)
5.2.2Gestióndeservicios
SecreanlassiguientesentidadesatravésdelaconsoladeAWS:
● AWS Cognito User Pool con el nombre de “agora” (sin verificación porcorreo/teléfono)
● AWSCognitoIdentityPoolconeluserpoolanterior
● AWSLambdafunction“agora-presignup”paraconfirmarusuariossinverificación
● AWS Lambda function “agora-postauthorization” para insertar usuariosautomáticamenteenlaBBDD.
● AWSLambdafunction“dynamodb-to-elasticsearch”parainsertarautomáticamenteloscambiosdelatabladecampañasdeDynamoDBaElasticsearch.
● AWSDynamoDBtablallamada“givr-users”paraalmacenarusuario,conelcorreodelusuariocomoclave(hash).
● AWSDynamoDB tabla llamada“givr-campaigns”paraalmacenar campañas, conelusuariocomoclave(hash)yeltimestampcomollavedealcance.
● ElasticsearchServiceclusterllamado“givr”conunaconfiguraciónmínimaeíndexcon“geopoints”
Apartesecreanlassiguientesentidades:
● Lógicaback-endconstruidasobreAWSLambda+APIgatewayusandoClaudiaAPIBuilder.SeimplementanlastípicasoperacionesCRUDparausuariosycampañas.
menilaappsocial
35
● EndpointenClaudi+Lambdaparabuscar,basándoseengeoytexto,enlosdiferentescamposdedatos.
Pendiente:
● ActivarseguridadbasadaenVPCparatodoslosservicios(exceptuandolaAPIGatewaydeCognito)
5.2.3Estructuraymodelosdedatos
Segestionandosmodelosdedatosdiferentes.
Representacióntablas
SedebedetenerencuentaqueestaformaderepresentacióndelosdatosesorientativooesclarecedoryaqueDynamoDBnoesunabasededatosrelacionalportantoestafiguraseríaincorrecta.
Figura 8 - Modelo de datos
Modelodedatosparacampañas
LarepresentaciónjsondelmodelodedatossepuedeobservarenelsiguienteejemploJSON:
[{"image":"http://www.sanignacioalcala.es/wp-content/uploads/2016/12/Camp_kg_litro2.png","created":1497731598872,
menilaappsocial
36
"description":"Esunhechoestablecidohacedemasiadotiempoqueunlectorsedistraeráconelcontenidodeltextodeunsitiomientrasquemirasudiseño.ElpuntodeusarLoremIpsumesquetieneunadistribuciónmásomenosnormaldelasletras,alcontrariodeusartextoscomoporejemplo\"Contenidoaquí,contenidoaquí\".Estostextoshacenparecerlounespañolquesepuedeleer.MuchospaquetesdeautoediciónyeditoresdepáginaswebusanelLoremIpsumcomosutextopordefecto,yalhacerunabúsquedade\"LoremIpsum\"vaadarporresultadomuchossitioswebqueusanestetextosiseencuentranenestadodedesarrollo.Muchasversioneshanevolucionadoatravésdelosaños,algunasvecesporaccidente,otrasvecesapropósito(porejemplo,insertándosehumorycosasporelestilo.","extras":{"phone":"666666666","end":"12/07/2016"},"location":[-3.1,41.77],"title":"Campaña1Kgayuda","items":[{"name":"item1"},{"name":"item2"},{"name":"item3"}],"user":"[email protected]","distance":89172.77420747846}]
La base de datos solo requiere los campos de “título”, “descripción”, “correo usuario”,“localización geográfica”, “lista requisitos campaña”. Posteriormente en el back-end seañadenloscamposde“distancia”y“timestamp”.
Dinámicamentesepuedenañadircamposalatabla.Lalistadecampos“extra”esunejemplo.Aquísevanaañadirloscamposcontacto,fechainicioyfinetc.
Modelodedatosparausuarios
LarepresentaciónjsondelmodelodedatossepuedeobservarenelsiguienteejemploJSON:
{
menilaappsocial
37
"Item":{"given_name":"prueba","user":"[email protected]","cognito:user_status":"CONFIRMED","email":"[email protected]","context":{"awsSdkVersion":"aws-sdk-ios-2.5.8","clientId":"xxxxxxxxxxxxx"},"extra":"admin","email_verified":"[email protected]"}}Durante la creación de usuario solo se requieren los datos de “nombre”, “correo” y“contraseña”.Losdemásdatospresentessonautogeneradosporelback-end.Tambiénenestecasosepuedenañadircamposalatabla.
5.2.4Procedimientos
EsunrequisitoimprescindibledisponerdeunacuentasisedeseanutilizarlosAWS.Unavezcreadaunacuentasuficienteparalevantarlosserviciosdeseadossepasaacrearlosenorden.
AtravésdelaconsoladeAWS-Cognitoseprocedeacreareluserpool“agora”queservirádebaseparacrearunidentitypool.
EnlaconsoladelservicioDynamoDBsecreanlasdostablas,deusuarioycampañas,conloscamposconformesconelmodelorequerido.
SerequierenunospasosextraparaestaversiónqueconstanenlacreacióndedosfuncioneslambdaenlaconsoladeAWS-LambdaManager.EstasseusanparaconfirmarusuariossinverificaciónyparainsertarusuariosautomáticamenteenlaBBDD.
SecreaunclusterElasticsearchServicellamado“givr”parapodergestionaryoptimizarlasbúsquedasgeográficasydetexto.
UnatercerafunciónlambdaseajustaparainsertarautomáticamenteloscambiosdelatabladecampañasdeDynamoDBaElasticsearch.
En este punto se creó una infraestructura para habilitar una API para gestionar lasoperaciones CRUD de usuarios y campañas. En el siguiente apartado se detallarán losprocedimientosseguidos.
menilaappsocial
38
5.2.5Herramientasusadas
Claudia.js es una herramientamuy útil a la hora de crear y desplegar funciones omicroserviciosnode.jssobreAWS.ClaudiaAPIBuilderademásofreceunaseriedefuncionalidadessegúnseapuntaensudocumentación[18]:
● ConfigurarAWSAPIGatewayInterfacesWebparaproyectosLambdafácilmente.
● EnrutadodevariosendpointsalapasarelaAWSAPIaunasolafunciónLambda.
● Manejoderespuestassíncronasopromesasasíncronas.
● ConfiguraciónfácildetiposderespuestaycódigosHTTP.
● Permiteconfigurarlospasosdeconfiguraciónposterioresalainstalación.
Unavezinstaladoelsoftwarede“Claudia”atravésdenode(npminstallclaudia-g)setienenquedefinirlasfuncionesqueselevantarán.EstassepuedendesplegardirectamentedelaCLI,líneadecomandos.
EstructurarepositoriodeClaudia.js├──README.md├──campaign-apis│├──claudia.json│├──elsearch.js│├──index.js│├──package.json│├──policies││├──dynamodb.json││└──elasticsearch.json│└──staticQueries.js├──elastic.config├──lambdas│├──dynamodb-to-elasticsearch││├──index.js││└──package.json│├──postsignup.js│└──pregisnup.js└──user-apis├──claudia.json├──index.js├──package.json└──policies└──dynamodb.json
5.3Diseñofront-end
Lacapadefront-end,representadaporlapartedeUIdelaapp,estádiseñadaparacumplirestrictamenteconlosrequisitosylasrestriccionesdelproyecto.Sehancreadolasvistasque
menilaappsocial
39
guiaránalusuarioyacadaunasehaañadidosucontroladoryenloscasosnecesarios lasclasesmodelo.
Estacapa interaccionacon lacapadeback-enddeAWSatravésdelSDK,enelcasode laautenticacióndeusuarios,ydelaAPIenelcasodelagestiónCRUDdeusuariosycampañas.
5.3.1Vistas
Figura 9 - Vistas meni
Lasvistascreadas,figura8,ysufunciónseenumeraacontinuación:
● Inicial-eslavistaquesiguealapantalladelaunch.SufunciónesredirigiralusuarioalavistadeAcceso(Login)sitienecuentaodeRegistroencasocontrario.
● Login-enestavistaelusuariopuedeintroducirsunombredeusuario(elcorreo)ylacontraseñayentrardirectamentealaaplicación.
● Registro-losusuariosnoregistradoslopuedenhacerenestavista
● Campañas&Menúlateral - lasvistasqueconformanesteconjuntorepresentanlalistadecampañas,geográficamentecercanas,desdelacualsepuedenavegaracadacampañayademássepuederealizarunabúsquedadecampañasporpalabrasclaves.Elmenúlateralesunavistaseparadaquepermitesalirdelaaplicación(comousuario),navegar al Perfil del usuario u obtener información adicional sobre la aplicaciónnavegandoalapantalladeDisclaimer.
menilaappsocial
40
● Campaña- losdetallesrelevantesdecadacampañaselistanaquí.Apartesepuedeapoyarlacampañay/ocompartirlaenredessociales.
● Campaña nueva - Una campaña nueva debe tener como mínimo los datosmencionadosenelapartadodedicadoalmodelo.Losdemásdatossealmacenarán,peronosonobligatorios.
● Localización geográfica - al iniciar sesión el usuario debe escoger una localizacióncercadelacualdeseaobtenerresultadosdecampañas
● Perfil - El usuario puede gestionar su cuenta a través de una vista aparte. Podrácompartirsuopiniónsobre laaplicaciónenredessocialesocambiar la localizacióngeográficadereferenciaparalascampañas.
● Disclaimer - aquí se proporciona información adicional para usuarios, así como laposibilidaddemandaruncorreodirectamentealosadministradoresdelamisma.
5.3.2Temáticaeiconografía
Logo:
Figura 10 - Logo meni
Paletadecolores:
Figura 11 - Paleta colores meni
Fuenteprincipal:
“SignPainter”
5.3.3Controleseinteracción
Loscontrolesylasinteraccionessedetallaránenelpróximoapartado.
menilaappsocial
41
5.4Desarrollodelaaplicación
La parte gráfica, las vistas, ya detallada necesitas, evidentemente, de coordinación paraimplementarlasfuncionalidades.Tambiénsenecesitadelibreríasdetercerosydeconjuntosdefuncionespropiasqueserepitenalolargodelasclases.
ParalagestióndelibreríassehausadoCocoaPods[19].
5.4.1Herramientasylibreríasutilizadas
LibreríasiOS
Sehanusadolassiguientes:
● Foundation
● UIKit
● MessageUI
● Social
● CoreLocation
● MapKit
Libreríasdeterceros
Estánespecificadasenelficheropod,Podfileestán:
source'https://github.com/CocoaPods/Specs.git'platform:ios,'8.0'use_frameworks!target:'givr'dopod'AWSCore'pod'AWSCognito'pod'AWSCognitoIdentityProvider'pod'AWSAPIGateway'pod'Alamofire','~>4.0'pod'AlamofireImage','~>3.1'end
● Alamofire yAlamofireImage son librerías de networking que se usan aquí para lallamadaalaAPI.
● AWSCore, AWSCognito, AWSCognitoIdentityProvider, AWSAPIGateway son laslibreríasmínimasnecesariasparamanejarelSDKdeAWSyconseguir lasfuncionesqueserequieren.
menilaappsocial
42
Otraslibrerías
SWRevealViewController [20]esuna librería escrita enObjective-Cqueusauna subclaseUIViewControllerpararevelaruncontroladordevistalateral(izquierday/oderecha)detrásdeuncontroladorfrontal,inspiradoenlaaplicacióndeFacebook.
NominatimSwift [21] utiliza la API gratuita de datos de ubicación Nominatim deOpenStreetMapconunascoordenadasespecíficasounaconsultadetextolibre(direccionesopuntosdereferencia).
5.4.2Implementacióndevistasycontroladores
Las vistas creadas disponen de sus controladores correspondientes que se enumeran acontinuación:
● Inicial -ademásde la funcionalidadyacomentada,estecontroladorseencargadeavisar al usuario en caso de no existir una conexión a internet (clase NetUtilites).Tambiénredirigealusuarioyalogueadoalapantalladecampañas.
● Login-elcontroladorasociadorealizaúnicamente lafunciónmencionada.UnavezintroducidoslosdatosnecesariosestellamaalaclasequeactúadeinterfazconelSDKdeAWSparaverificarlaexistenciadelusuario,ylaveracidaddelosdatos,yobtenerlasesióndelmismo.
● Registro-losusuariosnoregistrados,unavezintroducidoslosdatossolicitados,sonverificados a través de la SDK. En caso de no existir usuarios con las mismascredencialesseprocedeacompletarelloginyredireccionaralusuarioalapantalladecampañas.
● Campañas&Menúlateral-Lavistaprincipal,laquepresentaellistadodecampañas,está controlada por una clase con varias funcionalidades que no se perciben.Evidentemente controla el flujo de datos entre servidor y cliente, así como lacoordinaciónentrelaclasemodelodecadacampañaylaclasedeceldadecampañaque las representa gráficamente. Existe la funcionalidad de buscar campañas portexto.Enelprimerinicio,oencasodenoexistirunascoordenadasdereferenciaseredirigealusuarioalapantalladeLocalización.ConlosdatosobtenidosseformalapeticiónalaAPIparaobtenerlascampañascercanasalamisma.
○ Elmenúlateraldisponedeuncontroladorsencillo.Lafunciónnopercibidaesladelimpiarlosdatosdelusuarioencasodelogout.
● Campaña -aquí se implementan las funcionesdecompartiren redessocialesydeapoyarlacampañaatravésdeuncorreoelectrónico.
menilaappsocial
43
● Campañanueva-elcontroladordeestavistaverificalaadecuacióndelosdatosquesequierenguardarparadespuésformarunobjetoJSONqueremitiráa laAPIparacrear la nueva campaña. Para ello se sirve de la clase NetUtilities y de la libreríaAlamofire.
● Localizacióngeográfica-parafacilitarlavidaalusuarioseimplementaestavistaquerequiere automatizar labúsquedade localización y la actualizaciónde lamisma, atravésdelocationmanager.SeutilizalaclaseUtilitiesdóndehayimplementadosunosmétodosdelalibreríaNominatimSwiftparageocodificación.
● Perfil-estecontroladorlistaunosdatosdelusuario,obtenidosatravésdesuregistroysuactividad.Tambiéneselencargadodeabriraredessocialesoeliminarelusuario.
● Disclaimer-unsimplecontroladorquesolotienequepresentarunavistadecorreosielusuariolorequiere.
5.4.3Implementacióndeserviciosyutilidades
InterfazAWS
LainterfazdelSDKdeAmazonseiniciaenelAppDelegate.swift,perotambiénnecesitadedosclases:AWSCustomIdentityProvideryAWSOperationManager.Estasclasesrecibenlosdatos de inicio de sesión o de registro de las vistas correspondientes y las utiliza paracomunicarse con los servidores de AWS Cognito. Tienen una serie de claves y datos deidentificaciónguardadasparalaautenticaciónconlosservidores.
Utilidades-clasesestáticas
● VisualUtilities - es una clase que devuelve una alerta simple, un objeto de tipoUIAlertControllerapartirdeunosstringconeltítuloyelmensaje.
● NetUtilities-verificalaconexiónainternet,formalasllamadasalaAPI(URL),descargaimágenesymandalosobjetosJSONconlasnuevascampañas.
● Utilities-esunaclasedepropósitogeneralquetienecomoprincipalfunciónrealizarla geo codificación, así como parseo de ciertos tipos de datos y manejo deUserDefaults.
Otrasclases
● Lasclasesdemodeloconespecialénfasisenelmodelodecampañaqueseresumeaparsear (traducir) a campañas los objetos JSON recibidos, así como realizar laoperacióninversacodificandosucontenidoparaelenvíoenformatoJSON.
● Lasextensionesseutilizanparaampliarlastípicasfuncionalidadesycontenidodelosobjetos.Aquísehaextendido laUIViewpararedondear lasesquinas,UserDefaults
menilaappsocial
44
para gestionar directamente objetos CLLocations, Date para gestionar losmilisegundosdesde1970,lasUIImageViewparaaceptarunURLenelconstructoryporúltimoen la claseString sehanañadido losmétodosparaverificar sino tienecontenido(noqueestévacía)oqueelcontenidosecorrespondeaunadireccióndecorreoelectrónicocorrectamenteformada.
ProcedimientosClaudia.js
El siguiente código conformael fichero elastic.config quees usadoporClaudia.js paracrearelgeo-index.
https://search-givr-codehash.eu-west-1.es.amazonaws.com/givr
{ "mappings":{ "campaigns":{ "properties":{ "location":{ "type":"geo_point" } } } } }Unejemplodequery,consultaalaBBDD,seformadelasiguientemanera:
https://search-givr-hash.eu-west-1.es.amazonaws.com/givrquery{"query":{"match_all":{}},"sort":[{"_geo_distance":{"location":{"lat":41.08,"lon":-3},"order":"asc","unit":"m","mode":"min"},"created":{"order":"desc","mode":"min"}}
menilaappsocial
45
]}Elsiguienteejemploesunamultibúsqueda:
{"query":{"multi_match":{"query":"CruzRoja","fields":["title","*name","description","items"]}},"sort":[{"_geo_distance":{"location":{"lat":40.438253,"lon":-3.6995181},"order":"asc","unit":"m","mode":"min"},"created":{"order":"desc","mode":"min"}}]}
menilaappsocial
46
menilaappsocial
47
Capítulo6:EvaluaciónyPruebasAppleproporcionaunentornodepruebas llamadoXCTest [22] que fue introducidoen laversión5deXcode.Enlaversión6deXcodeseañadelaposibilidadderealizarpruebasderendimientoparamediryrealizarunseguimientodeloscambios.LaspruebasdeUIseañadenenlaversión7deXcode.SisedisponedeunservidorXcodesepuedenrealizarpruebasdeIntegraciónContinua.
6.1Pruebasrequisitoseinterfacesgráficas
Las siguientes pruebas se han realizado de forma manual en colaboración con losstakeholdersdelproyecto:
● UsarappendispositivoiPhone7coniOSversión10+.● Realizarunregistro.● Realizarunlogin.● Realizardesconexiónologoutdelusuario.● Apagaryencenderlaaplicaciónparaelloginautomáticoylaausenciadelmismo.● Navegarporlalistadecampañas.● Buscarcampaña.● Abrircampaña.● Crearnuevacampañayverificarsiesañadidaalalista.● Cambiarposicióncentrodelascampañas.
6.2Evaluacióndelaaplicación
UsandolasherramientasdeevaluacióndeXcodeentiempodeejecuciónobservamoselusodelosrecursosdelaaplicación.ObservamosusodeCPU,Memoria(RAM),impactoenergético,usodiscoduroyred:
Figura 12 - Uso CPU
menilaappsocial
48
Figura 13 - Uso Memoria
Figura 14 - Uso Energía
Figura 15 - Uso HHDD
menilaappsocial
49
Figura 16 - Uso red
6.3Pruebasback-end
Si se desea probar el funcionamiento de una API, y los servicios subyacentes, se han creado una serie de peticiones http con representación en cada operación CRUD tanto para usuarios como para campañas. Estas pruebas se guardan y se ejecutan en Postman [23], una aplicación de Google Chrome, que es una de las principales herramientas para los desarrolladores de APIs.
Figura 17 - Meni Postman API calls
menilaappsocial
50
"meni-back-end-API"
Llamada Tipo APIURL&contenidoCampaign/Get
GET https://oaghht9zu4.execute-api.eu-west-1.amazonaws.com/latest/[email protected]&created=1490306462674
Campaign/Create
POST https://oaghht9zu4.execute-api.eu-west-1.amazonaws.com/latest/campaign
"rawModeData":"{\n\"location\":[-3,41],\n\"user\":\"[email protected]\",\n\"title\":\"TestCampaign\",\n\"description\":\"Thisisretroagainatestcampaign\",\n\"items\":[{\n\"name\":\"item1\"\n},\n{\n\"name\":\"Kinkyitem2\"\n}]\n}"
Campaign/Update
PUT https://oaghht9zu4.execute-api.eu-west-1.amazonaws.com/latest/campaign?created=1490306462674&[email protected]"rawModeData":"{\n\"items\":[\n{\n\"name\":\"test3\"\n}\n]\n}"
Campaign/NearGeo
GET https://oaghht9zu4.execute-api.eu-west-1.amazonaws.com/latest/campaign/near?lon=-3.4&lat=41"queryParams":[{"key":"lon","value":"-3.4","equals":true,"description":"","enabled":true}, {"key":"lat","value":"41","equals":true,"description":"","enabled":true}
Campaign/Find
GET https://oaghht9zu4.execute-api.eu-west-1.amazonaws.com/latest/campaign/find?lon=-3.4&lat=41&query=Madrid
Campaign/Status
GET https://oaghht9zu4.execute-api.eu-west-1.amazonaws.com/latest/campaign/status
User/Delete DELETE https://z2wkqb7ah0.execute-api.eu-west-1.amazonaws.com/latest/[email protected]
Usercopy GET https://z2wkqb7ah0.execute-api.eu-west-1.amazonaws.com/latest/[email protected]
User/Find GET https://z2wkqb7ah0.execute-api.eu-west-1.amazonaws.com/latest/user/[email protected]
User GET https://z2wkqb7ah0.execute-api.eu-west-1.amazonaws.com/latest/[email protected]
User/Update PUT https://z2wkqb7ah0.execute-api.eu-west-1.amazonaws.com/latest/[email protected]"rawModeData":"{\n\"admin\":\"yes\"\n}"
User/Status GET https://z2wkqb7ah0.execute-api.eu-west-1.amazonaws.com/latest/user/statusTabla 3 - Llamadas API (Postman)
6.4Resumen
Lamejorformadeprobarunaaplicación,ygeneralmentecualquiersoftwareendesarrollo,escreandountestsuiteounaseriedetestquetienenquecubrirtantofuncionalidadcomocomportamientodecomponentesydelsistema.UnavezcreadoestebancodepruebassetienequeponerenmarchaunsistemadepruebadeCI,esdecirdeintegracióncontinua.Perotodoestomereceunestudioaparte.
menilaappsocial
51
PostmanrevelóserunaherramientaútiltantoparapruebasdeconstruccióndeAPIscomoparapruebasdeappclienteenlasfuncionalidadesdóndeéstautilizalaAPI.
menilaappsocial
52
menilaappsocial
53
Capítulo7:Conclusiones
7.1Trabajo
ExisteunatendenciaevidenteapotenciarlasappsdelosmóvilesconMBaaSaprovechandolaexistenciayusoextendidodeconexionesdedatosdeestosdispositivos.AprovechartodalapotenciaqueofreceunDataCentermientrasqueenlaappsoloseprocesalainteraccióndelusuarioabreelcaminoaunainfinidaddeposibilidades.Esporestoquemirandoal futurosedecidiómover la lógicadelback-endenAWS.Estostienenlacualidaddeserauto-escalablesloqueposibilitaquecualquierappquelasusepuedadisfrutardeestacaracterística.Noeslomismotenerquelidiarcon100campañasy10000usuarios,porejemplo,aunnivel reducido, local,que tenerquecubrirunáreageográficopropiodeunpaísconmillonesdeusuarios.
Eldesarrollodeunaaplicaciónpotenciaelladopragmáticodecualquierdesarrolladoryestano es una excepción. Existen librerías que solucionan problemas complejos y otras paraproblemassimples.Enocasionessetienequedecidirsiesmásfácilimplementarunapequeñautilidadoserecurreaunalibrería.Porejemplo,crearunaextensiónparaquelosobjetosquemanejanlasimágenes(UIImageViewetc.)ousarAlamofireImage.Siempresehaelegidoelcaminomásestableyelquemenoscargaríalaapp,paranoafectarelrendimiento.
7.2Próximospasos
Paralassiguientesversionessequiereincorporarmásfuncionalidadesquepuedenaportarvaloralusuario.Acontinuación,selistanlasmásimportantes:
● Crowdfunding-Appleponeadisposicióndelasorganizacionesnon-profitsuserviciodeApplePaypararecibirdonacionesdemecenas.
● ServicioWebMENI.EstaplataformawebdecarácterEnterpriseseráofrecidajuntoserviciosdepago.Permitirálacreaciónyseguimientodecampañassociales,asícomolaobtencióndeunasestadísticasdeinteraccióndelosusuariosconlasmismas.
menilaappsocial
54
7.3Conclusiónfinal
Pasar por todas las fases de un proyecto software, desde los requisitos al próximolanzamiento,deformaordenadaesperabaquefueratediosoperomuygratificante.Asífuecomotodaactividadde“materializacióndeideas”.SobrelaplataformahayquedecirquetantoXcodecomoSwifthanmejoradolaexperienciaquesetieneduranteeldesarrollo.TambiénestánmuybienconstruidasymuycompletaslasnecesariaslibreríasqueexistenparaiOS(maps,social,uikitetc.).Tampocosepuedeomitirlagrancomunidadqueexisteentornoaestaplataforma.Un impedimento importante, para desarrolladores, lo sigue constituyendo el tema de laordenación gráfica, especialmente el Auto Layout. Se necesitan muchas iteraciones depruebayerrorparaafinarlainterfaz.Latecnologíaestápresenteentodoslosaspectosdenuestravida.Bastaconpensar“outofthebox”demaneranoconvencionalparaextender,mejorarylomásimportanteaprovecharlosrecursosqueestaofreceparamejoraresasfacetasdelasociedadquelorequieran.Estaappesunpasoenesadirección.
menilaappsocial
55
Bibliografía [1] eliberico.com, «eliberico.com,» 2017. [En línea]. Available:
http://www.eliberico.com/1-de-cada-5-ongs-gasta-menos-del-50-en-beneficiencia.html. [Último acceso: junio 2017].
[2] libremercado.com, «Sólo la mitad de los ingresos de Oxfam se destina a proyectos de caridad,» 21 enero 2015. [En línea]. Available: http://www.libremercado.com/2015-01-21/solo-la-mitad-de-los-ingresos-de-oxfam-se-destina-a-proyectos-de-caridad-1276538487/. [Último acceso: diciembre 2016].
[3] comunicacionsellamaeljuego.com, «El escándalo de las ONG que gastan tu dinero en marketing,» 25 noviembre 2015. [En línea]. Available: http://comunicacionsellamaeljuego.com/el-escandalo-de-las-ong-que-gastan-tu-dinero-en-marketing/. [Último acceso: mayo 2017].
[4] Junta de Andalucía - Dirección General de Voluntariado y Participación, «www.juntadeandalucia.es,» 2014. [En línea]. Available: http://www.juntadeandalucia.es/export/drupaljda/informe_evaluaci%C3%B3n_III_%20plan_andaluz_voluntariad%20o_a%C3%B1o_2014.pdf . [Último acceso: Diciembre 2016].
[5] «hackforgood,» marzo 2016. [En línea]. Available: https://hackforgood.net/. [6] K. PUERTO, «www.xataka.com,» 2015. [En línea]. Available:
https://www.xataka.com/internet-of-things/michigan-micro-mote-m-3-todo-un-ordenador-en-el-tamano-de-un-grano-de-arroz. [Último acceso: junio 2017].
[7] Wikipedia, «wikipedia.org,» 2017. [En línea]. Available: https://es.wikipedia.org/wiki/Ingenier%C3%ADa_de_software. [Último acceso: 2017].
[8] agilemanifesto.org, «Manifesto for Agile Software Development,» 2001. [En línea]. Available: http://agilemanifesto.org/. [Último acceso: 2017].
[9] E. BROWN, «10 Best Free Mobile Application Development Frameworks That Support Android,» 28 enero 2016. [En línea]. Available: https://www.linux.com/news/10-best-free-mobile-application-development-frameworks-support-android. [Último acceso: junio 2017].
[10] cocos2d-x, «www.cocos2d-x.org,» 2017. [En línea]. Available: www.cocos2d-x.org. [Último acceso: junio 2017].
[11] Wikipedia, «Objective-c,» 2017. [En línea]. Available: Retrieved from wikipedia: https://es.wikipedia.org/wiki/Objective-C. [Último acceso: Junio 2017].
[12] Apple, «Swift Programming Language,» 2016. [En línea]. Available: https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/. [Último acceso: Diciembre 2016].
[13] Wikipedia, «Cloud computing,» 2017. [En línea]. Available: https://en.wikipedia.org/wiki/Cloud_computing. [Último acceso: junio 2017].
[14] Claudia.js, «claudia,» 2016. [En línea]. Available: https://github.com. (2017). Retrieved from https://github.com/claudiajs/claudia. [Último acceso: Noviembre 2016].
menilaappsocial
56
[15] Apple, «Protocols,» 2017. [En línea]. Available: https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Protocols.html. [Último acceso: 2017].
[16] Apple, «Design Principles,» 2017. [En línea]. Available: https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/ . [Último acceso: Junio 2017].
[17] Que.es, «Los usuarios de iOS gastan un 16% más que los de Android en compras a través de móvil,» 16 febrero 2017. [En línea]. Available: http://www.que.es/ultimas-noticias/sociedad/201702161123-usuarios-gastan-android-compras-traves.html. [Último acceso: 2017].
[18] Claudia.js, «Claudia API Builder,» 2017. [En línea]. Available: https://github.com. (2017). Retrieved from github: https://github.com/claudiajs/claudia-api-builder. [Último acceso: Junio 2017].
[19] cocoapods.org, «CocoaPods,» 2015. [En línea]. Available: https://github.com. (2017). Retrieved from github: https://github.com/CocoaPods/CocoaPods. [Último acceso: diciembre 2016].
[20] J. Lluch, «SWRevealViewController,» 2013. [En línea]. Available: https://github.com/John-Lluch/SWRevealViewController. [Último acceso: Diciembre 2016].
[21] J. Moser, «NominatimSwift,» 2016. [En línea]. Available: https://github.com/caloon/NominatimSwift/blob/master/README.md. [Último acceso: Junio 2017].
[22] Apple, «About Testing with Xcode,» 24 enero 2017. [En línea]. Available: https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/testing_with_xcode/chapters/01-introduction.html. [Último acceso: junio 2017].
[23] postman, «postman,» 2017. [En línea]. Available: https://www.getpostman.com/. [Último acceso: 2017].
menilaappsocial
57
Anexos
Anexos1.Pantallazos
Figura 18 - Launch screen
Figura 19 - Pantalla inicio
menilaappsocial
58
Figura 20 – Vista acceder con usuario y contraseña
Figura 21 – Vista registrarse como nuevo usuario
menilaappsocial
59
Figura 22 – Vista lista campañas
Figura 23 – Vista crear nueva campaña
menilaappsocial
60
Figura 24 – Vista menú lateral
Figura 25 – Vista mapa
menilaappsocial
61
Figura 26 – Vista campaña
Figura 27 – Vista perfil usuario
menilaappsocial
62
Figura 28 – Vista Disclaimer
Figura 29 – Vista oculta - Invictus
