Utilizar los componentes REST con Delphi

En esta ocasión veremos cómo hacer llamadas REST utilizando los componentes que nos proporciona Delphi 10.4.1

Desde el menú Tools, accedemos a la opción REST Debugger, y se abrirá un programa desarrollado por Embarcadero realizado para simplificar las consultas web y ver, entre otras cosas el header, body, los datos en formato tabular, cuando se hacen llamadas a una API. En cierto modo es parecido al funcionamiento del comando curl en Linux. 

 

 

En este caso voy a hacer una consulta a la API que nos proporciona la NASA para ver la foto del día.

https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=2021-08-15

En el campo URL pondremos la URL anterior, y dado que la consulta devuelve el resultado en formato JSON, en el Content-type seleccionaremos application/json

Pulsamos el botón "Send Request" y si todo ha ido bien en la parte inferior de la ventana, etiquetada con el nombre "Response" veremos la respuesta del Servidor (Headers, Body y Tabular Data)

Pulsamos el botón  "Copy components", para copiar en el clipboard los componentes (RestClient, RestRequest y RestResponse)

A continuación tenemos que crear una nueva aplicación:

Empezamos como siempre desde File -New - MultiDevice Application y añadimos 2 componentes: un tButton y un tMemo

Ahora tenemos que pegar los componentes anteriores sobre la vista de formulario de nuestro programa pulsando Ctrl+V, y quedará como sigue:

Añadimos a la ventana del Form un TButton y un TMemo, que contendrá el archivo JSON devuelto por la API

Sobre el form, con el botón derecho del ratón, activamos el menú "Bind Visually..." para que se abra el "LiveBindings Designer"

y unimos con el ratón los campos JSONText y Text (del tMemo) como muestra la figura:

 

En el botón insertamos la siguiente línea de código:

PROCEDURE TForm1.Button1Click(Sender: TObject);
BEGIN
  BEGIN
    RESTRequest1.Execute;
  END;
END;

Ejecutamos el programa y pulsamos el botón "Iniciar" del Form y nos mostrará la información que nos ha devuelto la llamada a la API

Si no quieren utilizar el LiveBindings Designer, tendrían que poner el siguiente código en el botón INICIAR.

PROCEDURE TForm1.Button1Click(Sender: TObject);
BEGIN
  VAR
    jValue: TJSONValue;
  BEGIN
    RESTRequest1.Execute;
    jValue := RESTResponse1.JSONValue;
    Memo1.Text := jValue.ToString;
  END;
END;

------------

En los siguientes Post les indicaré como dar formato tabular al JSON para que se pueda visualizar desde un DataSet, desde un StringGrid o utilizando una tabla en memoria para hacer consultas.

 

Programa complejo resuelto con una línea de código en Delphi

Partimos del supuesto que recibimos el encargo de realizar un programa en Delphi que debe hacer una llamada a una API, la cual nos devuelve un resultado en formato JSON, con 1000 campos, pero sólo queremos visualizar 3 de ellos (URL, TITLE, EXPLANATION) en el formulario de presentación al cliente.

¿Cómo hacemos esto de una forma visual en Delphi?, pues a continuación les explico detalladamente los pasos a seguir:

Añadimos un componente tRestResponseDataSetAdapter, un tFDMemTable y para hacer pruebas un tStringGrid, que nos mostrará todo el conjunto de datos

En la propiedad "Dataset" del tRestResponseDataSetAdapter seleccionamos FDMemTable1 y en "Response" selecciono "RESTResponse1"

Con el botón derecho del ratón pulsamos sobre el componente FDMemtable1 y seleccionamos AddBindSource, con lo se creará otro componente llamado "BindSourceDB1"

Volvemos a pulsar con el botón derecho del ratón sobre FDMemTable1 y seleccionamos Bind Visually... abriéndose una ventana llamada "LiveBindings Designer" 

Si vinculamos FDmemTable1 con el componente StringGrid1, uniendo con el ratón los campos marcados con un asterisco, de esta forma:

al iniciar el programa llamando a "Execute", de esta forma:

PROCEDURE TFORM1.INICIO;
BEGIN
	RESTRequest1.Execute;
END;

veremos que los 1000 campos que nos ha devuelto la API se ven el Grid, que no es lo queremos en este caso, ya que únicamente necesitamos que se muestren en pantalla 3 de ellos, entonces ¿cómo se hace esto?, pues gracias al componente tBindingsList    ¡Este es el truco de magia!

1) Hacemos doble clic sobre el componente BindingsList1

(que se habrá creado al hacer la vinculación anterior)

 

 2) Sobre el apartado Bind Components hacemos clic con el botón derecho y seleccionamos la opción "New LinkControlToField1" y hacemos clic sobre esa nueva línea que se habrá creado para ver las propiedades en el Inspector de Objetos.

 

Allí en la propiedad "DataSource" seleccionamos "BindSourceDB1"  y en "FieldName" escribimos "Title" (es uno de los campos que nos interesa visualizar)

Cerramos la ventana de Edición del BindingsList y Actualizamos la ventana "LiveBindings Designer" haciendo clic con el botón derecho del ratón y activando el menú "Refresh Designer"

 

Veremos que se ha creado un nuevo ítem "Title (Invalid)", lo de Invalid me imagino que es por que el dataset está cerrado en la fase de diseño.

 

y hacemos lo mismo para los otros dos campos.

Después sólo queda vincular los ítems "Title (invalid), url (invalid) y explanation (invalid)" a los componentes tEdit-Text, uniendo con el ratón los campos anteriores con el campo "Text", tal como se muestra en la imagen:

 

Eliminamos el componente "StringGrid1"

Y eso es todo, ahora al ejecutar el programa

PROCEDURE TFORM1.INICIO;
BEGIN
	RESTRequest1.Execute;
END;

Veríamos el resultado que nos interesa, lo que se traduce en una mayor rapidez de ejecución del programa, ya que nos ahorramos procesar 997 campos, de los 1000 que devuelve la API.

Además, como han podido ver, todo se ha hecho de forma visual con sólo 1 línea de código (RESTRequest1.Execute),
simplemente asombroso y es que además este mismo programa funciona en
Android, IOS, Linux y Windows y la portabilidad es instantánea.

¿A que merece la pena pasarse a Delphi? 

Imáginense la cantidad de código que habría que escribir con otros lenguajes de programación para hacer lo mismo, y es que Delphi utilizando programación visual no tiene rival.

 

Obtener datos metereológicos con la API REST de openweathermap

En este post vamos a aplicar lo que hemos visto anteriormente sobre el tratamiento de las llamadas a APIs, en concreto vamos a practicar usando la API de openweathermap  

Inicialmente necesitamos obtener el API-KEY,  que se obtiene desde la propia página en función del tipo de servicio se necesite, en nuestro caso para hacer pruebas, con el servicio FREE es suficiente, ya que nos permite hacer 60 llamadas a la API por minuto y 1000000 al mes.

Aquí tienen los precios de los diferentes servicios que ofrece.

Una vez que tenemos el token (es algo parecido a esto: 23ab82b1ca4fab6783902accd6fb783a63) abrimos nuestra plataforma de desarrollo de aplicaciones de confianza Delphi 10.4.2

Abrimos la aplicación Rest Debugger, desde el menú Tools - Rest Debugger y en la caja de texto URL, escribimos:
http://api.openweathermap.org/data/2.5/weather?lat=40.4167&lon=-3.70325&APPID=<API-KEY> (sustituyendo <API-KEY> por la que han obtenido de la página web)
y en la caja "Content-Type" seleccionamos la opción application/json

Pulsamos el botón SEND REQUEST, esperamos unos segundos para recibir una respuesta del servidor y pulsamos a continuación el botón COPY COMPONENTS

Después vamos al form de nuestra aplicación y pulsamos Ctrl+V para pegar los componentes RESTClient, RESTResponse y RESTRequest.

Todo esto está explicado con detalle en el post: "Utilizar los componentes REST con Delphi"

El siguiente paso es extraer la información del JSON que nos devuelve el servidor de los campos "main" y "weather" (hay más pero para este ejemplo es suficiente)

{
    "coord": {
        "lon": -3.7923,
        "lat": 40.4587
    },
    "weather": [
        {
            "id": 800,
            "main": "Clear",
            "description": "clear sky",
            "icon": "01n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 304.73,
        "feels_like": 302.85,
        "temp_min": 300.24,
        "temp_max": 307.74,
        "pressure": 1018,
        "humidity": 22
    },
    "visibility": 10000,
    "wind": {
        "speed": 7.6,
        "deg": 23,
        "gust": 9.39
    },
    "clouds": {
        "all": 0
    },
    "dt": 1629142067,
    "sys": {
        "type": 2,
        "id": 2007545,
        "country": "ES",
        "sunrise": 1629091608,
        "sunset": 1629141097
    },
    "timezone": 7200,
    "id": 6544494,
    "name": "Madrid City Center",
    "cod": 200
}

----

 Para extraer la información de dichos campos hay que seguir los pasos del post:

"Programa complejo resuelto con una línea de código en Delphi"

Añadiendo un RESTResponseDataSetAdapter, FDMemTable, BindsourceDB y BindingsList 

Al final en el LiveBindings Designer  tendría que aparecer lo siguiente:

Como ven los campos main y weather se vinculan a los componentes Edit1.Text y Edit2.Text (hacer todo lo anterior no se tarda más de 5 minutos)

Añadimos un componente tButton (INICIAR) y escribimos dentro del evento onclick del Botón:  

         

PROCEDURE TForm1.Button1Click(Sender: TObject);
BEGIN

	RESTRequest1.Execute;

END;

Ejecutamos el programa pulsando el botón INICIAR

Vemos que nos ha devuelto en la caja Edit1

[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}]

y en la caja Edit2

{"temp":307.92,"feels_like":305.57,"temp_min":303.57,"temp_max":310.28,"pressure":1017,"humidity":16}

Para que sea un poco mas manejable la información, he creado un procedimiento llamado "GetData" para que al final quede la información de esta forma

id=800
main=Clear
description=clearsky
icon=01n
temp=303.53
feels_like=301.82
temp_min=299.13
temp_max=304.97
pressure=1018
humidity=23

El procedimiento GetData es el siguiente:

Procedure TForm1.GetData(texto: STRING);
VAR
  i: integer;
  aux: STRING;
  datos: TStringDynArray;
BEGIN
  aux := texto;
  FOR i := LOW(texto) TO HIGH(texto) DO
  BEGIN
    IF (ansipos(aux[i], '{}[]"')) > 0 THEN
      aux[i] := ' ';
  END;
  aux := stringreplace(aux, ' ', '', [rfreplaceAll]);
  datos := SplitString(aux, ',');
  FOR i := 0 TO length(datos) - 1 DO
  BEGIN
    datos[i] := stringreplace(datos[i], ':', '=', [rfreplaceAll]);
    Memo1.lines.add(datos[i]);
  END;
END;

--- 

Y este es el resultado:

Si lo quieren probar, recuerden que tienen que añadir el API-KEY en la propiedad "BaseURL" del componente RESTClient1, si no lo hacen dará el error "FDMemTable:Field main not found"

Descarga del programa

Si quieren saber más sobre desarrollo de API REST pueden consultar este post de Marco Cantú en el que habla de la web apilayer.com, una web que ofrece microservicios basados en API.