HTML + CSS + JavaScript = Mobile Web App
Feature
If you're a web developer, perhaps you've heard of this newfangeldy “mobile” concept that's been sweeping the world. And perhaps you've even gone so far as reading a tutorial or two on how to create mobile applications. If so, you've seen that you get the delightful choice between Objective C and Swift (iOS), or Java (Android), all of which renders your hard-fought HTML, CSS, and JavaScript knowledge moot.
But, lo! There is hope!
If you're someone for whom writing code in web parlance is a piece of cake (or at least more doable than C/Java), this article will explain how you can use the knowledge you already possess in order to create mobile applications using the following three ingredients:
- jQuery Mobile, an HTML5-based framework for developing web-based mobile applications.
- Drupal 8's Web Services modules, which provide read and write access to Drupal's content for use in your application.
- Adobe PhoneGap, which packages web-based applications as mobile apps for use on platforms such as iOS and Android.
Let's get started!
About Our App
First, when developing mobile applications, it's customary to give some thought to the flow of the user interactions. Here are some basic wireframes:
Figure 1: The two main screens of our mobile application: list and view.
The idea of our app is simple: display a list of nodes from the front page of a Drupal 8 site, and provide a links view for the content. Drupal 8’s web services can also edit and delete content, but we'll stick to view, both for article space constraints and to avoid some bugs that are still present in Drupal 8's alpha releases.