In this tutorial we will:
- Install Drupal as our Content Management System
- Install the Pugpig Connector so that we can deliver Drupal content to our app
- Configure the Connector
- Decide which Page Types will be included in our editions
- Create our first edition
- Populate it with content
- Preview it with the web preview tool
- Publish the edition
- View on a device (or simulator)
Step 1: Install Drupal
If you don't already have a Drupal instance, the first thing you need to do is install it. If you do already have an instance (either a clean instance or something running your website), skip to the next step.
If you don't have a local machine or server you can use, you could use a free Amazon EC2 Micro instance. We recommend using the Bitnami Amazon Machine Instance (AMI) which comes with everything preinstalled. You can find more information on this at Bitnami Cloud Images.
Ensure you can log in to your Drupal instance as an administrator.
Step 2: Configure Your Drupal Instance
Great - you have Drupal up and running. The next step is to install the Pugpig Connector for Drupal.
- Ensure that you have Clean URLs enabled in Drupal as the module requires it. You can find this at
Administration » Configuration » Search and Metadata » Clean URLs
- Obtain the Pugpig module. You can request the latest version by emailing firstname.lastname@example.org.
- Extract it into the modules area of your Drupal site - normally
Step 3: Enable the Pugpig Module
Once the module is installed, you need to enable it and verify it is working correctly.
- Go to
Administration » Modules, and enable the
Pugpig - Coremodule. There are other Pugpig modules (for third party services like sharing, subscriptions and notifications which are installed in the same way) but let's worry about those later.
- Verify that it has created an new Content Type (
Administration » Structure » Content types) called
- There should be a new item on the top level administration menu called Pugpig.
Installing Pugpig modules may result in a warning about “PHPSecLib is not in the PHP include path”. You should visit http://phpseclib.sourceforge.net/ download the whole zip and unzip to the PHP libs directory. Alternatively, you can do this using PEAR: http://phpseclib.sourceforge.net/pear.htm. If you are unsure phpinfo() outputs information about how PHP is configured so you can find where to unzip PHPSecLib to.
Step 4: Associate Content Types with Pugpig
Before you start to create a Pugpig Edition, you need to tell the system which content types can be used.
- Navigate to
Administration » Structure » Content types » Pugpig Edition(Note: This will require having the Field UI Module enabled)
- Select “Manage fields”, and edit the field Pages (
- At the bottom, there is a section called Content types that can be referenced. Select the types that you wish to include in your edition.
You can of course use your own content types with Pugpig. More details on this later.
Step 5: Create Your First Edition
We can now create our first edition. This will serve as a container for the standard Drupal pages that will make up the edition.
- Navigate to the new
Administration » Pugpigsection
- Click Add Pugpig edition to open the new edition form
- Supply the required values for the edition. You can leave the rest blank:
- Title - the internal title for the edition
- Key - a unique key for the edition. Could be something like an issue number
- Name - the public facing name for the edition, which end users will see
- Edition Date - the date of the edition, which is also used to order the editions in the app
- Free - Check this box. It should only be left unchecked if you plan to restrict access or sell your content
- Cover Image - upload an image to be used as the cover for this edition in the app
- Save your edition. Your edition will not appear in an app unless it is published.
Step 6: Add some content
We now have an edition crying out for some content.
- Click on the Flat Plan link to see the overview of your empty edition
- Click “Add Article” (or another content type, depending what you configured earlier)
- Supply some content in your new article
- Repeat a few times so you have a few articles in your edition
Step 7: Preview with the Web Viewer
The module provides a way to preview your edition before downloading it onto the target devices. Note that because of the way different browsers and devices render HTML, you should always test it on a device before publishing.
Because you are probably still using the default Drupal theme, your edition isn't going to look great. You can, of course, use any existing Drupal theme or create your own, but more on that later.
In order to preview your edition, click the Preview link next to the edition from the Flat Plan View. Use the Previous and Next arrows to move between the pages in the edition. You can also resize your browser window to see how the pages will look in Portrait and Landscape.
Step 8: Publish Your Edition
Now that you're happy with your edition, it is time to publish it to the world. You publish an edition in the same way you publish any Drupal content:
- Edit the edition
- Look for the Publishing Options section, and check the Published box
- Save the edition
Published Editions have a green title on the Edition Overview screen. Unpublished editions are shown in grey.
Step 9: View your app on a device
It is time to view your edition on a device. For now, use the Pugpig Reader App, which is a generic application that you can use to view Pugpig content.
In reality, you would create your own branded app using the Pugpig app container or the SDK.
- Download the Pugpig Reader app onto your device
- Ensure that your device can access your web server
- Determine the entry point for your content. On the Drupal Connector, go to
Pugpig » Feeds » Top Level OPDS Feeds » View internal ATOM list (OPDS)
- Follow this link - you should see an ATOM XML feed which represents all the published editions in your system. The URL should look something like:
- Start the Pugpig Reader App on your device, and click the Cog for settings
- Type the URL into the URL field in the app and click done
- You should see a single edition in the edition carousel
- Click Download to download and view the edition
And we're done. You now have an app that shows content from Drupal. You should be able to view the edition offline and use other Pugpig features. These include:
- See the table of contents
- Local offline search
- Ability to annotate content
- Ability to share content via Twitter and Facebook
- Ability to touch images to go full screen