Creating a Whatsapp Clone - Part I - Transcript.pdf
- 1. Creating a WhatsApp Clone - Part I In this module we’ll build a rudimentary whatsapp clone. I’ll take a very different path when compared to previous cloned applications here
- 2. Deconstruction ✦How is this clone different ✦UI ✦Identity and verification ✦Technology ✦Protocol – WebService, WebSocket & Push © Codename One 2017 all rights reserved We’ll talk about that and these things in the next few slides
- 3. How is this Clone Different? ✦Not pixel perfect – fast & dirty ✦Barebone functionality ✦Skipped things mentioned in other modules © Codename One 2017 all rights reserved The first thing I’d like to go into is that this clone isn’t pixel perfect, this is a “fast and dirty” clone. I’ll focus only on the basic text sending functionality and don’t go into nearly as much detail as I did in the other clones. Frankly, it’s not necessary. The functionality is simple once you understand the facebook clone. I skipped a lot of the core features mostly due to time. But also because these features are covered in the facebook clone and re-implementing them for yet another clone would have been redundant.
- 4. UI © Codename One 2017 all rights reserved I’ll only focus on these forms, I won’t implement everything here either
- 5. Identity and Verification © Codename One 2017 all rights reserved Since we already implemented SMS verification in the facebook clone I’ll just use the SMS activation library. However, I’ll use server side authentication for that library for extra security. WhatsApp doesn’t use passwords. I considered using the phone number as the ID which seems to be what they are doing. I ended up using a regular ID though. There is an authorization token which I will discuss later.
- 6. Technology ✦Spring Boot ✦MySQL ✦JSON Storage & Protocol © Codename One 2017 all rights reserved Like the other clones I’ll use Spring Boot again. That makes this familiar and allows me to grab some code from the other projects The database will be mysql again for the same reason I’ll store data as JSON locally instead of sqlite. This makes it easy to use and debug the code. That might be something worth changing if you are building this for scale
- 7. Protocol ✦WebServices for most communication ✦Messaging uses websockets ✦Push as fallback if a socket is offline ✦JSON is used for websocket data © Codename One 2017 all rights reserved I’m still using webservices for most of the functionality. They are still easier to work with than websockets However, messaging is the ideal use case for websockets and I’m using it for that exact purpose When the websocket is closed, which would happen if the app isn’t running or is minimized, I use push. Push is used strictly as a visual medium to notify the user of a new message. When sending/receiving data in websockets I use JSON. In the past I used a binary websocket and I wanted to show how this approach works as well.
- 8. apache.org/POM/4.0.0 http://maven.apache.org/xsd/ maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.1.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.codename1.whatsapp.server</groupId> <artifactId>WhatsApp</artifactId> <version>0.0.1-SNAPSHOT</version> <name>WhatsApp</name> <description>WhatsApp Clone Server</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> pom.xml So lets start by creating the springboot project for the server. I’m assuming you went through the previous modules and I won’t repeat myself too much. You can use the spring boot initializer, which I used to create this pom file. I just defined a new project with this package for Java 8.
- 11. <name>WhatsApp</name> <description>WhatsApp Clone Server</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jersey</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> pom.xml The security package allows us to encrypt credentials into the database. It has a lot of other features but they aren’t as useful for us
- 15. <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-search-orm</artifactId> <version>5.8.2.Final</version> </dependency> <dependency> <groupId>com.twilio.sdk</groupId> <artifactId>twilio</artifactId> <version>7.17.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <fork>true</fork> </configuration> </plugin> </plugins> </build> </project> pom.xml And finally we need the server side twilio library to implement SMS support on the server. This will be used for the activation code functionality
- 16. Client Project © Codename One 2017 all rights reserved Next we need to create the client application which I create as WhatsAppClone
- 17. Client Project © Codename One 2017 all rights reserved I use the default native & barebones settings in the IDE. I pick the com.codename1.whatsapp package. Nothing special. Next we’ll go into the classes that implement the client functionality