Tutorials

Part 1: Creating & Publishing a Basic App

Prefer to watch rather than read? There’s a video version of this tutorial in our Videos section – you can find it hereGo to the video.

Start by logging into your Nutshell instance. Your login credentials and a link to your instance will have been emailed to you when your account was created.

The first thing you’ll see when you’re logged in in is your Dashboard. If this is the first time anyone has logged in to your instance, it might look a little bare, but don’t worry – the Dashboard is covered in detail – we’re going to build an app.

Getting Started

You can download all the assets we used in this tutorial here.Download Here

Let’s get started!

Find and click the Create New App button to get started.

The Create New App Button stands out like a sore thumb

You’ll be asked to give your new app a name and description. You can leave the description blank if you like – it’s really only for when you’ve got 200 apps with similar names, and need to remind yourself what they were for.

Call your new app “Hello World” and click the Create button

For now, give your app the name “Hello World” and click Create.

Your new app is created, and opened automatically in the Nutshell app builder. The first thing you’ll see is an empty canvas.

See the Reference Guide for a more detailed overview of the Nutshell app builder

Across the top of the app builder, you’ll see the name of your app and a bunch of options:

• Home
  Returns you to the main Nutshell interface
• Save
  Saves your changes (although Nutshell will auto-save periodically anyway)
• Preview
  Allows you to quickly test out your app for real before publishing it
• Publish
  Allows you to publish your app to end-users when you’re happy with it
• Unpublish
  Allows you to revoke an app from your end-user community

Down the left-hand side of the screen, you’ll see icons for the constituent parts of your app:

• Workflow
  Once you’ve built some screens on the canvas, this is where you’ll find them
• Data
  Allows you to set-up places to store, manipulate and share data within your app
• Users
  Allows you to control who has access to your app, and which version of it
• History
  Each time you publish changes to your app, it gets logged here
• Image Library
  Whenever you upload an image, such as a logo, it’s stored here so that it can be re-used many times
• Settings
  Allows you to set some basic preferences as to how your app should appear

Don’t worry too much about what these tabs do. We’ll introduce them one-by-one when they become important.

Along the top of the canvas you’ll see the Toolbar, which contains lots of pre-built components that you can drag and drop into your app to add functionality.

The Toolbar is divided into categories to make it easier to find the right one – such as Form components, like text fields, checkboxes, e-signature panels etc.

You can change the Toolbar category using the dropdown on the left-hand side.

The Toolbar gives you access to lots of useful pre-built components

Finally, on the right-hand side of the screen, you’ll see the Properties panel. This provides you with a bunch of settings for whatever you have selected on the canvas.

It also contains some useful information about whatever you have selected, and links to the relevant page in the Nutshell Reference Guide, which gives you in-depth information about every setting and option.

Okay, that’s enough theory. Let’s get building an app.

Devices & Orientation

Before we create our first screen, we need to decide what kind of screen that’s going to be. Nutshell creates apps that will run on Smartphones and Tablets of any size, but it’s best to have an idea of what kind of device you want to optimise your design for.

In this case, our Hello World app is going to be a Smartphone app. It’ll work on Tablet too – which is great – but we want it to look and work best on Smartphone first.

Click on the Settings icon on the left-hand side of the screen.

The Settings tab gives you access to basic display preferences for your app

These settings allow you to specify what kind of device you’d like to optimise the builder interface for – Tablet or Smartphone, in Landscape or Portrait orientation. Whenever you add a screen to your canvas, it will take on the appearance of the device and orientation you’ve chosen.

Choose the device and orientation you’re primarily building for

We’re going to build for Smartphone in Portrait orientation, so we make those selections. The page will need to refresh between each choice.

Nutshell is very clever. If you change your settings halfway through a build, it will automatically try to re-calculate and re-position all your screens for you!

Adding a Start Screen

The Toolbar at the top of the screen should already be set to Essentials, which are the basic building blocks of any Nutshell app. The first component you’ll see in the Toolbar is the Screen component.

Click and drag it to the canvas area.

Click and drag a Screen component from the Toolbar onto your canvas

Once you’ve added your Screen, Nutshell will zoom-in to it, so you can start working on it.

Nutshell’s canvas works in a similar way to Google Maps, in that you can zoom in and out using the zoom tools in the bottom-left hand corner, and move around it by clicking on the grid background and dragging.

Give it a try.

If you’ve ever used Google Maps, navigating Nutshell’s canvas should feel quite familiar

Once you’ve set a zoom-level that works for you, click on your Screen to select it. You’ll be able to tell it’s selected when its drag-handles appear and the Properties panel refreshes.

Select your Screen on the canvas to see its Properties

The label “New Screen” isn’t very descriptive, so let’s change it. In the Properties panel, you’ll see a property called Label. Change it to “Start Screen” and hit Save Changes at the bottom of the Properties panel.

You’ll see the label on your Screen updates on the canvas.

Almost everything in Nutshell can have a Label to remind you what it’s for

Most settings and options in Nutshell have in-line assistance to help you understand what they do. For instance, at the top of the Properties panel, you’ll find a brief description of the component you have selected, with a link to the appropriate page in the Nutshell Reference Guide.

Most individual properties have a little help icon too, which – when you hover over it – tells you a little more about the setting, what it’s for and what kind of value should be entered.

If you ever get stuck, help is never far away

So, we’ve added our first Screen and given it a label so that we can recognise it later. Now we need to make sure that, as we add new Screens to our app, Nutshell always starts with this one whenever the app is run.

Click on the Behaviour heading to expand the Behaviour section. You’ll see a checkbox labelled Set as Start Screen. Check this box and save your changes.

Nutshell will always start the app with this Screen

Now, every time this app runs, it will start with this Screen first. But it looks a little bland. Let’s add a background image to brighten it up and bit.

In the Properties panel, click the Styling heading to expand the Styling section. Under the Background Image field, you’ll see a Select from Library dropdown.

You can select a background image from your Image Library, or upload a new one

We haven’t uploaded any images yet, so change this dropdown to Upload Image and hit the Upload… button. Choose an appropriate image from your computer hard drive – the image assets used in this tutorial can be downloaded from here.Download Here

In this case, we’ve used a nice, friendly clouds background.

Once uploaded, the background image is stored in the Image Library for re-use

Now to add a title, so our users know what to do.

Change the Toolbar to Visuals, and drag and drop a Text component onto your Screen.

Drag the Text component over your Screen and let go

A text box will appear on your Screen, snapped to the top edge. Double-click on the text to edit it. A text-editor will appear, giving you basic styling and alignment controls.

Double-clicking on a Text component will open the in-line text editor

Change the text to something descriptive, like “Say Hello” and click anywhere outside of the text box to close the text-editor. It’s probably a good time to move the text downwards so that it’s over the white portion of the background, too.

Click and drag the Text component down onto the white portion of the Screen

Let’s make it a little bigger and more colourful.

To help us do this, Nutshell comes with some pre-defined type-styles that we can use. These are very similar to the paragraph styles you might have used in Microsoft Word and other desktop publishing software.

With the Text component still selected, look at the Properties panel. There’s you’ll see a Style dropdown with the “Paragraph” style pre-selected by default.

Let’s change this to “Title”, since it’s the title of the screen and we want it to stand out.

Nutshell comes with a handful of common pre-defined text-styles built-in

You’ll notice the text gets much bigger and easier to read, but it’s still not friendly enough. Let’s tweak some of the styling. Expand the Styling section in the Properties panel, and apply the following values:

• Text Options: Font: Calibri
• Text Options: Font Size: 16px
• Text Options: Font Colour: #980fb1

Now we just need to center it. At the top of the Properties panel, click the Edit Text Content button – this does the same thing as double-clicking the Text component on-screen. Use the alignment buttons to center the text and save your changes.

You should be left with something like this:

Much more friendly!

Now all we need on our start screen is a button. Change the Toolbar to Forms, and drag a Button component onto your Screen.

Drag a Button component from the Forms toolbar onto your screen

By default, Nutshell will try to snap the new Button component to the highest point on the screen. You might need to drag it down the screen to somewhere more desirable.

Reposition the Button around the middle of your Screen

Nutshell’s buttons are pretty good looking by default. They’re also a reasonably good size for usability on a Smartphone device – you probably wouldn’t want them any smaller. But it would be nice if our new button matched our title a little better. Let’s change the appearance a little.

Select the Button on-screen and look at the Properties panel. The first property we need to change is the Reference – this is a unique ID that we’ll use later to determine which button the end-user has tapped. Let’s just call this “Button” for now.

The next property we need to change is the Button Label, which lets us change the text on the button itself. Since our app is going to say “Hello World”, let’s change this to “Say Hello”.

Don’t forget to save your changes.

Updated Reference and Label

Now, let’s change some colours. Expand the Styling section of the Properties panel to see the massive array of styling options available for buttons.

Expand the Styling section of the Properties panel to see a massive array of options

Change the following settings:

• Text Options: Font: Calibri
• Text Options: Font Size: 12px
• Text Options: Text Shadow: Colour: #7e0095
• Background Options: Background Colour: #980fb1
• Border Options: Border Thickness/Colour: Bottom: #7e0095
• Border Options: Corner Radius: All: 5px

After sizing and re-positioning, you should end up with something like this:

Our finished, re-styled button

Now that we’ve finished our Screen, let’s see what it will look like running on a Smartphone. At the very top of the page, on the right-hand side, you’ll see a Preview option.

Give it a click.

You can preview your app with Nutshell at any time

A preview of your app will open in an overlay, where you’ll be able to interact with it as though it was running in whichever device you set in the app Settings tab. In this case, we chose Smartphone in Portrait orientation, so that’s what we see.

Preview gives you a good idea of how your app might look and feel running on a real device

You can safely ignore the big black block on the right-hand side of the preview window. That’s for debugging complicated database stuff, which we’ll come to in a future tutorial. We don’t need it for a simple app like this.

So, our screen looks great. But clicking the button doesn’t do anything.

Not very exciting, is it?

Creating a Workflow

In Nutshell, a workflow is a series of steps the end-user takes through your app. Most of the time, these steps are Screens, which they ‘tap’ through one by one, using buttons to control where they go next.

A workflow is created by linking more than one Screen together in a chain, so let’s add the next step in our workflow now.

Change the Toolbar to Essentials (you should know how to do this by now), and drag a new Screen component onto the Canvas.

Position your new Screen beside the first one, by clicking and dragging it

In the Properties panel, change its Label to “Hello” and add the same clouds background image that we added to the first Screen. Since you’ve already uploaded the image, you can choose it from the Image Library this time.

Select your background image from the Image Library this time

Instead of uploading an image from your computer, you’ll be asked to choose one from your Nutshell Image Library. In this case, it only contains one image.

Choose the clouds background image from the Image Library

Now that our two screens match, we need to add some content to our “Hello” screen. Let’s start with a nice smiley face.

Change the toolbar to Visuals, and drag an Image component onto the new screen. Images appear on the canvas as placeholders – a box into which you insert an image. Move it and resize it until it looks about right.

Resize and position your Image placeholder in the centre of the screen

In the Properties panel, give the Image a Reference of “Smiley”.

We’re going to upload a new image for the Image Source property, so make sure you’ve got “Upload Image” selected and hit Upload…

We’ll be uploading a new Source image

Select the file from your computer (in this case, a big yellow smiley face) and hit Upload. The image you uploaded replaces the placeholder on the screen. Resize and re-position it if you need to.

Our smiley face in position

Now we need our smiley face to say “Hello World!”. Let’s use the same text styling we used on our Start Screen, but rather than styling it all again from scratch, we’ll just copy and paste it.

Go back to the first screen, right-click on the title and choose Copy.

Right-click the title text to copy it

Now right-click on your new screen and choose Paste.

Right-click on your new screen to paste the text component

Now, double-click on the Text component you’ve just pasted, and change it to say “Hello World!”. You should end up with something like this:

Copy/paste is a great way to retain styling without having to change the properties again

Our screens are looking pretty good now. Let’s link them together, so that when an end-user taps the “Say Hello” button, they move along the workflow to the “Hello” screen. This might sound tricky, but it’s ridiculously easy.

Click on your first screen to select it. You’ll notice four little handles on each edge.

Most on-canvas components have handles, which are only visible when they are selected

Click on a handle, and draw a line from your first screen to the second.

After clicking on a handle, a blue line will appear

Click on the second screen to complete the linkage.

After clicking on the second screen, the linkage will be complete

Now that we’ve established a link between the two screens, we need to tell Nutshell to follow this link only when the “Say Hello” button is tapped.

Click on the blue link to select it, and check out the Properties panel. Under Behaviour, check the Only follow this link if… option.

Link filtering rules are written in plain English

Under Input, choose your “Button” from the dropdown (remember, we gave it a reference of “Button” so that we’d recognise it). Under Is, choose “Selected”.

This rule is called a “filter”, and tells Nutshell – in plain English – to only follow this link if “Button” is selected. This means that in the future, as you add more and more links to your screens, Nutshell will never get confused about which one to follow when your “Say Hello” button is tapped.

Preview your app again, and click the “Say Hello” button.

Much better.

We’ve got a Hello World app that says “Hello World”. What more could we want.

[/restrict]

Publishing an App

There’s only one last thing we need to do before we publish this to a Smartphone. We need a way to get back to the start screen after the app has said “Hello World”. That way, our end-user can enjoy the moment again and again without having to restart the app each time.

Copy the “Say Hello” button from your start screen, and paste it into your “Hello” screen, using the same approach as you did earlier for the text component. With the new copy selected, check out the Properties panel.

Change the label of your new button to “Go Back”, and at the bottom of the Properties panel you’ll see a Back to previous screen checkbox. Tick this box, so that Nutshell will return the end-user to the previous screen when they tap it.

Check the Back to previous screen option

We don’t need to do any more to make this work. The Back to previous screen option allows us to send the end-user back along the link, without having to create another one specially.

Now preview your app one last time, and click the “Go Back” button to return to your start screen. Job done.

In the next tutorial, we’ll add some clever personalisation to make this app a little more interactive, but for now, let’s publish it to your Smartphone.

At the top right-hand side of the screen, click on the Publish option. It’ll ask you who you’d like to publish your app to: yourself (to test while you’re building), a Test community or a Live community.

This is only the first release of our app, and we’ve got more to add yet, so let’s just publish it privately for now. Select Only Me and hit Continue.

Choose Only Me to publish your app privately to yourself

Now all you have to do is download the Nutshell app from the relevant app store:

For iOSClick here to Download

For AndroidClick here to Download

Once you’ve installed Nutshell on your Smartphone, login with the same credentials you used to login to the Nutshell builder and your app should be waiting for you!