cordova-whatsapp-sticker-plugin
Version:
Um plugin que compartilha Stickers do WhatsApp
242 lines (188 loc) • 6.38 kB
Markdown
# Cordova WhatsApp Sticker Plugin
Um plugin para o Cordova Apache usado para compartilhar stickers do WhatsApp.
## Indice
- [Plataformas Suportadas](#plataformas-suportadas)
- [Instalação](#instalação)
- [Como usar](#como-usar)
- [Ionic](#ionic)
- [Exemplo](#exemplo)
- [Para evitar problemas](#para-evitar-problemas)
- [Imagens](#imagens)
## Plataformas Suportadas
- iOS
Por enquanto, há apenas suporte para iOS, visto que, a forma na qual é compartilhado o Sticker é mais simples do que a usada no Android.
## Instalação
`cordova plugin add cordova-whatsapp-sticker-plugin`
## Como usar
### Ionic
Caso queira baixar um código para ver como funciona, [clique aqui](https://github.com/H4ad/webapp-whatsapp-sticker/tree/ios) para ver um repositório com um código implementando o plugin.
### Usar no Ionic
> Por enquanto, apenas é possivel utilizar o plugin no Ionic v3, visto que, no v4 há algums problemas na criação do serviço que se conecta com o plugin no cordova.
> Mas, se houver uma atualização, sinta-se a vontade de criar seu próprio serviço que deve funcionar sem problemas.
Primeiro, crie um `provider` e adicione o seguinte código:
```TypeScript
import { Injectable } from '@angular/core';
import { IonicNativePlugin, Plugin, Cordova } from "@ionic-native/core";
@Plugin({
pluginName: 'WhatsAppSticker',
plugin: 'cordova-whatsapp-sticker-plugin',
pluginRef: 'cordova.plugins.WhatsAppSticker',
repo: '',
platforms: ['iOS'],
})
/**
* A classe que representa o serviço na qual se conecta com o cordova e executa o método.
*/
@Injectable()
export class WhatsappProvider extends IonicNativePlugin {
/**
* Método que envia as informações do Sticker Pack para o WhatsApp
*/
@Cordova()
sendToWhatsapp(stickerPack: string): Promise<any> {
return;
}
}
/**
* As opções do pacote de figurinhas
*/
export interface StickerOptions {
/**
* O link para acessar o aplicativo loja da Apple
*
* @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
*/
ios_app_store_link: string;
/**
* O link para acessar o aplicativo na PlayStore
*
* @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
*/
android_play_store_link: string;
/**
* O identificador desse pacote
*/
identifier: string;
/**
* O nome do pacote
*/
name: string;
/**
* O nome de quem está publicando o pacote
*/
publisher: string;
/**
* O url do site de quem está publicando o pacote
*
* @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
*/
publisher_website: string;
/**
* O url para as politicas de privacidade
*
* @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
*/
privacy_policy_website: string;
/**
* O url para o site com as licensas
*
* @note É opcional, mas deve ser incluido mesmo que seja com uma string em branco ''
*/
license_agreement_website: string;
/**
* A imagem que representa esse pacote como um todo
*
* @note É necessário ser um BASE64 de um PNG
* @note É necessário seguir as especificações impostas pelo WhatsApp
*/
tray_image: string;
/**
* A lista com as informações sobre as figurinhas
*/
stickers: StickerImageData[];
}
/**
* As informações sobre um Sticker
*/
export interface StickerImageData {
/**
* A representação do Sticker
*
* @note Elas devem estar em BASE64 da imagem SEM O PREFIXO data:image/webp;base64,
* @note Elas devem ser imagens em formato WEBP que sigam os requisitos do WhatsApp
*/
image_data: string;
/**
* Uma lista de emojis para representar esse Sticker, no máximo 3 emojis
*/
emojis: string[];
}
```
Após isso, adicione ele no `app.module.ts` no `array` de `imports`:
```TypeScript
@NgModule({
providers: [
...
WhatsappProvider,
...
]
})
```
Agora, você só precisa adiciona-lo no construtor para conseguir compartilhar os Stickers.
#### Exemplo
```TypeScript
import { Component } from '@angular/core';
import { WhatsappProvider, StickerOptions } from "../../providers/whatsapp/whatsapp";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
/**
* Construtor padrão
*/
constructor(
private whatsapp: WhatsappProvider,
) {}
/**
* Método que envia as figurinhas para o WhatsApp
*/
public sendToWhatsapp(): void {
const data: StickerOptions = {
ios_app_store_link: '', // Opcional
android_play_store_link: '', // Opcional
identifier: 'COLOQUE AQUI A IDENTIFICAÇÃO DO PACOTE',
name: 'O NOME DO PACOTE',
publisher: 'O NOME DE QUEM ESTÁ PUBLICANDO',
publisher_website: '', // Opcional
privacy_policy_website: '', // Opcional
license_agreement_website: '', // Opcional
tray_image: 'PNG EM BASE64',
stickers: [
{
image_data: 'WEBP EM BASE64',
emoji: ["☕", "🙂"]
},
{
image_data: 'WEBP EM BASE64',
emoji: ["☕", "🙂"]
},
{
image_data: 'WEBP EM BASE64',
emoji: ["☕", "🙂"]
},
]
};
const json = JSON.stringify(data);
this.whatsapp.sendToWhatsapp(json).then(success => alert(success), error => alert(error));
}
}
```
## Para evitar problemas
Para não haver nenhum erro, é necessário seguir todos os padrões impostos pelo WhatsApp sobre as espeficiações das imagens na documentação oficial que você pode acessar [aqui](https://github.com/WhatsApp/stickers/tree/master/iOS)
### Imagens
Para as imagens, elas não devem possuir os prefixos `data:image/png;base64,` ou `data:image/webp;base64,`, caso contrário, o WhatsApp apontará um erro na hora de compartilhar o Sticker.
## Alternativa para Android
Há umas formas de se compartilhar um Sticker no Android pelo Ionic também, só que é um tanto mais trabalhoso, visto que, você precisa editar o código nativo gerado pelo Cordova.
Mas caso queira usar mesmo assim, há um código de exemplo [nesse repositório](https://github.com/H4ad/webapp-whatsapp-sticker/tree/master).
Caso queira entender como funciona, manda uma mensagem que eu posso explicar como implementar no seu aplicativo.