Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/denny0223/Panagram
An open source mobile and web app that lets users share photos similar to Instagram
https://github.com/denny0223/Panagram
Last synced: about 2 months ago
JSON representation
An open source mobile and web app that lets users share photos similar to Instagram
- Host: GitHub
- URL: https://github.com/denny0223/Panagram
- Owner: denny0223
- License: cc0-1.0
- Fork: true (jhenkens/Panagram)
- Created: 2014-08-27T15:13:38.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2014-10-17T04:05:30.000Z (almost 10 years ago)
- Last Synced: 2024-06-29T04:33:29.540Z (3 months ago)
- Language: JavaScript
- Size: 71.5 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Panagram
This is a project developed by Johan Henkens and Kyle Jorgensen of UC Santa Barbara for CMPSC 263, Spirng 2014.
Panagram is a photo-sharing style application, specifically tailored for panoramic photos. [Panagram](http://panagram.parseapp.com/#) is fully powered by [Parse](https://parse.com), and runs on iOS, Android, and the web. It is integrated with Facebook for user authentication.
Here is the [Anypic tutorial](https://parse.com/tutorials/anypic) from which this project is derived. We have built upon the original iOS Anypic code, and have created the Android and web versions mostly from scratch.
## Overview
* [iOS Setup](#ios-setup)
* [Android Setup](#android-setup)
* [Web Setup](#web-setup)
* [Cloud Code](#cloud-code)
* [Background Info](#background-information)
## iOS Setup
Panagram requires Xcode 5 and iOS 7. The [tutorial](https://parse.com/tutorials/anypic) provides additional setup instructions.
#### Setting up your Xcode project
1. Open the Xcode project at `Panagram-iOS/Panagram.xcodeproj`.
2. Create your Panagram App on [Parse](https://parse.com/apps).
3. Copy your new app's application id and client key into `AppDelegate.m`:
```objective-c
[Parse setApplicationId:@"APPLICATION_ID" clientKey:@"CLIENT_KEY];"
```
#### Configuring Panagram'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.
## Android Setup
Make sure you have the Android SDK installed on your system. The version of the Eclipse IDE with ADT (Android Developer Tools) built-in can be found [here](http://developer.android.com/sdk/index.html). Panagram is designed for Android version 4.0 and above.
#### How to Run
1. Clone the repository and open the project in Eclipse
1. (For Android Studio set up, you're on your own)
2. Create your Panagram App on [Parse](https://parse.com/apps).
3. Add your Parse application ID and client key in `AnypicApplication.java`
```java
Parse.initialize(this, "", "");
```
**4. Set up the Facebook SDK**
* follow the [Facebook User guide](https://www.parse.com/docs/android_guide#fbusers) in Parse's Android documentation.
* You will have to create a Facebook application for your app, and then you will have to put the Facebook Application ID into `AnypicApplication.java`
```java
ParseFacebookUtils.initialize("YOUR FACEBOOK APP ID");
```
* Make sure that the `facebooksdk.jar` file is [added as an Android Dependency](http://stackoverflow.com/questions/20355971/how-do-i-add-a-new-library-to-android-dependencies-using-eclipse-adt) to your project.
5.Build the project and run
## Web Setup
The main Panagram site is at Panagram-cloud/public/index.html. The site will show the last eight photos uploaded to your Panagram app by default. You can click any of these photos to display a bigger version.
#### Parse JavaScript SDK
http://panagram.parseapp.com/ is built on top of the [Parse JavaScript SDK](https://parse.com/docs/js_guide). The main JavaScript file is at `Panagram-cloud/public/js/panagram.js`.
To get started, copy your app's id and JavaScript key into `panagram.js`:
```javascript
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
```
You'll notice that there is only one index.html, however Panagram's website displays different content for the homepage and for a single photo's landing page. This is accomplished using [Backbone.js](http://backbonejs.org/)'s `Backbone.Router`. The following lines set up the two routes:
```javascript
routes: {
"pic/:object_id": "getPic",
"*actions": "defaultRoute"
}
```
Whenever `/#pic/` 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](http://sass-lang.com/) and [Compass](http://compass-style.org/) to generate its CSS. You will find the main SCSS file at `sass/screen.scss`. To get started, run `compass watch` from the Panagram-cloud/public 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/`.
Panagram 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:
```sass
@media only screen and (max-width : 320px) { @import "320" }
```
## Cloud Code
Add your Parse app id and master key to `Panagram-cloud/config/global.json`, then type `parse deploy` from the command line at `Panagram-cloud`. See the [Cloud Code Guide](https://parse.com/docs/cloud_code_guide#clt) for more information about the Parse CLI.
## Background Information
A video describing our project can be found [here](https://www.youtube.com/watch?v=xLdTZYzK_j4).
A paper describing our experiences can be found [here](https://www.dropbox.com/s/c8e33vzmid3l09u/cs263Paper.pdf)