1 of 153

Workshop 307

​

Providing Students with Standardized, Cloud-Based Programming Environments at Term's Start (for Free)

cs50.ly/workshop307

​

If you don't already have a (free) GitHub account, create now at github.com/join!

2 of 153

cs50.ly/workshop307

3 of 153

If you haven't already

  1. Required. Wi-Fi is SIGCSE, password is sigcse2024
    1. Or use own hotspot if faster
  2. Required. Create a github.com account at github.com/join
  3. Required Enable 2FA
  4. Required Submit cs50.ly/username if you haven't already
  5. Required. Visit github.com/orgs/sigcse24-workshop307/invitation and click green button to join workshop's organization if you haven't already
  6. Optional Visit gh.io/AApcf86
    • Select Teacher for your academic status
    • Submit form for teacher verification; let us know if you have trouble verifying
      1. Use your school email
      2. Use your school ID card

4 of 153

MALAN

5 of 153

Workshop 307

​

Providing Students with Standardized, Cloud-Based Programming Environments at Term's Start (for Free)

cs50.ly/workshop307

​

If you don't already have a (free) GitHub account, create now at github.com/join!

6 of 153

Agenda

  1. Welcome, introductions 15m
  2. Overview of potential solutions for standardized programming environments 15m
  3. Hands-on introduction to Codespaces 30m
  4. Break 15m
  5. Customizing Codespaces by writing one's own Dockerfile 30m
  6. Customizing Codespaces further by defining one's own .devcontainer.json 30m
  7. Readying Codespaces for one's own class 30m

7 of 153

Team

8 of 153

Acknowledgements

  • Amazon
  • GitHub
  • Microsoft
  • OpenAI

9 of 153

Agenda

  • Welcome, introductions 15m
  • Overview of potential solutions for standardized programming environments 15m
  • Hands-on introduction to Codespaces 30m
  • Break 15m
  • Customizing Codespaces by writing one's own Dockerfile 30m
  • Customizing Codespaces further by defining one's own .devcontainer.json 30m
  • Readying Codespaces for one's own class 30m

10 of 153

11 of 153

12 of 153

13 of 153

14 of 153

15 of 153

16 of 153

17 of 153

Client-Side

18 of 153

Client-Side

  • Containerization
    • Docker 👍
    • …
  • Virtualization

19 of 153

Server-Side

  • Paid Only

20 of 153

Server-Side

21 of 153

Agenda

  • Welcome, introductions 15m
  • Overview of potential solutions for standardized programming environments 15m
  • Hands-on introduction to Codespaces 30m
  • Break 15m
  • Customizing Codespaces by writing one's own Dockerfile 30m
  • Customizing Codespaces further by defining one's own .devcontainer.json 30m
  • Readying Codespaces for one's own class 30m

22 of 153

GitHub Codespaces

github.com/features/codespaces

23 of 153

Visual Studio Code for CS50

cs50.dev

24 of 153

Features

  • Bash, using bash
  • C, using clang or gcc
  • C++, using clang or g++
  • Docker, using docker
  • Flask, using flask
  • HTML, CSS, and JavaScript, using http-server
  • Java, using javac and java
  • Node.js, using node
  • Python, using python
  • R, using R and rstudio
  • Ruby, using ruby
  • SQLite, using sqlite3
  • …

25 of 153

Dockerfile

github.com/cs50/cli/blob/main/Dockerfile

github.com/cs50/codespace/blob/main/Dockerfile

26 of 153

FROM ubuntu:latest

RUN apt update

RUN apt install --yes git openjdk-21-jdk python3 python3-pip

RUN pip3 install Pillow

27 of 153

.devcontainer.json

github.com/cs50/codespace/blob/main/devcontainer.json

28 of 153

VS Code Desktop

cs50.readthedocs.io/code/#vs-code-desktop

29 of 153

30 of 153

31 of 153

cli50

cs50.readthedocs.io/cli50

32 of 153

33 of 153

Before Break Ends

  • Visit gh.io/AApcf86 if you haven't already
    • Select Teacher for your academic status
    • Submit form for teacher verification; let us know if you have trouble verifying
      • Use your school email
      • Use your school ID card
  • Create a Free organization at github.com/organizations/plan; �name it whatever you'd like
  • Upgrade that organization to a GitHub Team at education.github.com/globalcampus/teacher
  • Visit https://github.com/organizations/ORG/settings/billing/summary, �where ORG is your organization, to ensure your Current plan is GitHub Team

34 of 153

RONGXIN

35 of 153

Agenda

  • Welcome, introductions 15m
  • Overview of potential solutions for standardized programming environments 15m
  • Hands-on introduction to Codespaces 30m
  • Break 15m
  • Customizing Codespaces by writing one's own Dockerfile 30m
  • Customizing Codespaces further by defining one's own .devcontainer.json 30m
  • Readying Codespaces for one's own class 30m

36 of 153

After Break

  • Visit gh.io/AApcf86 if you haven't already
    • Select Teacher for your academic status
    • Submit form for teacher verification; let us know if you have trouble verifying
      • Use your school email
      • Use your school ID card
  • Create a Free organization at github.com/organizations/plan; �name it whatever you'd like
  • * If you’ve been verified by GitHub as a teacher already, upgrade that organization to a GitHub Team at education.github.com/globalcampus/teacher
  • * Visit https://github.com/organizations/ORG/settings/billing/summary, �where ORG is your organization, to ensure your Current plan is GitHub Team

* If not yet verified, not a problem for tonight.

37 of 153

Agenda

  • Welcome, introductions 15m
  • Overview of potential solutions for standardized programming environments 15m
  • Hands-on introduction to Codespaces 30m
  • Break 15m
  • Customizing Codespaces by writing one's own Dockerfile 30m
  • Customizing Codespaces further by defining one's own .devcontainer.json 30m
  • Readying Codespaces for one's own class 30m

38 of 153

github.com/sigcse24-workshop307

39 of 153

Create a Private Repository

40 of 153

41 of 153

42 of 153

43 of 153

Create Dockerfile

44 of 153

FROM ubuntu:latest

RUN apt update

RUN apt install --yes git openjdk-21-jdk python3 python3-pip

RUN pip3 install Pillow

45 of 153

46 of 153

47 of 153

48 of 153

49 of 153

Create .devcontainer.json

50 of 153

{

"build": { "dockerfile": "Dockerfile" }

}

51 of 153

52 of 153

53 of 153

54 of 153

Launch a Codespace

55 of 153

56 of 153

57 of 153

58 of 153

Write a Python/Java program

59 of 153

60 of 153

61 of 153

62 of 153

63 of 153

64 of 153

65 of 153

Install Python Extension

66 of 153

67 of 153

68 of 153

69 of 153

70 of 153

Install Java Extension

71 of 153

72 of 153

73 of 153

Commit Changes

74 of 153

75 of 153

76 of 153

77 of 153

78 of 153

79 of 153

github.com/orgs/sigcse24-workshop307/repositories

80 of 153

Agenda

  • Welcome, introductions 15m
  • Overview of potential solutions for standardized programming environments 15m
  • Hands-on introduction to Codespaces 30m
  • Break 15m
  • Customizing Codespaces by writing one's own Dockerfile 30m
  • Customizing Codespaces further by defining one's own .devcontainer.json 30m
  • Readying Codespaces for one's own class 30m

81 of 153

Update .devcontainer.json

82 of 153

{

"image": "docker.io/python:latest",

"customizations": {

"vscode": {

"extensions": ["ms-python.python"],

"settings": { "workbench.colorTheme": "Solarized Light" }

}

},

"features": { "ghcr.io/devcontainers/features/github-cli:1": {} }

}

83 of 153

84 of 153

85 of 153

86 of 153

87 of 153

88 of 153

89 of 153

90 of 153

91 of 153

Launch New Codespace

92 of 153

93 of 153

94 of 153

95 of 153

96 of 153

97 of 153

Rebuild Codespace

98 of 153

{

"image": "docker.io/openjdk:latest",

"customizations": {

"vscode": {

"extensions": ["vscjava.vscode-java-pack"],

"settings": { "workbench.colorTheme": "Solarized Dark" }

}

}

}

Update .devcontainer.json file on your Codespace:

99 of 153

100 of 153

101 of 153

102 of 153

103 of 153

104 of 153

CARTER

105 of 153

Agenda

  • Welcome, introductions 15m
  • Overview of potential solutions for standardized programming environments 15m
  • Hands-on introduction to Codespaces 30m
  • Break 15m
  • Customizing Codespaces by writing one's own Dockerfile 30m
  • Customizing Codespaces further by defining one's own .devcontainer.json 30m
  • Readying Codespaces for one's own class 30m

106 of 153

GitHub Classroom

classroom.github.com

107 of 153

cs50.ly/classroom

108 of 153

cs50.ly/classroom

109 of 153

Instructions

As an instructor:

  1. Add distribution code to a repository with your .devcontainer.json and/or Dockerfile configured as you wish.
  2. Make your repository a template repository in the repository's settings.
  3. Sign into GitHub Classroom. Follow the (one-time) steps to create a classroom.
  4. Create an assignment. Use your repository from steps 1–2 as the template.

As a student:

  1. Accept the assignment.
  2. Work on the assignment with Codespaces.

110 of 153

Add Distribution Code

111 of 153

112 of 153

113 of 153

114 of 153

Turn Repository into a Public Template

115 of 153

116 of 153

117 of 153

118 of 153

"This public beta allows us to enable one of our most-requested features from teachers: the ability to change starter code after an assignment has been accepted by students."

119 of 153

Sign into GitHub Classroom

120 of 153

Sign in at classroom.github.com

121 of 153

122 of 153

123 of 153

Create a Classroom

124 of 153

125 of 153

126 of 153

127 of 153

128 of 153

129 of 153

130 of 153

131 of 153

Create an Assignment

132 of 153

133 of 153

134 of 153

135 of 153

136 of 153

137 of 153

(as a student)

Accept the Assignment

138 of 153

139 of 153

140 of 153

141 of 153

(as a student)

Work on the Assignment with Codespaces

142 of 153

143 of 153

144 of 153

145 of 153

146 of 153

147 of 153

148 of 153

149 of 153

150 of 153

151 of 153

Homework

  1. Decide which of your assignments to port to Codespaces. Consider what its software requirements are.
  2. Create a new repo in your new organization. (Or reuse your existing repo.)
  3. Add a .devcontainer.json file to that repo with build (or image), extensions, features, and/or settings keys. Optionally add a Dockerfile.
  4. Add any starter code to that repo.
  5. Convert that repo to a template.
  6. Create an assignment in GitHub Classroom out of that repo.
  7. Accept the assignment, as though you're a student.
  8. Create a codespace for the accepted assignment's own repo.

152 of 153

surveymonkey.com/r/sigcse24-workshop-fri

153 of 153

Q&A