Crane es un proyecto creado para facilitar a la gente el encontrar planes interesantes que tengan cerca.

• Tecnologías
• Requisitos
• Claves
• Instalación
• Estructura
• Puntos clave del proyecto
• Página escaparate

Para el desarrollo de esta app se ha usado el siguiente stack tecnológico:

• Expo 42 (React Native)
• NativeBase
• TomTom API
• Firebase
• Redux
• React Navigation
• Axios

Para desarrollar en este stack, es necesario tener:

• Node
• Expo-cli
• TomTomAPI-key
• Firebase-key
• Maps-SDK-Android-key

Las claves de API no están incluidas en el proyecto por motivos de seguridad, a continuación se detallan los puntos dónde deben añadirse estas.

Las claves de TomTomAPI se pueden añadir al fichero TomTomAPI.js (se habla en plural porqué el código acepta múltiples, pero con una clave sirve).

import axios from "axios";
import { planAdded, planReseted } from "../redux/plans/PlansSlice";
import { CapitalizeWord } from "../utils/GeneralUtils";

const TomTomAPIKey = ["Añadir aquí"];

Para poder compartir planes con amigos, se ha usado el servicio de Firebase, Cloud Firestore, la configuración se añade aquí:

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

Esta clave sólo es necesaria para cuando se cree el bundle de android, se añade en el app.json.

"android": {
      "config": {
        "googleMaps": {
          "apiKey": ""
        }
      }
   }

Para instalar los módulos necesitas primero ejecutar lo siguiente:

yarn install

Puedes usar yarn o npm para levantar un servidor en localhost:19002 con:

yarn start

Para la estructura del proyecto se ha usado una organización basada en tipo de fichero.

.
├── App.js
├── Navigation.js
├── app.json
├── src
	├── components
	│	├── ...
	└── constants
	│	├── Styles.js
	└── redux
	│	├── plans
	│	├── user
	│	├── Store.js
	└── routes
	│	├── TomTomAPI.js
	└── utils
	│	├── ColorModeManager.js
	│	├── GeneralUtils.js
	└── views
		├── MainScreen.js
		├── MapScreen.js
		├── MatchesScreen.js
		├── ShareScreen.js

Para las necesidades de Crane, se ha dividido el proyecto en los siguientes módulos:

• App.js: Principal componente que se encarga de cargar los estilos de NativeBase y preparar el redux store con persistencia de datos.
• Navigation.js: Se encarga de preparar la navegación entre pantallas.
• app.json: Archivo de configuración para la exportación a android o ios.
  • android.config.googleMaps.apiKey: Aquí se tiene que poner la apiKey de Google para habilitar el SDK de maps de android.
• components: Contiene los diferentes componentes que se usan en las vistas de la aplicación.
• constants:
  • Styles.js: Contiene la paleta de colores centralizada para toda la aplicación.
• redux:
  • plans: Contiene toda la gestión de los slice para los planes.
  • user: Contiene toda la gestión de los slice para el usuario.
  • Store.js: Contiene todos los slices combinados en un reducer y usa el ExpoFileSystemStorage para persistir los datos.
• routes:
  • TomTomAPI.js: Se encarga de gestionar todas las llamadas a la API de TomTom para obtener los puntos de interés.
• utils:
  • ColorModeManager.js: Se encarga de gestionar el cambio entre el modo claro y el modo oscuro.
  • GeneralUtils.js: Contiene un conjunto de utilidades generales que se usan a lo largo del proyecto (ejemplos: urlParser, substringLastIndex, reverseArr...).
• views:
  • MainScreen.js: Pantalla de inicio dónde se pueden ver los planes y puntos de interés más cercanos.
  • MapScreen.js: Pantalla que permite al usuario cambiar su ubicación, usa el módulo de react-native-maps.
  • MatchesScreen.js: Pantalla que muestra los planes que tienen en común dos usuarios.
  • ShareScreen.js: Pantalla que permite ver los planes que le han gustado al usuario y copiar el "código amigo" para poder compartirlo.

Esta función se encuentra en la clase TomTomAPI, se encarga de buscar y cargar todos los puntos de interés con las coordenadas (longitude, latitude), el radio (radius) y las diferentes categorías (categorySet).

import axios from "axios";
import { planAdded, planReseted } from "../redux/plans/PlansSlice";

export const fetchPlans = async (
  keyIndex,
  dispatch,
  categorySet,
  reloadedCards,
  swipedPlans,
  longitude,
  latitude,
  radius
) => {};

Para poder cargar una pantalla u otra dependiendo de los parámetros del link, se ha usado el NavigationContainer que ofrece react-navigation junto al deep linking de expo.

<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
    <Stack.Navigator screenOptions={({ route }) => screenOptions(route)}>
        <Stack.Screen name="Main" component={Main}></Stack.Screen>
        <Stack.Screen name="Matches" component={MatchesScreen}></Stack.Screen>
        <Stack.Screen name="Map" component={MapScreen}></Stack.Screen>
    </Stack.Navigator>
</NavigationContainer>

Para poder mostrar las funcionalidades de la aplicación sin la necesidad que el usuario se descargue la app, se ha creado una página web dónde se explica el como y el porqué se ha creado.

Crane web

Los pull requests siempre son bienvenidos. Para mayores cambios, por favor abrir una incidencia primero para discutir lo que te gustaría cambiar.

MIT