667
edits
Changes
Created page with "=Programming with git and GitHub= ==Due Date== Friday Sept 13 before midnight. ==Introduction== This lab will get you started using git, GitHub, and also introduce you to..."
=Programming with git and GitHub=
==Due Date==
Friday Sept 13 before midnight.
==Introduction==
This lab will get you started using git, GitHub, and also introduce you to an open source project called Filer, which we'll be working with in Release 0.1.
Our goal is to create a single-page, serverless web app for note taking, and host it on GitHub.
==Walkthrough==
The following steps will help you get things setup and working. If you need help with any of these, make sure you ask. If there are things you want to know more about, do some research and follow the links provided.
===Step 1: Create a new GitHub Repo===
# Create a new GitHub repo ([https://help.github.com/en/articles/create-a-repo instructions here]). Name it something like '''my-note''', '''micro-note''', '''whiteboard''' or something else that makes sense to you, and add a '''Description''': '''"A web based note app"'''. Set your repo to be '''Public''', and initialize it with a '''README.md''' and '''License'''. For your License, choose '''BSD 2-Clause "Simplified License"''' (see [https://opensource.org/licenses/BSD-2-Clause BSD 2-Clause]).
# Your new repo will have a URL that combines your GitHub username and chosen repo name: https://github.com/username/repo-name. Understanding this URL scheme is important when you're trying to make sense of which version of a repo (i.e., which fork) you're reading.
===Step 2: Clone your GitHub Repo on your Local Machine===
# Install '''git''' if you don't already have it on your computer. You can [https://git-scm.com/downloads download it here]. NOTE: if you're on Windows, I suggest that you override the following settings while running the installer:
## Change the '''default editor''' Git uses from Vim to your preferred editor (e.g., Visual Studio Code)
## Make sure you use '''Git from the command line and also from 3rd-party software''' when adjusting your PATH.
## When configuring '''line ending conversions''', choose '''Checkout as-is, commit as-is'''. This will make sure that Unix style line endings don't get converted to Windows line endings, and vice-versa.
# You now need to copy your repo onto your local computer. To do this, use the <code>git clone</code> command. The <code>clone</code> command requires a '''git URL''' to a repo. NOTE: this is '''NOT''' the same thing as your GitHub URL for your repo; a git URL ends in <code>.git</code>. You can follow [https://help.github.com/en/articles/fork-a-repo#step-2-create-a-local-clone-of-your-fork these instructions] to find your repo's git URL. When you have it, use <code>git clone https://github.com/username/repo-name.git</code> to clone it locally on your computer.
# You should now have a new directory with the same name as your GitHub repo. Type <code>cd repo-name</code> and look at the files. There should be '''LICENSE''' and '''README.md''' files. Open them in your code editor, and compare them to what you see on GitHub.
===Step 3: Write some Code in your Local Repo===
# Create a new file named '''index.html''' inside your local repo's directory. You can use any code editor you like--I'd suggest using [https://code.visualstudio.com/ Visual Studio Code].
# In your '''index.html''' Create a [https://web222.ca/weeks/week05/#basic-html5-document basic HTML5 document].
# Try opening your '''index.html''' page in a browser, and make sure it works as you expect.
# Once you're convinced that everything's working, commit your work to git. To do so, use the following commands:
## <code>git add index.html</code>
## <code>git commit -m "Adding a basic web page"</code>
===Step 4: Mirror your work on GitHub===
# Our code is '''committed''' (i.e., saved) in our local git repo, but at some point we should also '''push''' the commit(s) to our GitHub repo too. Each repo is a copy (i.e., clone) of the other, but they don't stay in sync automatically. We have to tell them when and what we want to sync by using git's '''push''' and '''pull''' commands.
# Use the following command to '''push''' your recent change (i.e., commit) to GitHub: <code>git push origin master</code>. Here we tell git to '''push''' commit(s) to the '''origin''' repo (i.e., the one from which we cloned ''originally''), and to use the '''master''' branch. We'll discuss branches more in coming weeks. For now, it's enough to know that '''master''' is the default branch of development.
# Any time you want to sync what's on your local computer with GitHub, you can follow these steps to '''push''' any missing commits.
===Step 5: Adding Features===
# Our note taking web app needs a way to save and load our work. To prepare you for your 0.1 Release, we'll use the [https://github.com/filerjs/filer FilerJS Browser Filesystem library].
# Add a <code>script</code> tag to the bottom of your HTML <code>body</code> that uses the following '''src''': https://unpkg.com/filer/dist/filer.min.js
# Below this, add a second <code>script</code> that initializes a filesystem: <code>const fs = new Filer.FileSystem();</code>
# The <code>fs</code> instance can be used to call any of the filesystem operations like [https://github.com/filerjs/filer#readFile readFile()] or [https://github.com/filerjs/filer#writeFile writeFile()].
# Write some code to accomplish the following set of steps:
## When the page's DOM is finished loading (use the [https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event DOMContentLoaded event]), try to <code>fs.readFile('/note', 'utf8', function(err, data) {...})</code>. If there is an error (i.e., if <code>err</code> is non-null), use a default string like '''"Welcome to my notepad!"'''. If the file does exist (i.e. <code>data</code> is non-null), use that for your string instead.
## Use the string from the previous step to display in a <code><div></code> that you add to the page. You can give it an '''id="notepad"'''. Also make this <code><div></code> editable using the [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content contenteditable] attribute (i.e., the user should be able to edit the text in the page).
## Use a [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval setInterval()] call to register an interval callback that saves whatever is in the notepad div every 2-5 seconds (try different amounts of time to see what works best) to the '''/note''' file.
## When the user refreshes the page, or loads it after closing it, the contents of the '''/note''' file should reappear.
===Step 6: Adding Features===
==Submission==
You will have completed your lab when your blog post from Step 5 appears on the [http://zenit.senecac.on.ca/~chris.tyler/planet/ CDOT Planet site]. I will mark them as they appear there. NOTE: the planet site updates only once per hour, so your post might not show up right away.
Please add a line for your blog in the following table:
{| class="wikitable"
! Name
! Fork (URL)
! Blog Post (URL)
|-
| Example Name
| https://github.com/example/cool-repo
| https://examplestudent.wordpress.com/2019/09/05/introducing-cool-repo/
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
==Due Date==
Friday Sept 13 before midnight.
==Introduction==
This lab will get you started using git, GitHub, and also introduce you to an open source project called Filer, which we'll be working with in Release 0.1.
Our goal is to create a single-page, serverless web app for note taking, and host it on GitHub.
==Walkthrough==
The following steps will help you get things setup and working. If you need help with any of these, make sure you ask. If there are things you want to know more about, do some research and follow the links provided.
===Step 1: Create a new GitHub Repo===
# Create a new GitHub repo ([https://help.github.com/en/articles/create-a-repo instructions here]). Name it something like '''my-note''', '''micro-note''', '''whiteboard''' or something else that makes sense to you, and add a '''Description''': '''"A web based note app"'''. Set your repo to be '''Public''', and initialize it with a '''README.md''' and '''License'''. For your License, choose '''BSD 2-Clause "Simplified License"''' (see [https://opensource.org/licenses/BSD-2-Clause BSD 2-Clause]).
# Your new repo will have a URL that combines your GitHub username and chosen repo name: https://github.com/username/repo-name. Understanding this URL scheme is important when you're trying to make sense of which version of a repo (i.e., which fork) you're reading.
===Step 2: Clone your GitHub Repo on your Local Machine===
# Install '''git''' if you don't already have it on your computer. You can [https://git-scm.com/downloads download it here]. NOTE: if you're on Windows, I suggest that you override the following settings while running the installer:
## Change the '''default editor''' Git uses from Vim to your preferred editor (e.g., Visual Studio Code)
## Make sure you use '''Git from the command line and also from 3rd-party software''' when adjusting your PATH.
## When configuring '''line ending conversions''', choose '''Checkout as-is, commit as-is'''. This will make sure that Unix style line endings don't get converted to Windows line endings, and vice-versa.
# You now need to copy your repo onto your local computer. To do this, use the <code>git clone</code> command. The <code>clone</code> command requires a '''git URL''' to a repo. NOTE: this is '''NOT''' the same thing as your GitHub URL for your repo; a git URL ends in <code>.git</code>. You can follow [https://help.github.com/en/articles/fork-a-repo#step-2-create-a-local-clone-of-your-fork these instructions] to find your repo's git URL. When you have it, use <code>git clone https://github.com/username/repo-name.git</code> to clone it locally on your computer.
# You should now have a new directory with the same name as your GitHub repo. Type <code>cd repo-name</code> and look at the files. There should be '''LICENSE''' and '''README.md''' files. Open them in your code editor, and compare them to what you see on GitHub.
===Step 3: Write some Code in your Local Repo===
# Create a new file named '''index.html''' inside your local repo's directory. You can use any code editor you like--I'd suggest using [https://code.visualstudio.com/ Visual Studio Code].
# In your '''index.html''' Create a [https://web222.ca/weeks/week05/#basic-html5-document basic HTML5 document].
# Try opening your '''index.html''' page in a browser, and make sure it works as you expect.
# Once you're convinced that everything's working, commit your work to git. To do so, use the following commands:
## <code>git add index.html</code>
## <code>git commit -m "Adding a basic web page"</code>
===Step 4: Mirror your work on GitHub===
# Our code is '''committed''' (i.e., saved) in our local git repo, but at some point we should also '''push''' the commit(s) to our GitHub repo too. Each repo is a copy (i.e., clone) of the other, but they don't stay in sync automatically. We have to tell them when and what we want to sync by using git's '''push''' and '''pull''' commands.
# Use the following command to '''push''' your recent change (i.e., commit) to GitHub: <code>git push origin master</code>. Here we tell git to '''push''' commit(s) to the '''origin''' repo (i.e., the one from which we cloned ''originally''), and to use the '''master''' branch. We'll discuss branches more in coming weeks. For now, it's enough to know that '''master''' is the default branch of development.
# Any time you want to sync what's on your local computer with GitHub, you can follow these steps to '''push''' any missing commits.
===Step 5: Adding Features===
# Our note taking web app needs a way to save and load our work. To prepare you for your 0.1 Release, we'll use the [https://github.com/filerjs/filer FilerJS Browser Filesystem library].
# Add a <code>script</code> tag to the bottom of your HTML <code>body</code> that uses the following '''src''': https://unpkg.com/filer/dist/filer.min.js
# Below this, add a second <code>script</code> that initializes a filesystem: <code>const fs = new Filer.FileSystem();</code>
# The <code>fs</code> instance can be used to call any of the filesystem operations like [https://github.com/filerjs/filer#readFile readFile()] or [https://github.com/filerjs/filer#writeFile writeFile()].
# Write some code to accomplish the following set of steps:
## When the page's DOM is finished loading (use the [https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event DOMContentLoaded event]), try to <code>fs.readFile('/note', 'utf8', function(err, data) {...})</code>. If there is an error (i.e., if <code>err</code> is non-null), use a default string like '''"Welcome to my notepad!"'''. If the file does exist (i.e. <code>data</code> is non-null), use that for your string instead.
## Use the string from the previous step to display in a <code><div></code> that you add to the page. You can give it an '''id="notepad"'''. Also make this <code><div></code> editable using the [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content contenteditable] attribute (i.e., the user should be able to edit the text in the page).
## Use a [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval setInterval()] call to register an interval callback that saves whatever is in the notepad div every 2-5 seconds (try different amounts of time to see what works best) to the '''/note''' file.
## When the user refreshes the page, or loads it after closing it, the contents of the '''/note''' file should reappear.
===Step 6: Adding Features===
==Submission==
You will have completed your lab when your blog post from Step 5 appears on the [http://zenit.senecac.on.ca/~chris.tyler/planet/ CDOT Planet site]. I will mark them as they appear there. NOTE: the planet site updates only once per hour, so your post might not show up right away.
Please add a line for your blog in the following table:
{| class="wikitable"
! Name
! Fork (URL)
! Blog Post (URL)
|-
| Example Name
| https://github.com/example/cool-repo
| https://examplestudent.wordpress.com/2019/09/05/introducing-cool-repo/
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
|
|
|
|-
