When done, submit here.

1

2

Student examples

  • Check out these awesome examples from your peers!

3

4

Get a Heroku Account

5

Common Commands

ls
cd <dir>
git clone <url>
git pull
git status
git add <file>
git commit -m "message"
git push

Git Combos

Get Updates

 

git pull

Commit Changes (locally)

 

git status
git add <file(s)>
git status
git commit -m "message"
Run git status to remind yourself which changes you're actually committing.

Save Changes to Github

 

git pull
git status
git push
Run git pull to make sure you're up to date. Run git status to double-check that you've committed all of the changes you want to save.

Hadouken!

↓↘→ X

6

7

8

9

Video

Terminal

$ cd ~/Documents/IntroHCI
$ ls
LICENSE             Vagrantfile         introHCI-extras.sh
README.md           cookbooks           lab1

Troubleshoot

I typed in $ cd and ...

Don't type the $. We are using the $ surrogate prompt to indicate lines which are commands to input. Then, we display lines of expected/example output without any $ prompt.

10

Video

Links

11

Video

12

13

Links

  • If you haven't done this, you should do Lab 1 before continuing.

14

Video

Terminal

$ vagrant up

Troubleshoot

I'm stuck at 

Waiting for machine to boot.

If you've been waiting over a minute, something likely went wrong. Let's abort the vagrant up command and then try running it again. To abort in Unix, we push CTRL+C in our terminal.

I got the message 

VM already provisioned.  Run `vagrant provision` or use `--provision` to force it

Don't run vagrant provision! If you do this, the virtual machine will get setup from scratch. (remember how long that took?)

15

Video

Terminal

$ vagrant ssh
vagrant@127.0.0.1's password:
...
vagrant@precise32:~$

Troubleshoot

I see vagrant@trusty64:~$ instead of vagrant@precise32:~$

Not an issue! That just means you're using the newer and better Ubuntu 14.04.

What's the password?

vagrant

16

Video

Terminal

$ ls
introHCI
$ cd introHCI
$ ls
cookbooks  intorHCI-extras.sh  lab1  lab2  LICENSE  README.md  Vagrantfile
$ cd lab2
$ ls
LICENSE  node_modules  package.json  Procfile  README.md  server.js  static

17

18

Video

Terminal

$ heroku login
Enter your Heroku credentials
Email:
Password:
Could not find an existing public key.
Would you like to generate one? [Yn]  Y
Generating new SSH public key.
Uploading SSH public key /home/vagrant/.ssh/id_rsa.pub... done
Authentication successful.

$ heroku create
Creating ...
...
Git remote heroku added

Troubleshoot

I didn't see Git remote heroku added after running heroku create

Did you run the create command inside of the lab2 directory?

heroku login gives me a heroku: command not found

From within the VM, try running 

sudo ~/introHCI/heroku.sh

19

Video

Terminal

$ heroku apps:rename msb-lab2
Renaming ...
...
Git remote heroku updated

Troubleshoot

I got the error No app specified.

Did you run heroku create inside the lab2 directory?

20

Video

Terminal

$ git push heroku master
The authenticity of host 'heroku.com (xxx.xxx.xxx.xxx)' can't be established.
RSA key fingerprint is xx:xx:xx:xx...xx:xx.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'heroku.com (xxx.xxx.xxx.xxx)' (RSA) to the list of known hosts.
...

Troubleshoot

Wait, what did I agree to?

shhhhhhh, the NSA is listening! a detailed explanation

21

Links

  • Go to <yourappname>.herokuapp.com to verify that everything is working.

22

23

24

25

26

27

28

29

Video

Code

...
<link href="css/introHCI.css" rel="stylesheet">
...

30

31

Video

Code

...
<div class="project" id="project1">
...
<div class="project" id="project2">
...

32

Video

Code

...

.project {
    margin-left: 20px;
}

33

Hint

  • CTRL+R (or CMD+R on Mac) is the browser reload shortcut. It is very useful when doing web dev.

34

35

36

Video

37

38

39

40

41

42

Code

p {
    font-variant: small-caps;
}

43

Code

.project p {
    font-variant: small-caps;
}

44

Code

#project1 {
    font-variant: small-caps;
}

45

Code

margin-left: 1px;
background-color: #ab1234;
padding: 1px;
width: 1px;

Links

46

47

Code

.project {
    margin-left: 20px;
    background-color: #deebf7;
    padding: 20px;
    width: 525px;
}

48

Video

49

50

51

52

Code

...
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/introHCI.css" rel="stylesheet">
...
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (blelow), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
...

53

Video

Code

...
<a href="project.html" class="thumbnail">
    <img src="..." alt="..." class="img">
    <p>...</p>
</a>
...

54

Video

Code

<body>
    <div class="container">
        ...

55

56

Code

<div class="jumbotron">
    <h1>Michael Bernstein</h1>
    <p>human-computer interaction &middot; social computing &middot; crowdsourcing</p>
</div>

57

58

Terminal

$ git add static/index.html
$ git add static/css/introHCI.css
$ git commit -m"added CSS and Bootstrap"

$ git push origin master

$ git push heroku master

59

Video

Terminal

$ exit
logout
Connection to 127.0.0.1 closed.

$ vagrant suspend
[default] Saving VM state and suspending execution...

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
[default] Resuming suspended VM...
[default] Booting VM...
[default] Waiting for machine to boot.  This may take a few minutes...

60

61

When done, submit here.