WebService con PHP

Estándar

Que tal, lectores de éste blog medio irregular, en esta entrada como el título lo dice vamos a ver como crear un WebService super sencillo donde implementaremos una operación fácil, por no decir pan comido.

Seguramente te han planteado el problema en tu universidad o bachillerato de “Calcular el índice de masa corporal de una persona” (léase con voz de maestro) y la verdad es que es fácil, incluso puedes decirme en los comentarios, “Pero eso no está complicado”, “Ya hay páginas que sacan el cálculo”, “Para que lo hago si ya lo sé”. Cuál sea tu comentario, éste blog es para ver, practicar, repasar e incluso aprender cosas nuevas, así que el cálculo del IMC lo vamos a hacer del lado del servidor (no se lo esperaban verdad :P).

Requisitos

Para hacer esta práctica debemos tener encuanta que necesitamos:

  • Host (puede ser gratuito si queremos hacer esta prueba)
  • Editor de código (Usaré Visual Studio Code)
  • Muchas ganas de hacer tu webservice

Con todo listo vamos a explicar el flujo de nuestro mini proyecto con  un pequeño diagrama.

Flujo de los datos

1. Diagrama para funcionamiento del webservice

En el diagrama se muestra el funcionamiento básico del webservice que vamos a implementar en PHP, el flujo comienza en el dispositivo que vamos a utilizar como “cliente”, en este caso vamos a suponer un telefono celular, el cuál mandará una peticion a un servidor web, este servidor según sus reglas atenderá dicha petición y nos regresará una respuesta.

Lo único que tenemos nosotros que hacer aqui es programar nuestro webservice en PHP, no hay que configurar nada del host o del dispositivo, ya que podemos probar desde el mismo navegador del dispositivo.

Comenzaremos por crear la estructura en nuestro host, regularmente un webservice tiene una estructura de carpetas como la siguiente:

/API/V1/index.php

Esto es solamente una carpeta API que contiene una carpeta V1 donde estará nuestro index.php

Manos a la obra

En nuestro editor preferido vamos a comenzar por utilizar un header el cual nos dirá que tipo es el documento, en nuestro caso será de tipo application/json.

<?php
    header("Content-Type:application/json"); 
?>

Quizá te preguntes el porque un contenido de tipo application/json, la respuesta es que este tipo de “servicios” utiliza protocolos para el envío y recepción de peticiones.

Con el header definido vamos a empezar con el procesamiento de la información, es por ello que utilizaremos la variable $_GET para obtener datos que sean enviados en la petición en la url del navegador.

Debemos saber el nombre de quién es la persona que está consultando su IMC, así que el primer dato que recibiremos será un nombre y validaremos que el dato no venga vacío.

<?php
    header("Content-Type:application/json");
    
    $nombre = $_GET['nombre'];
    if(!empty($nombre))
    {
        //Nombre valido       
    }
    else
    {
        //Nombre no valido
    }
?>

Ya que estamos seguros que el nombre enviado a la petición contiene algún valor, vamos a revisar si los valores del peso y la estatura contienen valores, as[i que realizaremos una evaluación similiar a la del nombre:

<?php      
    header("Content-Type:application/json");

    $nombre = $_GET['nombre'];
    if(!empty($nombre))
    {
        $peso = $_GET['peso'];
        $estatura = $_GET['estatura'];

        if(!empty($peso) && !empty($estatura))
        {
            //Calculo de IMC
        }
        else
        {
            //Peso o estatura no validos
        }
    }
    else
    {
        //Nombre no valido
    }
?>

Ahora vamos a realizar la operación necesaria para el cálculo con los datos ya otenidos, la forma de calcular el IMC se obtiene dividiendo el peso entre la estatura elevada al cuadrado.

IMC = peso / (estatura * estatura)

Esto mismo haremos en el c[odigo para calcular el IMC y casi habremos terminado.

<?php      
    header("Content-Type:application/json");

    $nombre = $_GET['nombre'];
    if(!empty($nombre))
    {
        $peso = $_GET['peso'];
        $estatura = $_GET['estatura'];

        if(!empty($peso) && !empty($estatura))
        {
            $estatura /= 100;
            $imc = $peso / ($estatura * $estatura);
            $imc = round($imc, 2); 
        }
        else
        {
            //Peso o estatura no validos
        }
    }
    else
    {
        //Nombre no valido
    }
?>

Por último vamos a crear una función que va a devolver la respuesta en el formato que se utiliza para los webservices, una respuesta HTTP en formato JSON, esta función la utilizaremos para devolver el resultado del IMC calculado, así como los mensajes de errores (como el nombre o peso/estatura vacíos).

<?php
header("Content-Type:application/json");

    $nombre = $_GET['nombre'];
    if(!empty($nombre))
    {
        $peso = $_GET['peso'];
        $estatura = $_GET['estatura'];

        if(!empty($peso) && !empty($estatura))
        {
            $estatura /= 100;
            $imc = $peso / ($estatura * $estatura);
            $imc = round($imc, 2);
            deliver_response(200, "$nombre tu IMC es de $imc", $imc);
        }
        else
        {
            deliver_response(200, "peso o estatura no validos", null);
        }
    }
    else
    {
        deliver_response(200, "Nombre no valido", null);
    }

    function deliver_response($status, $status_message, $data)
    {
        header("HTTP/1.1 $status $status_message");
        $response['status'] = $status;
        $response['status_message'] = $status_message;
        $response['data'] = $data;

        $json_response = json_encode($response);
        echo $json_response;
    }

?>

La función deliver_response() lo que hace es recibir un status, mensaje y datos, los cuales enviará como respuesta en formato HTTP, éste formato al final lo convertiremos a un objeto JSON y lo lanzaremos como respuesta.

Probaremos el WebService

Para probar el WebService tenemos que subir el achivo index.php que creamos a nuestro host, en mi caso la ruta del archivo es:

http://www.raptorsarts.com.mx/API/IMC/V1/index.php

Para ver el funcionamiento debemos de pasar los parámetros desde la url ya que si damos clic a nuestro WebService nos mandará el error de nombre no válido, así que para probar el nombre podemos ingresar el parámetro a la url.

http://www.raptorsarts.com.mx/API/IMC/V1/index.php?nombre=Antonio

Ahora nos arroja el error del peso o estatura no válidos, solucionamos esto enviando también por parámetros el peso y la estatura.

http://www.raptorsarts.com.mx/API/IMC/V1/index.php?nombre=Antonio&peso=75&estatura=189

Ahora si, el WebService nos muestra nuestro IMC, podemos verlo desde la información mostrada en el navegador o desde la opción de desarrollador el objeto que nos regresa y explorarlo.

Visualización del resultado

Visualización del resultado

 

Con esto terminamos, si tienes algun problema de implementación no dudes en escribirme o dejarme un comentario.

Aquí te dejo el link del repositorio por si necesitas revisar el código completo:
WebService IMC – GitHub

¿Qué sigue?

Ahora viene una pregunta interesante, ¿te imaginas el poder de los webservices?, si pones un poco de atención en el flujo de la petición hay un Horno de Microondas, lo puse a propósito (obviamente), porque con los webservices podemos hacer mucho IoT (Internet of Things – Internet de las Cosas) agregando algun harware para comunicar nuestro WebService con lo que se nos ocurra controlar, las luces de nuestro cuarto, nuestro XBox o saber cuanta energía eléctrica estamos utilizando. Ésto y muchisimas cosas más podemos hacer, poco a poco iré subiendo pequeños tutoriales.

Sin más por el momento espero que llegaran hasta éste punto del post (a decir verdad uno de los más largos) pero el contenido a mi parecer es sencillo de comprender y replicar.

Aun seguiremos utilizando WebServices, nos vemos en la siguiente entrada, hasta la próxima y los dejo con algo tranquilo que les servirá para hacer su WebService.

 

Publicar un curso con SCORM

Estándar

scorm

 

 

 

Publicar el paquete

¡Hey que tal! ya regrese con este ultimo post de como publicar nuestro paquete SCORM, en si no tenia planeado hacer todo esto, pero sentí que era necesario, el objetivo era como integrar SCORM con Unity 3D, pero como les mencioné, quizá era necesario que entendieran un poco cómo es que funciona el SCORM, así que en la siguiente entrada voy a empezar con la integración.

Ahora vamos a la parte final de esto, vamos a publicar el paquete en nuestra plataforma LMS, en mi caso voy a utilizar la plataforma Moodle, pero en dado caso de que no tengas alguna instalado ya en tu computadora como lo dije en el primer post de SCORMpueden instalar un moodle en su localhost (enlace en la parte final de la entrada) o pueden utilizar la siguiente opción, moodlecloud para utilizar una pagina ya con moodle pre-instalado, te registras y listo 😀 .

Comencemos

En nuestra página principal del Moodle vamos a ir a la administración del sitio, después vamos a ir a la sección de cursos y seleccionamos la opción de administrar cursos.

Administrar Cursos

Administrar Cursos

En ésta sección vamos a crear una nueva categoría, en mi caso voy a ponerle de nombre a la categoría “Prueba SCORM” y damos en crear.

Agregar categoría

Agregar categoría

Una vez creada la categoría vamos a agregar un nuevo curso en la categoría que acabamos de crear, como nombre le pondré algo sencillo, “test”, y nos vamos a la parte donde se muestran las opciones de Formato de Curso, aquí es muy importante  seleccionar Actividad simple y Paquete SCORM, recuerden, ¡MUY IMPORTANTE! :D.

Formato de curso

Formato de curso

Damos clic en mostrar y visualizar para después dar clic en la opción de Proceder al contenido del curso, en este punto vamos a subir nuestro empaquetado .zip que creamos en el post anterior en el apartado de “Paquete” y seleccionamos nuestro archivo y damos clic en subir.

Contenido de curso

Contenido de curso

Una cosa más, es mejor utilizar una ventana solo para nuestro contenido, esto lo hacemos cambiando la opción en la Apariencia de nuestro curso.

Apariencia

Apariencia

 

Perfecto, guardamos los cambios y podemos dar clic en la opción “Entar” para ver lo que hicimos 😀 .

Iniciando

Iniciando

En la página emergente podemos ver que se muestra el contenido que creamos en la entrada de Crear el archivo index, un par de botones para conocer el nombre del usuario y para marcar el curso como completado.

Al iniciar el curso vemos como sale un alert indicando que se esta iniciando el curso. Aceptamos el cuadro de diálogo y vemos el contenido, del lado izquierdo vemos que hay un apartado con el nombre que pusimos cuando creamos el archivo imsmanifest.xml, hay un recuadro en blanco, eso índica que el contenido no está terminado.

Obtener nombre

Obtener nombre

Si damos clic en el botón de obtener nombre, nos mostrará el nombre del usuario debajo del botón, ¡Genial! 😀 se comunica nuestro contenido con el LMS.

Probemos ahora en pasar el curso a completado presionando el botón correspondiente.

Completar curso

Completar curso

Mandará la ventana emergente y si todo sale bien nos regresara una respuesta de true que será como equivalente a felicidad (jajaja xD). Vale, ahora podemos cerrar la ventana emergente y volver a abrirla para que cuando se cargue de nuevo el contenido veamos algo como lo siguiente.

Curso completado

Curso completado

¿Notas algo diferente?, ¡Claro! hay una palomita en el recuadro blanco del lado izquierdo, eso significa que esa parte del curso ya estaba completada, entonces eso significa que nuestro contenido funcionó correctamente 😀 .

Con esto se termina esta mini serie de tutoriales, en donde cada día les dejaba algo para poder realizar el demo, ahora es tu turno de implementarlo en lo que mas quieras. En mi caso vamos a implementarlo dentro de Unity 3D.

¡Nos estamos leyendo! Hasta la próxima 😀 Terminemos el lunes con algo tranquilo ❤

Recuerden que tienen el Github con los archivos para el demo, si tienen alguna duda no duden en consultar el repositorio o dejar algún comentario 😀 .

Repositorio de Github: https://github.com/JoseAntonioMora/ScormDemo/

J. Antonio Mora

RaptorsArts

RaptorsArts

 

ARCHIVOS PARA SCORM – INDEX

Estándar

scorm

 

 

 

EL ARCHIVO INDEX.html

Hola de nuevo, ahora vamos a realizarlo que es el archivo donde ya vamos a empezar a ver lo que hace Scorm, en este archivo como les mencioné en el post pasado, vamos a ver como obtener el nombre de usuario de la plataforma para mostrarlo en pantalla.

comencemos…

Empecemos abriendo nuestro editor de código favorito (SublimeText2 ❤ 4ever XD ), una vez hecho esto vamos a crear un archivo nuevo llamado “index.html” obviamente sin las comillas,  y vamos a crear lo elemental de una pagina web, les digo porque me gusta tanto SublimeText2, pues solo pongo ésta instrucción:

html:5 > Presiono tabulador y listo, me sale esto 😀 (primero instala emmet)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Modificamos el título y ponemos algo que sea de nuestro agrado, yo pues pondré algo único, “Hola mundo”, no me juzgues jajaja, vale entonces vamos a empezar a crear nuestro documento.

Agregamos el SCORM API que descargamos el Github y lo vamos a agregar dentro del head para que podamos utilizarlo.

<head>
    <meta charset="UTF-8">
    <title>Hola Mundo WordPress</title>
    <script type="text7javascript" src="SCORM_API_wrapper.js"></script>
</head>

y en el body vamos a poner dos botones  y un div con el id Nombre, en este div vamos a mostrar el nombre del alumno que esta viendo el curso. Así que tendremos algo parecido a esto:

<body>
    <h2>Primera conexión a la plataforma LMS</h2>
    <input> type="button" onclick="ObtenerNombre()" value="Obtener Nombre">
    <input> type="button" onclick="CompletarCurso()" value="Completar Curso">
    <div id="Nombre"></div>
</body>

Perfecto, ya tenemos listo la estructura HTML que necesitamos, ahora vamos a escribir algo de código javascript, en nuestra prueba vamos a utilizar 7 funciones, a continuación las listo.

  1. init()
  2. CompletarCurso()
  3. ObtenerNombre()
  4. fin()
  5. Mensaje()
  6. onload()
  7. onunload()

Estas funciones las vamos a ver en la siguiente entrada, por hoy es todo 😀 , Saludos! y nos vemos para codear algo de Javascript y ver por fin la luz al final del tunel jajaja.

J. Antonio Mora

RaptorsArts

RaptorsArts

Disfrutar que es viernes!! un viernes con muchísima energía 😀 (visiten nuestra pagina web, cualquier duda no piensen en mandar mail!)