Parse Tutorial: Getting Started with Web Backends

Learn how to make a simple app with a web back-end made with Parse!

Learn how to make a simple app with a web back-end made with Parse!

Update Note April 12, 2015: This tutorial has been updated to use Swift, iOS 8.3, Xcode 6.3, and the latest Parse SDK version (1.7.1 at the time of writing this tutorial).

Having a backend component to your app adds a whole new world of features, from data synchronization to social sharing features to cloud storage. While you might be an expert iOS developer, what can you do about the server side to support your app?

In this Parse tutorial, you will build an app using the Parse backend service. You’ll work on a photo sharing app, complete with user logins, photo uploads, and a photo wall. To keep the focus on Parse, you’ll begin with a starter project that has the user interface pre-created, but no capability to upload or download any images. You will add the Parse service piece by piece until you have a functioning app.

Ready to build an app with a web backend, the easy way? Great! Then let’s get started with Parse! :]

Getting Started

Before starting the development of your app, the first step is to create an app in the Parse backend. Every developer and every app requires a unique identifier — otherwise, your data and users could get confused with those belonging to someone else.

Visit Parse.com, click on “Get started for free,” and then sign up to create a new account.

After you create the account, Parse will ask you to create your first app. You must regeister seperately every app you use with the backend. In this case, call it “Tutorial App”; hundreds of apps may exist on Parse with identical names, but only one instance of that app can belong to you.

After you create your app, you will see a Welcome Screen where you have several options to help you start out with some of Parse’s features. These basically let you download template projects to start with, but you won’t need that in this tutorial. On the top of the screen there are some options in a series of buttons, as shown in the following screenshot:

Here’s a guide to the options available at the top of the screen:

• Core: This is where you can see all your backend’s previously uploaded data. You can also see the users, and you can manually manipulate the data.
• Analytics: Here you can find statistical information about your app such as its traffic, the push notifications sent, and number of API calls made. You can also add your custom events using Parse Analytics.
• Push: Use this section to send push notifications to any group (possibly all) of your users.
• Settings: This is where you find all API keys. In addition, here you can change the settings of your app, manage its security, and export your data.
• Docs: This is where you can go for tutorials, sample projects, API documentation, and learn anything you need to extend your Parse supported apps.

The Parse Sample Application

In order to concentrate on backend services, this tutorial contains a starter project. Just download it, and add the Parse calls as you go through the tutorial.

Open up the project in Xcode and build and run! The first thing you will see is a login screen. However, although the buttons appear to do something, it’s a bit of an illusion. There is no back end yet to handle this, or the other parts of your app! You’ll create these functions shortly.

Before you proceed any further, have a look at the structure and flow of the app by opening Main.storyboard:

The project consists of four main views:

• Log In: A Login screen with user and password text fields. There’s a “Sign Up” button to go to the Sign Up view to create a new user.
• Sign Up: In this view, the user introduces the username and password to create a new account with the backend service.
• Wall: This is the main screen of the app. Here the user can see all of the other users uploaded images, the creation date and the comment associated with them.
• Upload: In this view, a user can upload their own images to the wall and (optionally) add a comment.

Each view has its own UIViewController in the storyboard, but you’ll notice that the Wall view has two representations. That’s because you’re going to see two ways to implement this view with Parse.

Preparing Parse Posthaste

The first step — quite naturally — is to configure your project to work with Parse!

Download the Parse iOS SDK from here:
https://parse.com/downloads/ios/parse-library/latest

After downloading it, unzip it and drag the three frameworks below to the frameworks folder of your project. When prompted, check “Copy items…” and “Create groups…”. The default action is to add these frameworks to the target “ParseTutorial”, which is what you want.

• Parse.framework: This is the main framework with all of Parse’s backend functionalities.
• Bolts.framework: This framework is a collection of low-level libraries used for making various tasks easier and quicker.
• ParseUI.framework: This frameworks includes some very handy UI elements that interact directly with Parse objects. You’ll use this framework to build your images wall.

Note: When adding Parse to your existing apps, you’ll also need to add some of Parse’s framework dependencies such as CoreGraphics and SystemConfiguration. The starter project has these set up for you already, but you can see the full set of instructions on the Parse Quick Start Guide.

The Parse SDK is written in Objective-C, while you’ll write the app itself in Swift. To use Parse’s Obj-C SDK code in your Swift application, you need an Objective-C Bridging Header file.
The easiest way to create a bridging header file is to add an arbitrary Objective-C file to your project and let Xcode create the bridging header for you.

Go to File\New\File… and select the iOS\Source\Objective-C file template. Name the file whatever you like — you’ll delete this file in a moment — then save it. When you save the file, Xcode offers to create an Objective-C bridging header file for you like so:

Click Yes and Xcode will create the bridging header file and add it to your project. Delete the original Objective-C file as you no longer need it.

Open the newly created ParseTutorial-Bridging-Header.h and add the following lines of code to the bottom of the file:

#import <Parse/Parse.h>
#import <ParseUI/ParseUI.h>
#import <Bolts/Bolts.h>

This will make these three frameworks available to your swift code.

Next, you’ll need the API keys for the tutorial app you created on the Parse web site. Go to your app’s Settings on the Parse Dashboard (1), select Keys (02) from the left pane menu, and make a note of the application ID and Client Key (03):

Next, open AppDelegate.swift and locate application(_:didFinishLaunchingWithOptions:). Add the following code at the beginning of the method:

Parse.setApplicationId("--AppID Goes Here--", clientKey: "--ClientKey Goes Here--")

You should put your actual IDs inside the two strings, of course. :]

Build and run! Check that everything compiles and runs without error. If so, then it means that your app registered and connected properly with the Parse backend. You are ready to work with the service!

The next logical step is to create some sample objects! :]