Building Native Mobile Apps with Ionic Framework and Drupal Back-End: Show and Create Comments.

Hello, my reader, today I will add the final functionality to our mobile app for a blog website. As you know, a blog is the place where an author shares his own experience or opinion in some topic and he wants to interact with readers. The best way to communicate with readers is through comments. Let’s add an ability (for authorized users only) to show and leave comments.

As you have noticed in previous tutorial parts, there were a few steps to add new resources to the application:

1. Configure REST resources on the server.
2. Define Angular services to request data.
3. Add a view and controller.

Add comments server resources

We should add a few steps before we start working with comments: check if an article already has comments, retrieve those comments if so, and post a new comment on the current article.

So we configure the services module resource to be able to see the count of comments by node id and to create a new comment. Go to /admin/structure/services/list/your_rest_service_name/resources (replace “your_rest_service_name” with your current service machine name), add the alias for comment resources and check the following comment options: CRUD operations - create, and Actions - countAll.

Now if we send a POST request to the api/comment path with data for new comment and CSRF Token, it will create a new comment. If we send a post request to api/comment/countAll with the article id, it will return a number of comments.

To get comments for the current article, I will create a Datasource View with the path api/comments/%, where % is an article id. I decided to do it this way to have a full control of the output data.

We have completed the server side preparations.

Add new resources to the application

We have the resources, so we will create a new factory in the services.js file called Comments. It will have next methods: “check,” to check the number of comments for the article; “get,” to load comments; and “post,” to create a new one.

gist link

Next we need to edit the article details template to add a view for comments, and a new comment creation form. Only logged in users will be able to create comments; this is why we show the “Leave a comment” button only for them. We will show the comments list only if the article already has comments. Also, we will check if we have already loaded comments to avoid loading every time.

gist link

Finally we should create a new controller to handle the comments view. Here, we will store some methods to show, hide comments and comment form, loading data, etc.. The only new feature that I use in CommentsCtrl is $ionicScrollDelegate - this is one more service that comes with Ionic Framework, and helps to recalculate scrollbar size, scroll to the bottom or top of screen, and much more.

gist link

That is all - your app is now ready for production. You can clone and try all of this code from my GitHub repository; to get the code for this part, checkout the part6 branch(just run “git checkout -f part6”). Or you can install the apk file compiled by me; just don’t forget to enable installation from other sources in system security settings.