Go back to Read free chapters

How to build a Hashtag Messaging mobile and web application

Learn how to build a web and mobile Android and iOS hybrid application that uses the Hashtag Messaging API

Mobile application development technology choices 

Good that you made it through the previous chapters. Now it's time to focus on mobile application development and how to leverage the API that was created in the previous chapters. So how are we going to continue with the client development? The mobile application development has multiple variations and choices that need to be made. The thing that matters the most is always the choice between technologies, in this case hybrid application or native application.

To choose a hybrid or native mobile application to develop

The hybrid application is run inside the mobile phone browser with JavaScript. By choosing this way you are able to build an application that runs with a platform that can run JavaScript. The JavaScript makes call through Cordova libraries to the native device libraries, usually either Andoid or iOS. By choosing this way there is more limited way of what you can do with your application. The limitation comes from the browser and what interfaces does the Cordova version offer. And it also affects on the speed of the application, a hybrid application is slower than the native application because the calls are made through JavaScript to the native libraries of the mobile phone.

The native application is run inside the device platform usually on Android or iOS and it connects to the device through it's own native device libraries. This has much more freedom and speeds up the application.

There is a benefit for the hybrid application development and that is the code amount needed to build an application. In this chapter we are going to show you, how to build a hybrid mobile application for Android, iOS and other platforms.

Technology choices to help building applications faster

Ah.. the flaming battlefield of coders: What technology to choose for your application. And of course if you choose a technology that will not last then you are in trouble. So how to minimize the development effort on this? You can choose between various platforms that help in building an application. There are quite many choices that are listed for example here:

https://www.quora.com/What-are-the-top-frameworks-tools-used-for-cross-platform-mobile-app-development

Appery.io application development platform

Our choice for this article is http://appery.io because this platform has an excellent web based IDE, Appery JavaScript libraries and lots of features. We are focusing now only in the features of building a mobile application. 

The Appery platform offers different libraries to connect the Cordova and mobile phone native libraries with the user interface and JavaScript. At the moment in 2017 there is JQuery + JQuery Mobile, Angular v1 + Bootstrap and Ionic framework. For this application we have chosen JQuery + JQuery Mobile but the application is made so that it's quite easy to convert the libraries to a different one.

Connect a mobile application to a API service interface

In this chapter there are resources for you to ...

ht...

On top of that API we will build our client app...LOGIN TO READ FULL ARTICLE

Download Hashtag Messaging Mobile application client source code

So go ahead and sign in to Appery.io, Download ...LOGIN TO READ FULL ARTICLE

How to build a hybrid mobile client application that uses an API backend service

Let's start in Appery, you can start from a new...

First we need to define the Appery services tha...

How to create a connection from a mobile client to a backend API with Appery API Express

In Appery.io we can use a service called API Ex... party API. In Appery main dashboard (not the application board) go to the tab API Express and click on Create new project. Here you can Import the existing definitions (Create new project / Import from backup) from the end of this article or create a new API Express project. If you import then you can skip this section. 

 

Name the project as: hashtag-messaging

 

Description: The Hashtag messaging API connects...

Image in Appery API Express IDE, create a new A...

In the API section click on new service. The image below is how the API services will eventually look like after you have created them. 

Image in Appery API Express IDE, here's all the...

Appery API Express create a new service group

Click on new service besides the root / folder to create a new service group.

Service group name: messaging

Type: Custom REST API

Description: api.weall.com messaging service

Image in Appery API Express IDE, create a new s...LOGIN TO READ FULL ARTICLE

How to add a service that sends new messages through an API

After you created the firse service group you w...

Click on the topmost blue Service start icon an...

Service Enter the URI template: message

HTTP Service Method: POST

Description: Add new message

 

On the Request Path parameters add a new fields...

Enter parameter name: message

Parameter type: String

 

Then drag the REST icon from the left selection...

REST Service / Enter URL: HTTP Service Method: POST

Under the Request Query Parameters add the foll...

Parameter name: message

Parameter type: PARAMS.QUERY.message (this was ...

Image in Appery API Express IDE, create a new s...LOGIN TO READ FULL ARTICLE

And under the Response body section click on Ge...LOGIN TO READ FULL ARTICLE Then pops up a new screen where we can use a co... 

Query parameters: PARAMS.QUERY.message

Write in the value field a test message with ha...

And hit the Run REST API button, then you can s...LOGIN TO READ FULL ARTICLE

Image in Appery API Express IDE, add message se...

After the import you can see the JSON response ...LOGIN TO READ FULL ARTICLE

 After that you can save the service and close t...LOGIN TO READ FULL ARTICLE

How to add a service that queries new messages through an API

So how to add a REST service to query a list of...

Service Enter the URI template: messages

HTTP Service Method: GET

Description: Find fresh messages

On the Request Path parameters add a new parameter

Enter parameter name: message

Parameter type: String

Then drag the REST icon from the left selection...

REST Service / Enter URL: HTTP Service Method: GET

Leave the Request Query Parameters empty.

Image in Appery API Express IDE, add REST servi...

Click on the Generate button under Response bod...

How to add a service that queries new messages with certain hashtags through an API

And the third service to add is a service to query messages with a certain hashtag.

Service Enter the URI template: messages/h...

HTTP Service Method: GET

Description: Find messages by hashtag

On the Request Path parameters add a new parameter

Parameter name: hashtagname

Parameter type: String

 

Image in Appery API Express IDE, add REST servi...

Then drag the REST icon from the left selection...

REST Service / Enter URL: http://api.weall.com/v0.1/messages/hashtags/{ha...

HTTP Service Method: GET

Request Path Parameters / parameter name: hasht...

Request Path Parameters / parameter type: PARAMS.PATH.hashtagname

The curly brackets around the parameter name {h...LOGIN TO READ FULL ARTICLE

Image in Appery API Express IDE, get messages b...LOGIN TO READ FULL ARTICLE

Now you have created three services to handle t...

Image in Appery API Express IDE, service defini...

Create a mobile application page to show messages with hashtags

After that we can define the mobile application...

Add three Grid components to the page, first on...

Add the buttons, input field, labels and html w...

 

Image in Appery IDE, add components to the mobi...

How to map data from an API service to a mobile client page

Import the services from the API Express ...

Then by clicking the page Data tab below the Design tab (highlighted in the previous image) you can access the data-mappings between the services and the page. 

Rename all three services here with call-prefix.

Image in Appery IDE, add services to user inter...

The callGetFreshMessages service maps the API data to the page in the Success setting button click on the Mapping.

Image in Appery IDE, click on Success Mapping.&... 

In the Mapping action editor page drag the API ...

Image in Appery IDE, map get fresh messages ser...

Click on the green JS icon from the mapping to hashtagbuttoncell / visible and write the following JavaScript. The Hashtagbutton is not visible by default so it is set visible only to the hashtags that are recieved from the service. Otherwise if you have a message without a hashtag the button would be visible but without a hashtag.

return true;

Save mappings and add Run JavaScript to the Com... 

hashtagMessaging.updateHashtags();

 

Image in Appery IDE, add JavaScript after get f...

How to add a new message from mobile client to an API

In the callAddMessage service definitions edit the Before send mapping and add the input field component to the query message request field as is shown in the image below.

The Success mapping can be left empty and add a...LOGIN TO READ FULL ARTICLE to the Complete section.

Image in Appery IDE, mapping the add message se...

How to browse message by a certain hashtag

The third service callGetMessagesByHashtag uses the browser's localStorage to store the hashtag the user has chosen from the page by clicking on the button or a link. To use this edit the Before Send mapping and add the Storage's hashtagname field to the request hashtagname parameter.

Image in Appery IDE, map get messages by hashta...LOGIN TO READ FULL ARTICLE

And again map the fields in the Success mapping...

Image in Appery IDE, map get messages by hashta...LOGIN TO READ FULL ARTICLE

And in the service callGetMessages... Complete target add Run JavaScript to update the hashtag links to the messages. 

hashtagMessaging.updateHashtags();

How the content marking pattern is built in the mobile client application

Now the next one is to parse the hashtag links .... 

There is a new file called HashtagMessaging.js ...LOGIN TO READ FULL ARTICLE 

The function hashtagMessaging.updateHashtags ha...

1. look up all the messagelabel fields and loop through them

2. split the messages into words and loop these words
2.1 for each word, examine if this word is a hashtag (starts with a #)
2.2 if it is then convert it to a link that points to the service callGetMessagesByHashtag that loads the messages with that hashtag. Add the link to the newMessage
2.3 if not, then add the word normally to the newMessage
3. Replace the newMessage with the message that the API returned

 

Bind the application events together in the user interface 

Finally to launch the app you need to fetch the... 

To the hashtagbutton add a event Click to set t.... This functionality is the same as is done with the links.

Below you can see the both of these settings.

 

Image in Appery IDE, add page actions to events...

Test the hashtag messaging mobile client application against the API

Now your mobile client application is ready for...

Future improvements

The application can be improved in many ways an...can be added to the application. The paging is ready in the Hashtag Messaging API for this using the limit and offset parameters. In example http://api.weall.com/v0.1/messages?limit=2&...

In the upcoming chapters we will also focus on ...LOGIN TO READ FULL ARTICLE

Download the mobile client application hashtag messaging project and try it yourself

weAll Chat v1.0 using Appery API Express

Test live Hashtag messaging application weAll C...LOGIN TO READ FULL ARTICLEhttp://client.weall.com/weAllChat