Install Google Chrome

---

Install Node

---

Download and install node LTS from https://nodejs.org

Install Visual Studio Code

---

Create a GitHub account with your USC username!

---

Install Git

---

• Mac (in terminal install xcode dev): xcode-select --install
• Windows: download and install from https://git-scm.com

Install GitHub Desktop

---

Download and install from https://desktop.github.com

1. Accept the assignment from the course home-page or Blackboard under Content > Week 1
2. Get assignment GitHub link:
   
3. Clone repository:
   1. GitHub Desktop (preferred): File → Clone Repository
   2. VS Code: Git Clone command
   3. Command line (create a personal access token first):

      
      										$ mkdir hw
      										$ cd hw 
      										$ git clone https://github.com/DSCI554/a1-lnocera-1.git
      									

4. Open the folder in VS Code:

   
   								$ cd a1-lnocera-1
   								$ code -n .
   							

						ASSIGNMENT.md  #assignment rubric in markdown
						README.md  #repository README in markdown
						index.html
						lab/  #lab files
						  ex1.html   #lab exercise file
						  ex2.html
						  simple-exe/
						    faithful.csv
						    node_modules
						    package-lock.json
						    package.json
						    simple-exe
						  simple-html/
						    index.html
						    node_modules
						    package-lock.json
						    package.json
						  simple-vue/
						    README.md
						    babel.config.js
						    node_modules
						    package-lock.json
						    package.json
						    public
						    src
						    vue.config.js							
						  style.css									
						node_modules  #node modules created when running npm install
						package-lock.json
						package.json  #package.json file
					

Node.js (JavaScript runtime environment)

						$ node
						> console.log('hello JavaScript')
						> a = [1, 'b', 'c', 2]
						> a.concat(a)
					

This is how to generate files for a CLI executable using npm (JavaScript package manager):

$ npm init
$ npm install commander csv-parse #fetch libs in node_modules and adds references in package.json
$ cat > mycli  #create mycli executable
#!/usr/bin/env node
console.log('hello mycli');
$ chmod +x mycli
$ ./mycli
$ code -n .  #open current folder in VS Code
					

					{
					 "type": "pwa-node",
					 "request": "launch",
					 "name": "exe args",
					 "skipFiles": [
					  "/**"
					 ],
					 "program": "${workspaceFolder}/bin/exe",
					 "args": ["arg1", "arg2"]
					}
					

1. Open index.html in Chrome
2. Open DevTools: View → Developer → Javascript Console

Action	Mac	Windows / Linux
Open whatever panel you used last	Command+Option+I	F12 or Control+Shift+I
Open the Console panel	Command+Option+J	Control+Shift+J
Open the Elements panel	Command+Shift+C or Command+Option+C	Control+Shift+C

Run the Vue.js (JavaScript framework) app in VS Code:

						$ cd simple-vue
						$ code -n .  #open simple-vue project
						$ npm install #only when updating package.json with new packages
						$ npm run serve #use vue cli (see in package.json)
					

To create a new Vue.js app:

						$ npm install -g @vue/cli  #install vue CLI globally
						$ vue --version
						$ vue create my-app  #choose default vue 2!
					

To debug in Chrome update the devtool property inside vue.config.js:

						$ cat > vue.config.js
						module.exports = {
						  configureWebpack: {
						    devtool: 'source-map'
						  }
						}
					

🏋🏽‍♂️ ex1: line chart in Google Sheets using CCSE COVID-19 dataset

• Follow the instructions in ex1.html

🏋🏽‍♂️ ex2: Implement a Google Charts pie chart

• Follow the instructions in ex2.html

A1 is modeled after Cairo’s example from this week reading so it might help if you read that first.

The goal is to create a toy dataset we can use for the rest of the class.

Find a UNData dataset to use from the Datamarts page: