Analizar solicitudes HTTP de nuestra aplicación con la librería Stetho

Hoy en día cualquier aplicación de tamaño medio realiza solicitudes HTTP a un servidor ya sea para recoger y/o almacenar información, imágenes, etc. Es muy importante analizar y controlar estas solicitudes durante el desarrollo para poder detectar cualquier error y también gestionar correctamente el consumo de datos, ya que sobre todo en aplicaciones móviles las conexiones suelen ser más limitadas tanto en velocidad como en cantidad de datos.

Facebook ha desarrollado una librería llamada Stetho que nos permite realizar esta tarea de una forma sencilla en nuestras aplicaciones Android, con Stetho y las herramientas de desarrollo de Google Chrome tendremos la capacidad de analizar las solicitudes HTTP realizadas; además nos provee también la posibilidad de acceder a la base de datos interna de nuestra aplicación.

Vamos a integrar Stetho en la aplicación Open Trivia que desarrollamos en otro artículo y analizar las llamadas que ésta realiza a la API de OpenTrivia. La app está desarrollada en Flutter por lo que para integrarla utilizaremos la librería Flutter Stetho, una adaptación de la original para Flutter.

Empezaremos por añadirla como dependencia para poder importarla y hacer uso de ella, así que en el fichero de dependencias pubspec.yaml la asignamos como dependencia de desarrollo

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_stetho: ^0.2.1

Recogemos los paquetes necesarios con

flutter packages get

Después simplemente la importamos e inicializamos en nuestro fichero main.dart, que se encarga de realizar la ejecución de la aplicación

....
import 'package:flutter_stetho/flutter_stetho.dart';
....
void main() {
  Stetho.initialize();
  runApp(new MyApp());
}
....

Con estos sencillos pasos ya estamos listos para empezar a analizar las solicitudes HTTP que nuestra aplicación realiza, para ello basta con abrir el navegador web Chrome e introducir en la barra de la URL la “dirección” chrome://inspect

Con la aplicación ejecutada el inspector de Chrome nos mostrará aquellos dispositivos que tenemos disponibles para debug, uno de ellos es nuestra aplicación como se puede ver en la imagen anterior, concretamente el que pone lo de “trivia_flutter_demo (powered by Stetho)”. Para empezar a analizar las solicitudes HTTP basta con presionar en el enlace de inspect y se nos abrirá la ventana de las herramientas para desarrolladores integradas en Google Chrome.

Si ejecutamos la aplicación tal como estaba en el último punto y nos posicionamos en la pestaña Network, tras cargar una nueva pregunta veremos que hay un bug que provoca que la aplicación realice dos solicitudes cada vez que se actualiza el estado del widget principal de la aplicación. Esto no debería ser así ya que una única solicitud es suficiente para obtener la pregunta.

Si pulsamos cualquiera de las dos llamadas nos permitirá ver tanto la solicitud (con sus cabeceras y demás) como la respuesta enviada por el servidor, si abrimos la primera de ellas observaremos que los datos de la pregunta recibida no se corresponden a la que muestra la aplicación, esto se debe a que estamos recibiendo dos preguntas pero mostrando únicamente la última.

De esta forma hemos conseguido detectar un bug que antes se nos había pasado por alto y que visualmente no tiene ninguna implicación y es que se estaban realizando el doble de llamadas de las necesarias a la API de Open Trivia con el riesgo que eso conlleva en solicitudes más grandes y el consumo de datos extra que supone.

Por lo que vamos a aprovechar para corregirlo, para ello simplemente hay que eliminar la llamada al método que obtiene una nueva pregunta _newQuestion en el click del botón de siguiente y al seleccionar la respuesta ya que tal y cómo hemos construido la aplicación basta con actualizar el estado del widget para que éste se encargue de recoger la nueva pregunta, así que actualizamos nuestro fichero main.dart.

....
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: _newQuestion(),
      floatingActionButton: new FloatingActionButton(
        backgroundColor: Colors.blueGrey,
        onPressed: () {
          setState(() {
          });
        },
        tooltip: 'Next question',
        child: new Icon(
          Icons.skip_next,
          color: Colors.white,
        ),
      ),
    );
  }
 
....
 
  Widget _getMainWidget(question) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 0.0),
        child: Column(
          children: [
            Text(
              question.category,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blueGrey,
                fontSize: 25.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  QuestionContainer(question: question.question),
                ],
              ),
            ),
            AnswersContainer(
              question: question,
              onQuestionAnswered: () {
                setState(() {
                });
              },
            ),
          ],
        ),
      ),
    );
  }
 
....

Y esto ha sido todo, gracias a la librería Stetho y al análisis de las solicitudes HTTP de nuestra aplicación hemos conseguido detectar y resolver un bug que podría tornarse importante si la aplicación se encargase de realizar solicitudes más grandes y en mayores cantidades, todo de una forma super sencilla. Para terminar cabe mencionar que habría que desactivar de alguna manera la librería Stetho cuando nuestra aplicación sea compilada para producción, sólo debería utilizarse en entornos de desarrollo.

Cualquier duda, sugerencia o comentario será bienvenido.

Relacionado:

 

By |2018-11-01T20:33:20+00:00noviembre 1st, 2018|Android, Android, Desarrollo, Móvil, Móvil, Tecnología|0 Comments

About the Author:

Desarrollador de software de profesión, apasionado de la informática y todo lo relacionado con la tecnología

Leave A Comment