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  

</script>  

 

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. Start  MongoDB  2. Unzip  the  contents  of  the  zip  file  

3. Navigate  to  the  angular-­‐mongo  folder  4. Execute  npm  install  5. Execute  node  app.js  

6. Open  a  browser  and  go  to  http://localhost:8080  

Run  on  Heroku    

 

1. Unzip  the  contents  of  the  zip  file  2. Execute  Cd  angular-­‐mongo  3. Execute  git  init  

4. Execute  git  add  .  5. Execute  git  commit-­‐m  “initial  revision”  6. Execute  heroku  create  

7. Execute  git  push  heroku  master  8. 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”