Objective

You will be creating a WhatsApp Sticker Pack APK generator which uses text and image as input and generates the required stickers.


Project Context

WhatsApp is not just a mere messaging system, but a norm of social networking. With the growing popularity, WhatsApp added various features in its application and one such hyped up feature is the WhatsApp Sticker Packs which spice up one’s conversation by a mere tap. But, have you ever thought of creating one? The ones who did, basically went through the hectic job of perfecting their images and then using some ready made app to do so.


Developers are known for automating stuff. Thus we can have an easier take on it, by creating a system that accepts text and a frame-like image as inputs and generating the desired APK as the output.


Project Stages

The project consists of the following stages:

image alt text

High-Level Approach

  • Convert the text input into handwritten format and Generate the output as an image. Crop the Image if necessary.

image alt text

  • Make the background of the image transparent.

image alt text

  • Use a frame and position the earlier obtained image in the centre of the frame as an overlay.

image alt text

  • Inspect the official open source WhatsApp/stickers repository, by opening the Android project in Android Studio. You need to be able to find a way to add your own stickers. [Note: We have referred to the Android project here. You are free to inspect the iOS project too.]

  • Build the project, Generate the APK and have fun by showing off your newly created stickers.

image alt text

  • Automate the various stages of the above process and integrate them into a single system.

Primary goals

  • Generate WhatsApp stickers by using the open source repository WhatsApp/stickers.

  • Automate the various stages of generation, integrate the automated components and publish your work.

  • Share it with your network.

Pre-requisite skills

  • Python(or any Selenium supported programming language)

  • Linux / Python (for scripting)

Post Project Skills

  • Selenium

  • Android basics

Objective

You will be creating a WhatsApp Sticker Pack APK generator which uses text and image as input and generates the required stickers.


Project Context

WhatsApp is not just a mere messaging system, but a norm of social networking. With the growing popularity, WhatsApp added various features in its application and one such hyped up feature is the WhatsApp Sticker Packs which spice up one’s conversation by a mere tap. But, have you ever thought of creating one? The ones who did, basically went through the hectic job of perfecting their images and then using some ready made app to do so.


Developers are known for automating stuff. Thus we can have an easier take on it, by creating a system that accepts text and a frame-like image as inputs and generating the desired APK as the output.


Project Stages

The project consists of the following stages:

image alt text

High-Level Approach

  • Convert the text input into handwritten format and Generate the output as an image. Crop the Image if necessary.

image alt text

  • Make the background of the image transparent.

image alt text

  • Use a frame and position the earlier obtained image in the centre of the frame as an overlay.

image alt text

  • Inspect the official open source WhatsApp/stickers repository, by opening the Android project in Android Studio. You need to be able to find a way to add your own stickers. [Note: We have referred to the Android project here. You are free to inspect the iOS project too.]

  • Build the project, Generate the APK and have fun by showing off your newly created stickers.

image alt text

  • Automate the various stages of the above process and integrate them into a single system.

Primary goals

  • Generate WhatsApp stickers by using the open source repository WhatsApp/stickers.

  • Automate the various stages of generation, integrate the automated components and publish your work.

  • Share it with your network.

Pre-requisite skills

  • Python(or any Selenium supported programming language)

  • Linux / Python (for scripting)

Post Project Skills

  • Selenium

  • Android basics

Proof of Concept

First validate the idea by doing a low level implementation (Proof of Concept) of the components involved in the project.


This helps you to:

  1. Get more clarity around the unknowns.

  2. Get a better understanding of the stages involved in the project.


Requirements

  • Use Text to Handwriting App and convert any small phrase of your choice into handwritten format.

  • Crop the image to a proper size and make the background transparent.

  • Make such 2 more images.

  • Position the earlier obtained image in the centre of Crio Logo Frame.

  • The next step is to convert image files into usable WhatsApp stickers. For which, inspect the WhatsApp/stickers repository on GitHub, by cloning it and exploring the Android project.

  • Add your sticker images in the assets folder of the Android project.

  • Inspect the contents.json file of the Android project. You will find that there is an object array named sticker_packs. Add the details of your sticker pack as an object in that array.

  • Attach an Android device or use the Android Studio emulator to try out the App.

  • Generate the APK.


References


Bring it On!

  • Observing the Text to Handwriting tool. You’ll see that you can add your own handwriting as a font. Just imagine how cool it would be if people could use WhatsApp stickers with your handwriting on them when you publish it! Can you create such stickers?

  • Instead of Crio Logo Frame, Can you come up with your own frames?


Expected Outcome

The main objective of this milestone is to make sure that you understand the various stages of the project that need to be automated. On fulfilling the requirements, you should be able to create images with a handwriting font using the Text to Handwriting app, refine them and merge them with a sample frame to get the required sticker images and finally be able to create a sample custom WhatsApp Sticker Pack of your own.


Convert text Input into handwriting font using Selenium

The text-to-handwriting App of Saurabh Daware and his fellow contributors is surely remarkable. This application is also open-sourced, but if one inspects the source code properly, it comes to light that it uses the html2canvas library that is heavily browser based. That means that there is no real direct way to use the application via the command line. But, in such cases, we can make use of Selenium web drivers to drive browser automation. By doing so, the machine will follow the instructions given to it, and make use of the application without any human interference.


Requirements

  • Explore the saurabhdaware/text-to-handwriting GitHub repository.

  • Write down a script using Python, or any other programming language that supports Selenium, to generate the required handwriting-like images from plain text.


References


Bring it On!

  • Try to make the browser hidden during the automation procedure to create an illusion that the task is being taken care of by the command line alone.

Expected Outcome

You should have automated the generation of the images containing handwritten font using the aforementioned text-to-handwriting app using Selenium.


Refining the obtained image

The image obtained from the earlier milestone needs to be modified and fitted into a frame to create stickers henceforth.


Requirements

  • Crop the image from milestone 2, to a proper size, using the command line, if required.

  • Make the background transparent. You can refer to the padurean/make-image-transparent GitHub repository for the same.

  • Merge these images with Crio Logo Frame, using the command line.

  • Write a script which does all the above mentioned functionality in a sequential order.


References


Expected Outcome

You should be able to refine the images obtained in the earlier milestone, by cropping them and making the background transparent, and merge the image with a frame for the background. All of the aforementioned tasks should be taken care of using the command line.


Integration of all the components into a single unit

In this milestone, we will combine the selenium automation script, sticker image generation script with a third script that customises the Android project and generates the APK.


image alt text

Requirements

In this milestone, you should be able to automate the following tasks and have a single script for the same:

  • Copying and pasting the sticker images in the assets folder of the Android project.

  • Converting the images to webp format.

  • Editing the contents.json file, so that it contains the necessary details of the new sticker pack that needs to be added.

  • Generating the APK.

Write a master script which executes all the 3 individuals scripts created in the milestones till now sequentially.


References


Expected Outcome

At the end of this milestone, you should have a single script which invokes the other scripts and results in the required APK generation.


Publish to GitHub

Hats off to your grit!


Successful completion of this project deserves show-off rights! So, go on, publish your awesome work on GitHub and start sharing your stickers.


[Note: Kindly go through this Byte if you’re unfamiliar with Git.]


References