Building native mobile apps with Ionic Framework and Drupal back-end: configure Drupal REST server

Today, we continue to build our mobile app with Ionic Framework. Acquia has a service called Acquia Cloud Free which provides a development and staging environment for free. With this, you can create test servers with Drupal, and install drush with a few mouse clicks. Also, you get a git repository from which your site which will build a lot more features. I have created a simple blog website with some dummy content by a Devel module - you can check it out here.

Required modules

To create a REST server for this blog we should use a few contrib modules:

Services and Views Datasource. So, let’s install them and enable the following: “Services,” “REST Server” and “Views JSON modules.” Next, you should go to /admin/structure/services and click on Add link on the top of page. You can download and enable the CORS module to have the ability to test mobile apps in your browser before compilation. Here is the example of CORS configuration that will allow you to request data from all /api urls and retrieve the user session token from /services/session/token (which we should use to make user authorizations in our app). You can remove this module with settings after testing for security reasons.

REST server setup

Next, you must configure your new REST server and its output. Set the machine name of our server, select REST type, and create base path for all resources as /api. You should also enable Session authentication, to make it later in the app.

We must select the “json" esponse formatter, and the “application/json” and “application/x-www-form-urlencoded” request parsers so the app will send and receive all data in json format.

We won’t enable any resources for now. We should create views to catch data that we will use in our app. We do it this way to receive only the fields that we need, and to have a flexible configuration on each field output.

Adding views resources

Next, we’ll add a new view of a type page, with JSON data document format and a path of “api/articles.” We should also set the output limit to 10 articles, and check “Use a pager.” This will give us an articles list with pagination, showing 10 articles per page. In our application we will create functionality in an articles controller to load more so they can be retrieved with a page parameter in the request.

JSON output settings prettify output data. We removed the Root object name and Top-level child object to get an unnamed json array of objects. We can configure each field output by adding a label for it; for example we changed image_field to image.

We added title, nid and image fields to this view. This data will be used on the articles tab in our application.

Now if we visit the /api/articles page, we should get json data of the first 10 articles. We can also add a page GET parameter.

In the same way, we create a view page with path /api/article/% and a contextual filter to get a single article by nid. Here we add nid, title, image, body and comment_count fields. This will be used on an article details page.

We also need a view to get a non-empty categories list (/api/categories). We then create a relationship Taxonomy term: Content with a term to count how many articles exist in each category, and a filter to show only categories that contain one or more articles. We will use this data to make a categories tab in the hybrid app.

Single categories by tid (/api/category/%) and a list of articles in this category display by relationship taxonomy term: content with term, with pagination. We also add fields of category tid and name, article nid, title and image (article fields and format are the same as in the articles view), so we should show all articles related to the current category in the mobile application.

Now we have a REST server from which we can get articles and categories of a blog, as json data that we can request and use from our app. In the next part, we should configure our application services. This tutorial continues tomorrow so be sure to check back in.

DrupalBest PracticesDrupal PlanetDrupal TrainingLearning SeriesPost tags: AppsIonic