This document provides an overview of how to build a basic WhatsApp-like chat application in 2 hours using Skygear and other tools. It discusses the necessary skills, features, and steps including setting up the project, configuring Skygear, signing up users, creating conversations, sending and receiving messages. The document is intended as a technical discussion and not a recommendation to clone other products.

1. Build a WhatsApp clone in 2 hours
Startup Weekend Bootcamp - powered by skygear.io
David Ng (Product Manager at Skygear)

2. 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.

3. What skills do I need?
• User Experience (UX) design
• Mobile side programming
• Server side programming

4. WhatsApp’s Stack

5. 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.

6. Features that an ideal chat app must have
• Security
• Real time connectivity
• Group conversations
• Presence indicators

7. What’s in WhatsApp first version
• Signing up
• Conversation List
• Creating Conversations (1-on-1 and Group Chat)
• Message List
• Send and receive messages

8. Skygear
• An open-source project in Hong Kong
• Managed Hosting at skygear.io
• Commercial Support available
• Written in Go

9. Setup
• Sign up your chat server at skygear.io
• Obtain your Server endpoint and API Key in the INFO tab

10. 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'

11. Frontend
• We are using JSQMessagesViewController for the
front-end UI

12. 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>")

13. 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) in
if (error != nil) {
self.showAlert(error as! NSError)
return
}
print("Signed up as: (user)")
}

14. 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
}
}

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

16. 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()
}
})

17. 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
}
}

18. Summary
• It takes much less effort to build a full-featured chat app.
• Utilize good resources to make it easier.