tcoderwang913 / anypic

An open source mobile and web app that lets users share photos similar to Instagram

Anypic

Anypic is the easiest way to share photos with your friends. Get the app and share your fun photos with the world. Anypic is fully powered by Parse.

You can get the source code and create your own Anypic with this tutorial.

iOS Setup

Anypic requires Xcode 5 and iOS 7. The tutorial provides additional setup instructions.

Setting up your Xcode project

1. Install all project dependencies from CocoaPods by running this script:

cd Anypic-iOS
pod install

2. Open the Xcode workspace at Anypic-iOS/Anypic.xcworkspace.

3. Create your Anypic App on Parse.

4. Copy your new app's application id and client key into AppDelegate.m:

[Parse setApplicationId:@"APPLICATION_ID" clientKey:@"CLIENT_KEY];"

Finally, select the Anypic target and go to Build Phases. Under Upload Symbol Files, update line 3 to point to your Cloud Code folder, if any. If you're not using Cloud Code, feel free to remove the Upload Symbol Files section.

Configuring Anypic's Facebook integration

1. Set up a Facebook app at http://developers.facebook.com/apps

2. Set up a URL scheme for fbFACEBOOK_APP_ID, where FACEBOOK_APP_ID is your Facebook app's id.

3. Add your Facebook app id to Info.plist in the FacebookAppID key.

Web Setup

The main Anypic site is at Anypic-web/index.html. The site will show the last eight photos uploaded to your Anypic app by default. You can click any of these photos to display a bigger version.

Parse JavaScript SDK

Anypic.org is built on top of the Parse JavaScript SDK. The main JavaScript file is at Anypic-web/js/anypic.js.

To get started, copy your app's id and JavaScript key into anypic.js:

Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

You'll notice that there is only one index.html, however Anypic's website displays different content for the homepage and for a single photo's landing page. This is accomplished using Backbone.js's Backbone.Router. The following lines set up the two routes:

routes: {
  "pic/:object_id": "getPic",
  "*actions": "defaultRoute"
}

Whenever /#pic/<object_id> is visited, the Router will call the getPic function and pass along the object id for the photo that should be presented. The getPic function loads the photo landing page into the DOM, then obtains the photo from Parse using Parse.Query.

Any other URL will call the defaultRoute function, which should load the homepage into the DOM.

CSS

Anypic uses Sass and Compass to generate its CSS. You will find the main SCSS file at sass/screen.scss. To get started, run compass watch from the Anypic-web folder.

Any changes made to the .scss files in sass/ will be picked up by Compass and used to generate the final CSS files at stylesheets/.

Anypic uses media queries to present different layouts on iPad, iOS and various desktop resolutions. These media queries will apply different CSS properties, as defined by _320.scss, _480.scss, _768.scss, _1024.scss, and _1024.scss depending on the device's horizontal resolution. You can modify these in sass/screen.scss. The following media query applies the CSS rules laid out in _320.scss when your website is visited from an iPhone, for example:

@media only screen and (max-width : 320px) { @import "320" }

Cloud Code

Add your Parse app id and master key to Anypic-iOS/CloudCode/config/global.json, then type parse deploy from the command line at Anypic-cloud. See the Cloud Code Guide for more information about the parse CLI.