Build a WhatsApp clone in 2 hoursStartup Weekend Bootcamp - powered by skygear.io

David Ng (Product Manager at Skygear)

Agenda

• Getting hands on how to build a WhatsApp-like mobile application.

• What skills do you need.

• … and tools you need.

• Some code to show.

What skills do I need?

• User Experience (UX) design

• Mobile side programming

• Server side programming

WhatsApp’s Stack

What it is and what it is not

• It is a technical discussion on what you can do to build WhatsApp-like Chat app with limited resources.

• It is not what we encourage cloning other’s product.

• It is not you can build what all WhatsApp now supports in 2 hours.

Features that an ideal chat app must have

• Security

• Real time connectivity

• Group conversations

• Presence indicators

What’s in WhatsApp first version

• Signing up

• Conversation List

• Creating Conversations (1-on-1 and Group Chat)

• Message List

• Send and receive messages

Skygear

• An open-source project in Hong Kong

• Managed Hosting at skygear.io

• Commercial Support available

• Written in Go

Setup

• Sign up your chat server at skygear.io

• Obtain your Server endpoint and API Key in the INFO tab

Setting up the project

• Open a new Xcode Project

• pod init

• Update Podfile

• pod install

pod 'JSQMessagesViewController', '~> 7.3.4' pod 'MBProgressHUD', '~> 1.0.0' pod 'SKYKit', :git => 'https://github.com/SkygearIO/skygear-SDK-iOS.git', :commit => '4516b15' pod 'SKYKitChat', :git => 'https://github.com/SkygearIO/chat-SDK-iOS.git', :commit => '08235f2'

Frontend

• We are using JSQMessagesViewController for the front-end UI

Configure Skygear Endpoint for your App

• Config these lines to connect to Skygear Server

• Your app will then be connected to the cloud!

SKYContainer.default().configAddress("<Your endpoint url>")SKYContainer.default().configure(withAPIKey: "<Your API Key>")

Signing up your user

• We can use the signup API in Skygear to signup a user

SKYContainer.default().signup(withEmail: emailField.text, password: passwordField.text) { (user, error) inif (error != nil) { self.showAlert(error as! NSError) return}print("Signed up as: \(user)")}

Conversation List

func fetchUserConversations(completion: (() -> Void)?) { chat?.fetchUserConversations { (conversations, error) in if let err = error { let alert = UIAlertController(title: "Unable to load conversations", message: err.localizedDescription, preferredStyle: UIAlertControllerStyle.alert) self.present(alert, animated: true, completion: nil) return }

if let fetchedConversations = conversations { print("Fetched \(fetchedConversations.count) user conversations.") self.conversations = fetchedConversations } }

Creating Conversations

• the CreateConversation APIchat?.createConversation(participantIDs: viewController.participantIDs, title: title, metadata: nil, completion: { (userConversation, error) in hud.hide(animated: true) if error != nil { return }})

Message List chat.fetchMessages(conversation: conversation.conversation, limit: 100, beforeTime: nil, completion: { (messages, error) in if let err = error { return }

if let messages = messages { self.messages = messages.reversed() } })

Send and receive messages

let message = SKYMessage()! message.body = text message.creatorUserRecordID = SKYContainer.default().currentUserRecordID chat.addMessage(message, to: (conversation?.conversation)!, completion: { (msg, _) in if let sentMessage = msg { guard let transientMessageIndex = self.messages.index(of: message) else { return }}

Summary

• It takes much less effort to build a full-featured chat app.

• Utilize good resources to make it easier.