Create your first Estimote app without writing a single line of code using PencilCase

This is a guest post by PencilCase Team at Robots and Pencils Inc

Estimote beacons have unlocked the ability to create mobile experiences rich in context, but the power to implement these experiences has often been limited to developers. Now, anyone can build a beacon-powered mobile app with PencilCase.

PencilCase is an iOS app-making tool that allows non-developers to create native apps for the iPhone and iPad without writing a single line of code.

How PencilCase works

PencilCase is made up of two parts: PencilCase: Studio for Mac and PencilCase: Player for iOS.

PencilCase: Studio is the app maker. To create an app, simply import your creative assets – images, videos, audio and even 3D models – into the Studio and then add the functionality you want to see in the app.

PencilCase: Player allows you to test and share your app on an iPhone and iPad for quick iteration. Once complete, you can publish to the Player and distribute your app’s unique Share Code to customers and employees. You can also export your app as an XCode project and submit it directly to Apple’s App Store.

Create your first Estimote app in minutes

We’re big believers in the philosophy “show don’t tell.” So, rather than telling you how easy it is to create an app that incorporates beacons in PencilCase, we’ll show you instead.

For this demo, we’ve decided to replace paper guides at museums with an engaging visitor app. To see what we created and to recreate it yourself, download a free trial of PencilCase: Studio onto your Mac, and PencilCase: Player onto your iPad. Next, grab the project so you can follow along, and check out the finished product right on your iPad.

The basics

When you open PencilCase: Studio, you’ll see your Cards on the top left-hand side. They represent screens inside your app. You can add, duplicate, delete or rearrange your Cards like you would in Keynote or PowerPoint.

Unlike other app makers, you’re not restricted to a template in PencilCase. You can build UI from the ground up. Just upload your creative assets to the Media Pane and then drag them to your Cards as you create the app. You can also include features like menus, buttons, scroll views and text inputs by using the built-in Supplies, and add slick animations using Physics or Timeline.

Finally, the intuitive Whens & Thens system allows you to create complex behaviors by creating statements that identify the actions you want the user to take (the “when”) and events they trigger (the “then”).

Recreating the home screen

1. The second Card in PencilCase: Studio is our home screen. To recreate it, go to the Media Pane, select the background image (BK1.png) and drag it on your Card.
2. Next, add the top bar navigation by selecting TopBar.png from the Media Pane and dragging it on the Card.
3. To add the navigation bar title, select the Text Label Supply from the Supply Pane and drag also drag it on the Card. While the Text Label is still selected, go to the Properties Pane on the top-right hand side of Pencil: Studio. Underneath the label text section, type in the name of your title.
4. To create the menu along the bottom of the app, you’ll want to use the Scroll View Supply. Drag the Scroll View supply from the Supplies Pane to the Card, and resize it to your desired size.
5. Once resized, double-click to edit and resize the scroll content. If you have several assets to add to your Scroll View, you may need to extend it off of the Card.
6. Then while inside the scroll content, drag your assets from the Media Pane to the Card and arrange them in a horizontal line within the Scroll View. For this example, you’ll want to use Button, Button 1, Feature 1, and Feature 3.
7. Finally, we want the user to be able to navigate to a new screen from the Scroll View. To do this, we need to add a Behavior. Go to the Behaviors Pane on the right-hand side and click on When. Type in the word “tapped” and select “When XXX is tapped.” Click on the underline and select the appropriate asset. For this example, choose Button. Next click “Then” and type in “go to.” Select “Then go to card XXX using transition typeXXX with duration XXX seconds”. Click each underline and complete the sentence with the appropriate information. For this example use “Then go to card NextCard using transition type Instant with duration of 0.4 seconds.” Repeat for each image in the Scroll View.

Adding Estimote Beacons

Now, assume we’ve placed Estimote Beacons around the museum. Rather than the user navigating to information in the app, we want the information about a specific piece of art to appear automatically as the user moves closer to it.

1. To implement Estimote Beacons, go to settings by clicking on the gear icon in the top toolbar of PencilCase: Studio.
2. Under Third-Party, click the “+” button in the bottom right corner to add a new beacon. Input your beacon’s information: UUID, Major, Minor, and a name of your choice. For clarity, the beacon name represents the piece of art it’s associated with. Repeat this step for each beacon.
3. Navigate back to your project by clicking the project view icon next to the gear on the toolbar.
4. Finally, create a Behavior that triggers information about a specific piece of art when they are in proximity to the associated beacon. To do this, go to the Behaviors Pane. Click on the When button, and type in “iBeacon.” Select “When the proximity of iBeacon XXX changes to XXX.” For this example use “When the proximity of iBeacon ApartIX changes to Immediate.” Next, click on Then and type in “go to.” Select “Then go to card XXX using transition type XXX with duration XXX seconds.” For this example use “Then go to card Card 6 using transition type Instant with duration of 0.4 seconds.” Repeat for each Beacon.

3D as easy as 2D

Now we’ve created a home screen with a scrollable menu and implemented Estimote Beacons to create a personalized, content-rich experience. To complete the app, we need to create content for the screens that represent each piece of art. Here, we’ll show you how to recreate the Damien Hirst skull.

What’s unique about PencilCase is that importing a 3D model is as easy as importing an image. Simply add a .dae file to your Media Pane, and then drag the file onto the Card you’re working on.

1. To create the black background, drag a Color Supply from the Supply Pane onto the Card and resize it.
2. Drag out Text Boxes from the Supply Pane to create the title and subtitle. Adjust the font size in the Properties Pane.
3. Finally add the 3D skull by dragging My3DSupply.dae from the Media Pane onto the Card.

And there you have it! You created your first PencilCase app in mere minutes. To see it in action, select PencilCase Player from the dropdown menu on the top left and hit the publish button. Add the Share Code to PencilCase: Player on your iPad. Ta da! Start playing with the app on your device instantly.

PencilCase team