In Chapter 17 of Multimedia Journalism: A Practical Guide we took a look at several platforms that allow the non-coder to create a professional App for smartphone and tablet.

Now I’d like to look at a worthy addition to that list. It’s called App Builder, and comes from the App Institute.

Screen Shot 2016-12-18 at 11.15.47

So here’s a run down on how App Builder works.

As ever, this tuition is not intended to work independently of the much more extensive guidance included in the paper and ebook versions of Multimedia Journalism (MMJ) and the associated website.

This is by way of an update on what you will find there.

You can buy the Multimedia Journalism book here for the UK and here for North America. It’s also available at all national versions of Amazon

What App Builder does

App builder is designed for the small business, but works just as well for journalists and publishers.

It enables you to create a professional app, and add content to it, with just a few clicks – as long as you have your content ready.

Submission to the Apple and Google app stores is available, as is hosting (pricing here).

You don’t pay anything until you publish, which means App Builder is a great platform for practising app building.

Before you start

Read Chapter 17 of MMJ, on Multi-Platform Publishing, particularly section 17C4, on page 436, which goes through the general principles of building an app without using any coding.

Platform overview

This video introduction gives you the basics:

All the time you are building your app, the Knowledge Centre is available on the right of your screen, giving access to help specific to the point you are at. There is also a red pulsing button on the screen which, if clicked, also gets you to help.

Step-by-step guide to building a Smartphone App on App Builder

Click the ‘Try it out’ button to get started.

I’m going to create an app based on a website, and for the purposes of this tuition I’m doing it for the website to a textbook I wrote on Brand Journalism.

First option that pops up is to model your app on your Facebook page. To do more than replicate the content you post there, click ‘No Facebook page’ to move on to choose App types.

Options relate to various business types.

Select ‘Other’.

Enter your website url when prompted.

Set your colour scheme

Next step is to set a colour scheme. Click ‘Get colours’ and then enter you url again. This will bring up colours identified at that url, so you can match the ones on your website on your app.

You also have the option to set a colour for your header bar, tab bar, tab icons, and a different colour for when a tab icon is selected, as I’m doing here:

colour scheme

Create your app icon, splash screen and header bar

Next you load the images for your app’s icon, your splash screen and your header bar. If you don’t add an image to the header bar, your app’s title will appear as text instead. You can decide whether you want the header bar to be transparent, so the image on your splash screen shows through it, or opaque, in which case it overlays that image.

I want to use the same images as appear at my website and on the cover of the textbook, so I pull these images in and edit them:

splash screen

WANT TO SEE HOW YOUR APP IS LOOKING? You can toggle between the edit and preview tabs to see your app within the building platform, or click the small smartphone icon at the top of the screen to have a functioning preview sent to your phone. You’ll be prompted to download the App Builder app before you can take a look at it what you are building.

Add Tabs

There are a few tabs preloaded on the tab bar at the bottom of your app’s screen. Now you can remove the ones you don’t want and add others from a directory.

To remove a tab, hover over it to bring up your options. Options include ‘Remove from app’.

To add tabs, click the ‘Add tab’ button at top centre of your screen and select from what is on offer:

add tabs

Here’s a video on doing that:

If you add more than five tabs, the far right one will convert to a tab reading ‘More…’ and the additional apps can be accessed from this point

You are offered numerous tabs, divided into several categories. Click the appropriate category tab at the top of the app selection area to see the tabs available to you.

Adding a news feed via RSS

The RSS tab is a very useful one, because it means you can pull in a news feed, for example.

In this instance, I have added the RSS feed from my Blog, but I could just as easily add the feed from my content curation on brand journalism at Scoop.it. Here it is in preview:

blog

Create a hierachy for the content on your app

The ‘App Structure tab’ is the key to getting a coherent structure to your app, it enables you to create a hierarchy of pages, and can be used to mirror what you have on your website. App Builder calls these levels in the hierarchy ‘tiers’. Here’s an example, from App Builder.

app structure

As you add tabs you can require a log-in if you want to restrict access.

Here’s a video on adding tiers and structure to your app content:

You can also choose the style of navigation, either placing it on the left of your screen, or at the bottom.

Here are the options:

Screen Shot 2016-12-17 at 14.22.30

I chose the side option. You access navigation via the three horizontal lines at top left of the screen:

navigation

You can add as many tiers as you like, and add a range of content to each of them.

You do that by creating a tab for each element. I suggest having your content ready and the hierarchy you want mapped out as you start creating tabs. Create the tabs that represent content at the top level of your navigation, then those at the second level and so on:
add tgabs section 1 in

Here’s the video that shows you how, incase you need to refer to it again:

Here’s how I did that with my example, Brand Journalism. I want a substantial content area that offers additional material to each chapter in the book.

As the book is split into four sections, I first created four tabs corresponding to those sections. I then opened the Textbook tab and, into the blank screen that then opened, I dragged each Section tab into it.

By default, the editor will assume you want each tab you add to be a subsidiary of the one directly above it.

Infact I don’t want this, so to make my four Section tabs all at the top level of navigation I click on each one in turn and push it to the left.

hierachy tabs

Then, as I add Chapters, I click and drag on each of them, hovering until a space opens under the appropriate Section tab. I then drop it in. The first chapter I add is indented slightly, denoting it is in a subsidiary tier of navigation to the Section tab above it.

As I add further Chapters, I again have to click and drag them left to align with the Chapter 1 tag, and hence be at the same level two of navigation.

If I wanted to, I could also arrange tabs at a third level of navigation under each of these chapter tabs, and these would be indented a little further than the Chapter tabs.

Adding content to tabs

Each time you create a tab, you get the option to add content to it. You can do this after you have completed your hierarchy if you prefer.

Each time you want to add content to a tab, hover over it and, from the dialogue that pops up, click to ‘Edit content’. You can write or paste content into the box that appears, and adjust font, type size and add other media as you wish:

add content to tabs

Publish

Once you have all your content and navigation in place, you are ready to publish.

There’s a step-by-step guide to publishing here.

Pricing is here