Instagram Ionic - Úsalo cómo un profesional

¿Quieres que tu usuario comparta contenido de tu app directamente en su perfil de Instagram? O, quizás ya sabes cómo hacer esto, pero te falta algún detallito para hacerla rodar ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps, desde 2014 y en este artículo vas a aprender, de una manera sencilla y totalmente accionable, a realizar esta integración del componente Instagram Ionic y a darle la opción a tu usuario de que comparta directamente en su red social.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas 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.

Y ahora si, comenzamos. Let´s go!

Instalar Instagram en Ionic

Para poder utilizar el módulo, y cómo hemos de hacer con la mayoría de los componentes desacoplados del core de Ionic, tenemos que instalarlo.

Para ello vamos a utilizar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-instagram-plugin
$ npm install --save @ionic-native/instagram@4

La primera instalará el código necesario que nos permitirá la comunicación con la parte nativa del sistema.

La segunda será el código TS que hará de puente entre nuestro código y el del plugin del párrafo anterior.

Plataformas soportadas

Las plataformas que soporta el sistema son las más obvias:

• Android
• iOS

Configuración del módulo

En el caos de que estés utilizando Ionic 4 o superior, y el módulo NGX, no será necesario que realices este paso. De lo contrario tendrás que agregar el módulo a los providers de nuestro componente así:

import { Instagram } from '@ionic-native/instagram';

...

providers: [
...,
Instagram,
...
]

...

Recuerda que no será necesario utilizarlo en “AppModule” de manera global en la app. Solo ponlo donde lo vayas a utilizar y así ahorrarás recursos y estarás incurriendo en buenas prácticas.

Cómo se usa el componente Instagram Ionic

Ya llegamos a lo que nos interesa, aprender a utilizar el plugin. Pero antes de pasar a la explicación veamos un ejemplo funcional y así todo es mucho mejor.

Nota: El módulo nos permitirá hacer algunas cosas con la cuenta de nuestro cliente. No todas, porque restringieron la api para evitar a curiosos cómo nosotros, pero bueno algo podemos hacer. Vamos con ello.

import { Instagram } from '@ionic-native/instagram';

constructor(private instagram: Instagram) { }

...

this.instagram.share('data:image/png;uhduhf3hfif33', 'Caption')
  .then(() => console.log('Shared!'))
  .catch((error: any) => console.error(error));

• En primer lugar, importamos la clase “Instagram” a nuestro código para que así la podamos utilizar cómo queramos.
• Posteriormente inyectaremos una instancia de esta a través del constructor de nuestra clase. Con esta instancia ya podremos acceder a su funcionalidad.
• Y después, aunque no es recomendable porque primero tendríamos que hacer un paso previo de chequeo, llamaremos a su método “share” que será el que nos permita compartir información en nuestra cuenta de IG.
• La función toma cómo primer parámetro o bien la ID del elemento de nuestro HTML que queramos compartir, cómo hemos visto en el ejemplo, o la URL de la imagen que tengamos almacenado en el dispositivo.
• El segundo parámetro será el texto que queramos adjuntar a la imagen. Aparecerá con la publicación de esta.
• Para terminar, controlaremos la promesa. En caso de que se resuelva correctamente es que el contenido se ha compartido correctamente. En caso contrario, algo habrá fallado, la imagen no se habrá compartido y la promesa saldrá por le catch.

Cómo he dicho, hay que coger este código con pinzas. Funcionar, funcionará, pero es muy propenso a dar errores.

Bien, continuemos.

Funciones y campos de clase de Instagram Ionic

Ahora vamos a pasar a conocer lo poquito que podemos hacer con el módulo dentro de nuestras apps.

isInstalled()

• No recibe parámetros.
• Devuelve una promesa que tendremos que controlar

Cómo he dicho antes, el paso previo es que comprobemos si podemos hacer uso del sistema. Para ello es este método, con el podremos chequear si podemos comenzar a compartir nuestras imágenes mediante él.

share(canvasIdOrDataUrl, caption)

• Parámetros:
  • canvasIdOrDataUrl: string -> Cómo hemos visto en el ejemplo, se trata de la ID del elemento que tengamos en pantalla y queramos compartir o una cadena con la URL de la imagen alojada en el dispositivo.
  • caption: string -> El texto que aparecerá junto a la imagen en la publicación.
• Retorna una promesa que tendremos que controlar. Si se resuelve es que todo ha ido bien.

Esta es la función más común cuando queramos compartir algo de información en la cuenta de Instagram del cliente.

shareAssets(assetLocalIdentifier)

• Parámetros:
  • assetsLocalIdentifier: string -> Es el ID del recurso que tenemos alojado en el dispositivo que queremos compartir.
• Retorna una promesa que tendremos que controlar. En caso de que se resuelva es que todo ha ido bien.

Vale, esta función es un poco más compleja. Lo que hace es tomar el índice del sistema sobre los recursos que tenemos alojados en él.

Ahora, con dicho ID, buscará el recurso y dentro de nuestros archivos y será el que intente compartir en la cuenta de Instagram.

El método es más complejo de usar, pero mucho más seguro a la hora de realizar su trabajo.

Y bueno, hasta el momento esto es lo que nos permite realizar le sistema. Más adelante, cuando vayan incluyendo más cosas, si es que lo hacen, las iré poniendo aquí.

Hoy la sorpresa es diferente

Cómo no he encontrado ningún vídeo que pueda complementar la información del artículo he decidido dejaros muy último video. En él hablo de 6 pasos para aprender a programar más rápido. Casi seguro que te ayuda. Así aprovecho y te pido que te suscribas, así podrás estar informado de todo lo que voy subiendo. Lo puedes hacer aquí: https://www.youtube.com/channel/UCSrwYV3ftCprDzZwIslfqVQ

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Bueno geniete, pues hasta aquí el artículo de hoy. Espero haberte ayudado a entender cómo funciona la api de Instagram para Ionic y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!