Cómo conectar una app móvil Flutter con su backend Laravel

Pongámonos en contexto, acabamos de crear una app con Flutter, y también hemos desarrollado un backend con Laravel. Lo hemos creado en forma de API Rest, a medida para nuestra ya maquetada app. Nuestro siguiente paso es conectar la aplicación con nuestro backend pero, ¿como lo hacemos?

¿Por qué Laravel?

Antes de nada, debemos responder unas cuantas preguntas del porqué hemos escogido ciertas tecnologías para el desarrollo de nuestra app. En primer lugar, el backend lo hemos desarrollado con Laravel por las siguientes razones:

• Es uno de los frameworks más populares y consolidados, de uno de los lenguajes más utilizados, PHP.
• Es un open source y desarrollado por el MIT.
• Documentación amplia.
• Utilización del patrón active record, con Eloquent como ORM.
• Simplificación del código.
• Amplia comunidad en la que apoyarnos.

¿Por qué API Rest?

Para entender que es una API Rest debemos entender sus dos nomenclaturas:

API: Es un conjunto de definiciones y protocolos que se utiliza para desarrollar e integrar el software de las aplicaciones. API significa interfaz de programación de aplicaciones.
REST: Es una interfaz para conectar varios sistemas basados en el protocolo HTTP y nos sirve para obtener y generar datos y operaciones, devolviendo esos datos en formatos muy específicos, como XML y JSON.

La gran ventaja de utilizar una API Rest, es la separación del backend de la aplicación, con ello cumplimos la primera norma del acrónimo de SOLID, el Single responsibility.

¿Por qué Flutter?

La app, la hemos desarrollado con Flutter, un framework desarrollado por Google, lanzado en 2017. Flutter nos ofrece las siguientes ventajas, por las cuales pensamos que es la mejor opción para desarrollar una app en 2021 y, a la vista, mínimo hasta 2026:

• Alta productividad: dado que Flutter es multiplataforma, puede usar la misma base de código para tu aplicación iOS y Android. Esto definitivamente puede ahorrarte tiempo y recursos.
• Gran actuación: dart se compila en código nativo y no es necesario acceder a los widgets OEM, ya que Flutter tiene los suyos propios. Esto significa una comunicación menos mediada entre la aplicación y la plataforma.
• Desarrollo rápido y sencillo: una de las características más elogiadas de Flutter es la recarga en caliente, que nos permite ver instantáneamente los cambios realizados en el código en emuladores, simuladores y hardware. En menos de un segundo, el código modificado se vuelve a cargar mientras la aplicación se está ejecutando sin necesidad de reiniciarla. Esto es excelente no solo para crear interfaces de usuario o agregar funciones, sino también para corregir incidencias.
• Compatibilidad: Dado que los widgets son parte de la aplicación y no de la plataforma, es probable que experimente menos o ningún problema de compatibilidad en diferentes versiones del sistema operativo. Esto, a su vez, significa menos tiempo dedicado a las pruebas.

¿Cómo conectarnos?

En primer lugar, deberemos tener nuestro backend subido a un servidor. Este puede ser de tu preferencia, siempre contrastando opiniones de usuarios, servicios y precios. Deberemos cerciorarnos de que el servidor cumple o podrá cumplir con los siguientes requisitos:

• PHP >= 7.3, con las siguientes extensiones activas:
  •BCMath PHP Extension
  •Ctype PHP Extension
  •Fileinfo PHP extension
  •JSON PHP Extension
  •Mbstring PHP Extension
  •OpenSSL PHP Extension
  •PDO PHP Extension
  •Tokenizer PHP Extension
  •XML PHP Extension
• Conexión ssh.

Para subir nuestro código fuente al servidor escogido, tendremos dos opciones:

• Utilizando git: si hemos estado usando git para llevar un control de versiones de nuestro código, simplemente deberemos conectarnos por SSH a nuestro servidor y hacer un git clone de nuestro repositorio.
• Por ftp: en el caso de no haber usado git, deberemos subir nuestro código fuente por ftp, usando un cliente ftp a nuestra elección, como por ejemplo Filezilla.

Una vez subido el proyecto, deberemos crear/modificar nuestro archivo .env agregando las nuevas credenciales a la base de datos del servidor. Después instalaremos las dependencias de Laravel, para ello nos conectaremos por ssh al servidor, nos adentraremos a nuestra carpeta raíz del proyecto, y utilizaremos nuestro gestor de dependecias Composer, utilizando el comando composer install.

Cuando tengamos las dependencias instaladas, proseguiremos con la ejecución de los comandos artisan necesarios para el correcto funcionamiento de nuestro proyecto como, por ejemplo, php artisan migrate, en el caso de haber utilizado las migraciones de Laravel para la creación y gestión de la base de datos.

Para comprobar el correcto funcionamiento del backend, nos conectaremos a la url base de nuestro servidor, donde podremos observar la vista home de nuestro proyecto.

Tras realizar estos pasos y comprobar que nuestro backend está funcionando en nuestro servidor, estamos preparados para consumir la API Rest desde nuestra app desarrollada por Flutter.

Para ello recomendamos dos paquetes de Flutter:

•DIO: Es una biblioteca de redes desarrollada por Flutter China. Es un potente cliente Http para Dart, que admite interceptores, configuración global, FormData, solicitud de cancelación, descarga de archivos, ConnectionTimeout, etc.
•HTTP: Este es un complemento oficial de Flutter publicado por dart.dev y tiene una puntuación de salud de 100, por lo tanto, podemos confiar en la estabilidad de este complemento.

Con estos paquetes podremos realizar las llamadas a nuestros endpoints y con ello tendremos una aplicación dinámica, que obtiene y envía datos de una base de datos conectada a un servidor.

Como has podido comprobar, siguiendo estos sencillos pasos, tendremos una aplicación conectada a un backend.

Conclusión

Si has llegado hasta aquí seguramente habrás llegado a la conclusión de que un backend hecho en Laravel y un frontend hecho en Flutter es la mejor opción para tú aplicación móvil. Pese a ello, como es comprensible no dispones de los conocimientos necesarios para desarrollar la aplicación con dichos lenguajes. En este punto es donde nosotros, Abalit Technologies, te podemos ayudar. Contamos con un amplio equipo, experimentado en el desarrollo de aplicaciones con estas tecnologías, dispuestos a plasmar tu idea de aplicación en una realidad. No lo dudes más y contacta con nosotros.


Gracias por leernos.