Skip to content

Week 1.md

Latest commit

 

History

History
164 lines (157 loc) · 6.47 KB

Week 1.md

File metadata and controls

164 lines (157 loc) · 6.47 KB

Week 1: Get Started 🚧

Day 1: GitHub 🐱

GitHub is where developers meet.

  • Check out the GitHub website, create an account and find out how it works
  • Follow phaze9
  • Install the GitHub mobile app

Day 2: Fork SummerOfCode 🍴

The GitHub website is great for small changes.

  • Fork the SummerOfCode project
  • Edit the file README.md to improve the instructions for SummerOfCode
  • When you are finished, commit your changes
    • Briefly describe what you did in the Commit changes text field
  • Submit a pull request for your changes from the GitHub web interface

Day 3: Visual Studio Code 💾

Serious development requires serious tools.

  • Install Visual Studio Code
  • Install the GitHub Pull Requests and Issues extension
    • From the Extensions tab on the left side of Visual Studio
    • You should now have a new GitHub tab in the Visual Studio sidebar
  • Install Git
    • The Source Control tab in the sidebar should no longer complain that Git is not installed
  • Setup the SummerOfCode project from your GitHub fork
    • Create a new folder "Projects" under your user directory in Explorer or Finder
    • Clone your repository from GitHub into Projects under the Source Control tab

Day 4: Terminal 💻

The terminal/shell is old but gold.

  • Open a Terminal and go to the SummerOfCode project:
    • On Mac/Linux:
      • Open a Terminal window, then copy or type the commands listed below (text with gray background).
      • Change to the project directory
      cd ~/Projects/SummerOfCode
    • On Windows:
      • Open an Explorer window, navigate to your Projects directory, right-click on "SummerOfCode" and choose "Git Bash here"
  • Add the phaze9 version to your SummerOfCode repository 
    git remote add upstream https://github.com/phaze9/SummerOfCode.git
  • Pull the latest changes from phaze9/SummerOfCode 
    git pull upstream master
  • Apply the changes to your version on GitHub 
    git push
  • Edit the file README.md in Visual Studio Code
  • Create a pull request for README.md from the GitHub tab in Visual Studio

Day 5: Sharpen your Tools 🔑

A tiny bit more setup work and you're good to go.

  • Tell git who you are
    • Enter the following commands in a Terminal window (On Windows: use the "Git Bash" window)
    • Replace First Last by your first and last names 
      git config --global user.name "First Last"
    • Replace my@email.com by the email address you used to sign up for GitHub 
      git config --global user.email my@email.com
    • Verify the configuration 
      git config -l
  • Download and install the LTS (long term support) version of Node.js
  • Finally we will install the Angular CLI (command line interface) from a Terminal window 
    sudo npm install -g @angular/cli
    • On Windows: We always use the PowerShell instead of the Terminal. Open the PowerShell and type 
      npm install -g @angular/cli
  • Verify the installation by listing the available Angular commands 
     ng
    • On Windows: You always have to prefix the "ng" command with "npx". So you have to type: 
      npx ng
      in the PowerShell

Day 6: Angular Heroes 🙆‍♀️

Angular is a great way to conquer the web.

  • Change to your Projects folder in a terminal window 
    cd ~/Projects
  • Create the Heroes application 
    ng new heroes
    • Would you like to add Angular routing? (y/N)
      • Enter / Return to confirm (We will add routing later)
    • Which stylesheet format would you like to use?
      • Use arrow keys to select SCSS, confirm with Enter
  • Change to the application folder 
    cd heroes
  • Run the application 
    ng serve --open
  • Now open the heroes folder in Visual Studio Code
    • Select File -> Open from the menu, then choose the heroes folder
  • Make changes to the application

Day 7: Back to GitHub ◀️

Publish your work on GitHub and run the tests.

  • Open the Source Control tab in Visual Studio
    • Enter a commit message: Changed application title and styles
    • Click the ➕ button next to the three files you changed yesterday
    • Commit the changes using the ✔️ button
  • Click on the three dots icon on the top right of the Source Control tab
    • Select Publish Branch...
    • Hit Return to publish to a new heroes repository on your GitHub
    • In the list of files to include deselect the folowing
      • .DS_Store (if it exists)
      • .git
      • node_modules
    • Press OK
  • Now open your GitHub in the browser
    • Click on Repositories and look at the contents of your new private heroes repo
    • Read the instructions for your heroes app on GitHub
  • Make sure you have the Chrome browser installed: Chrome
  • Run the following commands in a Terminal and watch what they do
    • Always change to your application folder first 
      cd ~/Projects/heroes
    • Build your application 
      ng build
    • Run the unit tests 
      ng test
      • Press Ctrl-C in the Terminal to stop
    • Run the end-to-end tests 
      ng e2e
    • Start the application like we did yesterday 
      ng serve --open