Go back to Read free chapters

How to build Emoji Chat application using AngularJS and Ionic

AngularJS is widely popular framework for building next generation applications. Let's dive deeper into the world of AngularJS.

Now it's time to look into the popular AngularJS framework (AngularJS version 1.4.3) and how it binds together with Ionic framework (Ionic version 1.2.4). This chapter shows how to leverege the Angular features easily using Appery.io service. You can import the service with the Appery.io trial mode for free.

In the previous chapter we used JQuery to print the UI elements and hashtag messages on the screen, now we use Angular directives to create components on the screen. AngularJS binds also the UI components to the scope model.

This fun little chat application demonstrates also how to use emojis as hashtags. Hope you have a good time in trying out the application.

Create new Angular and Ionic application 

In Appery.io you can create a fresh new application or create an application from a backup that is included in the end of this chapter. The following will show you how to create a new application.  

Image in Appery IDE, Create a new Ionic application using Angular.

Then go to the Appery API Express and create the hashtag messaging API services. You can either import the services or create new services as described in the previous chapter. Note that you have to add limit, offset and convertEmojis URL parameters to the services getFreshMessages and getMessagesByHashtag. These parameters are already added in the API backup file in the end of this chapter.

When you have the API Express services created you can import the api.weall.com services in Appery IDE with Create new / API Express Service. Select all API services.  

Image in Appery IDE, Import Hashtag messaging API services. 

Create new Angular scope model to store messages and hashtags

In Appery IDE create a new Model in Project / Model page. Add a model named messageList and add the following parameters to it. The messageList model is the same model as the response message from the getFreshMessages service, except the messageWordList parameter is not in the actual API response message. We generate the content to this field after the messages have been fetched.

Image in Appery IDE, model for the messageList.

Create Angular API services

Then create the services as Angular scope functions in the main screen. First let's create a service to fetch the fresh messages from the API service. In Appery IDE select the screen and the Scope tab. Write the function name getFreshMessages and select the Scope function type and click add.

Image in Appery IDE, add angular scope function.

Then select Invoke service from the dropdown list and Appery will generate a template for your function. Write the callable function name to the ”service_name” position eg. hashtag_messaging_messaging_messages_get And Click on the ”Click to edit mapping” button after the function(success) to open up the Appery Mapping editor.


 

Image in Appery IDE, new angular function template in Appery.

Map REST API objects to Angular scope model objects

Draw the elements from the API response in left to the Angular model in the right.

Image in Appery IDE, angular function response mapping.

After that we need a special function call to extract the message's words into a list. This is done by adding manually a line to the generated code as below. Add the following line as in image.

_.set(messageList_scope, '[' + i + '].messageWordList',splitMessageToWords(success.data.BODY[i].message));

We also need to clear the array of old messages before refresh, so modify the generated code with (see below in image)

var messageList_scope = [];

Image in Appery IDE, modified response mapping for the getFreshMessages function. The blue-marked line is the modified code, manually added after drawing mappings in editor.

Create also a new function getMessagesByHashtag with parameters selectedHashtag and type Scope function. Do the identical configurations as before, only difference is to add the requestData parameter from the incoming parameter selectedHashtag as below in image.

Image in Appery IDE, mapping code for the getMessagesByHashtag function.

To add a new message create a new function addNewMessage with parameter newMessageText and type Scope function. Add the following requestData mapping code manually to the editor.

Image in Appery IDE, mapping code for the addNewMessage function.

How to split REST API word to an Angular object array

Create a new function splitMessageToWords with parameter message and type Function. Write the following code to the function. This function will check each word and sets a boolean if the word is a hashtag.

Image in Appery IDE, function to split the message into words and return the array.

How to clean the hashtag word in JavaScript

Create a new function called replaceNonHashtagChars with parameter hashtag and type Scope function. Write the following code to the function. This function replaces dashes and other non-hashtag characters from the hashtag and returns it.

Image in Appery IDE, function to clean up the hashtag.

How to validate hashtag in JavaScript

Create also a new function to validate the hashtag function name validateHashtag parameter hashtag type Scope function. Add the following code to validate the hashtag.

Image in Appery IDE, function to validate the hashtag.

How to use a simple Angular directive to convert hashtags to buttons

Now we have all the scope functions ready. Then we need one Angular directive and filter to handle the hashtags. The directive takes the word as input end prints the UI element on the screen according if the word is a normal word or a hahstag. The filter checks if the element is a hashtag and adds the UI class variables to the element accordingly.

In Angular directives are reusable components. Angular creates a new scope for the directive that has a restricted visibility. Each directive works inside it's own scope. You can access the directive's parent scope with the following syntax. This calls the API service to refresh the messages according to the hashtag parameter.

$scope.$parent.getMessagesByHashtag(hashtag);

In Appery IDE create new JavaScript / Angular directive.

Image in Appery IDE, create new directive.

Add the following code to the directive. The directive uses a template that has a span element. The element's class is selected using the hashtagClassFilter. The template uses ng-repeat to print all the words in the messageWordList to the screen and ng-click is used to call the service to fetch the messages according to that hashtag text.

Image in Appery IDE, directive code to print the button element to the hashtag.

How to filter class names to an attribute in Angular

Create new filter with create new / JavaScirpt / Angular filter. Add the following code to the filter. This returns different class attributes according if the input boolean is a hashtag or not. This adds the css style name attributes to the span element that the angular directive prints out.

Image in Appery IDE, filter code to select the element css variable according if the element is a hastag or not.

Chat emoji application with hashtags user interface

Then it's time to update the screen and add the user interface elements to it.

The screen has 3 grids. 1st grid has the application label and a refresh button. The second grid has the new message input box and add new message button. The third grid has a label to print the message.

The following angular attributes are added to the elements.

  • 1st grid, refresh button, ng-click = getFreshMessages()
  • 2nd grid, add new message input box, ng-model = newMessageText
  • 2nd grid, add new message button, ng-click = addNewMessage(newMessageText)
  • 3rd grid, message grid, ng-repeat = messageItem in messageList
  • 3rd grid, message label, weall-update-hashtags = messageItem
  • 3rd grid, message label, text = {{wordItem.word}}

In the third grid the grid itself has the ng-repeat for each different message in messageList. The messages words are then repeated inside the weall-update-hashtags directive. The directive prints out the span elements for each word.

Image in Appery IDE, the application main screen.

How to convert text to emoji characters

As a bonus there is one new parameter to the addMessage API interface that's called convertEmojis and it can be set to true or false. If it's set to true words are converted to an emojis according to their text.

Future improvements

  • Inject service dependency to the directive that prints the message to words

we all speak emoji chat application source code and test application

You can download the Angular application resources here.

Test live Emoji chat application with web or mobile browser here

http://client.weall.com/awwYouSpeakEmoji

Download Emoji chat Appery.io Project backup and Import the project

Emoji Chat v1.0 Appery.io project backup

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

Hashtag Messaging v1.1 API Express backup

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

Emoji Chat we all speak emoji Android application APK

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

Emoji Chat HTML5 CSS web application

Download Emoji chat Android Studio project application to view the source code in Android studio

Emoji Chat Android Studio project

Download an update Messaging API that includes Emoji libraries

Emoji Messaging API Backend Service

What new ideas or thoughts this chapter gave you?

looks like am invited to start using this platform
Sun 23.07.2017 12:19:28 from  Anonymous coder
Why yes of course you are, welcome.
Sun 06.08.2017 10:51:22 from  Tuomas . (Tuomas)
Hibernate?
Thu 22.06.2017 06:12:24 from  Anonymous coder
:P
Mon 12.06.2017 08:17:07 from  Anonymous coder
nice
Thu 22.06.2017 06:12:24 from  Anonymous coder
looks interesting
Mon 12.06.2017 08:17:07 from  Anonymous coder
Hello
Fri 13.10.2017 10:29:25 from  Anonymous coder
:)
Fri 09.06.2017 13:49:00 from  Anonymous coder
I started using Spring Boot recently
Mon 12.06.2017 08:17:07 from  Anonymous coder
Not using Java9
Thu 22.06.2017 06:12:24 from  Anonymous coder