• En esta lección se presentan los conceptos de:

  • aplicaciones web orientadas a servicios y

  • mashups.

• Es el conjunto de servidores remotos en Internet para gestionar archivos y aplicaciones.

• Una de las ventajas de una nube es que permite que los usuarios utilicen archivos y aplicaciones sin tener que instalar programas en una computadora con acceso a Internet.

• El concepto de nube salió de los diagramas de red, donde Internet se representa como una nube, en una abstracción de la infraestructura que representa.

• Aplicación que los usuarios pueden utilizar accediendo a un servidor web a través de internet o de una intranet mediante un navegador.

• Fuente: https://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web

Utilidad o función que se utiliza a través de Internet.

Software as a Service (SaaS)

El más utilizado. El software está alojado en servidores de los proveedores y el cliente accede a ellos a través del navegador web. Todo lo relacionado con mantenimiento, soporte y disponibilidad es manejado por el proveedor.

Platform as a Service (PaaS)

En este tipo de servicios en la nube el proveedor ofrece acceso a un entorno basado en cloud en el cual los usuarios pueden crear, ejecutar, distribuir y administrar sus propias aplicaciones.

Infrastructure as a Service (IaaS)

Un proveedor de servicios proporciona aceso a recursos como servidores con una capacidad de cómputo contratada, almacenamiento y acceso a red.

• Almacenamiento

• Herramientas de Productividad

• Desarrollo de Aplicaciones

• Hosting

• Videoconferencias

• Mapas

• Streamming

Amazon Web Services (AWS)

https://aws.amazon.com/

Microsoft Azure

https://azure.microsoft.com/.

Google Cloud

https://cloud.google.com/.

Es una aplicación en la que algunas partes se realizan en un servidor independiente.

Características

• El procesamiento se reparte en varias computadoras.

• Un servicio puede ser utilizado por varias aplicaciones.

• Aplicación web en la que algunas operaciones se realizan en el servidor web y sus resultados se descargan al navegador web sin cambiar la página desplegada.

Es una aplicación que usa otras aplicaciones web.

Estructura

Proveedor de contenidos

Fuente de los datos. Los datos están disponibles vía una API y diferentes protocolos web como RSS, REST y Web Service.

El sitio mashup

Es la nueva aplicación web que provee un nuevo servicio utilizando diferente información y de la que no es dueña.

El navegador web cliente

Interfaz de usuario del mashup. En una aplicación web, el contenido puede ser mezclado por los web browser clientes usando lenguaje web del lado del cliente, por ejemplo, HTML y JavaScript.

Fuente: Wikipedia

• En esta lección se tocaron los siguientes temas:

  • Nube computacional.

  • Aplicación web.

  • Servicio en la nube.

  • Tipos de servicios.

  • Servicios que se ofrecen en la nube.

  • Servicios de nube más usados.

  • Aplicación orientada a servicios.

  • Aplicación web orientada a servicios.

  • Aplicación web hibrida (Mashup).

En esta lección se explica el funcionamiento de un servicio muy sencillo.

Puedes probar el ejemplo en http://srvejemplo.rf.gd/.

Versión para imprimir.

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

<?php

echo "Hola";

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

<?php

echo "Hola";

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

<?php

echo "Hola";

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

const resp =
 await fetch("servicio.php")
if (resp.ok) {
 const texto =
  await resp.text()
 alert(texto)
} else {
 throw new Error(
  resp.statusText)
}

1. Prueba el ejemplo en http://srvejemplo.rf.gd/.

2. Descarga el archivo /src/srvejemplo.zip y descompáctalo.

3. Crea tu proyecto en GitHub:

   1. Crea una cuenta de email, por ejemplo, pepito@google.com

   2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito.

   3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.

   4. En la página Create a new repository introduce los siguientes datos:

      • Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.

      • Mantén la selección Public para que otros usuarios puedan ver tu proyecto.

      • Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.

      • Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.

      • Cliquea Create repository.

4. Importa el proyecto en GitHub:

   1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.

   2. En Visual Studio Code, usa el botón de la izquierda para Source Control.

      

   3. Cliquea el botón Clone Repository.

   4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.

   5. Selecciona la carpeta donde se guardará la carpeta del proyecto.

   6. Abre la carpeta del proyecto importado.

   7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.

5. Edita los archivos que desees.

6. Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.

7. Para depurar paso a paso haz lo siguiente:

   1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.

   2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.

   3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).

   4. Selecciona el archivo donde vas a empezar a depurar.

   5. Haz clic en el número de la línea donde vas a empezar a depurar.

   6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.

   7. Haz clic en Run and Debug .

   8. Si no está configurada la depuración, haz clic en create a launch json file.

   9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .

   10. Aparece un cuadro con los controles de depuración

   11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.

   12. Regresa al navegador, recarga la página y empieza a usarla.

   13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.

8. Sube el proyecto al hosting que elijas. En algunos casos puedes usar filezilla (https://filezilla-project.org/)

9. Abre un navegador y prueba el proyecto en tu hosting.

10. En el hosting InfinityFree, la primera ves que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.

11. Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

    

• index.html

• servicio.php

• En esta lección se mostró el funcionamiento de un servicio.

• En esta lección se presentan el concepto y los componentes de una arquitectura orientada a servicios.

• Estilo de arquitectura de TI que se apoya en la orientación a servicios.

• La orientación a servicios es una forma de pensar en servicios, su construcción y sus resultados.

• Un servicio es una representación lógica de una actividad de negocio que tiene un resultado de negocio específico (ejemplo: comprobar el crédito de un cliente, obtener datos de clima, consolidar reportes de perforación).

Fuente: https://es.wikipedia.org/wiki/Arquitectura_orientada_a_servicios

• Reduce el nivel de acoplamiento.

• Clara definición de roles de desarrollo.

• Definición de seguridad más clara.

• Fácil de probar.

• Mejora el mantenimiento.

• Favorece la reutilización.

• Favorece el desarrollo en paralelo.

• Favorece la escalabilidad.

• Permite un mapeo directo entre los procesos y los sistemas.

• Permite un monitoreo preciso.

• Permite la interoperabilidad.

Fuente: http://soa-fpuna.blogspot.com/2011/11/ventajas-y-desventajas.html

• Definición clara y estandarizada mediante descriptores de servicio, donde se indique:

  • Nombre del Servicio.

  • Forma de accesos.

  • Funcionalidades que ofrece.

  • Descripción de los datos de entrada de cada funcionalidad que ofrece.

  • Descripción de los datos de salida de cada funcionalidad que ofrece.

• Sin estado: no guardan valores para ser usados en otras llamadas. (es posible acceder a bases de datos.)

• Pueden también ejecutar unidades discretas de trabajo como serían editar y procesar una transacción.

• No dependen del estado de otras funciones o procesos.

Fuente: https://ederluisdsd.wordpress.com/2013/03/17/principios-de-diseno-soa/

Capa de acceso

• Interfaz de usuario que invoca a los procesos de negocio.

• Interfaces web, escritorio, móvil, etc.

• Pueden ejecutarse en varios dispositivos.

Capa de procesos de negocio

• Integración de uno o más servicios que resuelven un problema de negocio.

Capa de servicio

• Componentes que se han desarrollado como servicios.

Capa de recursos

• Recursos operacionales: CRM, ERP, HR, BD.

• Tecnologías (Java, .NET, PHP).

Fuente: https://www.slideshare.net/imcinstitute/service-oriented-architecture-soa-15-introduction-to-soa

• Puedes encontrar información sobre este tipo de diagramas en: https://www.uml-diagrams.org/component-diagrams.html.

• A continuación se muestra como quedaría un sitio con bases de datos si se adaptara a SOA.

Versión para imprimir.

Versión para imprimir.

Versión para imprimir.

Este estándar no se usa.

• Siglas del catálogo de negocios de Internet denominado Universal Description, Discovery and Integration.

• El registro en el catálogo se hace en XML.

• Es una iniciativa industrial abierta (sufragada por la OASIS) entroncada en el contexto de los servicios Web.

• El registro de un negocio en UDDI tiene tres partes:

  Páginas blancas

  dirección, contacto y otros identificadores conocidos.

  Páginas amarillas

  categorización industrial basada en taxonomías.

  Páginas verdes

  información técnica sobre los servicios que aportan las propias empresas.

• Es uno de los estándares básicos de los servicios web, cuyo objetivo es ser accedido por los mensajes SOAP y dar paso a documentos WSDL, en los que se describen los requisitos del protocolo y los formatos del mensaje solicitado para interactuar con los servicios Web del catálogo de registros.

Fuente: https://es.wikipedia.org/wiki/UDDI

Versión para imprimir.

• En esta lección se introdujeron los siguientes temas:

  • Arquitectura orientada a servicios

  • Ventajas de una arquitectura orientada a servicios

  • Principios de diseño de un servici

  • Capas de una arquitectura orientada a servicios

  • Diagrama de Arquitectura

  • XML

  • SOAP

  • WSDL

  • UDDI

  • REST

En esta lección se presentan las características principales de un e-commerce.

Fuente: https://www.actualidadecommerce.com/las-5-principales-caracteristicas-de-un-sitio-ecommerce-bien-disenado/

• Cuando se trata de vender productos, el primer requisito a cumplir para una tienda e-commerce es que el comprador tiene que ser capaz de encontrar rápida y de forma especifica, lo que el o ella están buscando. Una navegación eficaz es fundamental para los sitios e-commerce ya que los visitantes que no pueden encontrar lo que buscan se traducen en ventas perdidas.

• En un negocio e-commerce, el foco de atención siempre debe estar en los productos que están disponibles para su compra. Un diseño que es extravagante sin sentido, generalmente hace más daño que beneficio, puesto que al final, el diseño no es lo que se vende, sino los productos.

• La experiencia del usuario en sitios de comercio electrónico es fundamental para el éxito. Es decir, si el proceso de compra implica demasiados pasos o incluso es confuso, los compradores simplemente terminarán abandonando su carrito de compras. Por ello, el checkout siempre debe implicar la mínima cantidad de pasos y debe ser lo más fácil e intuitivo para los compradores.

• Muchos negocios e-commerce se esfuerzan por mostrar los elementos que pueden ser de interés para los potenciales compradores. Un gran número de sitios de comercio electrónico están utilizando espacios muy amplios en la página de inicio para promover las ventas actuales, el lanzamiento de un nuevo producto o lo que sea que genere interés.

• La venta de productos en Internet es diferente de vender en una tienda física porque el comprador no puede tocar o ver en persona el producto antes de tomar la decisión de compra. Al ofrecer fotos de los productos que resaltan a detalle las características principales del mismo, se consigue superar ese inconveniente y se hace más fácil para el comprador decidir si conviene o no comprar el producto.

• En esta lección se presentaron las características principales de un e-commerce:

  • Facilidad de navegación.

  • El diseño no destaca por encima de los productos.

  • El diseño no destaca por encima de los productos.

  • Fácil proceso de compra.

  • Exhibir los productos más populares.

  • Fotos de productos a detalle.

A partir de esta lección se introducen elementos de software que facilitan el desarrollo de aplicaciones orientadas a servicios.

Este ejemplo recibe los datos JSON generados por un servicio.

Puedes probar el ejemplo en http://srvdevuelve.rf.gd/.

• El código más moderno de JavaScript se distribuye en módulos.

• El código de eventos de las etiquetas de HTML no tienen acceso directo al contenido de módulos, pero al asignar un elemento del módulo como una propiedad del objeto window, el elemento de software se vuelve visible dentro de los eventos. Se puede hacer con una instrucción de la forma
  window["propiedad"] = elementoDeSoftware
  o de la forma
  window.propiedad = elementoDeSoftware
  

• La función exportaAHtml hace visible una función a los eventos del código HTML.

• Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la función que se exporta..

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

• El código que se muestra en el ejemplo de servicio se repite en muchos ejemplos posteriores, pero además debe realizar algunas cuastiones adicionales. Para simplificar el trabajo, se introduce la función consumeJson, que realiza todo lo necesario para controlar la conxión desde el navegador web hacia el servidor.

• Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la url del servicio, o alternativamente, pasándole el resultado de invocar la función fetch que comunica al servicio.

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

• Para devolver al cliente los resultados de la ejecución de un servicio, se usa la función devuelveJson, escrita en PHP.

• Para usarla, debes importar el archivo donde está definida esta función usando require o require_once y luego invocarla pasándole el resultado generado por el servicio.

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta clase.

• Se acuerdo con el RFC 9457 en https://www.rfc-editor.org/info/rfc9457, cuando un servicio falla, debe devolver una estructura JSON conocida como Problem Details que informa los detalles del fallo.

• El tipo de fallo se describe en el campo type, del problem details y, adicionalmente, todo tipo de fallo debe tener una pequeña página donde se describe el problema. En estos ejemplos, se usa la carpeta error para almacenar las páginas que decriben los errores.

• Para usarla en JavaScript, debes importar el archivo donde está definida esta clase.

• Para usarla en PHP, debes importar el archivo donde está definida esta clase usando require o require_once. En este ejemplo no se usa la versión en PHP; se empezará a usar a partir de la lección sobre validaciones.

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de estas clases.

• Manejamos los errores en el navegador web y de una manera uniforme con la función muestraError.

• Cuando se tiene un error normal de JavaScript, se muestra la excepción correspondiente en la consola del navegador y el mensaje de la excepción en un cuadro de alert.

• Cuando es un ProblemDetails, cuya estructure se revisa en la lección sobre validaciones, sus propiedades se muestran en la consola del navegador y en un cuadro de alert.

• Para usarla, debes importar el archivo donde está definida esta función y colocarla dentro de un catch. Se le pasa como parámetro la excepción atrapada por el catch.

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

Versión para imprimir.

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola."
]);

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola."
]);

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

devuelveJson([
 "nombre" => "pp",
 "mensaje" => "Hola."
]);

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

const respuesta =
 await consumeJson(
  "srv/devuelve.php")
const body = respuesta.body
alert(`Nombre: ${body.nombre}
Mensaje: ${body.mensaje}`)

1. Prueba el ejemplo en http://srvdevuelve.rf.gd/.

2. Crea tu proyecto en GitHub:

   1. Crea una cuenta de email, por ejemplo, pepito@google.com

   2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito.

   3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.

   4. En la página Create a new repository introduce los siguientes datos:

      • Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.

      • Mantén la selección Public para que otros usuarios puedan ver tu proyecto.

      • Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.

      • Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.

      • Cliquea Create repository.

3. Importa el proyecto en GitHub:

   1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.

   2. En Visual Studio Code, usa el botón de la izquierda para Source Control.

      

   3. Cliquea el botón Clone Repository.

   4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.

   5. Selecciona la carpeta donde se guardará la carpeta del proyecto.

   6. Abre la carpeta del proyecto importado.

   7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.

4. Edita los archivos que desees.

5. Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.

6. Para depurar paso a paso haz lo siguiente:

   1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.

   2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.

   3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).

   4. Selecciona el archivo donde vas a empezar a depurar.

   5. Haz clic en el número de la línea donde vas a empezar a depurar.

   6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.

   7. Haz clic en Run and Debug .

   8. Si no está configurada la depuración, haz clic en create a launch json file.

   9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .

   10. Aparece un cuadro con los controles de depuración

   11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.

   12. Regresa al navegador, recarga la página y empieza a usarla.

   13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.

7. Sube el proyecto al hosting que elijas. En algunos casos puedes usar filezilla (https://filezilla-project.org/)

8. Abre un navegador y prueba el proyecto en tu hosting.

9. En el hosting InfinityFree, la primera ves que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.

10. Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

    

Haz clic en los triángulos para expandir las carpetas

• index.html

• jsconfig.json

• error

  • errorinterno.html

  • resultadonojson.html

• lib

  • js

    • consumeJson.js

    • exportaAHtml.js

    • muestraError.js

    • ProblemDetails.js

  • php

    • devuelveJson.php

    • devuelveResultadoNoJson.php

    • INTERNAL_SERVER_ERROR.php

• srv

  • devuelve.php

Versión para imprimir.

Versión para imprimir.

Versión para imprimir.

• Este archivo ayuda a detectar errores en los archivos del proyecto.

• Lo utiliza principalmente Visual Studio Code.

• No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

• En esta lección se mostró el funcionamiento de un ejemplo recibe los datos JSON generados por un servicio.

• Este ejemplo envía y recibe datos JSON.

• Muchos servicios de Internet utilizan esta forma de comunicación.

• Puedes probar el ejemplo en http://srvjson.rf.gd/.

• Se introduce la función enviaJson, que convierte un dato en una cadena JSON y la manda desde el navegador web hacia el servidor.

• Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole la URL, los datos y el método de envío, que por omisión es POST.

• A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

• Para que los servicios en el servidor puedan recuperar un texto en formato JSON, se introduce la función recuperaJson, escrita en PHP.

• Para usarla, debes importarla con require o require_once, invocarla y recibir la referencia al objeto recibido.

• A lo largo de esta lección, se profundiza en el uso y estructura de esta función.

Versión para imprimir.

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

$json = leeJson();
$saludo = $json->saludo;
$nombre = $json->nombre;
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

const datos = {
 saludo: "Hola",
 nombre: "pp"
}
const respuesta =
 await enviaJson(
  "srv/json.php", datos)
alert(respuesta.body)

1. Prueba el ejemplo en http://srvjson.rf.gd/.

2. Descarga el archivo /src/srvjson.zip y descompáctalo.

3. Crea tu proyecto en GitHub:

   1. Crea una cuenta de email, por ejemplo, pepito@google.com

   2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito.

   3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.

   4. En la página Create a new repository introduce los siguientes datos:

      • Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.

      • Mantén la selección Public para que otros usuarios puedan ver tu proyecto.

      • Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.

      • Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.

      • Cliquea Create repository.

4. Importa el proyecto en GitHub:

   1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.

   2. En Visual Studio Code, usa el botón de la izquierda para Source Control.

      

   3. Cliquea el botón Clone Repository.

   4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.

   5. Selecciona la carpeta donde se guardará la carpeta del proyecto.

   6. Abre la carpeta del proyecto importado.

   7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.

5. Edita los archivos que desees.

6. Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.

7. Para depurar paso a paso haz lo siguiente:

   1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.

   2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.

   3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).

   4. Selecciona el archivo donde vas a empezar a depurar.

   5. Haz clic en el número de la línea donde vas a empezar a depurar.

   6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.

   7. Haz clic en Run and Debug .

   8. Si no está configurada la depuración, haz clic en create a launch json file.

   9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .

   10. Aparece un cuadro con los controles de depuración

   11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.

   12. Regresa al navegador, recarga la página y empieza a usarla.

   13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.

8. Sube el proyecto al hosting que elijas. En algunos casos puedes usar filezilla (https://filezilla-project.org/)

9. Abre un navegador y prueba el proyecto en tu hosting.

10. En el hosting InfinityFree, la primera ves que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.

11. Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

    

Haz clic en los triángulos para expandir las carpetas

• index.html

• jsconfig.json

• error

  • errorinterno.html

  • resultadonojson.html

• lib

  • js

    • consumeJson.js

    • enviaJson.js

    • exportaAHtml.js

    • muestraError.js

    • ProblemDetails.js

  • php

    • devuelveJson.php

    • devuelveResultadoNoJson.php

    • INTERNAL_SERVER_ERROR.php

    • recuperaJson.php

• srv

  • json.php

Versión para imprimir.

Versión para imprimir.

• Este archivo ayuda a detectar errores en los archivos del proyecto.

• Lo utiliza principalmente Visual Studio Code.

• No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

Versión para imprimir.

• En esta lección se mostró un ejemplo que envía JSON a un servicio y, como respuesta, recibe datos JSON de ese mismo servicio.

• Este ejemplo muestra como procesar el contenido de una forma usando servicios.

• Puedes probar el ejemplo en http://srvform.rf.gd/.

• Se introduce la función submitForm, que permite enviar los datos capturados en un formulario hacia una URL.

• Se utiliza el formato mutipart/form-data, lo cual permite transmitir el contenido de archivos.

• Para usarla, debes importar el archivo donde está definida esta función y luego invocarla pasándole el evento generado al hacer submit a una form, la URL del servicio que precesa los datos y el método de envío, que por omisión es POST.

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

• Para que los servicios en el servidor puedan recuperar los datos tipo texto enviados por un formulario, por cookies o parámetros en la URL, se introduce la función recuperaTexto, escrita en PHP.

• Para usarla, debes importarla con require o require_once, invocarla pasándole el nombre del parámetro o campo que deseas leer y recibir el texto resultante. Si el nombre no está incluido en la solicitud, se recibe false.

• A lo largo de esta lección y las siguientes, se profundiza en el uso y estructura de esta función.

Versión para imprimir.

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

$saludo = leeTexto("saludo");
$nombre = leeTexto("nombre");
$resultado =
 "{$saludo} {$nombre}.";
devuelveJson($resultado);

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

const respuesta =
 await submitForm(
  "srv/procesa.php", event)
alert(respuesta.body)

1. Prueba el ejemplo en http://srvform.rf.gd/.

2. Descarga el archivo /src/srvform.zip y descompáctalo.

3. Crea tu proyecto en GitHub:

   1. Crea una cuenta de email, por ejemplo, pepito@google.com

   2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito.

   3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.

   4. En la página Create a new repository introduce los siguientes datos:

      • Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.

      • Mantén la selección Public para que otros usuarios puedan ver tu proyecto.

      • Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.

      • Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.

      • Cliquea Create repository.

4. Importa el proyecto en GitHub:

   1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.

   2. En Visual Studio Code, usa el botón de la izquierda para Source Control.

      

   3. Cliquea el botón Clone Repository.

   4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.

   5. Selecciona la carpeta donde se guardará la carpeta del proyecto.

   6. Abre la carpeta del proyecto importado.

   7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.

5. Edita los archivos que desees.

6. Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.

7. Para depurar paso a paso haz lo siguiente:

   1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.

   2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.

   3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).

   4. Selecciona el archivo donde vas a empezar a depurar.

   5. Haz clic en el número de la línea donde vas a empezar a depurar.

   6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.

   7. Haz clic en Run and Debug .

   8. Si no está configurada la depuración, haz clic en create a launch json file.

   9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .

   10. Aparece un cuadro con los controles de depuración

   11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.

   12. Regresa al navegador, recarga la página y empieza a usarla.

   13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.

8. Sube el proyecto al hosting que elijas. En algunos casos puedes usar filezilla (https://filezilla-project.org/)

9. Abre un navegador y prueba el proyecto en tu hosting.

10. En el hosting InfinityFree, la primera ves que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.

11. Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

    

Haz clic en los triángulos para expandir las carpetas

• index.html

• jsconfig.json

• error

  • errorinterno.html

  • resultadonojson.html

• lib

  • js

    • consumeJson.js

    • exportaAHtml.js

    • muestraError.js

    • ProblemDetails.js

    • submitForm.js

  • php

    • devuelveJson.php

    • devuelveResultadoNoJson.php

    • INTERNAL_SERVER_ERROR.php

    • recuperaTexto.php

• srv

  • procesa.php

Versión para imprimir.

Versión para imprimir.