How to build a Whatsapp clone in 2 hours
Transcript of How to build a Whatsapp clone in 2 hours
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.