Equa ion Chap e 1 Sec ion 1
T abajo de Fin de G ado
G ado en Ingenie ía de las Tecnologías de
Telecomunicación
Aplicación mó il pa a la ges ión de lis as de
eje cicios de en enamien o en Reac Na i e
Dp o. de Ingenie ía Telemá ica
Escuela Técnica Supe io de Ingenie ía
Uni e sidad de Se illa
Au o : Ma ía de los Reyes Machuca Rome o
Tu o : Ma ía Te esa A iza Gómez
aa
Se illa, 2022
ii
iii
T abajo Fin de G ado
G ado en Ingenie ía de las Tecnologías de Telecomunicación
Aplicación mó il pa a la ges ión de lis as de
eje cicios de en enamien o en Reac Na i e
Au o :
Ma ía de los Reyes Machuca Rome o
Tu o :
Ma ía Te esa A iza Gómez
P o eso a i ula
Dp o. de Ingenie ía Telemá ica
Escuela Técnica Supe io de Ingenie ía
Uni e sidad de Se illa
Se illa, 2022
i
T abajo de Fin de G ado: Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en
Reac Na i e
Au o :
Ma ía de los Reyes Machuca Rome o
Tu o :
Ma ía Te esa A iza Gómez
El ibunal nomb ado pa a juzga el P oyec o a iba indicado, compues o po los siguien es miemb os:
P esiden e:
Vocales:
Sec e a io:
Acue dan o o ga le la cali icación de:
Se illa, 2022
El Sec e a io del T ibunal

i
ii
A mi amilia
A mis amigos
A mis maes os
iii
ix
Ag adecimien os
Me gus a ía ag adece a las pe sonas que me han apoyado du an e es os meses an di íciles y a la ez an
aliosos en los que he es ado elabo ando es e p oyec o.
En p ime luga , a los docen es cuya enseñanza inspi a y mo i a a los alumnos a ap ende sob e su asigna u a.
Especialmen e ag adece a Te esa, po habe me dado las pau as necesa ias pa a lle a a cabo es e p oyec o y
po guia me en el p oceso.
En segundo luga , a mis amigos y compañe os, que me han ayudado du an e la e apa uni e si a ia y que han
hecho que es a expe iencia sea inol idable. También quie o ag adece a mi pa eja, po p es a me siemp e odo
su apoyo y po apo a me ideas pa a el p oyec o.
En e ce luga , a mi amilia, que siemp e me le an an los ánimos y me acompañan en odos los momen os de
la ida, y sin los cuales no hab ía enido la opo unidad de es udia es a ca e a. Me gus a ía des aca el
es ue zo de mis pad es, que se han des i ido po o o ga un u u o a mis he manos y a mí.
En úl imo luga , quie o dedica es e p oyec o a unas pe sonas muy impo an es pa a mí, mis abuelos y mi
mad e. Me gus a ía que pudie an es a aquí pa a p esencia es e momen o y ol e a sen i su apoyo
incondicional. G acias a ellos, en especial a mi mad e, me he con e ido en la pe sona que soy y espe o que se
sien an muy o gullosos de mí.
Ma ía de los Reyes Machuca Rome o
Se illa, 2022
x i
A.2 Despliegue del p oyec o con Gi Hub 119
Anexo B: Código de las unciones pa a en ia una lis a 122
Anexo C: Código de las unciones pa a ealiza un en enamien o de una lis a 126
Re e encias 143

x ii
ÍNDICE DE TABLAS
Tabla 1. CU-01: Regis a se con nomb e y co eo elec ónico 51
Tabla 2. CU-02: C ea un elemen o nue o 53
Tabla 3. CU-03: Modi ica un elemen o exis en e 55
Tabla 4. CU-04: Ve lis a de elemen os 56
Tabla 5. CU-05: Realiza en enamien o de una lis a 56
Tabla 6. CU-06: En ia una lis a po co eo elec ónico o Blue oo h 57
x iii
xix
ÍNDICE DE FIGURAS
Ilus ación 1 - E olución del eje cicio ísico po año, edad, sexo y ni el educa i o (2010-2020). Minis e io de
Cul u a y Depo e 23
Ilus ación 2 - Po cen aje de población seden a ia en España (2020). INE 24
Ilus ación 3 - A qui ec u a de la aplicación 25
Ilus ación 4 - Logo de Ja aSc ip 27
Ilus ación 5 - De inición de una unción en Ja aSc ip 28
Ilus ación 6 - Función se Timeou 28
Ilus ación 7 - Uso de la unción se In e al de En enamien o.js 29
Ilus ación 8 - C eación y uso del obje o P omise 29
Ilus ación 9 - Función u ilizando async/awai 30
Ilus ación 10 - Logo de Reac Na i e 30
Ilus ación 11 - G á ico de la e olución de Reac Na i e con espec o a And oid e iOS (2016-2018) 31
Ilus ación 12 - Componen e Video de Reac Na i e 31
Ilus ación 13 - Componen es de clase y de unción 32
Ilus ación 14 - Ejemplo de useE ec 33
Ilus ación 15 - useNa iga ion y useFocusE ec en Lis a.js 34
Ilus ación 16 - Uso de AsyncS o age en AllLis s.js 35
Ilus ación 17 - Logo de Expo 35
Ilus ación 18 - Expo De elopmen Se e 36
Ilus ación 19 - Logo de JSON 37
Ilus ación 20 - Con e sión JSON a obje o Ja aSc ip 37
Ilus ación 21 - Lis a de eje cicios en o ma o JSON 38
Ilus ación 22 - Logo de Visual S udio Code 40
Ilus ación 23 - In e az de usua io de Visual S udio Code 41
Ilus ación 24 - Logo de Expo Go 41
Ilus ación 25 - Funcionamien o de Expo Go 42
Ilus ación 26 - In e az de usua io de Expo Go 43
Ilus ación 27 - Logo de Gi 43
Ilus ación 28 - Logo de Gi Hub Desk op 44
Ilus ación 29 - In e az g á ica de Gi Hub Desk op 44
Ilus ación 30 - Logo de Vyso 45
Ilus ación 31 - In e az de usua io de Vyso 45
Ilus ación 32 - Logo de Diag ams.ne 46
xx
Ilus ación 33 - Recu sos y plan illas de Diag ams.ne 46
Ilus ación 34 - Página de Diag ams.ne 47
Ilus ación 35 - Logo de Visual Pa adigm 47
Ilus ación 36 - In e az de usua io de Visual Pa adigm 48
Ilus ación 37 - Logo de Pixabay 48
Ilus ación 38 - Logo de Pexels 49
Ilus ación 39 - Casos de uso pa a la au en icación de un usua io 51
Ilus ación 40 - Diag ama de casos de uso pa a la c eación de un elemen o 52
Ilus ación 41 - Diag ama de casos de uso pa a modi ica un elemen o 54
Ilus ación 42 - Diag ama de casos de uso pa a ealiza ope aciones con una lis a 55
Ilus ación 43 - Diag ama de secuencia pa a el egis o e inicio de sesión 58
Ilus ación 44 - Diag ama de secuencia pa a c ea una lis a 59
Ilus ación 45 - Diag ama de secuencia pa a ealiza un en enamien o 61
Ilus ación 46 - Diag ama de secuencia pa a en ia una lis a po co eo elec ónico 62
Ilus ación 47 - Diag ama de secuencia pa a impo a una lis a 63
Ilus ación 48 - Modelo de da os de la aplicación 64
Ilus ación 49 - Pan alla de egis o e inicio de sesión 66
Ilus ación 50 - Ejemplo de nomb e y co eo elec ónico del usua io 67
Ilus ación 51 - Pan alla de modo de isualización 68
Ilus ación 52 - Pan alla de lis a de lis as 69
Ilus ación 53 - Menú de la pan alla de lis as de lis as 70
Ilus ación 54 - Ejemplo de ondo de pan alla pe sonalizado 71
Ilus ación 55 - Opción elimina lis as 71
Ilus ación 56 - Opción duplica lis a 72
Ilus ación 57 - Ejemplo de duplica lis a 73
Ilus ación 58 - Inse a una lis a exis en e 74
Ilus ación 59 - Ejemplo de ale a de C ea lis a 75
Ilus ación 60 - Pan alla de nue a lis a local 76
Ilus ación 61 - Ale a pa a selecciona una imagen 77
Ilus ación 62 - Imágenes del almacenamien o in e no 78
Ilus ación 63 - Ven ana de iconos de la aplicación 78
Ilus ación 64 - Ejemplo de añadi eje cicio con ídeo local 79
Ilus ación 65 - Pan alla de nue a lis a 80
Ilus ación 66 - Pan alla de lis a de eje cicios del modo En enamien o 81
Ilus ación 67 - Edi a í ulo de una lis a 82
Ilus ación 68 - Menú de la lis a de eje cicios modo En enamien o 83
Ilus ación 69 - Ejemplo de ma ca lis a como ealizada 83
Ilus ación 70 - Ven ana de añadi eco da o io 84
Ilus ación 71 - Ejemplo de calenda io pa a añadi eco da o io 85
xxi
Ilus ación 72 - Ejemplo de ho a pa a añadi eco da o io 85
Ilus ación 73 - Ejemplo de no i icación de eco da o io de una lis a 86
Ilus ación 74 - Ejemplo de ondo pe sonalizado pa a una lis a 87
Ilus ación 75 - Ejemplo de ale a pa a elimina una lis a 88
Ilus ación 76 - Menú de opciones pa a en ia una lis a 89
Ilus ación 77 - Ejemplo de en ío de una lis a po Gmail 90
Ilus ación 78 - Ejemplo de en ío de una lis a po Blue oo h 91
Ilus ación 79 - Menú desplegable de un eje cicio 92
Ilus ación 80 - Ven ana pa a añadi un emo icono a un eje cicio 93
Ilus ación 81 - Ejemplo de eje cicio ealizado con emo icono 94
Ilus ación 82 - Ejemplo de añadi o o a un eje cicio 95
Ilus ación 83 - Ven ana de añadi o o a un eje cicio 96
Ilus ación 84 - Ejemplo de o o en un eje cicio 96
Ilus ación 85 - Pan alla de en enamien o de una lis a 97
Ilus ación 86 - Ejemplo de en enamien o pulsando comenza 98
Ilus ación 87 - Ejemplo de his o ial de una lis a 99
Ilus ación 88 - Ejemplo de un his o ial de en enamien o 100
Ilus ación 89 - Ejemplo de his o ial acío de una lis a 101
Ilus ación 90 - Ejemplo de pan alla lis a en el modo Con igu ación 102
Ilus ación 91 - Ejemplo de añadi un eje cicio local 103
Ilus ación 92 - Ejemplo de añadi un eje cicio de YouTube 103
Ilus ación 93 - Ejemplo de elimina un eje cicio de la lis a 104
Ilus ación 94 - Ven ana pa a modi ica el co eo elec ónico de la lis a 105
Ilus ación 95 - Ale a pa a sali de la aplicación 106
Ilus ación 96 - Modi icación del a chi o app.json pa a gene a el .APK 108
Ilus ación 97 - Comando pa a gene a el .APK 108
Ilus ación 98 - Ins alación de la aplicación en un disposi i o And oid 109
Ilus ación 99 - Ac ualización de Expo SDK pa a compa ibilidad con Expo Go 109
Ilus ación 100 - Inicio del se ido de desa ollo de Expo y gene ación de código QR pa a Expo Go 110
Ilus ación 101 - Pan alla de inicia sesión en iOS 111
Ilus ación 102 - Pan alla de lis a de lis as en iOS 111
Ilus ación 103 - C eación de una lis a nue a en iOS 111
Ilus ación 104 - Pan alla En enamien o en iOS 111
Ilus ación 105 - Ejemplo de selecciona echa pa a un eco da o io en iOS 112
Ilus ación 106 - Pan alla Lis a con no i icación en iOS 112
Ilus ación 107 - Desca ga ins alado de Node.js pa a Windows 115
Ilus ación 108 - Ejecu a ins alado de Node.js 116
Ilus ación 109 - Comp oba e sión de Node.js y npm 116
Ilus ación 110 - Desca ga a chi o de ins alación de Visual S udio Code pa a Windows 117

xxii
Ilus ación 111 - Ins ala Visual S udio Code 117
Ilus ación 112 - Comp oba e sión de Visual S udio Code 118
Ilus ación 113 - Ins alación de Expo CLI 118
Ilus ación 114 - C eación de un p oyec o Reac Na i e en Ja aSc ip u ilizando Expo CLI 118
Ilus ación 115 - Inicialización de la aplicación con npm 119
Ilus ación 116 - Página de desca ga de Gi Hub Desk op 119
Ilus ación 117 - Accede a una cuen a de Gi Hub con Gi Hub Desk op 120
Ilus ación 118 - Clona eposi o io con Gi Hub Desk op 121
23
1 INTRODUCCIÓN
El ené ico i mo de ida jun o con el a ance en las ecnologías ha p o ocado un aumen o en el uso de los
elé onos in eligen es pa a ealiza odo ipo de ac i idades. Desde hace unos años, se ha podido obse a
un cambio en la o ma de elaciona nos, de abaja y de ges iona dis in os aspec os de nues a ida g acias
a la llegada de es os disposi i os y a la c eación de aplicaciones mó iles. Además, muchas de es as
aplicaciones o apps se pueden u iliza ambién en o as pla a o mas, como ele iso es “Sma ” con
conexión a in e ne o able as, con el in de aba ca a ios ipos de ámbi os y usua ios. Es o es posible
g acias a en o nos que pe mi en desa olla aplicaciones mul ipla a o ma pa a dis in os sis emas ope a i os.
1.1 Mo i ación
La ac i idad ísica ha ido inc emen ando en la úl ima década según la encues a de hábi os depo i os en
España [1] ealizada po el Minis e io de Cul u a y Depo e. En la Ilus ación 1 se mues a la e olución del
eje cicio ísico p ac icado semanalmen e po homb es y muje es a pa i de los 15 años.
Ilus ación 1 – E olución del eje cicio ísico po año, edad, sexo y ni el educa i o (2010-2020).
Minis e io de Cul u a y Depo e
Se puede obse a un aumen o conside able en la p ác ica depo i a en el úl imo año. Sin emba go, según
la Encues a Eu opea de Salud en España del Ins i u o Nacional de Es adís ica [2], sigue habiendo un
In oducción
24
24
ele ado po cen aje de seden a ismo en la población. En la Ilus ación 2 se puede ap ecia que el ni el de
seden a ismo es simila en homb es y muje es.
Ilus ación 2 – Po cen aje de población seden a ia en España (2020). INE
Al compa a la Ilus ación 1 y 2 se puede conclui que, aunque más de la mi ad de la población ealiza
depo e cada semana, hay un no able g ado de seden a ismo que, en pa e, se debe al pe iodo de pandemia
de Co id-19, en el cual aumen ó la inac i idad ísica debido al cese de ac i idades depo i as en el ex e io .
O a de las azones po las que hay una impo an e al a de eje cicio es la escasez de iempo y el
desconocimien o a la ho a de ealiza lo. La mayo ía de los depo es que se p ac ican necesi an de unas
pau as y, con el i mo de ida que hay ac ualmen e, es di ícil dedica les iempo.
Se plan ea una idea en es e con ex o con el obje i o de aumen a y p omo e el hábi o de eje cicio ísico,
bajo la supe isión de un especialis a en ac i idad ísica. El usua io pod á ealiza eje cicio desde casa
eniendo en cuen a sus indicaciones y lle a un seguimien o que le ga an ice unos esul ados óp imos sin
in e i más iempo del necesa io. También pod á c ea sus p opios en enamien os y ma ca sus p opios
iempos.
1.2 Obje i os
Du an e el desa ollo del p oyec o, los obje i os iniciales se han ido a iando y modi icando, ya que
algunos esul a on no se muy con enien es o e an inalcanzables.
Los obje i os se basan p incipalmen e en explo a las ecnologías y uncionalidades que o ece Reac
Na i e pa a desa olla una aplicación mó il que uncione de o ma local, sin se ido , y son los siguien es:
• Gene a un código único en el lenguaje Ja aSc ip que pe mi a usa la aplicación en And oid y
en iOS.
• Comunicación en e Usua io y Especialis a median e co eo elec ónico y Blue oo h.
• Almacena los da os del usua io en una base de da os local.
• Rep oducción de lis as de en enamien o con ídeos de YouTube y ídeos del almacenamien o
local.
25
25
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
1.3 Desc ipción de la solución
En is a de lo an e io , se p opone una aplicación mó il pa a ealiza lis as de en enamien os pa a la
p esc ipción de eje cicio ísico, o ien ada a usua ios y especialis as. Es a aplicación, denominada My
GymLis , iene como unción p incipal p opo ciona un se icio pe sonalizado pa a cada usua io que
maximice su ni el de ac i idad ísica. Pa a ello, se ealiza á un seguimien o pe iódico de su endimien o y
así log a sus obje i os ísicos y, en consecuencia, un es ilo de ida más saludable. En la Ilus ación 3 se
mues a la a qui ec u a de la aplicación:
Ilus ación 3 – A qui ec u a de la aplicación
En la a qui ec u a se puede obse a que la uncionalidad y la comunicación en e los usua ios se ealiza sin
Tecnologías u ilizadas
32
32
componen DidUpda e() y componen WillUnmoun (). Es os se u ilizan pa a man ene o ac ualiza un
es ado. El es ado es un obje o que con iene un pa cla e- alo , de e mina cómo se compo an los
componen es y pe mi e que es os sean dinámicos e in e ac i os.
En cambio, los componen es uncionales es án o mados po una unción que ob iene las p opiedades y
de uel e un JSX. No ienen mé odos pa a maneja el ciclo de ida. Exis en dos ipos de componen es
uncionales: componen es “S a eless” o sin es ado y “Hooks”. Los Hooks son los únicos que pueden
ene un es ado.
Hay una cla a di e encia en e ambos componen es [4] que se mues a en la Ilus ación 13 a
con inuación:
Ilus ación 13 – Componen es de clase y de unción
En es e ejemplo se implemen a un con ado que se inc emen a en una unidad cada ez que se pulsa un
bo ón. En el componen e de clase de la de echa se u ilizan los mé odos mencionados an e io men e pa a
maneja su ciclo de ida y ac ualiza el es ado del con ado . Con el mé odo handleInc emen () se
inc emen a el con ado . Sin emba go, en el componen e uncional de la izquie da se u iliza el Hook de
es ado useS a e pa a c ea la a iable coun que gua da el es ado del con ado con se Coun . Se puede
obse a que es una mane a más sencilla, e ec i a y ápida de implemen a uncionalidades. Po es a
azón se han u ilizado componen es uncionales (Hooks) pa a desa olla la app.
2.2.3 Hooks
Los Hooks [12] que se han u ilizado en es e p oyec o son: useS a e, useE ec , useRe , useCallback,
useNa iga ion y useFocusE ec .
2.2.3.1 Desc ipción gene al de los Hooks
useE ec ealiza la misma unción que componen DidMoun (), componen DidUpda e() y
componen WillUnmoun (), pe o uni icado en una sola API. Reac ejecu a es a unción después de cada
ende izado. Si en el ejemplo de la Ilus ación 14 se añade es e Hook en el componen e uncional [5], se
le es á indicando a Reac que debe ejecu a useE ec después de pulsa el bo ón. El esul ado se ía como

33
33
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
el de la Ilus ación 14 a con inuación:
Ilus ación 14 – ejemplo de useE ec
useRe hace una e e encia al DOM di ec amen e en el componen e uncional. De uel e un obje o de
ipo e e encia que iene una p opiedad llamada “cu en ” que con iene un alo mu able. Es e alo
pe sis e en e ende izados y, si es ac ualizado, no causa un nue o ende izado. Se puede u iliza pa a
gua da la e e encia de un componen e “Video”.
useCallback de uel e una e sión memo izada de una llamada o “callback” que cambia solo cuando una
de sus dependencias ha cambiado. De es a o ma solo se ejecu a cuando sea necesa io, pe mi iendo un
mayo endimien o de la app.
useNa iga ion [13] y useFocusE ec [14] pe enecen a una lib e ía llamada Reac Na iga ion que
pe mi e implemen a uncionalidades pa a la na egación en e pan allas de la app. useNa iga ion
concede acceso a un obje o de ipo na egación o “na iga ion” y de uel e la p opiedad “na iga ion” de la
pan alla. useFocusE ec pe mi e que se ealicen a eas cuando una pan alla es á en ocada o “ ocused”.
Su e ec o es igual al de useE ec pe o solo unciona cuando la pan alla es á en ocada. En la Ilus ación
15 se mues a una o ma de usa es os Hooks en Lis a.js:
Tecnologías u ilizadas
34
34
Ilus ación 15 – useNa iga ion y useFocusE ec en Lis a.js
Den o de useCallback se ha llamado a la unción ge Lis a, que ob iene la lis a de eje cicios seleccionada.
También se ha añadido un “lis ene ” que, cuando se pulsa el bo ón de a ás del disposi i o, ealice las
a eas indicadas en el mé odo backAc ion. Cuando se sale de es a pan alla, se ejecu an las sen encias
den o de “ e u n”. En es e caso, se elimina el “lis ene ” y se indica que el componen e es á desmon ado.
Es o impide que haya pé didas de memo ia en la app.
2.2.4 AsyncS o age
AsyncS o age [15] es un sis ema de almacenamien o de pa es cla e- alo asínc ono y pe sis en e.
Pe mi e gua da da os en la aplicación de o ma local y, en unción del sis ema ope a i o, almacena la
in o mación de un modo conc e o. En iOS, AsyncS o age es á sopo ado po código na i o que gua da
alo es lige os en un dicciona io se ializado y alo es más pesados en iche os. En cambio,
AsyncS o age u iliza SQLi e pa a almacena da os en And oid.
2.2.4.1 Mé odos de AsyncS o age
Es a lib e ía de Reac Na i e p opo ciona mé odos que de uel en un obje o “P omise” o P omesa,
mencionado an e io men e en el apa ado 2.1.3. Los mé odos que se han u ilizado en es e p oyec o son:
ge I em y se I em.
ge I em busca un elemen o u ilizando su cla e en o ma o “s ing” o cadena, y de uel e un obje o
P omesa. Si se ha podido encon a el elemen o, lo de uel e como “ esul ” o esul ado. Sin emba go, si
no ha encon ado el elemen o de uel e un e o .
se I em es ablece el alo jun o con su cla e y de uel e un obje o P omesa. Si no se ha podido ealiza la
ope ación de uel e un e o .
Se puede obse a un ejemplo ob enido del a chi o AllLis s.js en la Ilus ación 16 a con inuación:
35
35
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 16 – Uso de AsyncS o age en AllLis s.js
Se ha añadido un bo ón que, una ez pulsado, ejecu a una unción asínc ona (se indica con la palab a
“async” al p incipio). Es a unción ob iene “LISTAS” de AsyncS o age, que con iene odas las lis as de
la app, y elimina las que engan una echa de c eación an e io a los meses indicados en la a iable
lis ValueNumbe . Pa a ob ene las lis as se in oca al mé odo ge I em con la palab a “awai ”, que
de uel e un obje o P omesa (el esul ado si la P omesa se ha esuel o) que se gua da en una a iable
llamada alo Lis as. Seguidamen e, se il an las lis as de uel as po AsyncS o age (con el mé odo il e )
cuya echa de c eación sea mayo o igual a la echa indicada po lis ValueNumbe . Finalmen e, se u iliza
el mé odo se I em pa a gua da el esul ado en AsyncS o age y se ac ualizan las lis as con la a iable de
es ado se Lis as en ge I em.
2.3 Expo
Ilus ación 17 – Logo de Expo
2.3.1 Desc ipción y ca ac e ís icas gene ales
Expo [16] es un amewo k de código abie o que se usa pa a c ea aplicaciones en Reac Na i e. Es un
conjun o de he amien as y se icios que acili an el desa ollo de Reac Na i e debido a que no se
necesi a conoce lenguaje na i o pa a ello. Además, con iene APIs na i as pa a iOS y pa a And oid,
en e las cuales se encuen an “FileSys em”, “Came a” y “Video”. Es as APIs es án disponibles en el
Expo SDK [17], que p opo ciona acceso a las uncionalidades del disposi i o, como la cáma a, la
localización o los con ac os en o ma de paque es.
2.3.2 Ins alación y ejecución del en o no
Pa a ins ala Expo se necesi a Node.js [18], que es un en o no de se ido de código abie o que u iliza
Ja aSc ip y p og amación asínc ona. Es o se debe a que la ges ión de he amien as y dependencias de la
línea de comandos de Expo depende de Node.js. La in e az de línea de comandos de Expo se denomina
Expo CLI, que se u iliza pa a ealiza p uebas en la app mien as es á siendo desa ollada.
Tecnologías u ilizadas
36
36
Pa a p oba la uncionalidad de la aplicación mó il se necesi a la aplicación de clien e de Expo pa a
iPhone y And oid, que se puede desca ga de App S o e y de Play S o e espec i amen e.
Cuando se inicia la aplicación con el comando “expo s a ” en Expo CLI, un empaque ado de Ja aSc ip
llamado Me o [19] se inicializa a la ez. Su unción es combina el código Ja aSc ip en un único
iche o y aduci código Ja aSc ip y JSX [20]. También con ie e ecu sos o “asse s”, que son
imágenes p incipalmen e, en obje os que se pueden isualiza en un componen e de ipo imagen o
“Image”. Además, con es e comando se inicializa ambién el se ido de Expo llamado Expo
De elopmen Se e . Su unción es ob ene el código Ja aSc ip gene ado po Me o y ejecu a lo en la
aplicación de clien e de Expo en el disposi i o o emulado . En la Ilus ación 18 se mues a el Expo
De elopmen Se e al ab i la página localhos :19002, donde se puede escanea el código QR desde la
aplicación mó il de Expo o ejecu a la app desde un emulado .
Ilus ación 18 – Expo De elopmen Se e
2.3.3 Flujos de abajo
La o ma de desa ollo en Expo mencionada an e io men e se co esponde con uno de los dos lujos de
abajo [21] que exis en, denominado “managed”. En es e lujo se esc ibe solo en Ja aSc ip o
TypeSc ip y las he amien as de Expo se enca gan de ealiza las a eas p incipales. El o o lujo se
denomina “ba e”, donde se puede usa cualquie se icio o lib e ía de Expo. Es el usua io quien debe
desa olla los p oyec os na i os en And oid, u ilizando And oid S udio, y en iOS, u ilizando Xcode. Los
desa ollado es que u ilizan el lujo “managed” no ienen esa esponsabilidad y la complejidad es
ges ionada po Expo. En el caso de que se encuen en limi aciones y se deba accede a código na i o,
siemp e se puede cambia de “managed” a “ba e” y segui desa ollando el código en ese lujo.
En es e p oyec o se ha u ilizado el lujo de abajo “managed”, donde se con igu a el icono de la app y la
pan alla de ca ga en un a chi o llamado “app.json”, y la con igu ación de Me o se indica en el a chi o
“me o.con ig.js”. Los paque es de Expo que se han u ilizado se indican en el a chi o “package.json”, y
en e ellos se encuen an: Came a, Video, Documen Picke , Image Picke , FileSys em, MediaLib a y,
No i ica ions y Sha ing.
37
37
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
2.4 JSON
Ilus ación 19 – Logo de JSON
2.4.1 Desc ipción y ca ac e ís icas gene ales
JSON [22] es la o ma ab e iada de Ja aSc ip Objec No a ion. Es un o ma o lige o usado pa a
almacena y ansmi i da os. Es au odesc ip i o y ácil de en ende .
Los da os es án sepa ados po comas y se gua dan en pa es nomb e- alo . Los obje os se gua dan en e
lla es “{ }” y las ma ices en e co che es “[ ]”. Cada obje o puede con ene a ios pa es nomb e- alo y
cada ma iz puede con ene a ios obje os.
Un p og ama Ja aSc ip puede con e i da os JSON en obje os Ja aSc ip na i os. El o ma o JSON es
solo ex o, y se debe di e encia de la sin axis JSON, que de i a de la sin axis de no ación de obje os de
Ja aSc ip . En la Ilus ación 20 se p esen a un ejemplo donde se ha c eado una cadena Ja aSc ip que
con iene sin axis de JSON, y se u iliza la unción “JSON.pa se()” pa a con e i la a un obje o Ja aSc ip :
Ilus ación 20 – Con e sión JSON a obje o Ja aSc ip
2.4.2 Uso en la aplicación
En es e p oyec o se han c eado lis as de eje cicios en o ma o JSON, como se puede obse a en la
Ilus ación 21:

Tecnologías u ilizadas
38
38
Ilus ación 21 – Lis a de eje cicios en o ma o JSON
En la lis a se pueden iden i ica los siguien es campos:
▪ imagen: con iene un núme o que co esponde a un icono que se encuen a en la ca pe a “asse s”
del p oyec o, o la u i de una imagen seleccionada del almacenamien o in e no del disposi i o.
▪ i ulo: con iene el í ulo de la lis a “Lis a de eje cicios”.
▪ ideolis a: en es e campo se almacenan los enlaces de ídeos de los eje cicios que con o man la
lis a y odas sus ca ac e ís icas en una ma iz. Algunas de las ca ac e ís icas o campos de los
ídeos son: se ies, epe iciones, iempo, ideos e id. El campo “ ideos” puede se pa e de un
enlace de un ídeo de You ube o una u i de un ídeo local.
▪ email: gua da la di ección de co eo elec ónico del usua io. Es a di ección se almacena de o ma
local la p ime a ez que el usua io ing esa en la app.
▪ idlis a: es el iden i icado de la lis a.
▪ echac eacion: indica la echa en la que se ha c eado la lis a.
▪ lis aRealizado: en es e campo se indica si la lis a se ha ealizado.
▪ imagenLis aRealizado: con iene un icono que apa ece pa a indica si la lis a se ha ealizado o si
es á pendien e po ealiza se.
▪ his o ial: en es e campo se almacena un his o ial en una ma iz, y cada elemen o gua da un
in en o de en enamien o de esa lis a de eje cicios. Es deci , cada ez que se ealiza la lis a se
gua da una en ada en esa ma iz. Los campos de cada en enamien o son: idHis o ial,
39
39
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
echaRealizado, iempoTo al y iemposEje cicios. En es e úl imo se almacena una ma iz donde
cada en ada co esponde a uno de los ídeos de la lis a. Pa a cada ídeo hay un campo llamado
iempoRealizacion, donde se gua da el iempo que ha a dado en ealiza se el eje cicio, y uno
llamado iempoDescanso, donde se gua da el iempo de descanso del eje cicio.
▪ ondo: po úl imo, en es e campo se almacena la u i de la imagen seleccionada pa a el ondo de
la lis a.
Todos los campos ienen el o ma o de una cadena o “s ing” excep o “imagen”, “imagenRealizado” e
“imagenLis aRealizado”, ya que pueden se núme os que co espondan a una imagen de la ca pe a
“asse s” del p oyec o.
40
3 HERRAMIENTAS UTILIZADAS
3.1 He amien as de desa ollo
En es e capí ulo se especi ica án las he amien as empleadas du an e el desa ollo del p oyec o.
3.1.1 Visual S udio Code
Ilus ación 22 – Logo de Visual S udio Code
Visual S udio Code o VS Code [23] de o ma ab e iada es un edi o de código uen e que es g a ui o y de
código abie o. Con iene una he amien a llamada In elliSense que comple a el código de o ma
au omá ica pa a a iables, mé odos y módulos impo ados. Además, incluye un depu ado in e ac i o
que pe mi e p ocesa el código en búsqueda de e o es, inspecciona a iables y ejecu a comandos en la
consola. O ece unas ca ac e ís icas que acili an el desa ollo del código, como el sub ayado de la
sin axis, co espondencia ins an ánea de lla es y co che es, e inden ación au omá ica. In eg a con ol de
código uen e con Gi . Es á c eado po Mic oso y es á disponible pa a a ios sis emas ope a i os.
Con iene sopo e pa a Ja aSc ip , TypeSc ip y Node.js, y iene un conjun o de ex ensiones pa a o os
lenguajes de p og amación. Es á desa ollado con Elec on, un ma co de abajo que pe mi e esc ibi
aplicaciones mul ipla a o ma u ilizando Ja aSc ip , HTML y CSS.
La in e az de usua io de VS Code [24] se mues a en la Ilus ación 23:
41
41
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 23 – In e az de usua io de Visual S udio Code
Se puede di idi en 5 á eas: el edi o , la ba a que se si úa abajo a la izquie da, la ba a de es ado, la ba a
de ac i idad y los paneles. El edi o es el á ea p incipal donde se mues a el con enido de los iche os y
donde se pueden edi a . Se pueden ab i a ios edi o es a la ez de o ma e ical u ho izon al. La ba a
si uada abajo a la izquie da con iene un bo ón que indica el núme o de allos que iene el p oyec o y un
bo ón pa a subi los cambios a Gi Hub. La ba a de es ado es la ba a in e io de colo azul, que con iene
in o mación sob e el p oyec o y los iche os. La ba a de ac i idad es á localizada a la izquie da del
explo ado de a chi os y iche os del p oyec o. En e es os a chi os se pueden des aca App.js, app.json y
me o.con ig.js mencionados en el capí ulo 2. Pe mi e cambia en e di e en es is as y p opo ciona
indicado es como el núme o de cambios pendien es po subi a Gi Hub. Finalmen e, los paneles se
encuen an en la egión si uada debajo del edi o y se usan pa a la depu ación, in o ma sob e e o es y
esc ibi en el e minal.
Cada ez que se inicia VS Code, se ab e en el mismo p oyec o y es ado en el que se encon aba an es de
ce a lo po úl ima ez. Se conse an los iche os y las ca pe as.
3.1.2 Expo Go
Ilus ación 24 – Logo de Expo Go
Expo Go [25] es una aplicación de código abie o que se u iliza pa a ejecu a aplicaciones de Reac
He amien as u ilizadas
48
48
Ilus ación 36 – In e az de usua io de Visual Pa adigm
El modelado de da os y los diag amas de secuencia han sido c eados con es a ecnología.
3.4 Recu sos adicionales
3.4.1 Pixabay
Ilus ación 37 – Logo de Pixabay
Pixabay [31] es una comunidad donde se compa en imágenes, ídeos y música que es án bajo la licencia
de Pixabay, po lo que se pueden u iliza sin ene que e e encia las, incluso pa a ines come ciales.
Cualquie usua io egis ado en la página puede subi imágenes a Pixabay (bajo unas no mas de calidad),
y no es necesa io egis a se pa a pode copia , modi ica , usa y dis ibui el con enido. Es o se puede
hace mien as que no se ulne en los de echos de p i acidad.
En es e p oyec o se han empleado imágenes de es a página pa a los iconos de la aplicación, en e los
cuales se encuen an: elimina un ídeo, impo a una lis a, c ea una nue a lis a y añadi emo iconos en
los ídeos. Las imágenes se gua dan en la ca pe a “asse s” del p oyec o, y se ob iene la URL de cada una
de ellas en un iche o llamado Images.js con la sen encia “ equi e( )”.

49
49
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
3.4.2 Pexels
Ilus ación 38 – Logo de Pexels
Pexels [32] es una página web y app donde se alojan o os y ídeos sin de echos de au o . P opo ciona
ecu sos a los usua ios y diseñado es que se pueden u iliza de o ma g a ui a. Las condiciones de uso son
muy simila es a las de Pixabay, y se pueden encon a una g an a iedad de imágenes en ambas páginas.
Se han u ilizado imágenes de Pexels pa a el ondo de pan alla po de ec o de la aplicación.
50
4 ARQUITECTURA Y ANÁLISIS
En es e capí ulo se analiza á la a qui ec u a de la aplicación y se c ea án diag amas UML que
especi iquen su uncionamien o.
4.1 Casos de uso gene ales
A con inuación, se an a desc ibi los casos de uso y se mos a án los diag amas co espondien es jun o
con los ac o es implicados. Es o se i á pa a explica las elaciones en e el sis ema y los ac o es y,
además, pa a mos a el uncionamien o de la aplicación desde la pe spec i a del usua io inal.
4.1.1 Iden idad de los ac o es
El ac o que a a in e ac ua con el sis ema y accede a sus unciones es el usua io. Si no se ha
au en icado se denomina á Usua io no au en icado. En cambio, si se ha au en icado se denomina á
Usua io.
El usua io puede ene el ol de Usua io o Especialis a indis in amen e.
4.1.2 Au en icación de un usua io
Pa a la au en icación de un usua io se de e mina án los p ocesos pa a su egis o en la aplicación. Se
de alla án los p ocesos an o en la Ilus ación 39 como en las ablas a con inuación:
La unción de un buen so wa e es hace que
lo complejo apa en e se simple.
- G ady Booch -
51
51
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 39 – Casos de uso pa a la au en icación de un usua io
CU-01
Regis a se con nomb e y co eo elec ónico
P econdición
El usua io no debe habe se egis ado p e iamen e en la aplicación
Desc ipción
En es e caso de uso se desc ibe el compo amien o de la aplicación pa a egis a un
usua io po p ime a ez.
Secuencia
no mal
Paso
Acción
1
El usua io in oduce su nomb e y co eo elec ónico
2
El usua io pulsa el bo ón de inicia sesión
Pos condición
El usua io inicia sesión y se encuen a au en icado en la aplicación
Excepciones
Paso
Acción
1
El usua io in oduce un co eo elec ónico in álido
E.1
La aplicación ad ie e al usua io del e o y le solici a modi ica e
in oduci los da os de nue o
Comen a ios
Ninguno
Tabla 1. CU-01: Regis a se con nomb e y co eo elec ónico
A qui ec u a y análisis
52
52
4.1.3 Ope aciones pa a c ea un elemen o
El usua io pod á ealiza ope aciones pa a c ea un elemen o en la aplicación, que se de alla án en las
ablas co espondien es y en el diag ama de casos de uso de la Ilus ación 40:
Ilus ación 40 – Diag ama de casos de uso pa a la c eación de un elemen o
CU-02
C ea un elemen o nue o (un eje cicio, una lis a, un eco da o io pa a una lis a,
duplica una lis a, o añadi un eje cicio a una lis a, un emo icono o una o o a un
eje cicio)
P econdición
El usua io debe es a au en icado
Desc ipción
En es e caso de uso se desc ibe el compo amien o de la aplicación pa a c ea un
nue o elemen o.
Secuencia
no mal
Paso
Acción
1
El usua io pulsa el bo ón de c ea una lis a
2
El usua io pulsa el bo ón de añadi un eje cicio e in oduce los da os
solici ados
53
53
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
3
El usua io pulsa el bo ón de gua da lis a
4
El usua io selecciona una lis a
5
El usua io pulsa el bo ón de duplica la lis a
6
El usua io pulsa el bo ón de añadi un eco da o io pa a la lis a
7
El usua io pulsa el bo ón de añadi un eje cicio a la lis a y ellena los da os
solici ados
8
El usua io selecciona la opción de añadi un emo icono a un eje cicio de la
lis a
9
El usua io selecciona la opción de añadi una o o a un eje cicio
10
El usua io pulsa el bo ón de hace una o o
11
El usua io pulsa el bo ón de gua da o o
Pos condición
El usua io ha c eado un nue o elemen o co ec amen e.
Excepciones
Paso
Acción
1
El usua io in oduce un enlace de un ídeo in álido (si se ha seleccionado
p e iamen e la opción de c ea lis a de eje cicios de YouTube)
E.1
La aplicación ad ie e al usua io del e o y le solici a modi ica e
in oduci los da os nue amen e
Comen a ios
Si el usua io pulsa el bo ón de cancela , no se c ea el elemen o y no se p oduce e o .
Todos los casos de uso en los que se c ean nue os elemen os son muy simila es, po
lo que se han ag upado en es a abla.
Tabla 2. CU-02: C ea un elemen o nue o
4.1.4 Ope aciones pa a modi ica un elemen o
En la Ilus ación 41 se mos a án las ope aciones que pod á lle a a cabo un usua io pa a modi ica un
elemen o exis en e en la aplicación. Asimismo, en las ablas de es e apa ado se explica án los casos de
uso del diag ama con mayo de alle.

A qui ec u a y análisis
54
54
Ilus ación 41 – Diag ama de casos de uso pa a modi ica un elemen o
CU-03
Modi ica un elemen o exis en e ( í ulo de lis a, elimina un eje cicio, elimina una
lis a, ma ca una lis a como ealizada, ac ualiza una lis a)
P econdición
El usua io debe es a au en icado
Desc ipción
En es e caso de uso se desc ibe el compo amien o de la aplicación pa a modi ica
un elemen o que exis e.
Secuencia
no mal
Paso
Acción
1
El usua io pulsa el bo ón de edi a í ulo de una lis a y pulsa el bo ón de
acep a
2
El usua io pulsa el bo ón de elimina eje cicio
3
El usua io pulsa el bo ón de elimina una lis a
4
El usua io selecciona la opción de ma ca una lis a como ealizada
5
El usua io pulsa el bo ón de impo a una lis a y, si la lis a ya exis e, puede
ac ualiza la (se ealiza el caso de uso “Ac ualiza una lis a”)
Pos condición
El usua io ha modi icado un elemen o co ec amen e.
Excepciones
Ninguna
55
55
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Comen a ios
Si el usua io pulsa el bo ón de cancela , no se modi ica el elemen o y no se p oduce
e o .
Debido a que odos los casos de uso en los que se modi ican elemen os son muy
simila es, se han ag upado en es a abla.
Tabla 3. CU-03: Modi ica un elemen o exis en e
4.1.5 Ope aciones con una lis a
Se de alla án las ope aciones que se pueden e ec ua con una lis a de la aplicación en la Ilus ación 42. En
las ablas que apa ece án en es e apa ado se de ini án los casos de uso del diag ama.
Ilus ación 42 – Diag ama de casos de uso pa a ealiza ope aciones con una lis a
CU-04
Ve lis a de elemen os (de eje cicios, de lis as, his o ial de una lis a, de alles de
his o ial de en enamien o)
P econdición
El usua io debe es a au en icado
Desc ipción
En es e caso de uso se desc ibe el compo amien o de la aplicación pa a mos a una
lis a de elemen os (eje cicios, lis as, his o ial de una lis a o de alles de un his o ial de
en enamien o).
Secuencia
Paso
Acción
A qui ec u a y análisis
56
56
no mal
1
El usua io selecciona una lis a que exis e en la aplicación
Pos condición
El usua io isualiza la lis a de elemen os e in e ac úa con ella
Excepciones
Ninguna
Comen a ios
Si se selecciona el his o ial de una lis a y es e es á acío no se de uel e una lis a, ni
apa ece ningún e o , sino que se mues a el mensaje: “El his o ial es á acío”.
Se han ag upado en es a abla odos los casos de uso en los que se isualizan lis as
po que son muy simila es en e sí.
Tabla 4. CU-04: Ve lis a de elemen os
CU-05
Realiza en enamien o de una lis a
P econdición
El usua io debe es a au en icado
Desc ipción
En es e caso de uso se desc ibe el compo amien o de la aplicación pa a ep oduci
una lis a de eje cicios.
Secuencia
no mal
Paso
Acción
1
El usua io pulsa el bo ón de inicia en enamien o
2
El usua io pulsa el bo ón de comenza eje cicio
3
El usua io ep oduce el ídeo del eje cicio
4
El usua io pulsa el bo ón de siguien e
5
El usua io pulsa el bo ón de gua da (se ealiza el caso de uso “Gua da
his o ial de en enamien o de la lis a”)
Pos condición
El usua io isualiza los ídeos de los eje cicios y gua da el his o ial de
en enamien o.
Excepciones
Ninguna
Comen a ios
Si el usua io pulsa el bo ón de cancela , no se gua da el his o ial de en enamien o de
la lis a y no se p oduce e o .
Tabla 5. CU-05: Realiza en enamien o de una lis a
57
57
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
CU-06
En ia una lis a po co eo elec ónico o Blue oo h
P econdición
El usua io debe es a au en icado
Desc ipción
En es e caso de uso se desc ibe el compo amien o de la aplicación pa a en ia una
lis a
Secuencia
no mal
Paso
Acción
1
El usua io selecciona una lis a
2
El usua io pulsa el bo ón de en ia lis a
3
El usua io selecciona la opción de en ia po co eo elec ónico o
Blue oo h
Pos condición
El usua io ha en iado una lis a co ec amen e.
Excepciones
Ninguna
Comen a ios
Si el usua io pulsa el bo ón de a ás del disposi i o, no se en ía la lis a y no se
p oduce e o .
Tabla 6. CU-06: En ia una lis a po co eo elec ónico o Blue oo h
4.2 Diag amas de secuencia
En es e apa ado se ep esen a án las in e acciones más ele an es que se lle an a cabo en e los
elemen os de la aplicación median e diag amas de secuencia. En ellos se de alla án los componen es que
in e ienen en las acciones ealizadas.
4.2.1 Regis o e inicio de sesión
P ime o, se analiza á el p oceso de egis o e inicio de sesión de un usua io en la aplicación. Cuando el
usua io accede a la app y se inicia, es e debe in oduci su nomb e y co eo elec ónico y p esiona el
bo ón de “Login”. Una ez pulsado, la base de da os local gua da los da os del usua io. A pa i de aho a,
cada ez que el usua io ab a la aplicación end á la sesión iniciada, es deci , es a á au en icado, y no
end á que ol e a ellena sus da os. Los elemen os que apa ecen en la Ilus ación 43 son los siguien es:
• Usua io: es el usua io de la aplicación, que se a a egis a e inicia sesión
• App: es el componen e p incipal en el que se basa la aplicación, desde el cual se a a llama al
es o de componen es que in e ienen.
• LogIn: es el componen e que mues a la pan alla en la que el usua io a a egis a se po p ime a
ez.
• Base Da os Local: es donde se almacenan los da os de la aplicación, y es SQLi e en And oid y
un iche o local en iOS.
A qui ec u a y análisis
64
64
Ilus ación 48 – Modelo de da os de la aplicación
Pa a mayo cla idad, se han incluido los mé odos más impo an es de los componen es, sin los
pa áme os asociados. Se puede obse a que el componen e Lis a con iene una mayo can idad de
mé odos que el es o. Es o es debido a que hay un mayo núme o de ope aciones a ealiza con una lis a,
que han sido mencionadas en el apa ado 4.1 en es e capí ulo.

65
65
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
66
5 INTERFAZ DE USUARIO Y FUNCIONALIDAD
En es e capí ulo se de alla á la in e az de usua io de la aplicación. Se mos a á la dis ibución de sus
elemen os y sus uncionalidades, y se de ini á el ipo de in e acciones que se puede ealiza con cada uno
de los componen es.
5.1 Pan alla de egis o e inicio de sesión
Ilus ación 49 – Pan alla de egis o e inicio de sesión
En la Ilus ación 49 se puede obse a la pan alla inicial, que se mues a cuando el usua io no es á
au en icado. Dispone de un í ulo que se denomina “Login”, el logo de la aplicación si uado debajo de
es e, y un o mula io que con iene dos campos: nomb e y co eo elec ónico. Es os campos
sonobliga o ios po lo que, si no se ellenan, sal a á una ale a in o mando al usua io de que debe
El diseño accesible es un buen diseño.
- S e e Ballme -
67
67
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
ellena los. En el caso de que se in oduzca una di ección de co eo elec ónico e ónea, apa ece á una
ale a indicando el e o .
Un ejemplo de nomb e y co eo elec ónico de un usua io se indica en la Ilus ación 50 a con inuación:
Ilus ación 50 – Ejemplo de nomb e y co eo elec ónico del usua io
El co eo elec ónico que ha in oducido el usua io se á añadido po de ec o en las lis as de eje cicios
c eadas y, po an o, no end á que ol e a in oduci lo cada ez que c ee una lis a. Cuando el usua io
en íe una lis a, el des ina a io del mensaje pod á e el co eo elec ónico del usua io que la ha c eado y,
po an o, sabe a quién pe enece la lis a.
In e az de usua io y uncionalidad
68
68
5.2 Pan alla de modo de isualización
Ilus ación 51 – Pan alla de modo de isualización
En la pan alla de la Ilus ación 51 apa ecen dos bo ones: “En enamien o” y “Con igu ación”. Al pulsa
cualquie a de los dos bo ones, se mos a á la pan alla donde se isualizan las lis as. Sin emba go, al
selecciona una de las lis as, se pod án ealiza acciones di e en es en unción del modo de isualización
escogido.
69
69
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
5.3 Pan alla de lis a de lis as
Ilus ación 52 – Pan alla de lis a de lis as
En la Ilus ación 52 se puede obse a la lis a que ecoge odas las lis as de eje cicios de la aplicación.
Las uncionalidades que o ece son las que se especi ican a con inuación:

In e az de usua io y uncionalidad
70
70
5.3.1 Añadi ondo de lis a de lis as
Ilus ación 53 – Menú de la pan alla de lis as de lis as
Pa a añadi un ondo de pan alla, el usua io debe pulsa en el menú de la esquina supe io de echa de la
Ilus ación 53, donde apa ecen dos opciones: “Añadi ondo de pan alla” y “Elimina lis as”. Una ez
seleccionada la opción de añadi un ondo, se mos a án las imágenes del almacenamien o in e no del
disposi i o. T as escoge una de ellas, se coloca á la imagen en el ondo de la pan alla al y como apa ece
en la Ilus ación 54:
71
71
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 54 – Ejemplo de ondo de pan alla pe sonalizado
5.3.2 Elimina lis as
Ilus ación 55 – Opción elimina lis as
In e az de usua io y uncionalidad
72
72
Si el usua io escoge la opción de elimina lis as, apa ece á un componen e de ipo “Modal” [37]
mos ado en la Ilus ación 55, que pe mi e que se isualice con enido encima de una is a. En es e
componen e se mues a un bo ón con una lis a de núme os, donde el usua io puede escoge el núme o de
meses deseado. Al pulsa el bo ón “Gua da ”, se eliminan las lis as que se han c eado en una echa
an e io al núme o de meses escogido.
5.3.3 Duplica una lis a
Ilus ación 56 - Opción duplica lis a
En el menú si uado a la de echa de cada lis a de eje cicios apa ece una opción llamada “Duplica lis a”,
que se puede obse a en la Ilus ación 56. Si el usua io escoge es a opción apa ece una lis a idén ica a la
an e io , solo que con id y í ulo di e en es, al y como se ap ecia en la Ilus ación 57:
73
73
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 57 – Ejemplo de duplica lis a
5.3.4 Inse a una lis a
Cuando un usua io quie e inse a una lis a en la aplicación, debe pulsa en el bo ón “Impo a lis a” que
se si úa en la esquina in e io izquie da de la pan alla. T as pulsa lo, apa ece án los iche os del
almacenamien o in e no y escoge á la lis a que desea inse a . Una ez elegida la lis a con o ma o .TXT,
se añadi á a la lis a de lis as. En el caso de que se quie a impo a una lis a que ya exis a en la aplicación,
apa ece á una ale a en la pan alla al y como se mues a en la Ilus ación 58:
In e az de usua io y uncionalidad
80
80
5.4.2 Pan alla de nue a lis a
Ilus ación 65 – Pan alla de nue a lis a
En la Ilus ación 65 se mues a la pan alla pa a c ea una lis a nue a con eje cicios de YouTube. El
p ocedimien o es el mismo que pa a c ea una lis a con eje cicios en local excep o que, en es e caso, hay
un bo ón pa a accede a la aplicación de YouTube, y así ob ene un enlace a un ídeo que se inse a á en
el o mula io.
5.5 Pan alla de lis a de eje cicios modo En enamien o
Al selecciona una lis a, se pueden ab i dos ipos de pan allas di e en es: la pan alla de “Lis a” si se ha
escogido el modo “En enamien o”, y la pan alla de “Lis a Con igu ación” si se ha escogido el modo
“Con igu ación”.

81
81
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 66 – Pan alla de lis a de eje cicios del modo En enamien o
En la Ilus ación 66 se de allan los elemen os de una lis a de eje cicios en el modo “En enamien o”, que
son los siguien es: un icono pa a indica si la lis a o el eje cicio se ha ealizado; un icono pa a edi a el
í ulo de la lis a; un menú desplegable an o en la lis a como en el eje cicio; un bo ón pa a elimina la
lis a; un bo ón pa a inicia un en enamien o y un bo ón pa a en ia la lis a.
In e az de usua io y uncionalidad
82
82
5.5.1 Edi a í ulo de una lis a
Ilus ación 67 – Edi a í ulo de una lis a
Pa a modi ica el í ulo de una lis a, se debe p esiona en el icono de “edi a lis a” si uado al lado del
í ulo. T as pulsa lo, apa ece á un icono de con i mación y el eclado del elé ono al y como se mues a
en la Ilus ación 67. Una ez edi ado el í ulo, se pod á pulsa el bo ón de con i mación del eclado o el
icono de con i mación ubicado al lado del í ulo pa a gua da los cambios.
5.5.2 Ma ca una lis a como ealizada
En la Ilus ación 68 se puede obse a el menú de una lis a si uado en la esquina supe io de echa, donde
apa ecen las siguien es opciones:
83
83
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 68 – Menú de la lis a de eje cicios modo En enamien o
Si se escoge la opción de “Ma ca como ealizado”, se cambia á el icono ubicado en la esquina supe io
izquie da y apa ece á un símbolo de “ ealizado”, como se puede obse a en la Ilus ación 69:
Ilus ación 69 – Ejemplo de ma ca lis a como ealizada
In e az de usua io y uncionalidad
84
84
Si se elige la opción de “Ma ca como ealizado” en uno de los eje cicios, apa ece á el mismo símbolo en
el eje cicio y cambia á a es ado “ ealizado”.
5.5.3 Añadi eco da o io de una lis a
Al pulsa el bo ón de “Añadi eco da o io”, apa ece una en ana de ipo “Modal” que se mues a en la
Ilus ación 70 a con inuación:
Ilus ación 70 – Ven ana de añadi eco da o io
Pa a añadi un eco da o io, el usua io puede selecciona el día pulsando el bo ón “Selecciona día”, que
ab e el calenda io, y puede selecciona la ho a pulsando el bo ón “Selecciona ho a”. En la Ilus ación 71
y 72 se mues an el calenda io y el eloj espec i amen e pa a elegi la echa y la ho a:
85
85
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 71 – Ejemplo de calenda io Ilus ación 72 – Ejemplo de ho a
pa a añadi eco da o io pa a añadi eco da o io
Una ez seleccionada la echa y la ho a, se puede elegi si se p e ie e ecibi la no i icación con una
an elación de 0, 10, 15, 30 o 60 minu os. En la pa e in e io de la en ana se mues a la echa y la ho a
en la cual se ecibi á la no i icación. Una ez inalizado, se pulsa á el bo ón “Gua da ” y se hab á
gua dado el eco da o io. La no i icación se ecibi á de o ma pe iódica el mismo día de la semana que se
ha elegido. Es deci , si se ha elegido un lunes, se epe i á cada lunes a la misma ho a. En el caso de que
quie a deja de ecibi un eco da o io pa a esa lis a, puede pulsa el bo ón de “Elimina eco da o io”. En
la Ilus ación 73 se mues a un ejemplo de no i icación de un eco da o io de una lis a. La no i icación
apa ece 60 minu os an es de la ho a del en enamien o.

In e az de usua io y uncionalidad
86
86
Ilus ación 73 – Ejemplo de no i icación de eco da o io de una lis a
5.5.4 Añadi ondo de lis a
Pa a añadi un ondo de pan alla en la lis a se u iliza el mismo p ocedimien o que en el apa ado 5.3.1
excep o que, en es e caso, se gua da la u i del ondo escogido en un campo de la lis a. En la Ilus ación 74
se mues a un ejemplo de un ondo pe sonalizado pa a una lis a:
87
87
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 74 – Ejemplo de ondo pe sonalizado pa a una lis a
5.5.5 Elimina una lis a
Al pulsa el bo ón de “Elimina lis a” si uado en la esquina in e io izquie da, apa ece una ale a al y
como se indica en la Ilus ación 75:
In e az de usua io y uncionalidad
88
88
Ilus ación 75 – Ejemplo de ale a pa a elimina una lis a
Al pulsa “Sí”, la lis a se elimina á y se ol e á a la pan alla an e io (de lis a de lis as).
5.5.6 En ia una lis a
Una ez pulsado el bo ón de “En ia lis a”, se mos a á el menú de opciones pa a compa i la lis a que
apa ece en la Ilus ación 76:
89
89
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 76 – Menú de opciones pa a en ia una lis a
En e las opciones que se mues an se puede escoge en ia la lis a po Gmail o po Blue oo h. En el caso
de en ia la lis a po Gmail, se ab i á la aplicación de Gmail y se mos a á un co eo elec ónico como el
de la Ilus ación 77 donde se in oduci á el des ina a io, el asun o y la desc ipción. La lis a se adjun a á de
o ma au omá ica.
In e az de usua io y uncionalidad
96
96
Ilus ación 83 – Ven ana de añadi o o a un eje cicio
Ilus ación 84 – Ejemplo de o o en un eje cicio

97
97
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
En el caso de que el usua io quie a bo a la o o omada, apa ece á la opción de “Bo a o o” en el menú
despegable del eje cicio y, una ez pulsada, se mos a á una ale a donde el usua io pod á con i ma que
desea elimina la o o.
Es as es uncionalidades son opcionales a la ho a de ealiza un en enamien o de una lis a y se han
añadido pa a o ece una mayo pe sonalización de una lis a al usua io.
5.6 Pan alla en enamien o de una lis a
Pa a ealiza un en enamien o de una lis a, se debe selecciona una lis a en el modo “En enamien o” y
pulsa en el bo ón de “Inicia en enamien o”. En la Ilus ación 85 se mues a un ejemplo de la pan alla
de en enamien o de la lis a seleccionada:
Ilus ación 85 – Pan alla de en enamien o de una lis a
Se puede obse a que apa ece un c onóme o, el núme o de se ies, epe iciones y iempo, y el ídeo del
eje cicio. Si se pulsa el bo ón de “Comenza eje cicio”, el c onóme o empieza a con a y apa ece el
bo ón “Siguien e” en la pan alla, al y como se mues a en la Ilus ación 86:
In e az de usua io y uncionalidad
98
98
Ilus ación 86 – Ejemplo de en enamien o pulsando comenza
Una ez e minado el eje cicio, se pulsa á el bo ón “Siguien e” pa a que apa ezca el siguien e eje cicio de
la lis a. Además, se hab á gua dado el iempo de ealización del eje cicio as pulsa el bo ón. Pa a
empeza el siguien e eje cicio, se pulsa á el bo ón “Comenza eje cicio”, y de es a o ma se gua da á el
iempo de descanso del eje cicio an e io . Una ez e minado el úl imo eje cicio de la lis a, apa ece á el
bo ón “Gua da ” y, al pulsa lo, se pausa á el c onóme o y se almacena án los esul ados en el his o ial de
la lis a.
5.7 Pan alla de his o ial de una lis a
Pa a isualiza el his o ial de una lis a, se debe selecciona la opción “Ab i his o ial” del menú
desplegable de la lis a. En la Ilus ación 87 se de alla la pan alla del his o ial de una lis a:
99
99
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 87 – Ejemplo de his o ial de una lis a
En el his o ial se almacena cada his o ial de en enamien o de la lis a, donde se mues a la echa del
en enamien o y el iempo o al empleado en ealiza lo. Asimismo, se mues a el bo ón “Bo a his o ial”
y “A ás” en la pa e in e io de la pan alla.
Pa a isualiza un his o ial de en enamien o conc e o, se pulsa á en el elemen o y se ab i á una pan alla
que mues a el núme o de se ies y epe iciones, y el iempo de ealización y de descanso de cada eje cicio
de la lis a. En la Ilus ación 88 se puede obse a un ejemplo de un his o ial de en enamien o especí ico:
In e az de usua io y uncionalidad
100
100
Ilus ación 88 – Ejemplo de un his o ial de en enamien o
Si se pulsa el bo ón “Bo a his o ial”, se elimina á el his o ial comple o de la lis a y apa ece á po
pan alla el ex o “El his o ial es á acío”, y desapa ece á el bo ón “Bo a his o ial”, como se mues a en
la Ilus ación 89:
101
101
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 89 – Ejemplo de his o ial acío de una lis a
5.8 Pan alla de lis a de eje cicios modo Con igu ación
En el modo “Con igu ación”, se mues a la lis a de lis as igual que en el modo “En enamien o” pe o, al
selecciona una lis a, apa ecen algunas uncionalidades di e en es. En la Ilus ación 90 se de allan los
elemen os de una lis a en el modo “Con igu ación”:

In e az de usua io y uncionalidad
102
102
Ilus ación 90 – Ejemplo de pan alla lis a en el modo Con igu ación
Las uncionalidades que ienen en común una lis a en el modo “En enamien o” y en el modo
“Con igu ación” son: elimina la lis a, en ia la lis a y añadi ondo de pan alla. Sin emba go, las
uncionalidades que se encuen an en una lis a en el modo “Con igu ación” y que no apa ecen en el
modo “En enamien o” son: “Añadi eje cicio”, “Modi ica co eo elec ónico” y “Elimina eje cicio”.
De es a o ma, se sepa an las uncionalidades que se elacionan con ealiza un en enamien o y las que
se a ibuyen a con igu a una lis a y sus elemen os.
5.8.1 Añadi un eje cicio a una lis a c eada
Al pulsa el bo ón de “Añadi eje cicio”, en unción de si la lis a es de eje cicios de YouTube o de
eje cicios del almacenamien o local, apa ece á una en ana de ipo “Modal” di e en e. En la Ilus ación
91 apa ece un ejemplo de una en ana pa a añadi un eje cicio local, y en la Ilus ación 92 apa ece una
en ana pa a añadi un eje cicio de YouTube:
103
103
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 91 – Ejemplo de añadi Ilus ación 92 – Ejemplo de añadi
un eje cicio local un eje cicio de YouTube
5.8.2 Elimina un eje cicio de una lis a
Al pulsa el bo ón de “Elimina eje cicio”, apa ece una ale a de con i mación como en el ejemplo de la
Ilus ación 93. T as p esiona la opción “Sí”, se bo a á el eje cicio de la lis a.
In e az de usua io y uncionalidad
104
104
Ilus ación 93 – Ejemplo de elimina un eje cicio de la lis a
5.8.3 Modi ica el co eo elec ónico
Al pulsa el bo ón de “Modi ica co eo elec ónico de la lis a”, apa ece á una en ana de ipo “Modal”
donde se pod á in oduci el co eo elec ónico nue o. Si el usua io pulsa el bo ón de “Gua da ” y el
campo es á acío, apa ece á una ale a indicándolo. Si se ha in oducido un co eo elec ónico con
o ma o in álido, se ale a á del e o . En la Ilus ación 94 se mues a la en ana pa a modi ica el co eo
elec ónico:
105
105
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 94 – Ven ana pa a modi ica el co eo elec ónico de la lis a
5.9 Sali de la aplicación
Pa a sali de la aplicación, se debe pulsa el bo ón “ ol e a ás” del disposi i o desde la pan alla de
“Modo”. En la Ilus ación 95 apa ece la ale a que se mues a as pulsa el bo ón, pa a con i ma si el
usua io desea sali de la aplicación.
Ins alación y p uebas
112
112
Ilus ación 105 – Ejemplo de selecciona Ilus ación 106 – Pan alla Lis a con
echa pa a un eco da o io en iOS no i icación en iOS

113
7 LÍNEAS DE MEJORA Y CONCLUSIONES
El p opósi o de es e capí ulo es sin e iza y euni las ecnologías ap endidas du an e el desa ollo del
p oyec o, p opone posibles mejo as y ex ae conclusiones a aíz de los esul ados ob enidos.
El uso de módulos de Expo ha pe mi ido que se pueda accede a unciones y aplicaciones del disposi i o,
como la cáma a y el sis ema de a chi os, que de o a o ma hab ía sido más complejo. Sin emba go, es os
módulos es án en cons an e cambio y se debe ene el Expo SDK ac ualizado cada cie o iempo pa a que
uncionen co ec amen e. Además, algunos de es os módulos se uel en obsole os con el iempo, y es
necesa io comp oba lo de o ma pe iódica pa a ga an iza el co ec o uncionamien o de la aplicación.
A la ho a de ealiza la ins alación de la aplicación, el p oceso ha sido más sencillo en el caso de And oid,
ya que solo ha sido necesa io c ea el a chi o .APK ejecu ando el comando co espondien e e ins ala lo
di ec amen e en el disposi i o ísico. No obs an e, en el caso de iOS ha habido un incon enien e, que es
el de necesi a un o denado con macOS pa a ins ala la app en el emulado de iOS con Xcode, del que
no disponía du an e el desa ollo del p oyec o. La o a opción disponible e a c ea una cuen a de
desa ollado de Apple, que ondaba los 99 dóla es al año, pa a subi la aplicación a la App S o e, que no
e a iable pa a el p oyec o.
Pa a ealiza las p uebas de la app, no ha habido mayo es incon enien es debido a que se ha u ilizado la
aplicación Expo Go en los disposi i os And oid e iOS, que pe mi e obse a el compo amien o de la
aplicación en iempo eal, ac ualiza los cambios de la in e az de usua io en co os pe iodos de iempo y
que indica los allos en el momen o. El único impedimen o encon ado ha sido a la ho a de ins ala Expo
Go en el iPhone, ya que la e sión de Expo SDK del p oyec o e a in e io a la sopo ada en Expo Go, po
lo que ha sido necesa io ac ualiza la e sión de Expo SDK de la 44 a la 45 y desins ala algunos
módulos que e an incompa ibles o que es aban obsole os en la nue a e sión.
En cuan o a los obje i os del p oyec o, analizando cada uno de ellos se puede conclui lo siguien e:
• Gene a un código único en el lenguaje Ja aSc ip que pe mi a usa la aplicación en And oid y en
iOS: El desa ollo de la aplicación en Reac Na i e con Expo ha apo ado g andes en ajas, como el
gene a un único código que se pueda u iliza pa a las pla a o mas con sis ema ope a i o iOS y
And oid. Es o ha pe mi ido que no haya sido necesa io esc ibi código na i o en ningún momen o, es
deci , esc ibi en código Ja a o Ko lin en el caso de And oid, o esc ibi en código Objec i eC o Swi
en el caso de iOS. Es o ha p opiciado el no necesi a ap ende más de un lenguaje de p og amación y
pode p o undiza en el lenguaje Ja aSc ip , aho ando iempo y ecu sos en el p oceso.
• Comunicación en e Usua io y Especialis a median e co eo elec ónico y Blue oo h: en un p incipio se
p opuso ealiza una aplicación pa a el Usua io y o a pa a el Especialis a con uncionalidades
di e en es. En cambio, es e obje i o ue modi icado y se decidió c ea una única aplicación que pueda
usa cualquie ipo de usua io ya que, al no hace uso de una API de au en icación ni de un se ido , no
ue necesa io dis ingui uncionalidades en e los dos oles.
El módulo “Sha ing” de Expo ha pe mi ido que el en ío de lis as po co eo elec ónico (Gmail en
conc e o) y Blue oo h sea e icien e y sencillo. Si se hubie a desa ollado el código en And oid S udio o
Xcode, se hab ía necesi ado u iliza lib e ías di e en es y mé odos más complejos pa a pode en ia las
lis as de ambas o mas. Sin emba go, Expo no p opo ciona ningún módulo pa a comp imi una ca pe a
en o ma o .zip, po lo que no es posible en ia una lis a de eje cicios en local. Po an o, una posible
mejo a se ía expo a el p oyec o pa a pode esc ibi código na i o y u iliza la lib e ía co espondien e
pa a comp imi los ídeos y en ia la lis a. No obs an e, si el a chi o .zip iene un amaño mayo al
Líneas de mejo a y conclusiones
114
114
sopo ado po Gmail o Blue oo h, no se ía posible compa i la lis a. En ese caso, una solución posible
se ía pe mi i al usua io au en ica se con su cuen a de Google D i e desde la app pa a pode subi la
ca pe a con los ídeos de la lis a, y compa i la.
• Almacena los da os del usua io en una base de da os local: es o ha sido posible g acias a la lib e ía
“AsyncS o age” de Reac Na i e, que pe mi e almacena los da os en la aplicación sin ene que
u iliza un se ido de base de da os en la nube. Una en aja de no depende de un se ido pa a
almacena las lis as es que no es necesa io man ene un se ido y se puede aho a el cos e que eso
conlle a. En cambio, una des en aja es que no se puede accede a las lis as de eje cicios almacenadas
en o o disposi i o. Pa a ob ene las lis as hab ía que en ia las e impo a las una a una en el o o
disposi i o, lo cual lle a ía más iempo. Po an o, una posible mejo a se ía almacena las lis as de cada
usua io en una base de da os emo a.
• Rep oducción de lis as de en enamien o con ídeos de YouTube y ídeos del almacenamien o local:
el módulo “AV” de Expo y la lib e ía “Reac Na i e YouTube i ame” de Reac Na i e ha pe mi ido
que se puedan ep oduci ídeos en local y de YouTube espec i amen e. Una en aja de que es os
ídeos se almacenen en el disposi i o es que se puede usa la aplicación y ealiza un en enamien o
pa a una lis a de eje cicios en local sin necesidad de una conexión a In e ne . Solo es necesa ia en el
caso de ealiza un en enamien o de una lis a de eje cicios de YouTube.
115
ANEXO A: INSTALACIÓN Y DESPLIEGUE
En es e anexo se explica á el p oceso lle ado a cabo pa a c ea y desplega el p oyec o.
A.1 Ins alación del en o no
P ime o, se debe ins ala Node.js que, en unción del sis ema ope a i o, se u iliza á un mé odo dis in o.
En es e caso, se u iliza á el mé odo pa a un o denado con Windows 10. Pa a ins ala lo, p ime o debemos
accede a la página web o icial y desca ga el ins alado pa a Windows [40] que apa ece en la Ilus ación
107:
Ilus ación 107 – Desca ga ins alado de Node.js pa a Windows
Una ez desca gado, se debe ejecu a el ins alado y selecciona las opciones eque idas de la Ilus ación
108. Se puede obse a que ambién se ins ala á el Node Package Manage (npm) [41], que es el sis ema
de ges o de paque es pa a Node.js. Pe mi e ins ala componen es y módulos de Reac Na i e y Expo
desde la en ana de comandos.
Anexo A: Ins alación y despliegue
116
116
Ilus ación 108 – Ejecu a ins alado de Node.js
T as inaliza el p oceso de ins alación, se puede comp oba la e sión de Node.js y de npm ins aladas en
el sis ema ejecu ando los comandos que apa ecen en la Ilus ación 109:
Ilus ación 109 – Comp oba la e sión de Node.js y npm
Pa a esc ibi el código del p oyec o se ha empleado la he amien a Visual S udio Code. Pa a pode
ins ala la, se debe accede a la página o icial [42] y selecciona el a chi o de ins alación pa a Windows
que apa ece en la Ilus ación 110:
117
117
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 110 – Desca ga a chi o de ins alación de Visual S udio Code pa a Windows
Una ez desca gado, se debe ab i el paque e de ins alación y escoge la con igu ación deseada, al y
como se mues a en la Ilus ación 111:
Ilus ación 111 – Ins ala Visual S udio Code
Pa a e i ica que se ha ins alado co ec amen e y con i ma la e sión, se ejecu a á el comando que
apa ece en la Ilus ación 112 a con inuación:

Anexo A: Ins alación y despliegue
118
118
Ilus ación 112 – Comp oba e sión de Visual S udio Code
T as ins ala lo, ya se puede inicializa una aplicación con Expo [43]. Pa a ello, p ime o se debe ins ala la
in e az de línea de comandos Expo CLI u ilizando el comando que se mues a en la Ilus ación 113:
Ilus ación 113 – Ins alación de Expo CLI
Una ez ins alada, se puede c ea un p oyec o de Reac Na i e con Expo ejecu ando el comando “expo
ini ”. En la consola apa ece á la opción de c ea un p oyec o Ja aSc ip o TypeSc ip , y elegi emos el
lenguaje Ja aSc ip . En la Ilus ación 114 se puede obse a la ejecución del comando:
Ilus ación 114 – C eación de un p oyec o Reac Na i e en Ja aSc ip u ilizando Expo CLI
T as c ea el p oyec o, se puede inicializa u ilizando el comando “npm s a ” que se mues a en la
Ilus ación 115. Es o ejecu a el comando “expo s a ” mencionado en el capí ulo 2 pa a inicia el
empaque ado de Ja aSc ip “Me o” y el se ido de desa ollo de Expo.
119
119
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 115 – Inicialización de la aplicación con npm
A.2 Despliegue del p oyec o con Gi Hub
Pa a gua da el p og eso del p oyec o y ealiza un con ol de e siones es ecomendable subi la ca pe a
del p oyec o a Gi Hub. Pa a ello, se deben segui los siguien es pasos:
P ime o, se debe ins ala la aplicación Gi Hub Desk op desde la página web o icial [44] y p esiona el
bo ón de desca ga el ins alado pa a Windows que apa ece en la Ilus ación 116:
Ilus ación 116 – Página de desca ga de Gi Hub Desk op
Una ez desca gado, se debe ab i el ins alado y a anza has a que e mine la ins alación. De es e modo,
apa ece á una en ana en la cual se pod á inicia sesión con una cuen a de Gi Hub o c ea una nue a, al
y como se mues a en la Ilus ación 117:
Anexo A: Ins alación y despliegue
120
120
Ilus ación 117 – Accede a una cuen a de Gi Hub con Gi Hub Desk op
Una ez accedido a una cuen a de Gi Hub, se puede c ea un nue o eposi o io, añadi un eposi o io
exis en e en local o clona un eposi o io de la nube. Pa a gua da los a ances de la aplicación, se
selecciona á la opción de c ea un nue o eposi o io. Es e se gua da á en el sis ema de a chi os del
o denado . Pa a subi o publica el eposi o io en la nube, se debe selecciona la opción de “Publica
eposi o io” que apa ece en Gi Hub Desk op. Una ez publicado, si se quie e gua da los cambios
ealizados en el p oyec o, se pueden subi a la nube p esionando el bo ón de “Push o igin”.
En el caso de que e ob ene un eposi o io alojado en la nube pa a pode ealiza p uebas se deben segui
los pasos siguien es:
En p ime luga , se debe ob ene la ca pe a donde se encuen a el código de la aplicación, que es á
alojada en el eposi o io de Gi Hub en la nube. Pa a almacena la ca pe a de o ma local, se debe clona
el eposi o io [45] desde la aplicación Gi Hub Desk op y así c ea un eposi o io local en el o denado .
En Gi Hub Desk op apa ece una opción pa a “Clona eposi o io” y, as pulsa la, apa ece á la en ana de
la Ilus ación 107, donde se pod á selecciona el eposi o io deseado o in oduci la URL pa a ob ene el
eposi o io de o ma manual. Además, se pod á elegi la ca pe a donde se almacena á de o ma local.
121
121
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
Ilus ación 118 – Clona eposi o io con Gi Hub Desk op
Anexo C: Código de las unciones pa a ealiza un en enamien o de una lis a
128
128
// Con e imos el obje o lis a en una cadena en o ma o JSON
jsonLis A ay = JSON.s ingi y(lis Video);
b eak;
}
}
else {
i ((JSON.pa se(i em).id) ==
(JSON.pa se((JSON.pa se(lis aAc ualT)). ideolis a[i]).id)){
numLis a = i;
le iempoEjFinal = iempoFinal;
le ho asFinal = ( iempoEjFinal.spli (":")[0]) * 3600;
le minu osFinal = iempoEjFinal.spli (":")[1] * 60;
le segundosFinal = iempoEjFinal.spli (":")[2] * 1;
le segundosTo alAc ual = (hou s * 3600) + (minu es * 60) +
seconds;
le segundosTo alFinal = ho asFinal + minu osFinal +
segundosFinal;
le segundosDescansoTo al = Ma h.abs(segundosTo alAc ual -
segundosTo alFinal);
le ho asDescanso = Ma h. ound(segundosDescansoTo al/60/60);
le minu ospa aDescanso = Ma h. ound(segundosDescansoTo al/60);
le minu osDescanso = Ma h. ound(minu ospa aDescanso % 60);
le segundosDminu os = Ma h. ound(segundosDescansoTo al %
60);
lis Video = JSON.pa se(lis A ay[i-1]);
i (ho asDescanso < 10){
ho asDescanso = "0" + ho asDescanso;
}
i (minu osDescanso < 10){
minu osDescanso = "0" + minu osDescanso;
}
i (segundosDminu os < 10){
segundosDminu os = "0" + segundosDminu os;
}
lis Video. iempoDescanso = ho asDescanso + ":" + minu osDescanso
+ ":" + segundosDminu os;
jsonLis A ay = JSON.s ingi y(lis Video);
b eak;
}
}
}
a lis aTiempo = {};

129
129
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
lis aTiempo.id = JSON.pa se(jsonLis A ay).id;
lis aTiempo.se ies = JSON.pa se(jsonLis A ay).se ies;
lis aTiempo. epe iciones = JSON.pa se(jsonLis A ay). epe iciones;
lis aTiempo. iempoRealizacion =
JSON.pa se(jsonLis A ay). iempoRealizacion;
i (jsonLis A ay !== ''){
lis aTiempo. iempoDescanso =
JSON.pa se(jsonLis A ay). iempoDescanso;
lis aTiempo. ideo = JSON.pa se(jsonLis A ay). ideo;
}
else {
lis aTiempo. iempoDescanso = '';
lis aTiempo. ideo = JSON.pa se(i em). ideos;
}
le newTiempo5 = '';
i (lis Video !== ''){
i (numLis a !== 1){
// Si hay más de un eje cicio en la lis a, se gua da á el iempo
de descanso del eje cicio an e io en la base de da os
newTiempo5 = . il e ((lis a) => lis a !== lis A ay[numLis a-1]);
}
else{
// Si solo hay un eje cicio en la lis a, se bo a án los iempos
de la base de da os
newTiempo5 = ;
newTiempo5.leng h=0;
}
console.log('newTiempo5 es: ', newTiempo5)
}
a jsonLis a = JSON.s ingi y(lis aTiempo);
newTiempo5.push(jsonLis a);
awai AsyncS o age.se I em("TIEMPO", JSON.s ingi y(newTiempo5));
awai AsyncS o age.ge I em("TIEMPO"). hen(( iempo) => {
console.log('El alo de los iempos es: ', iempo)
});
se FlagSa eTime( ue);
se FlagBu on( ue);
}
}
} ca ch(e o ){
console.log(e o )
}
}
Anexo C: Código de las unciones pa a ealiza un en enamien o de una lis a
130
130
“ iempoVideoRealizado” es la unción que se llama cuando se pulsa el bo ón de “Siguien e eje cicio”. Es a
unción es ablece el iempo inal del eje cicio y, si se han gua dado p e iamen e los iempos de los eje cicios
en la base de da os, calcula el iempo de ealización del eje cicio ac ual. Si no se han gua dado p e iamen e,
asigna el iempo ac ual como iempo de ealización del eje cicio.
cons iempoVideoRealizado = async(i em) => {
y{
// Gua damos el iempo de ealización inal del eje cicio
se TiempoFinal(hou s + ":" + minu es + ":" + seconds);
// Ob enemos los iempos de la base de da os
cons alo Tiempo = awai AsyncS o age.ge I em("TIEMPO");
cons = alo Tiempo ? JSON.pa se( alo Tiempo) : [];
i ( .leng h==0){
a lis aTiempo = {};
lis aTiempo.id = JSON.pa se(i em).id;
lis aTiempo.se ies = JSON.pa se(i em).se ies;
lis aTiempo. epe iciones = JSON.pa se(i em). epe iciones;
le ho as = '';
le minu os = '';
le segundos = '';
i (hou s < 10){
ho as = "0" + hou s;
}
else {
ho as = hou s;
}
i (minu es < 10){
minu os = "0" + minu es;
}
else {
minu os = minu es;
}
i (seconds < 10){
segundos = "0" + seconds;
}
else {
segundos = seconds;
}
lis aTiempo. iempoRealizacion = ho as + ":" + minu os + ":" + segundos;
lis aTiempo. iempoDescanso = '';
lis aTiempo. ideo = JSON.pa se(i em). ideos;
le newTiempo3 = ;
131
131
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
a jsonLis a = JSON.s ingi y(lis aTiempo);
newTiempo3.push(jsonLis a);
// Si no se han gua dado los iempos en la base de da os, se gua da el
iempo de ealización del eje cicio
awai AsyncS o age.se I em("TIEMPO", JSON.s ingi y(newTiempo3));
awai AsyncS o age.ge I em("TIEMPO"). hen(( iempo) => {
console.log('El alo de los iempos es: ', iempo)
});
se FlagBu on( alse);
// Si hay más de un eje cicio en la lis a, se a anza al siguien e
eje cicio
i ( lagOneVideo === alse){
se FlagTiempoInicial( ue);
}
se FlagTiempo(! lagTiempo);
}
else {
i ( iempoInicio !== ""){
le lis A ay = ;
le lis Video = '';
le ideoA ay = '';
le numVideo = '';
// Si se han gua dado los iempos en la base de da os, se calcula el
iempo de ealización del eje cicio
o (le i = 0; i < lis aInicialT. ideolis a.leng h; i++){
i ((JSON.pa se(i em).id) ==
(JSON.pa se(lis aInicialT. ideolis a[i]).id)){
numVideo = i;
le iempoEjInicial = iempoInicio;
le ho asInicial = ( iempoEjInicial.spli (":")[0]) * 3600;
le minu osInicial = iempoEjInicial.spli (":")[1] * 60;
le segundosInicial = iempoEjInicial.spli (":")[2] * 1;
le segundosTo alAc ual = (hou s * 3600) + (minu es * 60) +
seconds;
le segundosTo alInicial = ho asInicial + minu osInicial +
segundosInicial;
le segundosRealizacionTo al = Ma h.abs(segundosTo alAc ual -
segundosTo alInicial);
lis Video = JSON.pa se(lis aInicialT. ideolis a[i]);
ideoA ay = JSON.pa se(lis aInicialT. ideolis a[i]);
Anexo C: Código de las unciones pa a ealiza un en enamien o de una lis a
132
132
le ho asRealizacion = Ma h. ound(segundosRealizacionTo al/60/60);
le minu ospa aRealizacion =
Ma h. ound(segundosRealizacionTo al/60);
le minu osRealizacion = Ma h. ound(minu ospa aRealizacion % 60);
le segundosRminu os = Ma h. ound(segundosRealizacionTo al % 60);
i (ho asRealizacion < 10){
ho asRealizacion = "0" + ho asRealizacion;
}
i (minu osRealizacion < 10){
minu osRealizacion = "0" + minu osRealizacion;
}
i (segundosRminu os < 10){
segundosRminu os = "0" + segundosRminu os;
}
lis Video. iempoRealizacion = ho asRealizacion + ":" +
minu osRealizacion + ":" + segundosRminu os;
b eak;
}
}
a lis aTiempo = {};
lis aTiempo.id = JSON.pa se(i em).id;
lis aTiempo.se ies = JSON.pa se(i em).se ies;
lis aTiempo. epe iciones = JSON.pa se(i em). epe iciones;
i (lis Video !== ''){
lis aTiempo. iempoRealizacion = lis Video. iempoRealizacion;
}
else{
lis aTiempo. iempoRealizacion = JSON.pa se(i em). iempoRealizacion;
}
lis aTiempo. iempoDescanso = '';
lis aTiempo. ideo = JSON.pa se(i em). ideos;
le newTiempo4 = '';
i ( ideoA ay !== ''){
newTiempo4 = . il e ((lis a) => lis a !== lis A ay[numVideo]);
}
a jsonLis a = JSON.s ingi y(lis aTiempo);
newTiempo4.push(jsonLis a);
// Almacenamos el iempo de ealización del eje cicio
awai AsyncS o age.se I em("TIEMPO", JSON.s ingi y(newTiempo4));
awai AsyncS o age.ge I em("TIEMPO"). hen(( iempo) => {
133
133
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
console.log('El alo de los iempos es: ', iempo)
});
// Si hay más de un eje cicio en la lis a, se a anza al siguien e
eje cicio
se FlagBu on( alse);
i ( lagOneVideo === alse){
se FlagTiempoInicial( ue);
}
se FlagTiempo(! lagTiempo);
}
}
} ca ch(e o ){
console.log(e o )
}
}
“ iempoEje ciciosRealizados” es la unción que se llama cuando se pulsa el bo ón de “Gua da eje cicios”.
Es a unción es ablece el iempo inal del eje cicio y el iempo o al del en enamien o. Si se han gua dado
p e iamen e los iempos de los eje cicios en la base de da os, calcula el iempo de ealización del eje cicio
ac ual. Si no se han gua dado p e iamen e, asigna el iempo ac ual como iempo de ealización del eje cicio.
cons iempoEje ciciosRealizados = async(i em) => {
y{
// Gua damos el iempo inal del eje cicio ealizado y el iempo o al de
en enamien o
se TiempoFinal(hou s + ":" + minu es + ":" + seconds);
se TiempoTo al(hou s + ":" + minu es + ":" + seconds);
// Ob enemos los iempos de la base de da os
cons alo Tiempo = awai AsyncS o age.ge I em("TIEMPO");
cons = alo Tiempo ? JSON.pa se( alo Tiempo) : [];
i ( .leng h==0){
a lis aTiempo = {};
lis aTiempo.id = JSON.pa se(i em).id;
lis aTiempo.se ies = JSON.pa se(i em).se ies;
lis aTiempo. epe iciones = JSON.pa se(i em). epe iciones;
le ho as = '';
le minu os = '';
le segundos = '';
i (hou s < 10){
ho as = "0" + hou s;
}
else {
ho as = hou s;

Anexo C: Código de las unciones pa a ealiza un en enamien o de una lis a
134
134
}
i (minu es < 10){
minu os = "0" + minu es;
}
else {
minu os = minu es;
}
i (seconds < 10){
segundos = "0" + seconds;
}
else {
segundos = seconds;
}
lis aTiempo. iempoRealizacion = ho as + ":" + minu os + ":" + segundos;
lis aTiempo. iempoDescanso = '';
lis aTiempo. ideo = JSON.pa se(i em). ideos;
le newTiempo6 = ;
a jsonLis a = JSON.s ingi y(lis aTiempo);
newTiempo6.push(jsonLis a);
// Si no se han gua dado los iempos, almacenamos el iempo de
ealización del eje cicio en la base de da os
awai AsyncS o age.se I em("TIEMPO", JSON.s ingi y(newTiempo6));
awai AsyncS o age.ge I em("TIEMPO"). hen(( iempo) => {
console.log('El alo de los iempos es: ', iempo)
});
se FlagBu on( alse);
i ( lagOneVideo === alse){
se FlagTiempoInicial( ue);
}
se FlagTiempo(! lagTiempo);
}
else {
i ( iempoInicio !== ""){
le lis Video = '';
le ideoA ay = '';
// Si se han gua dado los iempos, calculamos el iempo de ealización
del eje cicio
o (le i = 0; i < lis aInicialT. ideolis a.leng h; i++){
i ((JSON.pa se(i em).id) ==
(JSON.pa se(lis aInicialT. ideolis a[i]).id)){
135
135
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
le iempoEjInicial = iempoInicio;
le ho asInicial = ( iempoEjInicial.spli (":")[0]) * 3600;
le minu osInicial = iempoEjInicial.spli (":")[1] * 60;
le segundosInicial = iempoEjInicial.spli (":")[2] * 1;
le segundosTo alAc ual = (hou s * 3600) + (minu es * 60) +
seconds;
le segundosTo alInicial = ho asInicial + minu osInicial +
segundosInicial;
le segundosRealizacionTo al = Ma h.abs(segundosTo alAc ual -
segundosTo alInicial);
lis Video = JSON.pa se(lis aInicialT. ideolis a[i]);
ideoA ay = JSON.pa se(lis aInicialT. ideolis a[i]);
le ho asRealizacion = Ma h. ound(segundosRealizacionTo al/60/60);
le minu ospa aRealizacion =
Ma h. ound(segundosRealizacionTo al/60);
le minu osRealizacion = Ma h. ound(minu ospa aRealizacion % 60);
le segundosRminu os = Ma h. ound(segundosRealizacionTo al % 60);
i (ho asRealizacion < 10){
ho asRealizacion = "0" + ho asRealizacion;
}
i (minu osRealizacion < 10){
minu osRealizacion = "0" + minu osRealizacion;
}
i (segundosRminu os < 10){
segundosRminu os = "0" + segundosRminu os;
}
lis Video. iempoRealizacion = ho asRealizacion + ":" +
minu osRealizacion + ":" + segundosRminu os;
b eak;
}
}
a lis aTiempo = {};
lis aTiempo.id = JSON.pa se(i em).id;
lis aTiempo.se ies = JSON.pa se(i em).se ies;
lis aTiempo. epe iciones = JSON.pa se(i em). epe iciones;
i (lis Video !== ''){
lis aTiempo. iempoRealizacion = lis Video. iempoRealizacion;
}
else{
lis aTiempo. iempoRealizacion = '';
}
Anexo C: Código de las unciones pa a ealiza un en enamien o de una lis a
136
136
lis aTiempo. iempoDescanso = '';
lis aTiempo. ideo = JSON.pa se(i em). ideos;
le newTiempo1 = '';
i ( ideoA ay !== ''){
newTiempo1 = . il e ((lis a) => (JSON.pa se(lis a).id !==
ideoA ay.id));
}
a jsonLis a = JSON.s ingi y(lis aTiempo);
newTiempo1.push(jsonLis a);
// Almacenamos el iempo de ealización del eje cicio en la base de
da os
awai AsyncS o age.se I em("TIEMPO", JSON.s ingi y(newTiempo1));
awai AsyncS o age.ge I em("TIEMPO"). hen(( iempo) => {
console.log('El alo de los iempos es: ', iempo)
});
se FlagBu on( alse);
i ( lagOneVideo === alse){
se FlagTiempoInicial( ue);
}
se FlagTiempo(! lagTiempo);
}
}
} ca ch(e o ){
console.log(e o )
}
}
“useE ec ” es el Hook que se ejecu a cuando cambia el alo de la a iable de es ado “ lagTiempo”. Si se ha
pulsado el bo ón Siguien e, y no se ha llegado al inal de la lis a, a anza al p óximo eje cicio. Si se pulsa el
bo ón “Gua da eje cicio”, llama a la unción “gua da TiemposEje cicios”.
useE ec (() => {
i (isMoun ed=== ue){
// Si se ha pulsado el bo ón Siguien e, se a anza al p óximo eje cicio
i ( lagOneVideo === alse && lagTiempoInicial === ue){
pulsa Siguien e();
// Si se ha llegado al úl imo eje cicio, se ac ualiza la lis a
i (cu en Sec ionIndex >= ((lis aAc ualT !== '') ?
(JSON.pa se(lis aAc ualT). ideolis a.leng h-2) :
(lis aInicialT. ideolis a.leng h-2))) {
137
137
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
se FlagBu onGua da ( ue);
}
}
// Si se ha pulsado el bo ón Gua da , gua damos el iempo de ealización
y descanso de los eje cicios
i ( lagTiempoP ess === ue){
gua da TiemposEje cicios();
}
}
e u n () => {
isMoun ed = alse;
};
}, [ lagTiempo]);
“gua da TiemposEje cicios” es la unción que se llama si se ha pulsado el bo ón de “Gua da eje cicios”. Es a
unción gua da el iempo de ealización y de descanso de los eje cicios en el campo “ iemposEje cicios” del
his o ial de en enamien o ac ual. Además, ellena el es o de los campos del his o ial de en enamien o y lo
almacena en el campo “his o ial” de la lis a. Finalmen e, almacena la lis a en la base de da os local.
cons gua da TiemposEje cicios = async() => {
y{
// Ob enemos las lis as y los iempos de la base de da os
cons alo Lis as = awai AsyncS o age.ge I em("LISTAS");
cons l = alo Lis as ? JSON.pa se( alo Lis as) : [];
cons alo Tiempo = awai AsyncS o age.ge I em("TIEMPO");
cons = alo Tiempo ? JSON.pa se( alo Tiempo) : [];
// Ob enemos la echa ac ual
a dia = new Da e().ge Da e();
a mes = new Da e().ge Mon h() + 1;
a año = new Da e().ge FullYea ();
a echa = dia + '-' + mes + '-' + año;
le lis aHis = '';
a lis aHis o ial = {};
lis aHis o ial.idHis o ial = (Ma h. ound(Ma h. andom() *
1000)). oS ing();
i (lis aAc ualT !== '' && lis aAc ualT !== unde ined) {
lis aHis = JSON.pa se(lis aAc ualT);
}
else {
lis aHis = lis aInicialT;
}
// Comp obamos que los id de los his o iales de en enamien o sean únicos
en la lis a
Re e encias
144
144
[14]
Facebook, 3 de sep iemb e de 2019. useFocusE ec . Recupe ado de: h ps:// eac na iga ion.o g/docs/use-
ocus-e ec /. [Úl imo acceso: 10/11/2022]
[15]
Facebook, 5 de sep iemb e de 2022. AsyncS o age. Recupe ado de:
h ps:// eac na i e.de /docs/asyncs o age. [Úl imo acceso: 10/11/2022]
[16]
B ex, 17 de julio de 2014. Expo. Recupe ado de: h ps://expo.de /. [Úl imo acceso: 11/11/2022]
[17]
B ex, 3 de agos o de 2017. API Re e ence. Recupe ado de: h ps://docs.expo.de / e sions/la es /. [Úl imo
acceso: 11/11/2022]
[18]
Fundación OpenJS, 9 de oc ub e de 2009. Node.js. Recupe ado de: h ps://nodejs.o g/en/. [Úl imo acceso:
11/11/2022]
[19]
Facebook, 5 de diciemb e de 2017. Me o, The Ja aSc ip bundle o Reac Na i e. Recupe ado de:
h ps:// acebook.gi hub.io/me o/. [Úl imo acceso: 11/11/2022]
[20]
B ex, 24 de ab il de 2020. Expo CLI. Recupe ado de: h ps://docs.expo.de /wo k low/expo-cli/. [Úl imo
acceso: 11/11/2022]
[21]
B ex, 22 de ab il de 2020. Wo k lows. Recupe ado de: h ps://docs.expo.de /in oduc ion/managed- s-
ba e/. [Úl imo acceso: 11/11/2022]
[22]
S a e So wa e, 26 de ene o de 2009. In oducción a JSON. Recupe ado de: h ps://www.json.o g/json-
es.h ml. [Úl imo acceso: 12/11/2022]
[23]
Mic oso , 1 de ene o de 2017. Why did we build Visual S udio Code?. Recupe ado de:
h ps://code. isuals udio.com/docs/edi o /why scode. [Úl imo acceso: 13/11/2022]
[24]
Mic oso , 29 de agos o de 2022. Use In e ace. Recupe ado de:
h ps://code. isuals udio.com/docs/ge s a ed/use in e ace. [Úl imo acceso: 13/11/2022]
[25]
B ex, 14 de sep iemb e de 2022. Expo Go. Recupe ado de: h ps://docs.expo.de /wo k low/expo-go/.
[Úl imo acceso: 13/11/2022]
[26]
Linux, 22 de ab il de 2012. Gi . Recupe ado de: h ps://gi -scm.com/. [Úl imo acceso: 13/11/2022]
[27]
Mic oso , 27 de agos o de 2020. Ge ing s a ed wi h Gi Hub Desk op. Recupe ado de:
h ps://docs.gi hub.com/en/desk op/ins alling-and-con igu ing-gi hub-desk op/o e iew/ge ing-s a ed-
wi h-gi hub-desk op. [Úl imo acceso: 14/11/2022]
[28]
Koushik Du a, 25 de agos o de 2015. Vyso - A window o you Phone. Recupe ado de:
h ps://www. yso .io/. [Úl imo acceso: 14/11/2022]
[29]
JG aph L d, 22 de diciemb e de 2019. Diag ams.ne . Recupe ado de: h ps://www.diag ams.ne /. [Úl imo
acceso: 14/11/2022]
[30]
Visual Pa adigm In e na ional L d, 17 de ma zo de 2009. Visual Pa adigm. Recupe ado de:
h ps://www. isual-pa adigm.com/. [Úl imo acceso: 20/11/2022]

145
145
Aplicación mó il pa a la ges ión de lis as de eje cicios de en enamien o en Reac Na i e
[31]
Can a, 16 de junio de 2015. Pixabay. Recupe ado de: h ps://pixabay.com/es/. [Úl imo acceso:
14/11/2022]
[32]
B uno Joseph, 26 de eb e o de 2019. Pexels. Recupe ado de: h ps://www.pexels.com/es-es/. [Úl imo
acceso: 14/11/2022]
[33]
B ex, 27 de ma zo de 2018. ImagePicke . Recupe ado de:
h ps://docs.expo.de / e sions/la es /sdk/imagepicke /. [Úl imo acceso: 19/11/2022]
[34]
B ex, 27 de eb e o de 2018. Sha ing. Recupe ado de:
h ps://docs.expo.de / e sions/ 47.0.0/sdk/sha ing/. [Úl imo acceso: 19/11/2022]
[35]
B ex, 29 de julio de 2021. Documen Picke . Recupe ado de:
h ps://docs.expo.de / e sions/la es /sdk/documen -picke /. [Úl imo acceso: 20/11/2022]
[36]
B ex, 22 de no iemb e de 2022. FileSys em. Recupe ado de:
h ps://docs.expo.de / e sions/la es /sdk/ ilesys em/. [Úl imo acceso: 20/11/2022]
[37]
Facebook, 5 de sep iemb e de 2022. Modal. Recupe ado de: h ps:// eac na i e.de /docs/modal. [Úl imo
acceso: 28/11/2022]
[38]
B ex, agos o de 2022. Building S andalone Apps. Recupe ado de: h ps://docs.expo.de /a chi e/classic-
upda es/building-s andalone-apps/? edi ec ed. [Úl imo acceso: 01/12/2022]
[39]
B ex, 11 de diciemb e de 2020. C ea ing you i s build. Recupe ado de:
h ps://docs.expo.de /build/se up/. [Úl imo acceso: 01/12/2022]
[40]
Fundación OpenJS, 27 de julio de 2016. Desca gas. Recupe ado de: h ps://nodejs.o g/es/download/.
[Úl imo acceso: 02/12/2022]
[41]
npm Inc, 17 de eb e o de 2014. npm. Recupe ado de: h ps://www.npmjs.com/. [Úl imo acceso:
02/12/2022]
[42]
Mic oso , 29 de ab il de 2015. Download Visual S udio Code. Recupe ado de:
h ps://code. isuals udio.com/download. [Úl imo acceso: 02/12/2022]
[43]
B ex, 10 de no iemb e de 2022. C ea e you i s app. Recupe ado de:
h ps://docs.expo.de / u o ial/c ea e-you - i s -app/. [Úl imo acceso: 03/12/2022]
[44]
Mic oso , 21 de mayo de 2012. Gi Hub Desk op. Recupe ado de: h ps://desk op.gi hub.com/. [Úl imo
acceso: 03/12/2022]
[45]
Mic oso , 17 de mayo de 2022. Cloning a eposi o y. Recupe ado de:
h ps://docs.gi hub.com/en/ eposi o ies/c ea ing-and-managing- eposi o ies/cloning-a- eposi o y. [Úl imo
acceso: 03/12/2022]
Re e encias
146
146