Git for designers

Specifically your Nexus 4 but I’m guessing the first few steps will work for other phones too.

Has a developer given you a patch link and when you click on it you’re taken to github and think “now what??” Read on my friend!

Overview: Add “git remote add <keyword> <url>” Sync “git fetch <keyword>” Download code “git checkout <keyword>/<branch>” Flash (nexus 4 camera) "make install-gaia APP=camera”

Here is an example - https://github.com/mozilla-b2g/gaia/pull/17233

The first step is to open terminal (aka command line) and make your way to wherever you’ve been downloading the code. Do this with cd (change directory) and the name of the folder you want to navigate to. ls (not sure what that stands for) will show you the contents of the folder if you can’t remember names.

Find the github username Looking at the github page, you want to find the username of the person. This could be listed under participants, in the comments section, or listed in the text at the top, or on the commits page.

In this case, our user is hyunacho.

You can go to their github user page and check out more information about that person: https://github.com/hyunacho Here, you’ll also see repositories they are contributing too.

Add the user If this person is totally new to you, you have to first add them in order to be able to see their branches and get the code.

What if you don’t remember if you’ve added them? Do “git remote” and you will see a list of what has been added in the past. If they are there, awesome move along. If not, you are going to have to add them.

Go to the person’s user page: tps://github.com/hyunacho and click on the repository you want to add. Most likely, this is going to be a repository they have rather than something they have contributed to. In our case we want to add gaia: https://github.com/hyunacho/gaia

On this page you showed see a URL that may have the word clone around it. This basically means you want to get a copy of the code. For our example, our URL is: https://github.com/hyunacho/gaia.git

The full command is “git remote add <keyword> <url>"

The first bit “git remote add” is going to add this to our list.

The <keyword> bit is the keyword we want to use to refer to this URL so we don’t have to remember the URL or type it out every time. Go with something easy like the person’s username.

The URL is going to be that clone URL that we found on the github page.

So for our example, the full command is going to be “git remote add hyunacho https://github.com/hyunacho/gaia.git”

Now they are added!

Getting the code - syncing Next we want to grab everything that is in this repository. We aren’t downloading actual code yet, think of it more like grabbing the Table of Contents for a book. We can then use this to actually grab the specific chapter we want without having to get the whole book.

“git fetch” is what we use to both get this the first time and each time to make sure everything is current and up-to-date.

Recalling what our keyword was we can insert that into the command to make sure everything is current.

“git fetch hyunacho” - much easier than typing the whole URL!

We’ve got our Table of Contents (or what it really is, a database of branches)

Getting the code - finding our branch Now we need to figure out which branch (chapter) we want to download.

The developer may have told you, or you can figure this out on your own via one of two ways.

“git remote show <keyword>” is going to show you that Table of Contents you just obtained. Scanning that may show you what you need to know.

You can also go back to that very first patch page you found and take a look there: https://github.com/mozilla-b2g/gaia/pull/17233. In this case we can see near the top our user’s name and then “bug971090-preview-gallery”. This is the branch we want! And if we were to do “git remote show hyunacho” we would also see this listed in what was returned.

Whew - almost there!

Getting the code - downloading! Finally getting the actual code.

With our branch name (chapter) in hand, we can now use “git checkout” to download the code.

“git checkout hyunacho/bug971090-preview-gallery”. So we’re saying get this code, from the URL that is reference by our keyword hyunacho, specifically this branch (chapter).

If you see some crazy, weird warning talking about “HEAD” and “commits” just ignore it. This is basically telling you that if you try to make code changes, you are going to have some issues when checking it back in. We aren’t changing any code, so we don’t really care.

Push it! This is probably more specific to the Nexus 4 stuff I’m doing, but here it is anyway.

Now that the code is synced and on your computer, you are ready to flash your phone. Make sure the phone is: plugged into your computer on unlocked (you can open apps and use the phone)

Go back to our lovely friend Terminal and type in there "make install-gaia APP=camera”. This is pretty specific to the camera, I’m guessing you could replace “camera” with any app name and it would have the same effect of updating that app.

And hopefully it worked and you are done!! Watch out for copy/paste errors and typos if you run into any issues.