6.5. Conectividad con dispositivos moviles

La tecnología móvil ha mostrado un crecimiento tal que el número de usuario de telefonía móvil en el mundo asciende a los 5,000 millones de usuarios [1]. En el caso de México, datos de Junio de 2010 revelan que existen alrededor de 87 millones de usuarios de telefonía celular [2].

Este crecimiento ha traído consigo avances tecnológicos en redes y dispositivos desde la llamada primera generación analógica (1G) hasta la cuarta generaciones (4G). En la actualidad se cuenta con dispositivos avanzados, portátiles y de grandes capacidades tecnológicas conocidos como teléfonos inteligentes -denotados como smartphones en este trabajo- los cuales son altamente convergentes y multifuncionales [3][4].

El primer aspecto clave para la interacción y comunicación de los usuarios mediante cualquier dispositivo smartphone independientemente del tipo o modelo, sistema operativo y navegador con el que cuenten (ver Figura 1).

Figura 1 Características genéricas de los smartphones con conectividad 4G

El segundo aspecto clave es la conectividad que ofrece la tecnología celular de tercera generación que permite al usuario obtener una conexión a Internet de forma rápida y transparente mediante smartphones que cuentan con dicha conectividad 4G.

Esto se logra mediante la arquitectura basada en capas que describe la funcionalidad de las redes 3G a través de las funciones de transporte, control y aplicación (ver Figura 2). La capa de transporte maneja la información del usuario y los flujos de señalización, la capa de control aloja y gestiona los servicios y sus dominios, mientras que la capa de aplicación proporciona el ingreso a las plataformas mediante las cuales se accede a servicios tales como Internet.

Figura 2 Arquitectura

El tercer aspecto clave es la arquitectura del servidor web que integra los servicios de almacenamiento y las bases de datos que lo conforman. Esta arquitectura permite la operación y acceso sin necesidad de desarrollar aplicaciones específicas para cada tipo y modelo de smartphone. Con tal premisa se opta por implementar la arquitectura de referencia para un servidor web descrita en la Figura 3. En esta figura se describe el flujo de datos y dependencias entre subsistemas para responder a las peticiones del cliente mediante el procesamiento de dichas peticiones para brindarle acceso de forma transparente.

Figura 3 Arquitectura de referencia para un servidor web

La implementación de una arquitectura de servidor web ofrece la flexibilidad de utilizar tecnologías disponibles tanto comerciales y de código abierto. Particularmente optó por utilizar las de código abierto mediante la configuración de un servidor web (Linux, Apache, JQuery, MySQL, PHP) lo que permite una operación de forma transparente. Esto debido a que el usuario solo interactúa con el cliente, es decir el smartphone.

JMobil

JQueryMobile es un Framework javaScript para el desarrollo rápido y fácil de sitios webs optimizados para teléfonos móviles. Con este framework, aceleramos la velocidad de desarrollo de aplicaciones, encapsulando muchas tareas comunes ue se realizan cuando usamos el lenguaje JavaScript. Agrega una capa más a JQuery e intenta suplir algunas necesidades que los programadores de dispositivos móviles padecen.

En el pasado, un desarrollador tenía que programar según para qué dispositivo concreto, lo que alargaba los tiempos de desarrollo y mantenimiento de los sitios webs. Ahora con JQueryMobile, evitamos conocer la lógica específica de cada dispositivo y nos centramos en la programación para un solo fin, el navegador de un teléfono móvil./p>

index.html

El siguiente script presenta una imterface de login sencilla pero funcional.Escrito con html 5 pero con apoyo de JQuery Mobil

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>Demo login jqm</title>
  <link href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css' rel='stylesheet' />
  <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script> 
  <script src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <script src='login.js'></script>
</head>
<body>
  <section id='login' data-role='page'>
    <header data-role='header'>
       <h1>Login con JQM</h1>
    </header>
    <article data-role='content'>
      <form id='form_login'>
        <div data-role='fieldcontain' class='ui-hide-label'>
          <label for='txtuser'>Usuario:</label>
          <input type='text' name='txtuser' id='txtuser' value='' placeholder='Name' />
        </div>
        <div data-role='fieldcontain' class='ui-hide-label'>
          <label for='txtpassword'>Contraseña:</label>
          <input id='txtpassword' name='txtpassword' type='password'
                value='' placeholder='Password' />
        </div>
        <input type='button' value='Login' id='btnLogin'>
      </form>
    </article>
  </section>
  <!-- Aqui nuestro dialog con el mensaje de error  -->
  <section id='pageError' data-role='dialog'>
   <header data-role='header'>
     <h1>Error</h1>
   </header>
   <article data-role='content'>
     <p>Usuario o contraseña no valida</p>
     <a href='#' data-role='button' data-rel='back'>Aceptar</a>
   </article>
  </section>
</body>
</html>

login.js

Jquery Mobil permite la interacción html PHP

$(document).ready(function(){
  $('#errorMsg').hide();
    $('#btnLogin').click(function(){
      var usu = $('#txtuser').val();
      var pass = $('#txtpassword').val();
      $.post('server/login.php',{ usu : usu, pass : pass},function(respuesta){
        if (respuesta == true) {
                $.mobile.changePage('otro.html');
        } else{
          $.mobile.changePage('#pageError', 'pop', true, true);
          /*$('#errorMsg').fadeIn(300);
          $('#errorMsg').css('display', 'block');*/
        }
   });
  });
});

login.php

PHP se encarga de hacer el enlace con la capa de Base de Datos. Y retorna uno de 2 resultados posibles cierto o false

<?php

  $server = 'locaalhost';
  $username = 'root';
  $passwordword = '';
  $database = 'test';  
  $conexion = mysql_connect($server, $username, $password) 
              or die ('No se conecto: ' . mysql_error());
 
  mysql_select_db($database, $conexion);
 
  $username = mysql_real_escape_string($_POST['username']);
  $password = mysql_real_escape_string($_POST['pass']);
 
  $sql = 'SELECT nombre FROM usuarios WHERE nombre="$username" AND password="$password"';
 
  if ($resultado = mysql_query($sql, $conexion)){
    if (mysql_num_rows($resultado) > 0){
        echo true;
    }
  } else{
    echo false;
  }
  mysql_close($conexion);
?>