angular-bootstrap (1)
Demo Social site with Bootstrap
Introduction This is the deployment and usage guide for Cloudspokes challenge 2066. The challenge is to build an UI with Angular or Backbone, using bootstrap, and signing in with LinkedIn.
Technical details I have chosen Angular.js for the challenge. The design is done with Twitter-‐Bootstrap and I have used jQuery and jQuery UI libraries (for the calendar). On the server side, I have chosen Express for the REST API and MongoDB to store the data. Highlights of my app: • • • •
Sign in with LinkedIn purely in javascript (no server side required) Integration with jQuery UI components via Angular directives Sign up process and profile maintenace ready connected with ExpressJS API Data stored on mongoDB using a REST API
Set up instructions
Hardcoded values -‐The LinkedIn API key: This is the key to access LinkedIn API. Now it is set to my account, which is set to run on http://localhost and http://angular-‐bootstrap.herokuapp.com, but it should be changed to deploy it anywhere else. It can be found in angular-‐bootstrap\js\index.html: Look for the following lines, API key marked in red: <script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: mk7d07jliqob
onLoad: onLinkedInLoad
authorize: true
Deployment Dependencies To run it locally it needs the following programs installed: • •
mongoDB, download it from http://www.mongodb.org/downloads node.js, download it from http://nodejs.org/download/
To deploy to heroku, it needs the following programs installed: • •
Heroku toolbelt, download it from https://toolbelt.heroku.com Git, download it from http://git-‐scm.com/
Run locally To run it locally, follow the next steps: 1. 2. 3. 4. 5. 6.
Start MongoDB Unzip the contents of the zip file Navigate to the angular-‐mongo folder Execute npm install Execute node app.js Open a browser and go to http://localhost:8080
Run on Heroku 1. 2. 3. 4. 5. 6. 7. 8.
Unzip the contents of the zip file Execute Cd angular-‐mongo Execute git init Execute git add . Execute git commit-‐m “initial revision” Execute heroku create Execute git push heroku master Execute heroku open
To use it with your own API key, go to https://www.linkedin.com/secure/developer , add a new application and get the API key. Here is a screen with this process
App Overview Here is an overview of the different screens. First we have a login screen with a carousel component, and the sign in with LinkedIn button:
The button will trigger the LinkedIn OAuth screen:
After the log in, you will be redirected to the welcome screen:
Fill the form on the wizard. You can add a list of offers and needs:
Once you confirm the registration, you will go to the main page:
You can request a meeting, which will trigger a popup asking for a date and time, and the communication type. A list of upcoming meetings will appear on the calendar.
You can also change the info on your user profile.
You can delete your account with the “Delete profile option”
Introduction This is the deployment and usage guide for Cloudspokes challenge 2066. The challenge is to build an UI with Angular or Backbone, using bootstrap, and signing in with LinkedIn.
Technical details I have chosen Angular.js for the challenge. The design is done with Twitter-‐Bootstrap and I have used jQuery and jQuery UI libraries (for the calendar). On the server side, I have chosen Express for the REST API and MongoDB to store the data. Highlights of my app: • • • •
Sign in with LinkedIn purely in javascript (no server side required) Integration with jQuery UI components via Angular directives Sign up process and profile maintenace ready connected with ExpressJS API Data stored on mongoDB using a REST API
Set up instructions
Hardcoded values -‐The LinkedIn API key: This is the key to access LinkedIn API. Now it is set to my account, which is set to run on http://localhost and http://angular-‐bootstrap.herokuapp.com, but it should be changed to deploy it anywhere else. It can be found in angular-‐bootstrap\js\index.html: Look for the following lines, API key marked in red: <script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: mk7d07jliqob
onLoad: onLinkedInLoad
authorize: true
Deployment Dependencies To run it locally it needs the following programs installed: • •
mongoDB, download it from http://www.mongodb.org/downloads node.js, download it from http://nodejs.org/download/
To deploy to heroku, it needs the following programs installed: • •
Heroku toolbelt, download it from https://toolbelt.heroku.com Git, download it from http://git-‐scm.com/
Run locally To run it locally, follow the next steps: 1. 2. 3. 4. 5. 6.
Start MongoDB Unzip the contents of the zip file Navigate to the angular-‐mongo folder Execute npm install Execute node app.js Open a browser and go to http://localhost:8080
Run on Heroku 1. 2. 3. 4. 5. 6. 7. 8.
Unzip the contents of the zip file Execute Cd angular-‐mongo Execute git init Execute git add . Execute git commit-‐m “initial revision” Execute heroku create Execute git push heroku master Execute heroku open
To use it with your own API key, go to https://www.linkedin.com/secure/developer , add a new application and get the API key. Here is a screen with this process
App Overview Here is an overview of the different screens. First we have a login screen with a carousel component, and the sign in with LinkedIn button:
The button will trigger the LinkedIn OAuth screen:
After the log in, you will be redirected to the welcome screen:
Fill the form on the wizard. You can add a list of offers and needs:
Once you confirm the registration, you will go to the main page:
You can request a meeting, which will trigger a popup asking for a date and time, and the communication type. A list of upcoming meetings will appear on the calendar.
You can also change the info on your user profile.
You can delete your account with the “Delete profile option”
