React Native : El framework para crear nuestra primera app

Hola a tod@s, ya por fin, después de tanto backend, vamos a empezar con nuestra app. Como os he adelantado en el título, vamos a desarrollarla con el framework React Native y se va a llamar npi-app (Ni P**** Idea App)

Entorno de desarrollo

Antes de empezar necesitamos preparar un entorno de desarrollo donde nos sintamos cómodos. Necesitamos elegir un IDE para poder empezar a desarrollar código.

Aunque lo dicho, si te encuentras cómodo con un notepad adelante… En mi caso, mi IDE favorito es Atom. Puedes descargarlo en su página oficial.

Una vez instalado ya estamos listos para comenzar!

Gestor de paquetería

En las aplicaciones React Native y nodejs se pueden usar módulos third party que ya han hecho otras personas y además de extender las funcionalidades del lenguaje nos facilitan mucho la vida.

Para instalar estos módulos vamos a instalar el gestor de paquetería de node cuyo nombre es npm (Node package manager).

Npm viene con la instalacion de node con lo que lo primero que haremos será instalar Nodejs. Podemos descargar la versión LTS (Long Term Support) desde su página oficial.

Creamos el proyecto React Native

Una vez tengamos node instalado, abrimos la línea de comandos y nos movemos a un directorio de nuestra elección donde alojemos nuestro entorno de trabajo. En mi caso utilizaré /Users/alberto/dev ya que uso macosx.

Según la documentacion en la página oficial de React Native, para crear nuestro proyecto react native necesitamos instalar el módulo create-react-native-app.

Para ello ejecutaremos:

npm install -g create-react-native-app

Una vez se haya instalado deberíamos ver algo parecido a esto:

└─┬ create-react-native-app@1.0.0

  …

    └── source-map@0.5.7

Ahora sí amig@s, para crear nuestro proyecto basta con ejecutar:

create-react-native-app NPIApp 

Este comando tardará unos minutos ya que tiene que instalar bastantes librerías.

Una vez finalizado nos muestra la ayuda para seguir:

Success! Created NPIApp  at /Users/alberto/dev/NPIApp 

Inside that directory, you can run several commands:

  npm start

    Starts the development server so you can open your app in the Expo

    app on your phone.

  npm run ios

    (Mac only, requires Xcode)

    Starts the development server and loads your app in an iOS simulator.

  npm run android

    (Requires Android build tools)

    Starts the development server and loads your app on a connected Android

    device or emulator.

  npm test

    Starts the test runner.

  npm run eject

    Removes this tool and copies build dependencies, configuration files

    and scripts into the app directory. If you do this, you can’t go back!

Entramos en el directorio que se ha creado

cd NPIApp 

Ejecutamos atom (en mi caso) en la ruta actual para abrir el proyecto en nuestro IDE

atom .

Iniciamos el servidor de desarrollo

npm start

Estructura del proyecto

En el proyecto que nos ha creado tenemos varios elementos que debemos conocer.

  • node_modules Es el directorio donde se instalan todos los módulos instalados con npm
  • App.js es el fichero de inicio de la aplicación
  • App.test.js es el fichero de testing para App.js
Estructura del proyecto react native

Estructura del proyecto react native

 

Ejecutando el proyecto

Para correr nuestro proyecto react native en modo desarrollo tenemos dos alternativas:

  • Instalar un emulador de Android usando el android-sdk, o si estamos en Macosx también podemos instalar el xcode e iniciar un emulador de iphone.
  • Usar Expo app.

Expo App

¿Qué es Expo App? Es la manera mas rápida de construir una App.

Básicamente al ejecutar npm start react native nos ha creado un código QR que podemos escanear desde nuestro teléfono móvil usando la aplicación Expo Client.

Expo client es una aplicación gratuita que se puede encontrar en el Apple Store y en el Play Store.

Una vez escaneemos el código QR podremos acceder a la app desde nuestro teléfono y todos los cambios que hagamos a la app desde nuestro ordenador se verán reflejados en la app del teléfono. ¿A que mola?

Siguientes pasos

Por ahora, instálate Expo client en tu teléfono y escanea el código QR.

Una vez realizado tendréis la siguiente pantalla en vuestro móvil:

NPIApp desde Expo App

NPIApp desde Expo App

 

 

Bueno, espero que os haya gustado esta entrada, en la siguiente ya empezaremos a desarrollar código y montaremos nuestra primera pantalla de login y registro de usuarios!

Subir con nosotros a esta gran locura de crear una app sin tener ni puta idea!!

 

Coche

Visitando un concesionario ¿que te creías?

 

Hasta pronto amiguit@s!! Nos vemos en los bares…

Esta entrada fue publicada en App por Alberdg. Guarda el enlace permanente.

Acerca de Alberdg

Trasteando con ordenadores desde 1995. Ingeniero superior en Informática en Northumbria University (Newcastle Upon Tyne, Reino Unido). Más de 10 años de experiencia en desarrollo de software y geek absoluto de Javascript pero con cero experiencia en aplicaciones móviles. ¿Será capaz de aprender todo lo relacionado con el desarrollo de apps sin perder ese "pelazo Pantene" en el intento?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *