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 learn from. The first resource is the hashtag messaging API that we built in the previous chapter. The API can be used as a test service here 

http://api.weall.com/v0.1/messages

On top of that API we will build our client application service. You have an option to download the Appery project as a Appery backup or install the application as Android development APK package. All the resources are located at the end of this chapter.

Download Hashtag Messaging Mobile application client source code

So go ahead and sign in to Appery.io, Download the hashtag messaging Appery project backup and create a new project using this backup file. The following will explain the features and how to build a project from scratch inside the Appery IDE.

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 project with JQuery + JQuery Mobile or install the Appery backup file from the end of this chapter. The following will explain how to build a new application in Appery.

First we need to define the Appery services that call the API.

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 Express to connect to an outside 3rd 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 to the api.weall.com service to store and fetch messages according to the hashtag.

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

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 services that you will be creating in the following section.

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 service group.

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

After you created the firse service group you will be directed to an API Express service IDE where you can create and define the service call.

Click on the topmost blue Service start icon and write the following

Service Enter the URI template: message

HTTP Service Method: POST

Description: Add new message

 

On the Request Path parameters add a new fields with

Enter parameter name: message

Parameter type: String

 

Then drag the REST icon from the left selection bar to the middle of the Start and End icons. And add the following parameters:

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

HTTP Service Method: POST

Under the Request Query Parameters add the following field

Parameter name: message

Parameter type: PARAMS.QUERY.message (this was created at the service start definition)

Image in Appery API Express IDE, create a new service to add messages.

And under the Response body section click on Generate. Then pops up a new screen where we can use a cool method in Appery, to create the response object types from the actual response JSON message. From the Generate service response screen add the following fields to test the service: 

Query parameters: PARAMS.QUERY.message

Write in the value field a test message with hashtags: #appery #api express coding

And hit the Run REST API button, then you can see the actual JSON response from the API. After that click on the Import Response button to import the fields to the service Response tab.

Image in Appery API Express IDE, add message service, test service and import a response

After the import you can see the JSON response structure from the Response tab.

 After that you can save the service and close the IDE.

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

So how to add a REST service to query a list of objects? Add a new REST service like before with the following parameters:

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 bar to the middle of the Start and End icons. And add the following parameters:

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

HTTP Service Method: GET

Leave the Request Query Parameters empty.

Image in Appery API Express IDE, add REST service to find fresh messages

Click on the Generate button under Response body section and click on Run REST API button, verify the Reponse message form and click on the Import response.

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/hashtag/{hashtagname}

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 service to find messages by hashtag name

Then drag the REST icon from the left selection bar to the middle of the Start and End icons. And add the following parameters:

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

HTTP Service Method: GET

Request Path Parameters / parameter name: hashtagname

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

The curly brackets around the parameter name {hashtagname} means that this parameter is added to the URL structure dynamically. Again you can import the response structure with the Generate button. Under Path parameters add PARAMS.PATH.hashtagname and value: appery. And click on the Run REST API button and Import reponse button.


Image in Appery API Express IDE, get messages by hashtag service, test service and import the response objects.

Now you have created three services to handle the messages and hashtags. Here is how your services should look like in Appery API Express.

Image in Appery API Express IDE, service definitions ready.

Create a mobile application page to show messages with hashtags

After that we can define the mobile application page and the user interface. In the Appery IDE add components to the default page.

Add three Grid components to the page, first one with 1 row 3 cols (columns), second one with 1 row 2 cols and third one with 1 row 1 cols.

Add the buttons, input field, labels and html with div element as in the following image. Rename all components, even the grid and cell components. That way it's easier to map the data into them. 

 

Image in Appery IDE, add components to the mobile application page. 

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

Import the services from the API Express with Create new / API Express Service. Choose the API Express project and import all services. 

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

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 service outputs from the left field to the page componen fields in the right part as is shown below.

Image in Appery IDE, map get fresh messages service response to page components. 

Click on the green JS icon from the mapping hashtags[i] / id 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 Complete action. Add the following JavaScript action to run. This JavaScript updates the user interface label components with a hashtag link. 

hashtagMessaging.updateHashtags();

 

Image in Appery IDE, add JavaScript after get fresh messages service call to update the hashtag links.

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 new Invoke service callGetFreshMessages to the Complete section.

Image in Appery IDE, mapping the add message service input field text to the service request's message parameter. 

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 hashtag local strorage variable to the service request's parameter. 

And again map the fields in the Success mapping as below

Image in Appery IDE, map get messages by hashtags response fields to the page components. 

And in the service callGetMessagesByHashtag 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 from the messages, and replace them with a html link. The html link updates the hashtag's name to the localStorage and calls the service callGetMessagesByHashtag. 

There is a new file called HashtagMessaging.js that you can see from the Appery backup. This file has a function called hashtagMessaging.updateHashtags 

The function hashtagMessaging.updateHashtags has the following algorithm and implementation in JavaScript with JQuery

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 newest messages. Add a new Page show event in the main page a new to invoke a service callGetFreshMessages. 

To the hashtagbutton add a event Click to set the button name to the localStorage hashtagname and then Invoke the service callGetMessagesByHashtag. 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 Page show and Click as in previous image. 

Test the hashtag messaging mobile client application against the API

Now your mobile client application is ready for test use. Use the Test and Export commands to either test the app or export it to your mobile phone. Below you can test the application in live beta test use from browser on a computer or on mobile device. 

Future improvements

The application can be improved in many ways and nothing is ever ready as we say, otherwise there would be no progress. An infinite scroll 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&offset=1

In the upcoming chapters we will also focus on adding component features for the application.

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 Chat with web or mobile browser here http://client.weall.com/weAllChat

 

Download Appery.io Project backup and Import the project

Download Appery.io Project backup v1.0

Download Appery.io API Express project backup and Import it as API Express project

Download Appery.io API Express backup v1.0

Download the Android APK to your mobile phone and install (Requires only Internet access)

Download APK v1.0 to your Android mobile device and install it with development settings

Download the web application Source code, you can install this application inside web server or launch it by opening the index.html file in your browser.

Download Hashtag messaging v1.0 ZIP project to view the source code of the application

 

Changes to article

- Removed as untested: In Appery there is also a possiblity to import ReactJS libraries and use them in development

What new ideas or thoughts this chapter gave you?