Skapa klistermärkespaket för WhatsApp i iOS

För bara några dagar sedan, vid skrivandet av detta inlägg, släppte WhatsApp möjligheten att skicka klistermärken i våra chattar. För att kunna göra det behöver du bara uppdatera din app till den senaste versionen. Men det som är mycket mer intressant för oss är att det är möjligt att skapa klistermärken från tredje part. Det görs på ett mycket speciellt sätt, jag är säker på att detta bara är början och att det kommer att förbättras när det blir större och större, så jag ville skriva om min erfarenhet av att modifiera iMonstickers för att stödja dess användning i WhatsApp.

Knapp för att skicka klistermärken i WhatsApp

Bara för att klargöra kan du skapa klistermärkespaketen för både iOS och Android, vilket redan är en enorm förbättring jämfört med meddelanden, där det inte finns något sätt att skicka dina vackra klistermärken till dina vänner, som av någon anledning använder Android-telefoner . Men vi kommer att fokusera på processen för iOS. För Android är faktiskt väldigt lika.

iMonstickers för WhatsApp

Det första du kanske undrar är: Hur fungerar det? Har WhatsApp ett klistermärkebutik som du kan skicka till? Kan du ta betalt för dem?

Tillvägagångssättet är faktiskt ganska intressant, även om det lägger till lite friktion för användaren. De har ingen butik eller ett sätt att söka efter klistermärken från tredje part just nu. Du kan istället använda din nuvarande iOS-app eller bygga en ny för att skapa ett klistermärkepaket för WhatsApp. Och det spelar ingen roll om du har ett klistermärkeförlängning för meddelanden eller inte.

Det är ganska enkelt, de har lagt till en mekanism som du kan använda för att specificera lite information om klistermärkespaketet och ett sätt att skicka det, tillsammans med bildtillgångarna, till WhatsApp-appen via det "whatsapp: //" anpassade schemat.

De har till och med tillhandahållit en skelett-app som du är fri att använda. För att skapa ett galleri för dina klistermärkespaket och för att låta användaren dela klistermärken som bilder med andra appar, såväl som att skicka dem för att användas i WhatsApp, behöver du bara dra och släppa dina bilder och ändra några informationsbitar i en JSON.

Process för att lägga till ett klistermärkespaket från en iOS-app till Whatsapp (exempel med iMonstickers)

Jag skulle vilja undersöka här hur du kan lägga till den här funktionen till en befintlig app.

Det första är att klona den här repo: https://github.com/WhatsApp/stickers

Förresten, du hittar det mesta av den information du behöver här: https://github.com/WhatsApp/stickers/tree/master/iOS

När du har gjort det finns det några filer du behöver lägga till i ditt befintliga projekt. Som det anges i filen README.md:

  • Några snabba filer: StickerPack.swift, Sticker.swift, Limits.swift, ImageData.swift, Interoperability.swift och WebPManager.swift. Och glöm inte att lägga till StickerPackManager.swift också, det saknas i dokumentationen för när det här inlägget skrivs.
  • Du måste också lägga till några Objekt-C-filer: i princip alla de med prefixet "YY". När du gör detta, glöm inte att lägga till din överbryggande rubrik och lägga till den här importen: #import "YYImage.h"
  • Slutligen, och det finns inte i dokumenten för tillfället heller, måste du lägga till WebP.framework till dina länkade ramverk och bibliotek i ditt huvudmål, i avsnittet Allmänt i projektet.
Lägg till WebP.framework till dina länkade ramverk och bibliotek

Den sista biten är att låta din app använda WhatsApps anpassade schema genom att lägga till följande rader i din Info.plist-fil:

Du är helt klar! Och nu, låt oss gräva lite i koden ...

Det är ganska enkelt. Det första du behöver göra är att definiera metadata runt klistermärkespaketet. Det ser ut så här:

Fältets bildfilnamn kommer att vara "ikonen" i ditt klistermärkepaket och bör inte vara större än 96x96px.

Och sedan måste du lägga till klistermärken genom att bara ange filnamnet, och det här är ganska intressant, en uppsättning av upp till tre emojier som bättre beskriver ditt klistermärke.

Klistermärken klassificering av Emoji i WhatsApp

Tänk på att det finns vissa begränsningar. Det viktigaste att veta är att den maximala storleken är 512x512px.

De ger ett annat sätt att specificera informationen kring klistermärkespaketet med hjälp av någon JSON. Om du som mig redan gjorde något liknande, i mitt fall använde jag en .plist, fann jag lättare att kartlägga din datastruktur till den som WhatsApp förväntar sig och göra det som förklarats i det här inlägget.

Och slutligen måste du skicka klistermärken till WhatsApp:

Och det är i princip det! Detta öppnar WhatsApp-appen och låter användaren spara klistermärkespaketet.

Det är så enkelt och förmodligen inget mycket annorlunda än vad du redan gör när du arbetar i din nuvarande app: du måste fortfarande ladda upp den till App Store, gå igenom Apples granskningsprocess och få bara 70% av intäkterna om du vill ta betalt för dem. Huvudfrågan för mig just nu är hur Apple fortsätter att känna om detta system eller om de kommer att godkänna appar med den lilla funktionaliteten när de använder skelett-appen som WhatsApp tillhandahåller.

Förresten, iMonstickers är bara en meddelandeförlängning just nu, och jag försökte lägga till den här funktionen utan att behöva skapa en värdapp för den. Det visar sig att detta inte är möjligt eftersom de enda webbadresserna du kan öppna från en meddelandeförlängning är de som öppnar värdappen app.

Hoppas att du gillade inlägget och inte kan vänta med att använda de klistermärkespaket du skapar. Det skulle vara bra att veta om dina erfarenheter i kommentarerna också! Tack för att du läser!

Och om du gillar dessa vackert designade klistermärken av Raúl Gil, kompatibla med Apple Messages, och förhoppningsvis med WhatsApp-support snart också, kan du hitta dem i App Store: https://itunes.apple.com/app/imonstickers/id1164272926