Create a simple wedding photo app with Neonto’s Google Sheets plugin — Part 1

We’ve just released our Google Sheets plugin for paid Neonto Studio versions (Proto Studio and Production & Team Edition). The Google Sheets plugin provides a super fast & easy way to add and update data to your iOS app. Android support for the plugin is coming soon!

The idea is to create an app with one screen containing a list of images and text — so let’s get started! First, open up your Neonto Studio and create a new project with one screen.

1. Add Header text label, Placeholder image element and Title + Description text labels. You can use any fonts you like (I used Amatic SC and Josefin Sans from Google Fonts).

2. Click the App Settings node on your Project Map and set the basic font/color settings in App Styles. Don’t worry, you can always skip this and set fonts and colors individually for each element.

3. Now, we’re ready to create a list element with the handy “Make list” shortcut. First, select all three elements that you want the list to contain: in this case, this means the Placeholder image as well as the Title and Description text elements. You can select multiple elements simultaneously using CMD+click.

When you’ve selected those three elements, click on the “Make list” button on the design canvas (bottom left).

4. Next, Neonto asks if you’d like to create Data sheet for the list. Click yes, and a Data sheet is created as source data for your list.

5. The List is now ready. You can make the List horizontally fill the screen by selecting the List element and setting the List/Grid alignments to Left 0 points, Right 0 points.

6. Open up the “List item 1” Stencil in the Project Map. This Stencil represents one item on the list you just created. You can fix the alignments for each element and rename the elements if you haven’t already done so.

7. Add a rectangle shape element to the Stencil background by clicking on “Add Default Background Element” in the app menu. Note that you can change the element’s color by double clicking the element layer.

8. You can fix alignments for each element in the Stencil.

For example, if you want to align the Description text label 5 points from the left and right sides of the screen, just go to your Layout Settings, check the Left and Right checkboxes and set the offset values to 5 points (left) and -5 points (right).

9. You can also make the image fullwidth by aligning it 0 points from left and right.

10. Click on “Create Data block” and add the Google Sheets plugin to your project.

11. Log in to Google Sheets with your Google account and create a brand new, blank sheet.

12. Add header columns for the sheet. Due to the Google API’s limitations, you need to use lower case letters. Use the “img-” prefix for the column name if you’re adding an image column.

13. Add some content to rows. For images, use URLs that refer to your image file. If you need to create some test URLs for your images, just use http://imgur.com/ or any other photo service to upload your pics.

14. Share the Sheet you just created to the Service account stated on your Neonto Cloud admin page. Give “Can edit” permissions if your app is supposed to add rows to the sheet.

15. Go to your Neonto cloud admin page, add your sheet and generate a Document ID to be used in your app. Cloud admin is available for Proto Studio and Production & Team Edition users.

16. Copy the Document ID from your sheet list.

17. Go back to Neonto Studio and open the Data Sheet editor by double clicking the Data Sheet node on your Project Map. Select the “gsheet” option in the “Live Data from Web Service” drop down list.

Paste the sheet Document ID to the field asking for it and click the Reload button (or just press Enter).

18. The List is now filled with data from your Sheet. If the data doesn’t load, check the Document ID setting and make sure that you’ve shared the sheet to the Service account (You’ll find instructions in the cloud panel).

19. Go back to your Start Screen and see how data is already loaded to your List. If some of the list elements are not shown properly, check that element names in the List item Stencil matches the Column names in the Data sheet.

20. Here we go! Now you’re ready to test the app, either on a simulator or your own iOS device (through the “Open in Xcode” button).

In our next post, we’ll spice things up and add a Details View and a contact form to the app.