{% extends "dashboard/base.html" %} {% block title %}Quick Start - {{ block.super }}{% endblock %} {% block body_id %}dashboard-quickstart{% endblock %} {% block extra_head %} {% endblock %} {% block main %}

Quick Start for the Clutch Framework

1. Download and Install the Clutch iOS Framework

Download the Clutch iOS Library zip file and extract it.

Now drag the Clutch.framework folder into your project: Dragging the Clutch Framework Into Your Project

Choose the option to "Copy items into destination group's folder": Choosing to copy items into destination group's folder

Since Clutch relies on sqlite, add that to your linked frameworks as well: Adding sqlite

2. Integrate Clutch With Your AppDelegate

In your AppDelegate.h file, right underneath “#import <UIKit/UIKit.h>”, import the Clutch library:

#import <Clutch/Clutch.h>
In your AppDelegate.m file, right under all the other “#import” statements, add the following line:
static NSString *kClutchAppId = @"{{ app_key }}";
static NSString *kClutchTunnelURL = @"http://127.0.0.1:41675/";
static NSString *kClutchRpcURL = @"http://127.0.0.1:41674/";
In didFinishLaunchingWithOptions add the following lines:
// Synchronize with the Clutch servers
[[ClutchSync sharedClientForKey:kClutchAppId tunnelURL:kClutchTunnelURL rpcURL:kClutchRpcURL] sync];

// Log the device identifier
[ClutchView logDeviceIdentifier];
In applicationDidEnterBackground add the following line:
[[ClutchSync sharedClientForKey:kClutchAppId tunnelURL:kClutchTunnelURL rpcURL:kClutchRpcURL] background];
In applicationWillEnterForeground add the following line:
[[ClutchSync sharedClientForKey:kClutchAppId tunnelURL:kClutchTunnelURL rpcURL:kClutchRpcURL] foreground];

3. Create Clutch Project

Open Terminal.app and run the following command to install the command-line Clutch client:

sudo easy_install -U clutchclient
Now change directory to your XCode project and run the following command:
cd path/to/your/xcode/project
clutch startapp {{ app.slug }}
This will create a directory structure to hold your Clutch-using source code. Now drag that created directory into your XCode project, making sure to uncheck the "Copy items into destination group's folder" option and choosing the option to create folder references: Choosing the folder reference option

4. Add Your Device

To add your device, just run your project: XCode Run Button

Look at your logs and find where the device id is logged: Logged device id

Now copy and paste the device id in the form below:

Add Device

Adding your device id means that you can now enter development mode. To enter development mode, simply cd to your clutch directory ({{ clutch_dir }}) and run the following command (as a reminder, your username is {{ user.username }}):

clutch dev

This sets up a connection between the CSS/JavaScript/HTML files in your local directory with the web view in your simulator. Now any Clutch screens are loaded directly from your computer!

5. Add Your First Clutch Screen

A Clutch screen is a dynamic content area (built using a web view) where you can display your application code. It's the main building block of Clutch, and you can update this content area immediately and deliver it to all of your users.

To add your first Clutch screen, please visit our guide to adding a new screen and follow the steps there.

6. Learn More

Now that your project is set up, you might want to learn about how all the pieces fit together. We have set up a page that describes that all in detail, so we would love it if you checked that out.

To learn even more about what you can do with Clutch, head over to the Clutch documentation and browse around. Please be sure to let us know if any documentation is missing or unclear.

{% endblock %} {% block callout %}
play Getting Started - New XCode Project play Getting Started - Existing XCode Project
{% endblock %}