Universidad Nacional de Colombia 

Facultad de Ingeniería 
Ingeniería de Sistemas y Computación 
 
 
Arquitectura de Software 
Grupo 1B 
 
 
Laboratorio #4: 
Front-End Architecture 
 
 
Jeisson Andrés Vergara Vargas 
Docente 
 
 
Gustavo Gálvez Bello 
Miguel Alfredo Medellín Ráquira 
Oscar Fabian Mendez 
Brayan Alexander Riascos Ruiz 
Juan David Solano Salazar 
Edinson Vega Barrera 
Estudiantes 
 
 
 
Bogotá, Abril 2020 
 Laboratorio #4: Front-End Architecture 
 
1. Componente Web 
● React [​1​][​2​][​3​] 

React  es  una  biblioteca  de  JavaScript  hecha  para  construir  interfaces  de 
usuario.  Es  mantenido  por  Facebook  y  una  comunidad  de  desarrolladores  y 
empresas individuales.  
 
Sirve  para  desarrollar  aplicaciones  web  de  una  manera  más  ordenada  y  con 
menos  código  que  si  usas  Javascript  puro  o  librerías  como  jQuery centradas en 
la  manipulación  del  DOM.  Permite  que  las  vistas  se  asocian  con  los  datos,  de 
modo que si cambian los datos, también cambian las vistas. 
 
La  arquitectura  básica  de  React  se  aplica  más  allá  de  representar  HTML  en  el 
navegador.  Por  ejemplo,  Facebook  tiene gráficos dinámicos que se procesan en 
la  etiqueta  <canvas>,  Netflix  y  PayPal  usan  estas  técnicas  para  representar 
HTML idéntico tanto en el servidor como en el cliente. 
 
Ya  en  comparación  con  frameworks  como  es  el caso de Angular o Ember, React 
se  queda  a  mitad  de  camino,  pues  no  incluye  todo  lo  que  suele  ofrecer  un 
framework  completo.  Pero  a  partir de todo el ecosistema de React se llega más 
o menos a las mismas funcionalidades, así que es una buena alternativa. 
 
 
En React, todo es un componente. 
Los  componentes  son  los  componentes básicos de la interfaz de usuario de una 
aplicación  React.  Estos componentes dividen la interfaz de usuario completa en 
pequeñas  piezas  independientes  y  reutilizables.  A  continuación,  hace  que  cada 
uno  de  estos  componentes  sea  independiente  entre  sí  sin afectar al resto de la 
interfaz de usuario. 
 
 
 
 
 
 
El propósito de render () en React. 
Cada  componente  React  debe  tener  un  render  ()  de  forma  obligatoria. 
Devuelve  un  solo  elemento  React  que  es  la  representación  del  componente 
DOM  nativo.  Si  más  de  un  elemento  HTML  necesita  ser  renderizado,  entonces 
deben ser agrupados dentro de una etiqueta padre como 
 
<form>, <group>, 
 
<div>,  etc.  Esta  función  debe  mantenerse  pura,  es  decir,  debe  devolver  el 
mismo resultado cada vez que se invoca. 
 
¿Qué son las props? 
Las  props  son  la  abreviatura  para  Propiedades  en  React.  Son  componentes  de 
sólo  lectura  que  deben  mantenerse  puros,  es  decir,  inmutables.  Siempre  se 
transmiten  de  los  componentes  padre  a  hijo  a  través  de  la  aplicación.  Un 
componente  secundario  no  puede enviar nunca una prop al componente padre. 
Esto  ayuda  a  mantener  el  flujo  de  datos  unidireccional  y  se  utilizan 
generalmente para renderizar los datos generados dinámicamente. 
 
 
Ejemplo estructura básica de un proyecto en React: 
Aunque  sabemos  que  React  es  una  librería,  aquí  un  ejemplo  recomendado  de 
estructura para un proyecto en React. 
 

 
 
 
 
 
  
● Vue.js [​4​][​5​][​6]​  

Es  un  framework  progresivo  para  construir  interfaces  de  usuario.  A  diferencia 
de  otros  frameworks  monolíticos,  Vue  está  diseñado  desde  cero  para  ser 
utilizado  incrementalmente.  La  librería  central está enfocada solo en la capa de 
visualización,  y  es  fácil  de  utilizar  e  integrar  con  otras  librerías  o  proyectos 
existentes.  Cuando  se  realiza  un  proyecto  con  VueJS,  podemos  indicar  qué 
partes  del  framework  queremos incluir. VueJS está modularizado en diferentes 
librerías  separadas  que  permiten  ir  añadiendo  funcionalidad  en  el  momento 
que las vayamos necesitando. Lo que diferencia a VueJS de otras alternativas es 
lo  bien  desacopladas  que se encuentran estas partes, lo fácil que es extender la 
funcionalidad  core  y  lo  bien  que  trabajan  todas  sus  partes  una  vez  que  se 
decide  incluir  más  módulos.  El  core  principal  de  VueJS  está  formado  por  una 
librería  encargada  de  renderizar  vistas  en  el  navegador.  Su  forma  de  organizar 
el  código  es  por  medio  de  pequeños  componentes  que  contienen  todo  el 
HTML,  CSS  y  JavaScript  necesario  para  funcionar  como  pieza  independiente. 
Estas  piezas  se  van  componiendo  en  un árbol jerárquico de componentes hasta 
formar  nuestra  aplicación.  Usar  esta  librería  es  tan fácil como importar el script 
en nuestra página HTML. 
 
Componentes:  En  VueJS,  los  componentes  gestionan  un  modelo  de  datos 
interno.  Estos  componentes  están  diseñado  bajo  el  patrón  MVVM.  Esto  quiere 
decir  que  el  desarrollador  no  tiene  que  preocuparse  tanto  por  cómo  o  cuando 
renderiza  un  modelo  en  pantalla  y  sí  más  en  cómo  tiene  que  ser  la  lógica  que 
gestiona  ese  modelo.  El  renderizado  de  HTML  es  delegado  a  la  librería. 
Nosotros  simplemente  jugamos  con  datos,  métodos  y  plantillas  HTML  donde 
indicamos cuando se tiene que pintar cada parte del modelo. 
 
El  sistema  de  componentes  es  reactivo:  VueJS  sabe  comunicarse  muy  bien  por 
medio  de  eventos  asíncronos.  Un  componente  hijo  se  puede  comunicar  con  su 
componente  padre  por  medio  de  eventos.  Dos  partes  del  sistema  pueden 
comunicarse  por  medio  de  eventos.  Los  propios  modelos  de  un  componente 
son  capaces  de  enviar  eventos  para  indicar  cuándo  renderizarse.  El  sistema  de 
componentes  se  convierte  en  un  organismo  vivo  que  reacciona  muy  bien  al 
cambio  y  realiza  acciones  programadas  por el desarrollador. Esto se debe a que 
el  modelo  de  datos  del  componente  es  envuelto  por  getters  y  setters 
especiales encargados de gestionar estas reacciones. 
 
En  Vue  Todo  el  HTML,  CSS  y  JS  está  junto,  pero  no  revuelto.  Gracias  a  las 
etiquetas  template,  script  y  style,  tengo  los  conceptos  separados,  pero  juntos, 
de  esta  forma  es  más  fácil  reutilizar  ficheros  en  más  de  un  proyecto.  Todo  el 
contenido  queda  más  claro.  Si  el  desarrollador  está  trabajando  en  un 
componente en particular, tiene todo a la vista. 
 
Estructura básica de un proyecto en Vue: 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ● Angular[​7​][​8​] 

AngularJS  es  un  marco  estructural  para  aplicaciones  web  dinámicas.  ESta 
tecnología  permite  usar  HTML  como  el  lenguaje  de  plantilla  para  la  estructura 
de  las  páginas  web  y  permite  extender  la  sintaxis  de  HTML  para  expresar  los 
componentes  de  su  aplicación  de  manera  clara  y  sucinta.  El  enlace  de datos de 
AngularJS  y  la  inyección  de dependencia eliminan gran parte del código, lo cual 
evita  escribir  código al desarrollador. Además los cambios o carga de trabajo en 
AngularJS  se  hace directamente sobre el navegador, lo cual disminuye carga de 
trabajo al servidor. 
 
AngularJS  es  probablemente  uno  de  los  marcos  web  modernos  más  populares 
disponibles  en  la  actualidad.  Este  marco  se  utiliza  para  desarrollar 
principalmente  aplicaciones  de  una  sola  página.  Este  marco  ha  sido 
desarrollado por un grupo de desarrolladores de Google. 
 
Características de AngularJS  

1. Enlace  del  modelo  de  datos  :  no  se  necesita  escribir  código  especial  para 
enlazar  datos  a  los  controles  HTML.  Angular  puede  hacer  esto  simplemente 
agregando algunos fragmentos de código. 
2. Escribir menos código : al realizar la manipulación del DOM, se requería mucho 
JavaScript  para  diseñar  cualquier  aplicación.  Pero  con  Angular,  se  escribe 
menos código para la manipulación del DOM. 
3. MVC​: el marco se basa en el famoso concepto de MVC (Model-View-Controller). 
Este es un patrón de diseño utilizado en todas las aplicaciones web modernas.  

 
  

El  ​controlador  representa  la  capa  que  tiene  la  lógica 

empresarial.  Los  eventos  del  usuario  activan  las 
funciones  que  están  almacenadas  dentro  de  su 
controlador.  Los  eventos  del  usuario  son  parte  del 
controlador. 

Las  ​vistas  se  utilizan  para  representar  la  capa  de 

presentación que se proporciona a los usuarios finales. 

Los ​modelos​ se utilizan para representar sus datos.  

Angular.js  mantiene  sincronizados  los  datos  y  la  capa  de  presentación..  Sólo se 
necesita  especificar  qué  controlador  está  vinculado  a  qué  parte  del  modelo  y 
AngularJS se encarga de actualizar en la página, los datos.  

 
 
 
 
 2. Componente Móvil  
 

Para Android: 
El  SDK  (Software  Development  Kit)  de Android es un conjunto de herramientas 
de  desarrollo.  Comprende  un  depurador  de  código,  una  biblioteca,  un 
simulador  de  teléfono  basado  en  QEMU,  documentación,  ejemplos  de código y 
tutoriales.  Los  principales  lenguajes  de  programación  usados  en  el  SDK  son 
Java y​ ​Kotlin​ (Kotlin a partir de Android 9, nivel 28 de la API). 
 
● Java[​9​] 

Java  ​es  un  lenguaje  de  programación  y  una  plataforma  informática 

comercializada por primera vez en 1995 por Sun Microsystems​.  
 
Java  es  un  lenguaje  que  ofrece  manejo  automático  de  la  memoria  y  cuyos 
objetos  no  hacen  referencia  a  datos  fuera  de  sí  mismos  o  de  otros  objetos  de 
Java.  Esto  hace  imposible  que  una  instrucción  de  Java  pueda  corromper  la 
memoria  o  comprometer  los  datos  de  otras  aplicaciones  o  del  propio  sistema 
operativo.  La  máquina  virtual  realiza  todo  tipo  de  comprobaciones  para 
asegurar  la  integridad  que  impiden  que  pueda  romper  el  sistema  operativo  u 
otros programas. 
 
Arquitectura Interna 
Las  aplicaciones  Android  desarrolladas  con Java (e incluso Kotlin) tienen cuatro 
tipos de componentes diferentes: 

● Actividades: 
Una  ​actividad  es  el  punto  de  entrada  de  interacción  con  el  usuario. 
Representa  una  pantalla  individual  con  una  interfaz  de  usuario.  Por 
ejemplo,  una  aplicación  de  correo  electrónico  tiene  una  actividad  que 
muestra  una  lista  de  los  correos  electrónicos nuevos, otra actividad para 
redactar  el  correo  electrónico  y  otra  actividad  para  leerlo.  Las 
actividades se implementan como subclases de la clase​ ​Activity​. 
 

 
 ● Servicios: 
Un  ​servicio  es  un  punto  de  entrada  general  que  permite  mantener  la 
ejecución  de  una  aplicación  en  segundo  plano  por  diversos  motivos.  Es 
un  componente  que  se  ejecuta  en  segundo  plano  para  realizar 
operaciones  de  ejecución  prolongada  o  para  realizar  tareas  de  procesos 
remotos.  Un  servicio  no  proporciona  una  interfaz  de  usuario.  Otro 
componente,  como  una  actividad,  puede  iniciar el servicio y permitir que 
se  ejecute  o  enlazarse  a  él  para  interactuar.  Un  servicio  se  implementa 
como una subclase de ​Service​. 
 
● Receptores de emisiones: 
Un  ​receptor  de  emisión  es  un  componente  que  posibilita  que  el  sistema 
entregue eventos a la aplicación fuera de un flujo de usuarios habitual, lo 
que  permite  que  la  aplicación  responda  a  los  anuncios  de  emisión  de 
todo  el sistema. Dado que los receptores de emisión son otro punto bien 
definido  de  entrada  a  la  aplicación,  el sistema puede entregar emisiones 
incluso  a  las  aplicaciones  que  no  estén  en  ejecución.  Las  aplicaciones 
también  pueden  iniciar  emisiones,  por  ejemplo,  para  avisarles  a  las 
demás  aplicaciones  que  se  descargaron  datos  al  dispositivo  y  que  están 
disponibles  para  el  uso. Si bien los receptores de emisión no exhiben una 
interfaz  de  usuario,  pueden  crear  una  notificación  de  la  barra  de  estado 
para  alertar  al  usuario  cuando  se  produzca  un  evento  de  emisión.  Un 
receptor  de  emisión  se  implementa  como  una  subclase  de 
BroadcastReceiver  ​y  cada  receptor  de  emisión  se  entrega  como  un 
objeto ​Intent​. 
 
● Proveedores de contenido: 
Un  ​proveedor  de  contenido  administra  un  conjunto  compartido  de  datos 
de  la  aplicación  que  puedes  almacenar  en  el  sistema  de  archivos, en una 
base  de  datos  SQLite,  en  la  Web  o  en  cualquier  otra  ubicación  de 
almacenamiento persistente a la que tenga acceso tu aplicación. A través 
del  proveedor  de  contenido,  otras  aplicaciones  pueden  consultar  o 
modificar  los  datos  si  el  proveedor  de  contenido  lo  permite.  Para  el 
sistema,  un  proveedor  de  contenido  es  un  punto  de  entrada  a  una 
aplicación  para  publicar  elementos  de  datos  con  nombre  y  se  identifica 
mediante  un  esquema de URI.Un proveedor de contenido se implementa 
como  una  subclase  de  ​ContentProvider ​y debe implementar un conjunto 
estándar de API que permitan a otras aplicaciones realizar transacciones. 

 
Para que el sistema Android pueda iniciar un componente de la aplicación, debe 
reconocer  la  existencia de ese componente leyendo el archivo de manifiesto de 
la  aplicación  (AndroidManifest.xml).  Tu  aplicación  debe  declarar  todos  sus 
componentes  en  este  archivo,  que debe encontrarse en la raíz del directorio de 
proyectos  de  la  aplicación.  El  manifiesto  puede  hacer  ciertas  cosas  además  de 
declarar los componentes de la aplicación, por ejemplo: 

● Identificar  los  permisos  de  usuario  que  requiere  la  aplicación,  como 
acceso a Internet o acceso de lectura para los contactos del usuario. 
● Declarar  el  nivel  de  API  mínimo  que  requiere  la  aplicación  en  función de 
las API que usa. 
● Declarar  características  de  hardware  y  software  que  la  aplicación  usa  o 
exige,  como  una  cámara,  servicios  de  Bluetooth  o  una  pantalla 
multitáctil. 
● Declarar  bibliotecas  de  la  API  a  las  que  la  aplicación  necesita  estar 
vinculada  (además  de  las  API  del  marco  de  trabajo  de  Android),  como  la 
biblioteca de Google Maps. 

 
 
 
 
 
 
 
 
● Kotlin [​10​][​11​] 

Kotlin  es  un  lenguaje  de  programación  de  tipado  estático  que  corre  sobre  la 
máquina  virtual  de  Java y que también puede ser compilado a código fuente de 
JavaScript​.  Es  desarrollado  principalmente  por  ​JetBrains  ​en  sus  oficinas  de ​San 
Petersburgo  (Rusia).  El  nombre  proviene  de  la  ​isla  de  Kotlin​,  situada  cerca  de 
San Petersburgo. 
 
Kotlin  brinda  interoperabilidad  completa  con  el  lenguaje  Java,  así  que  realizar 
llamadas  a  las  API  de  Android  suele  verse  como  el  código  de  Java 
correspondiente,  salvo  que  ahora  puedes  combinar  esas  llamadas  de  método 
con las funciones de sintaxis de Kotlin. 
 
Arquitectura Interna 
Para  utilizar  Kotlin  en  Android  se  sigue  la  arquitectura  sugerida  por  Android 
Jetpack,  que  contiene  Android  KTX,  que  es  un  conjunto  de  extensiones  de 
Kotlin. 
 
Describiremos la arquitectura establecida en Android Jetpack para el desarrollo 
en Android usando el lenguaje Kotlin. 
 
Android  Jetpack  es  un  conjunto  de  bibliotecas,  herramientas  y  guías  para 
ayudar  a  los  desarrolladores  a  crear  apps  de  alta  calidad de forma más sencilla. 
Estos  componentes  te  ayudan  a  seguir  recomendaciones,  te  liberan  de  escribir 
código  estándar  y  simplifican tareas complejas para que puedas enfocarte en el 
código que realmente te interesa. 
Jetpack  incluye  bibliotecas  de  paquetes  de  android.* desglosadas de las API de 
la  plataforma.  Esto  significa  que  ofrece  retrocompatibilidad  y  se  actualiza  con 
mayor  frecuencia  que  la  plataforma  de  Android,  de  manera  que  siempre 
tendrás  acceso  a  las  mejores  y  más  recientes  versiones  de  los componentes de 
Jetpack. 
 
 
 
 
 
 
 
Componentes de Android Jetpack 
Los  componentes  de  Android  Jetpack  son  una  colección  de  bibliotecas  que  se 
pueden  usar  de  manera  individual,  aunque  fueron  diseñados  para  funcionar en 
conjunto  al  mismo  tiempo  que  aprovechas  las  características  del  lenguaje 
Kotlin  que  te  permiten  aumentar  la  productividad.  A  continuación  describimos 
cada de estos componentes: 
 
Foundation 
Los  componentes  de  Foundation  ofrecen  funcionalidades  interrelacionadas, 
como retrocompatibilidad, pruebas y compatibilidad con el lenguaje Kotlin. 
 
● Android KTX 
Escribe código Kotlin más idiomático y conciso 
● AppCompat 
Degradación elegante a versiones anteriores de Android 
● Car 
Componentes para ayudar a desarrollar apps para Android para vehículos 
● Benchmark 
Permite obtener rápidamente comparativas de nuestro código basado en 
Kotlin o en Java dentro de Android Studio 
● Multidex 
Brinda compatibilidad con apps con varios archivos DEX 
● Seguridad 
Lee y escribe archivos encriptados y preferencias compartidas siguiendo 
prácticas recomendadas de seguridad 
● Test 
Marco de trabajo de Android para pruebas de IU de unidades y tiempo de 
ejecución 
● TV 
Componentes que ayudan a desarrollar apps para Android TV 
● Wear OS by Google 
Componentes que ayudan a desarrollar apps para Wear 

Arquitectura 
Los  componentes  de  la  arquitectura  ayudan  a diseñar apps sólidas, que puedan 
someterse a pruebas y admiten mantenimiento. 

● Vinculación de datos 
Vincula datos observables a elementos de IU de manera declarativa 
● Lifecycles 
Administra los ciclos de vida de tu actividad y tú fragmento 
● LiveData 
Notifica las vistas cuando la base de datos subyacente cambia 
● Navegación 
Administra todo lo necesario para la navegación desde la app 
● Paging 
Carga información de tu fuente de datos de manera gradual según la 
demanda 
● Room 
Acceso fluido a la base de datos SQLite 
● ViewModel 
Administra los datos relacionados con la IU de manera optimizada para los 
ciclos de vida 
● WorkManager 
Administra tus tareas de Android en segundo plano 

Comportamiento 
Los  componentes  de  comportamiento  ayudan  a  tu  app  a  integrarse  con 
servicios  estándar  de  Android,  como  las  notificaciones,  los  permisos,  el  uso 
compartido y el Asistente. 

● CameraX 
Agrega fácilmente funciones de cámara a tus apps 
● Contenido multimedia y reproducción 
API compatibles con versiones anteriores para la reproducción y el 
enrutamiento de contenido multimedia (incluido Google Cast) 
● Notificaciones 
Proporciona una API de notificación compatible con versiones anteriores 
que admite Wear y Auto 
● Permisos 
API de compatibilidad para verificar y solicitar permisos de apps 
● Preferencias 
Crea pantallas de configuración interactivas 
● De uso compartido 
Proporciona una acción compartida apta para la barra de acción de una app 
● Secciones 
Crea elementos de IU flexibles que pueden mostrar datos de la app fuera 
de ella 

IU 
Los  componentes  de  IU ofrecen widgets y asistentes para lograr que tu app sea 
tan  fácil  de  usar  como  atractiva.  Obtén  más  información  sobre  Jetpack 
Compose, que ayuda a simplificar el desarrollo de IU. 

● Animaciones y transiciones 
Mueve widgets y alterna entre pantallas 
● Emoji 
Habilita una fuente de emoji actualizada en una plataforma anterior 
● Fragment 
Unidad básica de IU componible 
 ● Diseño 
Implementa widgets con diferentes algoritmos 
● Paleta 
Obtén información útil de las paletas de colores 
● ViewPaper2 
Crea vistas deslizables entre pestañas 
● WebView 
Publica una página web o una aplicación web como parte de una app 

Estructura de un proyecto en Kotlin con Android 

 
 
 
 
 
 
 ● Android NDK [​12​] 

Android  NDK  (Android  Native  Development  Kit)  ​es  un  conjunto  de 
herramientas  que te permiten incorporar código ​C o C++ ("código nativo") a tus 
apps de Android. 
 
La  capacidad  para  usar  código  nativo  en  apps  de  Android  puede  ser 
particularmente  útil  para  los  desarrolladores  que  deseen  realizar  una  o  varias 
de las siguientes acciones: 
 
● Conectar sus apps entre plataformas. 
● Reutilizar  bibliotecas  existentes  o  proporcionar  sus  propias  bibliotecas 
para reutilizarlas. 
● Aumentar  el  rendimiento  en  ciertos  casos,  en  especial  los  de  mayor 
exigencia computacional, como el de los ​juegos​ y ​simulaciones físicas​. 
 
Arquitectura Interna 
Componentes principales 
Es  importante  comprender  los  siguientes  componentes  a  medida  que  compila 
tu app: 
 
● Bibliotecas  compartidas  nativas:  El  NDK  compila  estas  bibliotecas,  o 
archivos​ .
​ so​
,​ a partir de tu código fuente de C/C++. 
● Bibliotecas  estáticas  nativas:  El  NDK  también  puede  compilar 
bibliotecas  estáticas,  o  archivos  . ​ a​
,  ​,  que  puedes  vincular  con  otras 
bibliotecas. 
● Interfaz  nativa  de  Java  (JNI):  ​Es  la  interfaz  mediante  la  cual  los 
componentes Java y C++ se comunican entre sí. 
● Interfaz binaria de aplicaciones (ABI): La ABI define exactamente cómo 
se  espera  que  el  código  máquina  de  tu  app  interactúe  con  el  sistema en 
el  tiempo  de  ejecución.  El  NDK  compila  archivos  . ​ so    según  estas 
definiciones.  Las  diferentes  ABI  corresponden  a  las  distintas 
arquitecturas:  El  NDK  incluye  compatibilidad  con  ABI  para  ARM  de  32 
bits, AArch64, x86 y x86-64. 
 
 
 
 ● Manifiesto:  Todos  los  proyectos  de  apps  deben  tener  un  archivo 
AndroidManifest.xml  (con  ese  mismo  nombre)  en  la  raíz  de  la  fuente 
del  proyecto.  El  archivo  de  manifiesto  describe  información  esencial  de 
la  aplicación  para  las  herramientas  de  creación  de  Android,  el  sistema 
operativo Android y Google Play. 
 
Si  se  escribe  una  app  sin  componentes  Java,  es  necesario  declarar  la 
clase  N ​ ativeActivity  ​ en  el  manifiesto,  utilizando  la  interfaz 
native_activity.h​o a ​ ndroid_native_app_glue.h​ . 
 
Flujo 
El flujo general para desarrollar una app nativa para Android es el siguiente: 
 
1. Diseña  la  app  y decidir las partes que implementara en Java, así como las 
que implementara como código nativo. 
Nota:  ​Si  bien  es  posible  evitar  el  uso  de  Java  completamente,  quizá 
resulte  útil  el  marco  de  trabajo  de  Java  para  Android  para  tareas  que 
incluyen el control de la pantalla y la interfaz de usuario. 
2. Crea  un  proyecto  de  aplicación  para  Android  como  lo  haría  en  cualquier 
otro proyecto de Android. 
3. Si  se  escribe  una  app  nativa,  declara  la  clase  N ​ ativeActivity  en 
AndroidManifest.xml​ . 
4. Crea  un  archivo  A ​ ndroid.mk  que  describa  la  biblioteca  nativa  y  que 
también  incluya  el  nombre,  las  marcas,  las  bibliotecas  vinculadas  y  los 
archivos de origen que se van a compilar en el directorio "JNI". 
5. De  manera  opcional,  puede  crear  un  archivo  A ​ pplication.mk  si 
configura  las  ABI  de  destino,  la  cadena  de  herramientas,  el  modo  de 
lanzamiento  y  depuración,  y  la  STL.  Si  no  se  especifica  alguno  de  esos 
elementos,  se  usan  los  siguientes  valores  predeterminados, 
respectivamente: 
○ ABI: Todas las ABI que no están obsoletas 
○ Cadena de herramientas: Clang 
○ Modo: Lanzamiento 
○ STL: system 
6. Coloca tu archivo de origen nativo en el directorio j ​ ni​del proyecto. 
7. Usa ndk-build para compilar las bibliotecas nativas (​.so​ ,.
​ a​
) 
8. Compila el componente Java y crea el archivo . ​ dex​ejecutable. 
9. Empaqueta  todo  en  un  archivo  APK  que  contenga los archivos . ​ so​
, .
​ dex 
y otros necesarios para que se ejecute tu app. 
 
 
 
 
 
 
 
 Estructura básica de un proyecto en NDK 

 
 
3. Estrategia de diseño escogida 
● Componente Web: 
○ Para  este  componente  escogemos  el  framework  progresivo 
VueJS​ con el uso del lenguaje de programación ​Javascript​. 
● Componente Móvil: 
○ Para  este  componente  en  Android  escogemos  el  lenguaje  de 
programación ​Kotlin​. 
 
 
 
 
 
 
 
 
 
 
 
4. Bibliografía 
 
[1] Documentación Oficial React 
https://reactjs.org/docs/getting-started.html  
 [2] Qué es React. Por qué usar React 

https://desarrolloweb.com/articulos/que-es-react-motivos-uso.html 
 [3] How to structure your react app. 
https://hackernoon.com/how-to-structure-your-react-app-98c48e102aad 
 [4] Documentación Oficial Vue.js 
https://vuejs.org/v2/guide/ 
 [5] 5 razones para elegir Vue 

https://www.genbeta.com/desarrollo/por-que-elegir-vuejs-5-razones-para
-considerarlo-nuestro-proximo-framework-de-referencia 
 [6] Imágen estructura básica de un proyecto en Vue 
https://codingpotions.com/vue-tutorial-basico-componentes 
 [7] Documentación Oficial Angular, Google 
https://docs.angularjs.org/guide/introduction 
 [8] ​Guru, Krishna 
https://www.guru99.com/angularjs-introduction.html 
 [9] Aspectos fundamentales de la aplicación en Android 
https://developer.android.com/guide/components/fundamentals 
 [10] Cómo comenzar a usar Kotlin en Android 
https://developer.android.com/kotlin/get-started 
 [11] Android Jetpack 
https://developer.android.com/jetpack 
 [12] Conceptos NDK 
https://developer.android.com/ndk/guides/concepts