This example is a simple Dribbble client. It will allow the user to:

  • Authenticate with their Dribbble account
  • View various lists of shots in a Tab Bar
  • Tap on a shot to view a detail view, including the shot comments

Integrating with Dribbble

In order to build and run Shots, you’ll need to set up an ‘Application’ on Dribbble.

To set up an application on Dribble:

  1. Log in to your account on Dribbble.com
  2. Got to Account Settings
  3. Click the ‘Applications’ tab and click ‘Register a new application’
  4. Set your Application’s Name, Description, and Website URL (these can be anything)
  5. IMPORTANT For ‘Callback URL’, you must use the same URL Scheme that you set up in the Project Settings > Build Settings > URL Scheme in your Qwikly project.

For example, a valid setup would be:

qwikly-setup

Once you’ve got your application setup on Dribble, there’s just one more step to prepare Shots to connect with the Dribble Api.

  1. Go to Project Settings > Integrations > Dribbble in Qwikly
  2. Copy/paste the Client ID and Client secret from your Dribble app

dribbble-auth


Building the app

Once you’ve done these steps, you should be ready to build Shots and run it on the simulator or device.

To build the app:

  1. If you have not previously set the output directory for this project, set one in Project Settings > Build Settings
  2. Run Menu > Product > Build
  3. Go to the output directory and open the Shots.xcodeproj in Xcode
  4. In Xcode, use Menu > Product > Run to build your app and run it on the simulator

That’s it! It may take a few minutes to build the app the first time, but it should be faster for subsequent builds.


Open the Sketch Document

If you want to make changes to the Shots UI and see how we’ve put together the Sketch document, you can open it with Menu > File > Open Sketch File or by using the Command-Shift-O keyboard shortcut.