How to create simple iMessage App

Overview

In this demo, I have mentioned that how we can able to use Message Extansion in iOS 10.

Once you launch application, it will open message screen. Where you can able to check see list of web pages name of “Yudiz Solution Pvt Ltd”.

If you want to send any webpage url as message, you just need to tap on webpage name, application will send that selected webpage in message. If you tap on that message, it will load webpage inside message application.

Topics

  1. Basic Understanding regarding ‘MSMessagesAppViewController’
  2. Supported iOS: 10.0 and above
  3. Supported Languages : Swift and Objective C
  4. How to create Demo App

Step 1: Create new Project

Create New Xcode Project and select iMessageApplication.

ScreenShot_1_1

ScreenShot_1_2

Once you create your application then just run the application to check what you are getting by default.

Once you run the application, in simulator, message application is appearing by default and inside that below “Hello World” text is there and your iMessage application name is there.

ScreenShot_1_3

Step 2: What you can see once you created Project

Here you can able to see total 4 folders in your new created Project.

ScreenShot_2_1

  1. iMessageDemo
  2. MessagesExtension
  3. Frameworks
  4. Products

Here you just need to use files which are there under ‘MessagesExtension’ folder for further development.

Step 3: Which functionality we will Develop

  • User will able to see our company name and its related webpage name in table view.
  • User just need to tap on webpage name to send links as message.
  • When user taps on that message, Link will be loaded in SFSafariViewController.

Step 4: UI Implementation

  • Open storyboard file
  • Remove “Hello World” label
  • Put one TableView in storyboard.

ScreenShot_4_1

Step 5: Add delegate and Datasource method of Tableview

  • In MessagesExtension folder, select ‘MessageCategoryVC.swift’ file.
  • Implement necessary UITableView Delegate and Datasource methods.

ScreenShot_5_1

Step 6: Prepare data which you like to display in Tableview

  • In this demo I am displaying webpage information of ‘Yudiz Solution Pvt Ltd’.
  • You can check that in “DataHandler.swift” file.

ScreenShot_6_1

Step 7: Apply data in Table View

In Step 6, I have created method to get data from my model class. Now its time to display those data in my table view.

So lets retrieve all data first and pass it to TableView.

ScreenShot_7_2

ScreenShot_7_1

Step 8: Conversation Handling Methods

There are many conversation handling methods are there provided by MSMessageAppViewController, I have listed all below.

But for this demo we just need to use below two methods only.

In “willBecomeActive” method we will save all previous conversation.

In “willTransition” method we will open SFSafariView screen to load webpage from URL.

Step 9: Save Conversation

First create an global object of MSConversation.

ScreenShot_9_1

Now use this object to save all previous conversation which you can able to get from “willBecomeActive” method.

ScreenShot_9_2

Step 10: Send Webpage as Message

Now you have to apply some code in “didSelectRow” method of UITableView.

In this method an object of “MSMessage” and another object of “MSMessageTemplateLayout”

In “MSMessageTemplateLayout” object you have to pass details which you have to display in message screen.

So first we will pass CAPTION and SUBCAPTION in object of “MSMessageTemplateLayout”.

ScreenShot_10_1

Now we will set url property of “MSMessage” object.

ScreenShot_10_2

Now we will set layout property of “MSMessage” object.

ScreenShot_10_3

Our message object is ready now to send as Message. Now we just in to append this “MSMessage” object in our object of “MSConversation” which we just saw in STEP 9.

ScreenShot_10_4

Step 11: Lets run Application and Check

Once you run application you will able to see below screen

ScreenShot_11_1

ScreenShot_11_2

Now lets tap on any webpage name from the table view list.

Once you taps it will ask you permission to send this message. You have two option here. Either you can cancel the message or send message.

ScreenShot_11_3

ScreenShot_11_4

Now let’s check what happen if you tap on that sent message.

You will navigate to list view of all web pages of this application. Here we need to open webpage instead of this behaviour.

ScreenShot_11_5

So lets check how we can able to do this in our next step.

Step 12: Open Webpage when user taps on Message

We have to use “willTransition” conversation handling method to implement this feature. Right now this method do not contains any logic.

Lets implement logic now.

Step 13: Run App again. This is a final step. I Promise… :-)

  • Lets run application again.
  • Send any webpage first as message.
  • Tap on that message to open webpage. Now you can able to see webpage is loaded into message application.

ScreenShot_13_1

mm

Ravi Bokade Sr. iOS Developer

I am a Sr. iOS developer at Yudiz Solutions Pvt. Ltd. - one of the leading Mobile App development companies. I am passionate both about making apps and writing on a diverse range of development topics.

Leave a Reply

Top