Code Monkey home page Code Monkey logo

jogwithfriends's Introduction

JogWithFriends

A Sencha Touch 2 application that allows you to share jogging events with your facebook friends. Original example

Original author - Nick Poulden

Features:

  • Templates/Template Functions
  • Facebook API
  • Controllers (References/Actions/Functions)
  • Model
  • Store

Setting up JogWithFriends

This demo app shows off how to use Facebook with Sencha Touch. To see the app in action, visit:

http://ju.mp/senchajwf

This example uses the Facebook Javascript SDK on the client side, node.js for the server side and MongoDB for the database.

In order to run this example app, you'll need to set up a Facebook application and deploy the app to a public server. Below we outline how to do so using free accounts from Heroku and MongoLabs.

Set up Heroku

We assume you're familiar with Git and have it installed.

  1. Visit http://www.heroku.com and sign up.

  2. Download the Heroku command line toolbelt from http://toolbelt.herokuapp.com/

  3. From your command line, type heroku login and enter your account details.

  4. Change to the server-side subdirectory of this example.

  5. Set up a git repository:

    $ git init

  6. Create a new app on Heroku:

    heroku create --stack cedar

Note the URL of your live app.

Set up Facebook

  1. Visit https://developers.facebook.com/apps and click the 'Create New App' button.
  2. Fill in the App Display Name and leave the Namespace field blank.
  3. Note the App ID and App Secret.
  4. In the 'Select how your app integrates with Facebook' section, click the 'Mobile Web' option and use the domain created for your app on Heroku.

Set up MongoDB

  1. Visit https://mongolab.com and sign up.

  2. In the 'Databases' section, click 'Add'.

  3. Select the 'Free' plan on Amazon EC2, pick a database name, username and password.

  4. Click on your new database and note the connection URL. It should look something like this:

    mongodb://:@ds029807.mongolab.com:29807/

Set up the Sencha Touch app

  1. Fill in your Facebook app ID in the launch function.

  2. Open server-side/app.js and fill in the config options at the top:

    • redirect_uri The Heroku app URL
    • client_id Your Facebook app ID
    • client_secret Your Facebook app secret
    • mongoDb Mongo connection URL from above
    • sessionSecret A random string of characters for session encryption

Running your app locally

To run the app locally, you must first update your Facebook app to point to localhost.

  1. Visit https://developers.facebook.com/apps and select your application.
  2. In the 'Select how your app integrates with Facebook' section, click the 'Mobile Web' option and set the domain to http://localhost:3000

Next we need to build our app, install the required node modules, and then run the app using node.js.

  1. Run build.sh
  2. Change to the server-side directory
  3. Install all the required node modeles by running: npm install
  4. Run the app by typing: node app.js
  5. Visit your app by going to http://localhost:3000

Deploying your app

  1. Run build.sh

  2. Change to the server-side directory

  3. Run the following git commands:

    $ git add . $ git commit -m "Initial commit" $ git push heroku master

  4. Visit your live Heroku URL from your mobile device or Webkit based browser.

jogwithfriends's People

Contributors

aconran avatar davestum avatar dfoelber avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.