Learn how to build a Whatsapp clone using Skygear in 2 hours. You'll learn: create a 1-1 chat, group chat, sending messages, push notification

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.