04 Zadanie: od prijatia po odovzdanie04 An assignment: from accepting to submitting

This is what every assignment looks like from start to finish: you accept it in Classroom 50, do it in Kubeflow, submit it to GitHub and look at the result on sigma. The first time we go through it together in the lab; after that it is always the same.

Terms:

• Classroom 50: the tool the teacher hands out assignments with. It creates a private repository on GitHub for every student.
• clone: downloading the repository from GitHub into Kubeflow (once, at the start of an assignment).
• commit: a saved "snapshot" of changes with a description (you do it as you go, as often as you like).
• push: sending the commits to GitHub (= submitting).
• automatic tests: a check that, for some assignments, runs by itself after every push and shows whether your work is fine (part 6).

Parts 1 to 7 are one assignment in order. Part 8 says how to continue the next day, part 10 covers what to do when something fails.

1. Open ml.cloud.tuke.sk, on the left Notebooks, next to your notebook CONNECT. If the notebook is stopped (grey), start it first with the triangle icon and wait for the green tick.
2. Check that Explorer shows WEB at the top and the browser address ends exactly with ?folder=/home/jovyan/web. If another folder is open (JOVYAN, TI, …/web/ti), change the end of the address to ?folder=/home/jovyan/web and press Enter. With any other folder nothing is uploaded to sigma, because the SFTP settings live in web/.vscode/.
3. Check the extensions: the status bar at the bottom must show Go Live. If it does not, Kubeflow deleted the extensions on restart. Open the terminal (the ☰ menu at the top left, Terminal, New Terminal) and paste this command (one line, Enter):

code-server --install-extension Natizyskunk.sftp --install-extension yandeu.five-server --install-extension bmewburn.vscode-intelephense-client --install-extension mblode.twig-language-2

It takes about a minute. Then press F1, type reload and choose Developer: Reload Window (or F5). The connection settings to sigma stay; you do not have to set them again.

4. Open the terminal if it is not open yet: ☰, Terminal, New Terminal. A line jovyan@vscode-0:~$ appears at the bottom. This is where you type commands.

1. The teacher sends you a link to the assignment (in the lab, in a message). Open it; you are on classroom50.org.
2. If you are not signed in, click Sign in with GitHub (password and a code from the authenticator app). The first time, allow access with Authorize.
3. Click Accept assignment. Classroom 50 creates a repository named classroom-assignment-your-username (e.g. technologie-internetu-5k-cv01-jan-novak) and shows a link to it. The repository is private; only you and the teacher see it.
4. If you have already accepted the assignment, instead of Accept you see "You've already accepted this assignment" and an Open repository button. That is fine.

A clone downloads the repository into Kubeflow. It is done once, at the start of an assignment. You will switch between two browser tabs: Kubeflow (the terminal) and GitHub (the address).

1. Kubeflow, terminal: go to the course folder (the name as your teacher says, here ti):

cd ~/web/ti

2. Kubeflow, terminal: type git clone and a space. Do not press Enter yet; the command is not complete.
3. GitHub: switch to the tab with your repository (in Classroom 50 Open repository). Click the green Code, the HTTPS tab, and click the two-squares icon to the right of the address. The address is in your clipboard. It starts with https://github.com/tuke-fberg-stehlikova/ and ends with .git.

4. Kubeflow, terminal: go back to the terminal. Paste the address (Ctrl + V), type a space and cv01 (the lab number). Press Enter. The whole command looks like this:

git clone https://github.com/tuke-fberg-stehlikova/technologie-internetu-5k-cv01-jan-novak.git cv01

First sign-in to GitHub (only once)

On the first clone VS Code asks whether it may open a GitHub page:

1. In the box "Do you want code-server to open the external website? https://github.com/login/device" click Open.
2. On the GitHub page check that it is your account ("Signed in as …").
3. The code is already in your clipboard; VS Code copied it for you. Click into the first box, Ctrl + V, Continue.

4. On the Authorize Visual Studio Code page check your account and click Authorize Visual-Studio-Code (the button turns green after a few seconds). Do not worry about the yellow warning with an IP address in Košice; that is the school Kubeflow server.
5. When you see "Congratulations, you're all set!", close the tab and go back to VS Code.

The clone is done when the terminal prints Receiving objects: 100% … done and the $ prompt comes back.

Check: do you have the cv01 folder?

Still in ~/web/ti, type:

ls

The listing must contain cv01. ti/cv01 appears in Explorer with README.md (the assignment) and possibly files from the teacher.

If you see the long name, fix it now:

mv technologie-internetu-5k-cv01-jan-novak cv01

You do not have to type the long name: type mv tech and press Tab; the terminal completes it. Renaming breaks nothing; Git in the folder keeps working.

This is most of the time. You work in Kubeflow, in the cv01 folder, and need no Git command for it.

• The assignment is in README.md. Open it with a double click in Explorer. A nicely formatted preview: Ctrl + Shift + V.
• New files go into cv01: right click cv01, New File…, a name with an extension (index.html, style.css). Everything to be submitted must be in cv01 or its subfolders.
• An image or another file from your computer: open File Explorer (Windows) or Finder, grab the file with the mouse and drop it on the cv01 folder in Explorer. Kubeflow uploads it. Rename it with a right click, Rename….

• Files created in the terminal (e.g. history > historia.txt or copied with cp) also go into cv01: in the terminal first cd ~/web/ti/cv01, or write the full path in the command.
• Every save in the editor (Ctrl + S, or by itself after a second) goes to sigma; the purple status bar at the bottom briefly shows done index.html (the name of the uploaded file). So you can test the page as you go at https://sigma.tuke.sk/student/name.surname/ti/cv01/ (refresh with F5). A quick preview without sigma: right click in the file, Open with Five Server.

Working with VS Code (Explorer, terminal, the cd, ls, mkdir commands) is in guide 02, part 7.

Whenever a piece is done (and certainly at the end), in the terminal:

cd ~/web/ti/cv01
git status

It shows which files are new or changed (red). Then:

git add .
git commit -m "Add index page with header and menu"
git push

• git add . puts all changed files into the next commit.
• git commit -m "…" saves the snapshot. You write the text in quotes yourself: short, in your own words, what you did since the last commit, so that both you and the teacher recognize it a week later. Slovak or English, but without accents, for example Pridany kontaktny formular, Fix CSS on mobile, Hotova uloha 3. Not "update", "xxx", "done".
• git push sends it to GitHub. It prints a few lines, the last one e.g. 30765e9..92ece15 main -> main. That is submitted. If the assignment has automatic tests, they start right now.

You can commit and push as many times as you like. The teacher grades the state on GitHub at the deadline. I recommend a commit after every finished step; if you break something, you can go back.

The same by clicking

The Source Control icon on the left (the branch). The list shows changed files. Type the message in the box at the top, click Commit, then Sync Changes (= push). The result is the same.

Open the repository on GitHub (in Classroom 50 Open repository, or the tab you still have open from part 3) and refresh the page (F5). At the top you see your last commit, and next to the files what changed. Click the commit text to see exactly what you changed (green lines were added). Commits shows the whole history. The teacher sees this too.

Automatic tests

For some assignments automatic tests run after every push. You start nothing; GitHub does it by itself, and the result is there within 1 to 2 minutes. Look at the grey row just above the file list: it shows your name, the text of the last commit and, right after the text, a small mark:

• green ✓: all tests passed,
• red ✕: at least one test failed,
• yellow dot: the tests are still running; wait and refresh the page.

Which test failed:

1. In the repository click the Actions tab at the top (in the row Code, Issues, Pull requests…).
2. Click the topmost row in the list. It has the same name as your last commit.
3. The left column shows setup and grade one under the other. Click grade.
4. On the right click the Grade details row. The log opens.

Every test shows PASS or FAIL and the test name, which says what was checked. The last line is the total, e.g. autograde: 2/3.

What to do about a red ✕: read the name of the test marked FAIL, fix it in Kubeflow and again git add ., git commit, git push (part 5). The tests run again. You can repeat this as often as you like, until the deadline.

The tests check only what can be verified automatically (e.g. whether a file exists and what it contains). The rest of the assignment, such as the page on sigma, is checked by the teacher.

During your work only the files you saved in the editor reached sigma. Now upload the whole folder so that everything in the repository is there: README, the dragged image, files from the terminal.

1. In Kubeflow, in Explorer, right click the cv01 folder. A menu opens; at its very bottom (next to Sync Local → Remote…) click Upload Folder. The status bar at the bottom shows done … for each uploaded file in turn.

2. Open https://sigma.tuke.sk/student/name.surname/ti/cv01/ (off campus with the VPN, guide 00). Your page must appear exactly as the teacher should see it. If you see an old version, F5.

You can do Upload Folder at any time, also several times during your work. It uploads everything at once and breaks nothing.

The page shows 403, 404 or is white: guide 03, When it does not work. Nothing is edited on sigma. A fix is made in Kubeflow, saved, pushed (part 5).

The clone is done once. When you come back to the assignment, you still have the cv01 folder in Kubeflow:

1. Part 1: open Kubeflow, check WEB and the extensions.
2. Work in cv01 (part 4).
3. Commit and push (part 5). Another commit is added on GitHub.
4. Upload Folder and the check on sigma (part 7).

No clone, no renaming. Git remembers in the folder which repository it belongs to.

The teacher writes notes directly on the lines of your code on GitHub, in the Pull requests tab, pull request Feedback. You get an e-mail and a notification (the bell at the top right). Click, read, fix in Kubeflow, commit, push. The teacher sees that you reacted.