top of page
  • Alejandro Carrazana

Optimiza el comportamiento y apariencia de tu app Flutter con Remote Config

Los desarrolladores de apps nos enfrentamos constantemente al desafío de optimizar y mejorar nuestros productos. Una de las principales demandas es la capacidad de actualizar y personalizar una aplicación en tiempo real, sin la necesidad de publicar una nueva versión.


En el artículo anterior vimos una forma sencilla y rápida de configurar Firebase dentro de una aplicación Flutter, logrando potenciar nuestra app. En esta oportunidad conoceremos a Firebase Remote Config, que nos permite modificar y particularizar la configuración, además de cambiar la apariencia de la aplicación de manera remota y al instante.


¿Qué es Firebase Remote Config?


Firebase Remote Config es un servicio en la nube que posibilita modificar el comportamiento, aspecto o idioma de una aplicación sin la necesidad de publicar una nueva actualización de la misma. Además, Firebase brinda otras ventajas como la posibilidad de crear y probar diferentes versiones de configuración, la capacidad de segmentar a los usuarios y medir el impacto de las configuraciones en el rendimiento de la app. Estos cambios son almacenados automáticamente en la caché de la aplicación sin necesidad de cargarlos constantemente desde el servidor.


Uno de los beneficios de Firebase es que puede ser usado por una cantidad ilimitada de usuarios diarios, libre de costo. Es una de las herramientas de Firebase más recomendadas para verificar las actualizaciones de la aplicación. Para más información se puede revisar la documentación oficial.


¿Cómo configurar un proyecto de Flutter con Remote Config?


Dentro del proyecto de Firebase, acceda al menú lateral y presione Remote Config en la categoría de Participación. Esta función debe estar habilitada para que se encuentre funcional.

Primer paso de la configuración

La sección de Remote Config se divide en 4 elementos principales: Parámetros, Condiciones, Pruebas A/B y Personalizaciones.

Segundo paso de la configuración

Presionando el botón “Agregar Parámetro” podrá crear un nuevo parámetro donde establecerá: Nombre, Descripción, Valor por Defecto, Tipo de Datos y Valores Condicionales.

Tercer paso de la configuración

Para más detalles te dejamos el siguiente video.


Configuración de Remote Config en Flutter


Para implementar Remote Config en una aplicación de Flutter debe estar inicialmente configurado el proyecto de Firebase correspondiente. A continuación, se debe agregar el paquete firebase_remote_config a las dependencias del fichero pubspec.yaml y crear una clase para establecer la configuración e implementaciones relacionadas con Remote Config.


Los dos parámetros principales relacionados con la configuración de este paquete son:

  • fetchTimeout: Duración máxima de espera para obtener una respuesta del servidor con la configuración remota. El valor predeterminado es un minuto.

  • minimumFetchInterval: Antigüedad máxima de una configuración almacenada en caché antes de que se considere obsoleta y sea necesario solicitar los datos de nuevo al servidor. El valor predeterminado es 12 horas.


class FirebaseRemoteRepository {
 final FirebaseRemoteConfig _remoteConfig = FirebaseRemoteConfig.instance;
 final int _fetchTimeout = 1;
 final int _minimumFetchInterval = 60;

Future<void> initialize() async {
 await _remoteConfig.setConfigSettings(RemoteConfigSettings(
 fetchTimeout: Duration(minutes: _fetchTimeout),
 minimumFetchInterval: Duration(minutes: _minimumFetchInterval),
));

 try {
   await _remoteConfig.fetchAndActivate();
 } catch (e) {
   debugPrint(e.toString());
 }
}
 
}

El método setConfigSettings establece la configuración de Remote Config y fetchAndActivate realiza la operación de obtención y activación de los datos remotos.

En la clase main del proyecto se puede llamar al método initialize quedando completada la configuración de Remote Config en el proyecto.

void main() async {
…
await FirebaseRemoteRepository().initialize();
…
}

¿Cómo obtener un parámetro configurado en Remote Config?


Ahora veremos un ejemplo sencillo para obtener una lista de idiomas que tendremos configurada en Remote Config. Para ello hemos creado un parámetro llamado langs_octa donde se almacena el listado con tipo de dato Json.

Parámetro configurado

Lista de idiomas:

[
  {
    "code": "es",
    "flag": "https://flagicons.lipis.dev/flags/4x3/es.svg"
  },
  {
    "code": "en",
    "flag": "https://flagicons.lipis.dev/flags/4x3/gb.svg"
  }
]

Luego, dentro de nuestro proyecto de Flutter, en la clase FirebaseRemoteRepository que presentamos inicialmente, creamos el método getLanguages para obtener la información remota. Allí ejecutamos el método getAll, que nos devuelve un mapa de todos los parámetros de Remote Config, y así obtenemos la información del parámetro langs_octa. Posteriormente se manipulan los datos para llevarlos a una lista de modelos LangModel.

class FirebaseRemoteRepository {
 ...
 //Parameter
 static const String langs = "langs_octa";

...

 Future<List<LangModel>> getLanguages() async {
   var remoteValue = _remoteConfig.getAll()[langs];
   List<LangModel> result = [];
   try {
     List data = json.decode(remoteValue!.asString());
     result = data
         .map((lang) => LangModel.fromJson(lang))
         .toList()
         .cast<LangModel>();
   } catch (e) {
     debugPrint(e.toString());
   }
   return result;
 }
}

class LangModel {
 String code;
 String flag;

 LangModel({
   required this.code,
   required this.flag,
 });

 LangModel.fromJson(dynamic json)
     : code = json['code'],
       flag = json['flag'];

 Map<String, dynamic> toJson() {
   final map = <String, dynamic>{};
   map['code'] = code;
   map['flag'] = flag;
   return map;
 }

 @override
 String toString() {
   return 'LangModel{code: $code, flag: $flag}';
 }
}

De esta forma, con sólo llamar el método getLanguages podremos tener el listado de idiomas que tenemos configurados en Remote Config.

Ventajas del uso de Remote Config

  • Solución completamente gratis.

  • Fácil configuración.

  • Soporte para múltiples plataformas (Android, iOS, Web).

  • Una vez obtenida la configuración, esta se guarda en caché en el almacenamiento y se mantiene en el dispositivo.

  • Admite la configuración de valores predeterminados.

  • Se puede usar fácilmente para pruebas A/B.

  • Alta flexibilidad en la configuración de diferentes valores para múltiples condiciones (sistema operativo, país, idioma del usuario, versión de la aplicación, etc.)

  • Permite cambiar la apariencia y el comportamiento de una app sobre la marcha.

  • Ayuda a ofrecer una experiencia de aplicación exclusiva para un segmento de audiencia específico.

Limitaciones de Remote Config

  • No es adecuado para almacenar datos confidenciales.

  • Puede tener hasta 2000 parámetros. Las claves de parámetros pueden tener hasta 256 caracteres, deben comenzar con un guión bajo o letras (A-Z, a-z) y también pueden incluir números.

  • Puede tener hasta 500 condiciones.

  • La longitud total de las cadenas de valor de parámetro dentro de un proyecto no puede exceder los 800 mil caracteres.

Casos de Uso


Aplicar una nueva funcionalidad a segmentos de usuarios

Remote Config permite realizar el lanzamiento, de manera gradual, de una nueva funcionalidad dentro de la app a segmentos de usuarios previamente establecidos. Luego de que se compruebe la estabilidad de la función puede ir aumentando la población de usuarios hasta finalmente completar el 100% de ellos.

Personalizar banners de publicidad basados en múltiples parámetros

Con esta herramienta se puede brindar una personalización de la publicidad que se muestra al usuario. Es posible tener diferentes banners publicitarios, que se cargan dinámicamente, basados en información relacionada con el usuario como: sistema operativo del dispositivo, región de residencia, versión de la aplicación, etc. Favoreciendo un incremento de los ingresos que se puedan percibir.

Incluso, es posible activar las promociones durante un intervalo de tiempo, logrando que éstas dejen de mostrarse cuando expiran.

Brinde una mejor experiencia de usuario en función del uso de la aplicación

En correspondencia con el uso de la app por parte del usuario se pueden habilitar funciones ocultas o incentivos con Remote Config. Además, puede proporcionar experiencias únicas a los usuarios que se unieron durante un intervalo de tiempo específico.


Envíe notificaciones de Slack/correo electrónico cuando se publiquen actualizaciones de Remote Config

Para agilizar los procesos de colaboración, puede recibir alertas casi en tiempo real a través de su mecanismo preferido (Slack o correo electrónico). La API REST de Remote Config, junto con los activadores en segundo plano de Remote Config en Cloud Functions para Firebase, le permite distribuir actualizaciones en tiempo real.



¡No te pierdas más artículos sobre el desarrollo de aplicaciones Flutter! ¡Síguenos y mantente actualizado con todo lo nuevo que tenemos preparado para ti en nuestro blog! En próximos artículos conoceremos Cómo construir una aplicación de marca blanca con Remote Config.

bottom of page