SEC S20W1 - A Comprehensive Guide to Flutter Mobile Application Development | My first mobile App

Es para mí un enorme placer estar hoy aquí participando en el curso de creación de aplicaciones móviles. La verdad es que desde hace algunos años he querido incursionar en este mundo, sin embargo debido a las ocupaciones y sinceramente a un poco de flojera de mi parte no había podido hacerlo. Hace unos meses un amigo me recomendó iniciar a aprender ionic para esta labor, sin embargo debido a los mismos motivos no había empezado. Gracias a las iniciativas de esta temporada me animé a comenzar a aprender Flutter, Y hoy te comparto los resultados de este aprendizaje.

Flutter es un Frame Word de programación que te permite crear aplicaciones móviles o de escritorio con resultados bastante elegantes y estables. Es una tecnología creada por una de las compañías tecnológicas más grandes del mundo, Google, Y su amplia comunidad de desarrolladores te permitirá introducirte en este mundo muy fácilmente.

Flutter ofrece muchas ventajas, entre ella la posibilidad de crear aplicaciones multiplataforma, es decir un único código te servirá para crear aplicaciones en Android y iOS simultáneamente, ahorrándote mucho tiempo esfuerzo y recursos si lo que deseas es tener una aplicación móvil para tu negocio o proyecto personal.

Flutter utiliza Dart como lenguaje de programación, un lenguaje desarrollado por la misma empresa que recopila características de los lenguajes más famosos como JavaScript o Python, en mi experiencia aprendiendo este lenguaje puedo decir que es como combinar C++ con JavaScript con su estructura tan llamativa a la hora de declarar variables y su sintaxis bastante parecida al lenguaje preferido por los desarrolladores web.

Actualmente soy usuario de Mac y iPhone, por lo que el día de hoy estableceremos todo lo necesario para desarrollar en estas plataformas.

Cuando traté de descargar Flutter en mi Mac el sitio web me proporcionó instrucciones mas especificas para mi dispositivo en https://docs.flutter.dev/get-started/install/macos/mobile-ios

Tuve que actualizar Rosseta con este comando en la terminal:

sudo softwareupdate --install-rosetta --agree-to-license

Tambien, como voy a programar para IOS tuve que descargar XCode de la App Store y CocoaPods con el siguiente comando

sudo gem install cocoapods

Una vez instalado XCode me pidió seleccionar la plataforma a utilizar, en mi caso IOS asi que tuve que descargar el emulador desde la misma App.

Yo usaré VSCode como mi IDE ya que ya lo tengo instalado. Solo hizo falta activar los plugins necesarios:

Seguimos las instrucciones para descargar e instalar Flutter en nuestro computador, en mi caso descargué el archivo de Apple Sillicon.

Una vez descargada la carpeta (mi Mac la descomprimió automáticamente) la moví al directorio ~/development/. Y abrí el archivo de configuración de terminal con el siguiente comando:

nano ~/.zshenv

Una vez abierto con nano, exporté la configuración pegando la siguiente línea:

export PATH=$HOME/development/flutter/bin:$PATH

y guarde los cambios con CTR+X.

Después de hacer esto reinicié mi terminal y ya pude comprobar que la instalación fue exitosa ejecutando:

flutter doctor

Con todo instalado ya solo quedaba probar el emulador de XCode, para ello lo abrí y configuré los equipos virtuales que iba a usar, y buscando un poco de información pude encender mi iPhone virtual:

---

Pan comido, acá esta mi ejercicio desarrollado en el editor de Dart:

Primero cree una variable para almacenar el output del código, después una variable booleana que determinará si el número número es múltiplo de 3 y 5 simultáneamente. Todo eso en un ciclo For se iba a ejecutar.

Primero evalúo si el número actual es múltiplo de 3 y 5 al mismo tiempo, en caso de ser así muestro el número junto a steemit.com Y modifico el booleano a verdadero para que las otras dos condiciones individuales no se evalúen después de esta y no hayan duplicados.

Si no se cumplen las dos condiciones simultáneamente se evalúa cada una individualmente y se muestra en pantalla el número correspondiente.

Pero este ejercicio no se quedó allí, quise crear mi primera app con el mismo asi que con el comando siguiente cree mi app y lo adapté a los Widgets:

flutter create first_task

Y así obtuve este resultado:

Así cree mi función de factorial y probé con varios números buscándome mucho el resultado.

El funcionamiento de esta función es simple simplemente evalúa si el número recibido es cero y retorna uno según la convención matemática, y si no se calcula la factoría como ya conocemos que se debe hacer.

Para conectar mi dispositivo físico abrí el panel de dispositivos en Xcode y busqué la sección de dispositivos, le di clic al símbolo de más y conecté mi celular a la computadora, esta inmediatamente me preguntó si confiaba en esta computadora y me solicitó hacer algunos pasos como habilitar el modo desarrollador en el teléfono.

Después de un breve proceso tuve que reiniciar el celular y me pidió la contraseña para poder habilitar exitosamente el modo desarrollador.

Una vez habilitado la computadora reconoció el dispositivo y comenzó a pasar todo la información necesaria para poder utilizar este dispositivo como dispositivo físico a la hora de probar las aplicaciones.

Después de un rato tuve que iniciar sesión en mi cuenta de iCloud previamente configurada como cuenta de desarrollador para poder desplegar aplicaciones.

A partir de aquí sólo quedaba estudiar el lenguaje de programación y todas las convenciones necesarias para poder desarrollar exitosamente la interfaz de login que se pide en este curso.

Primero configuré el esqueleto principal de la aplicación con las rutas necesarias.

Después creé el widget de la página principal el cual consiste básicamente en el formulario, un botón para enviar el formulario, y un enlace para crearte una cuenta si aún no tienes en el sistema.

Después creé el widget necesario para la página de crearse una cuenta que era básicamente reutilizar el componente que ya tenía creado y modificarlo para que fuese acorde a la línea de diseño de la primera página.

---

Y así es como logré el resultado de esta aplicación:

Mockups creados con Screenly, capturas y fotografías de mi propiedad.