When done, submit here.

1

2

3

4

5

How will this lab help me?

This lab will teach you how to use the Facebook login, Google Maps API, and camera through getUserMedia.

The core lesson here is that there are third party APIs that we can utilize and avoid doing work that's already been done. You'll also get more practice using callbacks as the main form of communication between client and server. Even if you're not using any of these features in your assignments, hopefully this will get you started on using creating richer web applications.

6

7

Heads up!

This isn't the only form callbacks take, or are used, but is an example! We'll see various forms of callbacks in the rest of the lab.

8

9

10

Links

Troubleshoot

Wait.. node just barfed... what do I do?

Try restarting your computer

11

12

Links

13

14

15

16

17

18

Include the partials

{{> facebook}}
<script src="/js/facebook.js"></script>

Add login button

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

19

facebook.js

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

function statusChangeCallback(response) {
  console.log('Facebook login status changed.');
  console.log(response);
  // The response object is returned with a status field that lets the
  // app know the current login status of the person.
  // Full docs on the response object can be found in the documentation
  // for FB.getLoginStatus().
  if (response.status === 'connected') {
    // Logged into your app and Facebook.
        console.log('Successfully logged in with Facebook');
         FB.api('/me?fields=name,first_name,picture.width(480)', changeUser);
  }
}

Heads up!

Wait how does checkLoginState() get called?

If you look in your index.handlebars, we put in the segment onlogin="checkLoginState();". This means after Facebook is done accepting your login API request, it will call the callback checkLoginState for you. See how varied callbacks can be used!

Troubleshoot

It's not working!?

Check your javascript console in developer tools

20

Hints

How do I get the name from facebook to replace Michael Bernstein?

Remember that the response data from facebook is stored in the response variable in changeUser. What's in response? Try printing it out onto the console!

How do I get the image from facebook to use in my img?

This is going to be similar to how we did it for name. Try peeking into what's inside response by logging it on the console. Try and see if you can get the URL to your facebook image to print onto the console.

How do I replace just the src attribute of img?

You can change a single attribute of an element with the jQuery call $.attr('src', );. Read more about it in the jQuery docs!

21

22

Links

23

Forgot your API key?

You can find your API key again by clicking 'Get a Key' again (same button as before) and selecting your app name from the dropdown, and clicking 'Enable Api'

24

25

Terminal

<script src="/js/googleMaps.js"></script>
{{> googleMaps}}

26

googleMaps.js

function initMap() {
  // Create center marker at UCSD
  var ucsd_ltlng = {lat:32.880, lng:-117.236};

  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: ucsd_ltlng,
    zoom: 15
  });

  var marker = new google.maps.Marker({
      position: ucsd_ltlng,
      map: map,
      title: 'UCSD'
  });
}

Heads up!

Wait, how does initMap() get called?

If you look in your googleMaps.handlebars, we put in the segment &callback=initMap. This means after Google Maps is done accepting your API request, it will call the callback initMap for you. Another example of the varied usage of callbacks!

27

28

29

Hints

What exactly are we implementing here?

The video tag will show the video feed from our webcam. The canvas will show the image once we've taken the shot. Finally, the button will actually take the image!

Whoa whoa slow down. How does all this work?

Well it's slightly outside of the scope of this class, but you can read the capture function to understand how the video, canvas, and button are hooked together. The successCallback hooks up the video element to show the stream, and button's click to an event that draws the current image in video to the canvas. You can also see Dev.Opera - Media Capture in Mobile Browsers for a more detailed explanation.

30

index.handlebars

<script src="/js/camera.js"></script>

I got an error in my browser console

Make sure to uncomment the camera code in your index.handlebars

31

Heads up!

Make sure to use https

Make sure to go to https://<Your Heroku App Name>.herokuapp.com as these 3rd party APIs will not work without it!

GitHub - Commit

git status
git add ... 
git commit -m "Third party APIs"

Github - Push

git push

32

Links

33

34

35

36

routes/tasks.js

exports.addTask = function(req, res){
var taskName = req.body.taskName;
  // This will print in your terminal when a POST is made
  console.log(taskName); 

  data.tasks.push(taskName); // Add to current data

  // Lets send our task name back so our browser knows it worked out!
  res.send(taskName);
}

Add to app.js

app.post('/addTask', tasks.addTask);

37

views/tasks.handlebars

<form id='taskForm' action='/addTask' method='post'>
        <label for='addTask'>Add a task</label>
        <input id='addTask' name='taskName' placeholder='New Task' />
        <button type='submit' class='btn btn-primary'>Submit</button>
</form>

38

public/js/tasks.js

// Your code goes here
$(document).ready(function() {
$('#taskForm').submit(function(e) {
    // Prevents default submit + reload (we only want the submit part)
    e.preventDefault();

    var taskName = $('#addTask').val();

    // Send the POST request
    $.post('addTask', { taskName: taskName }, postCallback);
  });
});

function postCallback(res) {
  $('.taskList').append('<li>' + res + '</li>'); // Add to the list

 $('#addTask').val(''); // Clear form
}

39

40

41

42

Code

<ul class='nav nav-pills nav-justified'>
<!-- href='#idName' scrolls to the div with the id idName -->
<li><a href='/#'>Home</a></li>
<li><a href='tasks'>Tasks</a></li>
<li><a href='/#facebookPhoto'>Facebook</a></li>
<li><a href='/#camera'>Camera</a></li>
<li><a href='/#googleMaps'>Google Maps</a></li>
</ul>

43

44

45

46

Heads up!

Make sure to use https

Make sure to go to https://<Your Heroku App Name>.herokuapp.com as these 3rd party APIs will not work without it!

GitHub - Commit

git status
git add ... 
git commit -m "added partials"

Github - Push

git push

47

Stretch Goals

Four stretch goals this time. Pick at least one!

  1. Incorporate your fb friends list into the website.
  2. Add a new marker to Maps on click
  3. When you take a photo with the camera, have it update your profile photo on the website.
  4. Add delete task functionality!

Find more third party APIs at our development resources!

When done, submit here.