En este repositorio se encuentra el código utilizado para la entrega realizada como trabajo final de la materia Laboratorio de Software de la carrera Lic. en Informática de la Facultad de Informática, UNLP. La misma consiste en una aplicación desarrollada en react-native
con el objetivo final de ser un juego para android soportando Android 4 y versiones posteriores.
En el directorio /entrega
se puede encontrar cedica.apk
, una APK generada con la última versión estable del juego.
Para levantar el ambiente de desarrollo, primero se deben instalar las dependencias ejecutando los siguientes comandos en la linea de comandos:
$ yarn
$ react-native link
Terminal A
Servimos los JS, permitiendo una suerte de hot reload.
$ yarn start
Terminal B
Genera e instala apk-debug. Cuando anda no cierra la conexión.
$ yarn bundle:android
$ yarn android
Para desarrollar una nueva pantalla se deben tener en cuenta 2 directorios como
mínimo, src/screens
y src/navigator
En este directorio se almacenan las diferentes pantallas de la APP. En estas componentes se puede acceder al estado interno, realizar consultas, o renderizar otras componentes.
En este directorio, se declaran los nombres con los cuales se van a referenciar
a las pantallas para movernos por nuestra app.
Normalmente, las nuevas rutas irían al archivo src/navigator/MainNavigator.js
,
donde se importan las pantallas. El nombre con el cual se importen es como van a
ser conocidas dentro de nuestra app.
Por ejemplo, para agregar una pantalla de Test
, se deberían agregar las
siguientes líneas al archivo
...
import Test from '../screens/TestScreen'
export default createStackNavigator({
...
Test,
})
Luego, para movernos a esta pantalla, se puede usar la función
navigation.navigate('Test')
Notar que navigation
es accecible desde las screen en this.props
Si se quiere generalizar una componente de visualización, se puede hacer en este directorio.
Notar que estas componentes, no deberían acceder al estado interno (redux), ni a navigation, ni realizar consultas
Todos estos directorios se corresponden con Redux y ReactRedux
Redux nos sirve para contar con un estado centralizado, inmutable, gestionado
por funciones denominadas actions
Para más información, se puede consultar la página de Redux
Cuenta con configuración importante de la app, como son, los mapeos de caballos a sus archivos, los gif para los juegos y el mapeo de las opciones de la configuración.
Son funciones que simplifican ciertos aspectos del desarrollo.
Para construir un APK, es necesario instalar las dependencias y general la aplicación para android de la siguiente forma:
$ yarn
$ react-native link
$ yarn build:prod:android