¿Pensando el realizar solicitudes de la red de redes mediante tu aplicación hecha en Ionic y el componente Http? O, quizás ya sabes cómo se hace, pero te falta algún detallito, cómo los parámetros de alguna función, para dejarlo cómo tu quieres ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y con este artículo aprenderás cómo realizar solicitudes a internet mediante el componente Http Ionic desde tu aplicación.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Instalación de Http en Ionic
Pues cómo es costumbre, al tratarse de un módulo desacoplado, necesita de una instalación para poder hacer uso de él.
Para tal fin vamos a usar las siguientes dos líneas de consola:
La primera instala el plugin que nos permitirá la comunicación nativa con el sistema.
Y la segunda instala el código necesario para comunicar nuestro código con el plugin.
Configuración de Ionic Http
Este componente no requiere ninguna configuración si vamos a usar el paquete ngx. De lo contrario necesitará que lo agreguemos a los providers de nuestra app.
Y con esto ya estaríamos en disposición de usarlo. Recordad que no es recomendable incluir el módulo en los providers centrales de la app (AppModule). Es mejor incluirlo en los de cada módulo donde vayamos a usar el componente.
Plataformas soportadas por Http en Ionic
La diferencia con el antiguo módulo http es, que este utiliza la parte nativa del sistema para hacer la petición en lugar del api de Javascript, Ajax. Y por esto solo está disponible en las siguientes plataformas:
Antes de entrar a tope, siempre me gusta ilustrar con un ejemplo de uso lo más parecido posible a la realidad. Así que aquí vamos…
import { HTTP } from '@awesome-cordova-plugins/http/ngx';
constructor(private http: HTTP) {}
...
this.http.get('http://ionic.io', {}, {})
.then(data => {
console.log(data.status);
console.log(data.data); // Información recibida desde el server.
console.log(data.headers);
})
.catch(error => {
console.log(error.status);
console.log(error.error); // Mensaje de error en una cadena.
console.log(error.headers);
});
En primer lugar realizamos in import de nuestro componente con la línea:
“import { HTTP } from '@awesome-cordova-plugins/http';”
En caso de que queramos usar el módulo ngx en versiones de Ionic 4 en adelante podemos usar el siguiente:
“import { HTTP } from '@awesome-cordova-plugins/http/ngx';”
Posteriormente inyectamos una instancia del componente mediante el constructor de la clase. Al tratarse de un servicio, no es necesario que lo inicialicemos, ya viene listo para ser usado :) Las ventajas de usar Ionic.
Y el siguiente paso ya es usarlo. En el caso del ejemplo lo que haremos es realizar una petición “get” a los servidores de Ionic.
El resto ya queda a imaginación de cada uno.
Cómo realizar una solicitud http post con la cabecera application/x-www-form-urlencoded
Para realizar una solicitud HTTP con la cabecera "application/x-www-form-urlencoded" en Ionic, primero debes importar el módulo HttpClient de Angular en tu componente o servicio:
...
import { HTTP } from '@awesome-cordova-plugins/http/ngx';
...
Luego, en el constructor de tu componente o servicio, debes inyectar la dependencia del HttpClient:
...
constructor(private http: HTTP) {}
...
Para realizar la solicitud HTTP, puedes usar el método "post" del objeto HTTP que hemos inyectado antes a través del constructor. Este método toma como argumentos la URL del endpoint al que quieres enviar la solicitud y el cuerpo de la solicitud (en este caso, los datos que quieres enviar en el formulario). También puedes pasar un tercer argumento opcional que es un objeto con las opciones de la solicitud, donde puedes especificar la cabecera Content-Type.
Aquí te dejo un ejemplo de cómo realizar una solicitud HTTP con la cabecera application/x-www-form-urlencoded en Ionic:
Con este método podremos setear los valores de autentificación que queremos enviar en la petición junto a la cabecera “basic”, la autentificación básica de Http.
Parámetros:
username -> string -> El nombre de usaurio.
password -> string -> La contraseña del usaurio.
getHeaders(host)
Nos devuelve todas las cabeceras de la petición dependiendo del host solicitado-
Parámetros
host -> string -> Será el host solicitado.
Retorna una cadena con todas las cabeceras formateados que se van a enviar.
setHeaders(host, header, value)
Nos permite incluir cabeceras sobre una petición.
Parámetros:
host -> string -> Será el nombre del host (ip o url)
header -> string -> La key de la cabecera
value -> string -> Será el valor que tiene la cabecera.
getDataSerializer()
Esta función nos devuelve dentro de una cadena el nombre de serializador de la petición.
Retorna una cadena con el nombre. Los posibles son los siguientes:
urlencoded
utf8
json
setDataSerializer(serializer)
Setea el serializador de la petición. En el método de antes hemos visto los posibles.
Parámetros:
serializer -> string -> El nombre del serializador utilizado.
urlencoded
utf8
json
setCookie(url, cookie)
Agregar una cookie a la solicitud.
Parámetros:
url -> string -> Será el alcance de la cookie.
cookie -> string -> Será la cookie en si. Tiene que estar codificado en RFC.
Es igual que la función anterior, pero esta vez limpia solo las cookies de una URL / scope en concreto.
Parámetros:
url -> string -> La url de la que quieres eliminar las cookies.
getCookieString(url)
Devuelve todas las cookies en una cadena codificadas para esta URL.
Parámetros:
url -> string -> La url de la que quieres obtener las cadenas.
getRequestTimeout()
Devuelve el valor de este campo, que es en el que se caduca la petición en caso de no contestar el servidor.
Retorna un “number” con el valor de este campo en segundos.
setRequestTimeout(timeout)
Setea el valor de caducidad de la petición en caso de que el servidor no conteste.
Parámetros:
timeout -> string -> Será el valor de caducidad en segundos. Por defecto es 60 segundos.
setSSLCertMode(mode)
Establezca el modo de manejo de certificados SSL, siendo uno de los siguientes valores predeterminados.
Parámetros:
mode -> string|enum -> “default” | “noncheck” | “pinned” -> Es el modo en el que queremos que el sistema trate a los ecrtificados.
disableRedirect(disable)
Hace que la petición no siga las redirecciones que conteste el server.
Parámetros:
disable -> booleano -> Si es verdadero, no seguirá las redirecciones.
Retorna una promesa que resuelve si todo ha ido bien. En caso contrario se saldrá por el catch.
post(url, body, headers)
Realiza una petición POST contra la url de la solicitud.
Parámetros:
url -> string -> La url a la que se va a enviar la solicitud.
body -> object -> Será un objeto de pares K=>V con se enviarán al servidor.
headers -> object -> Similar al cuerpo, pero para las cabeceras.
Retorna una promesa que hay que controlar. Dentro de ella llega una instancia de “HTTPResponse” que veremos sus campos más adelante. Pero, en resumen, contiene todos los datos de la respuesta.
get(url, parameters, headers)
Esta función es similar a la anterior, pero tira una petición GET en lugar de POST.
Parámetros:
url -> string -> La url a la que se va a enviar la solicitud.
body -> object -> Será un objeto de pares K=>V con se enviarán al servidor.
headers -> object -> Similar al cuerpo, pero para las cabeceras.
Retorna una promesa que hay que controlar. Dentro de ella llega una instancia de “HTTPResponse” que veremos sus campos más adelante. Pero, en resumen, contiene todos los datos de la respuesta.
put(url, body, headers)
Igual que las dos anteriores, pero con el método PUT.
Parámetros:
url -> string -> La url a la que se va a enviar la solicitud.
body -> object -> Será un objeto de pares K=>V con se enviarán al servidor.
headers -> object -> Similar al cuerpo, pero para las cabeceras.
Retorna una promesa que hay que controlar. Dentro de ella llega una instancia de “HTTPResponse” que veremos sus campos más adelante. Pero, en resumen, contiene todos los datos de la respuesta.
patch(url, body, headers)
Similar, pero esta vez con el método PATCH.
Parámetros:
url -> string -> La url a la que se va a enviar la solicitud.
body -> object -> Será un objeto de pares K=>V con se enviarán al servidor.
headers -> object -> Similar al cuerpo, pero para las cabeceras.
Retorna una promesa que hay que controlar. Dentro de ella llega una instancia de “HTTPResponse” que veremos sus campos más adelante. Pero, en resumen, contiene todos los datos de la respuesta.
delete(url, body, headers)
Seguimos con los mismo y ahora le toca al método DELETE.
Parámetros:
url -> string -> La url a la que se va a enviar la solicitud.
body -> object -> Será un objeto de pares K=>V con se enviarán al servidor.
headers -> object -> Similar al cuerpo, pero para las cabeceras.
Retorna una promesa que hay que controlar. Dentro de ella llega una instancia de “HTTPResponse” que veremos sus campos más adelante. Pero, en resumen, contiene todos los datos de la respuesta.
head(url, body, headers)
Bueno, pues otro más similar al resto, pero para el método HEAD.
Parámetros:
url -> string -> La url a la que se va a enviar la solicitud.
body -> object -> Será un objeto de pares K=>V con se enviarán al servidor.
headers -> object -> Similar al cuerpo, pero para las cabeceras.
Retorna una promesa que hay que controlar. Dentro de ella llega una instancia de “HTTPResponse” que veremos sus campos más adelante. Pero, en resumen, contiene todos los datos de la respuesta.
uploadFile(url, body, headers, filePath, name)
Esta es la función amo. No te imaginas, o si, lo tedioso que es subir archivos a un server desde una aplicación nativa y las pocas opciones que hay. Este método, solo con los parámetros que nos pide, está listo :)
Parámetros:
url -> string -> La url donde queremos mandar el archivo.
body -> string -> Será el cuerpo de la petición con los parámetros que queramos enviar a parte.
headers -> string -> Serán las cabeceras que se enviarán junto con la petición.
filePath -> string -> Será la ruta local donde se guarda el archivo.
name -> string -> Similar a los name de los formularios. Será el nombre que se usará para recuperar el archivo sobre el servidor.
Retorna una promesa que tenemos que controlar. Si se resuelve es que todo ha ido bien y con ella llega los datos de la respuesta. En caso de que sea rejected, es que algo ha ido mal y saldrá por el catch.
downloadFile(url, body, headers, filePath)
Y esta, pues otra maravilla. Nos permite descargar un archivo de internet y guardarlo en la ruta solicitada. Otra función que ahorra un tiempo enorme en desarrollo.
Parámetros:
url -> string -> La url desde la que queremos descargar el archivo.
body -> string -> El cuerpo de la petición.
headers -> string -> Serán las cabeceras de la petición
filePath -> La ruta local donde queremos guardar el archivo. Recuerda haber solicitado permisos de escritura para poder guardar la imagen fuera del ámbito de la aplicación. Como, por ejemplo, en la biblioteca.
Retorna una promesa que tendremos que controlar. Si se resuelve es que todo ha ido correctamente y con ella llegarán los datos de la petición. Si es rejected, algo ha salido mal y saldrá por el catch.
Y con esto terminamos la sección de los métodos. La verdad que se puede hacer cualquier cosa que queramos con esta super clase.
Interfaces y clases de HTTP
Continuamos con el tutorial y ahora vamos a hablar de las interfaces. En este caso concreto solo es una la que hemos visto antes, así que vamos a comentar esa.
HTTPResponse
Esta interface es que nos llega con cada una de las solicitudes que hagamos con los métodos que hemos visto arriba. Ya sea GET, POST, PUT, PATCH, DELETE o HEAD. Con ella nos llegan los datos que nos devuelve la query sobre el servidor.
Los campos que tiene son los siguientes:
status -> number -> Será el código de estado de la solicitud. 200 para ok, 4xx para problemas, 5xx para errores de servidor, etc…
headers -> any -> Serán las cabeceras enviadas desde el server. Será un objeto en formato de pares.
url -> string -> La url donde se ha terminado de realizar la solicitud. Por si acaso había alguna redirección.
data -> any -> Será el cuerpo de la respuesta. El formato dependerá de lo que el servidor diga.
error -> string -> En caso de error, aquí vendrán los datos de este.
El tutorial en video, para los que os gusta ver más que leer
Una cosa más que quizás te interese
Mira, la optimización constante del logo de tu aplicación es una estrategia que te permite aumentar tus descargas y generar más ingresos. Y para esto hemos creado una herramienta que quizás te interese. Es esta aplicación y con ella mejorarás, optimizarás y evaluarás tus logos con inteligencia artificial y, además, podrás investigar a los de tu competencia. No te espoileo, entra al enlace.
Solo queda despedirme hasta el siguiente artículo y hasta entonces, que vaya bien :)