El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Manejando Información de Red

Siguiente ►
►

En este módulo, aprenderás cómo manejar la información de red en una aplicación Apache Cordova. Esto incluye detectar el estado de la red, manejar cambios en la conectividad y trabajar con diferentes tipos de conexiones. La capacidad de gestionar la información de red es crucial para crear aplicaciones móviles robustas y confiables.

Objetivos de Aprendizaje

  • Entender cómo funciona la API de información de red de Cordova.
  • Detectar el estado de la red y los cambios en la conectividad.
  • Implementar funcionalidades basadas en el tipo de conexión de red.

Contenido

  1. Introducción a la API de Información de Red
  2. Detectando el Estado de la Red
  3. Manejando Cambios en la Conectividad
  4. Ejemplo Práctico
  5. Ejercicio Práctico
  6. Conclusión

Introducción a la API de Información de Red

La API de información de red de Cordova permite a las aplicaciones determinar el estado de la red y el tipo de conexión. Esto es útil para optimizar el comportamiento de la aplicación en función de la conectividad del usuario.

Instalación del Plugin

Para usar la API de información de red, primero necesitas instalar el plugin correspondiente:

cordova plugin add cordova-plugin-network-information

Detectando el Estado de la Red

La API proporciona propiedades y eventos para detectar el estado de la red. La propiedad navigator.connection.type devuelve el tipo de conexión de red.

Tipos de Conexión

Tipo de Conexión Descripción
Connection.UNKNOWN Estado de conexión desconocido
Connection.ETHERNET Conexión Ethernet
Connection.WIFI Conexión WiFi
Connection.CELL_2G Conexión celular 2G
Connection.CELL_3G Conexión celular 3G
Connection.CELL_4G Conexión celular 4G
Connection.CELL Conexión celular genérica
Connection.NONE Sin conexión de red

Ejemplo de Código

document.addEventListener("deviceready", function() {
    var networkState = navigator.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.CELL]     = 'Cell generic connection';
    states[Connection.NONE]     = 'No network connection';

    alert('Connection type: ' + states[networkState]);
}, false);

Manejando Cambios en la Conectividad

Puedes manejar cambios en la conectividad utilizando los eventos online y offline.

Ejemplo de Código

document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

function onOffline() {
    alert("You are now offline!");
}

function onOnline() {
    alert("You are now online!");
}

Ejemplo Práctico

Vamos a crear una aplicación que muestre un mensaje cuando el dispositivo se conecte o desconecte de la red.

Paso 1: Crear el Proyecto

cordova create NetworkApp
cd NetworkApp
cordova platform add android
cordova plugin add cordova-plugin-network-information

Paso 2: Modificar index.html

<!DOCTYPE html>
<html>
<head>
    <title>Network Information Example</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <h1>Network Information Example</h1>
    <div id="networkState"></div>
</body>
</html>

Paso 3: Modificar index.js

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        this.checkConnection();
        document.addEventListener("offline", this.onOffline, false);
        document.addEventListener("online", this.onOnline, false);
    },

    checkConnection: function() {
        var networkState = navigator.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.CELL]     = 'Cell generic connection';
        states[Connection.NONE]     = 'No network connection';

        document.getElementById('networkState').innerHTML = 'Connection type: ' + states[networkState];
    },

    onOffline: function() {
        alert("You are now offline!");
    },

    onOnline: function() {
        alert("You are now online!");
    }
};

app.initialize();

Ejercicio Práctico

Ejercicio

Crea una aplicación Cordova que muestre un mensaje personalizado cuando el dispositivo se conecte a una red WiFi y otro mensaje cuando se conecte a una red celular.

Solución

  1. Crea un nuevo proyecto Cordova.
  2. Instala el plugin de información de red.
  3. Modifica index.html y index.js para detectar el tipo de conexión y mostrar los mensajes personalizados.
var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        this.checkConnection();
        document.addEventListener("offline", this.onOffline, false);
        document.addEventListener("online", this.onOnline, false);
    },

    checkConnection: function() {
        var networkState = navigator.connection.type;
        if (networkState === Connection.WIFI) {
            alert("You are connected to WiFi!");
        } else if (networkState === Connection.CELL_2G || networkState === Connection.CELL_3G || networkState === Connection.CELL_4G || networkState === Connection.CELL) {
            alert("You are connected to a cellular network!");
        } else {
            alert("You are not connected to a network!");
        }
    },

    onOffline: function() {
        alert("You are now offline!");
    },

    onOnline: function() {
        app.checkConnection();
    }
};

app.initialize();

Conclusión

En este módulo, has aprendido cómo manejar la información de red en una aplicación Apache Cordova. Ahora puedes detectar el estado de la red, manejar cambios en la conectividad y optimizar el comportamiento de tu aplicación en función del tipo de conexión. Esto es fundamental para crear aplicaciones móviles que sean robustas y ofrezcan una buena experiencia de usuario, independientemente de la conectividad de red. En el próximo módulo, exploraremos cómo interactuar con la cámara del dispositivo.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados