¿Qué es Flutter?

 

Flutter es un software de desarrollado para crear interfaces graficas. Este es open-source y esta desarrollado por Google. Permite hacer interfaces para diferentes sistemas operativos. Inicialmente fue desarrollado para móviles lo cual soportaba Android y iOs. Actualmente también se pueden desarrollar interfaces para Windows, Linux, Mac y web.

Flutter utiliza una serie de componentes gráficos que permite crear interfaces de muy alta calidad para los diferentes dispositivos. Permite el desarrollo de interfaces nativas para las diferentes plataformas donde se puede correr.

Este kit de desarrollo de software utiliza Dart como lenguaje de desarrollo. El cual es muy fácil de aprender si vienes de lenguajes como Java, C++ o C#. La curva de aprendizaje realmente no es muy grande, después de instalarle y ver un poco la documentación uno puede rápidamente trabajar con este nuevo lenguaje.

Una gran ventaja que tiene es que su rendimiento es de una aplicación nativa en las diferentes plataformas. Por lo que se pueden hacer aplicaciones de mucha calidad de manera rápida. Además, es independiente de IDE por lo que podemos seleccionar con cual deseamos trabajar en una lista de opciones con las que contamos.

Yo me di a la tarea de crear una app usando Flutter en Android Studio. Esta app este hecho solo para Android y iOs. Lo interesantes es que tiene un solo código base para ambas aplicaciones. Algunas pequeñas configuraciones se pueden hacer en cada app (Android o iOs) pero realmente es lo mínimo. El framework se encarga de construir y compilar cada aplicación desde el código de Dart que uno esta desarrollando.

Además, con el framwork de Flutter ya se cuanta con una gran cantidad de iconos y diferentes componentes gráficos que podemos usar sin tener que instalar ninguna librería. Ya el framework cuanta con todo esto para hacer el desarrollo más simple.

Cuenta con una gran cantidad de widgets que nos permiten hacer cualquier cosa que necesitamos en nuestras aplicaciones ya sea para móviles como para otras plataformas. De momento no he tratado de hacer una aplicación para desktop, pero me imagino que no hay mucha dificultad para pasar la app que tengo a cualquier otra plataforma.

La documentación con la que cuenta Flutter también es muy extensa por lo que no tendríamos dificultad para poder iniciar a trabajar con este kit de desarrollo. La documentación explica el flujo de desarrollo, los diferentes componentes y como poder publicar las aplicaciones que deseamos enviar a Google Play o Apps Store.

Lo único que debemos saber es que para publicar la app para iOs se requiere una Mac con Xcode para poder generar el ejecutable y subirlo al App Store. En el caso de Android ocupamos instalar el Android SDK.

En general me parece que es una excelente herramienta para poder desarrollar aplicaciones móviles. En algún momento cerca estaré tratando de desarrollar aplicaciones web o desktop para ver que tal la experiencia. Me gusta mucho lo fácil que es el desarrollo con Dart y lo fácil que es crear aplicaciones nativas para diferentes plataformas de manera muy fácil.

Algunos Frameworks para desarrollo móvil

Existen muchas opciones que tenemos disponibles hoy en día para desarrollar aplicaciones móviles. De las cuales todas nos dan formas diferentes de solucionar lo que estamos buscando. La estrategia es muy similar, pero tienen algunas características diferentes.

Cuando tenemos que tomar la decisión de cual framework debemos usar lo primero que debemos buscar es a lo que estamos mas acostumbrados a trabajar. Realmente todo depende de que deseamos hacer y con cual equipo de trabajo lo queremos hacer.

Actualmente contamos con iOS y Android como los principales sistemas operativos en el mercado, pero con una cantidad de formas y frameworks para el desarrollo increíble donde cada uno dice que es el mejor por a o b razones.

En este momento yo no voy a tratar de indicar cual es mejor que otra ya que como mencione anterior mente depende de muchas variables para poder decir cual es mejor o peor. Pero si dar una lista que con las que se podría iniciar una investigación y ver cual se ajusta mejor a cada equipo de trabajo.

Primero tenemos una lista basados en Java

Oracle MAF: Podemos escribir nuestro código en Java usando JDeveloper. Es muy fácil de usar y podemos usarlo para compilar en iOS y Android

Gluon: Se escribe con Java y podemos usarlo con diferentes IDEs como por ejemplo con Netbeans. También compila iOS y Android

Codenameone: Se escribe con Java y tiene una particularidad este se debe subir a los servidores de codenameone para compilar nuestra app. Que se puede compilar para iOS y Android.

Itel Multi-OS: Se escribe el código con Android, se puede usar el Android Studio y este también puede compilar a iOS.

Xamarin: Se escribe el código con C# y se puede compilar para iOS y Android.

Apache Cordova: Se usa Javascript para escribir el código y se puede compilar para iOS y Android

IONIC: Se escribe el código con Javascript y se puede compilar para iOS y Android

Flutter: Este es de Google y el código se escribe con Dark. Crea apps para iOS y Android

Esto es para mencionar algunas, pero existen muchas más opciones para escribir nuestras apps. Lo importante es trabajar con las que nos sintamos más familiarizados y los que tengan los frameworks que se ajusten más a nuestro equipo de desarrollo.

Podríamos usar esta técnica https://compuarticulos.blogspot.com/2019/02/como-seleccionar-el-lenguaje-o-proyecto.html para seleccionar nuestro ambiente de desarrollo móvil.

Un ejemplo básico de google maps en la web

Un ejemplo básico de google maps en la web

Actualmente la localización es cada día más importante y con la tecnología actual esta tarea se puede hacer simple y muy fácil su implementación. Hay muchos proveedores para mostrar localización y además estas herramientas se pueden usar en diferentes plataformas y dispositivos.

Nosotros en este caso vamos a ver cómo usar google maps. Lo que vamos a realizar es

•      Ver cómo podemos mostrar un mapa
•      Ver cómo posicionar un punto en el mapa
•      Y vamos a ver como cambiar esa posición dentro del mapa y ver cómo darnos cuenta cuando el punto cambia en el mapa

Para poder hacer esto posible vamos a necesitar las siguientes tecnologías

•       Html
•       Javascript
•       Jquery

En nuestro ejemplo lo primero que tenemos que hacer es agregar el llamado a jquery, esto lo vamos a poner en el head de la página web

Luego tenemos que agregar la línea que nos va permitir usar el api de los google maps

Después que tenemos estos scripts vamos a agregar el siguiente para obtener las imágenes que queremos mostrar en los puntos marcados en nuestro mapa

var customIcons = {

                    me: {

                        icon: ' ../../Images/me.png',

                        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

                    }

                };

Ahora bien estas imágenes las pueden cambiar y agregar las que ustedes deseen.

Para mostrar el mapa vamos a crear un div el cual nos va a permitir mostrar el mapa en este ejemplo le vamos a llamar mapa_canvas y lo vamos a crear con las siguientes características

Ahora en la función del document ready de jquery vamos a crear nuestro mapa con las siguientes características. $(document).ready(function () {
                                            var infoWindow = new google.maps.InfoWindow;                                            var latlng = new google.maps.LatLng(9.917153276459203, -84.08123874664307);                                            var myOptions = {zoom: 8,center: latlng,                                       mapTypeId: google.maps.MapTypeId.ROADMAP};
                                            var type = "";  
 var map = new google.maps.Map(document.getElementById("mapa_canvas"), myOptions);                                            var icon = customIcons[type] || {};
 var marker = new google.maps.Marker({map: map,draggable: true,                                                position: latlng,    icon: icon.icon,       shadow: icon.shadow });                                                                               google.maps.event.addListener(marker, 'dragend', function (event) {                                                                                          posset = 1;                                                                                          if (map.getZoom() < 10) { map.setZoom(10); }                                                                                          map.setCenter(event.latLng);                                                                                          cambiarPuntos(event.latLng);      
                         });
                });

Donde podemos ver opciones como el zoom, que nos ayuda a visualizar el mapa del tamaño que desea, la opción de draggable que nos permite indicar si queremos que el punto señalado pueda ser cambiado o no, entre otras.

Para poder saber cuando las coordenadas del punto cambian debemos agregar un evento google.maps.event.addListener el cual se va a disparar en cada vez que este cambio ocurre.

Cuando los cambios ocurran vamos a disparar este evento y llamar un método que nos muestra una alerta de javascript con las nuevas coordinadas.

 function cambiarPuntos(point) {

        alert(point.lb + " , " + point.mb);

    }

Adjunto el ejemplo completo para que puedan utilizarlo. Espero que este pequeño ejemplo les sea de mucha utilidad. 

Pueden encontrar mas información en https://developers.google.com/maps/

Ejemplo  Completo