1-2. Project management¶

This week I worked on defining my final project idea and started to getting used to the documentation process.

Assignments and Assessment this week¶

Read, sign (add your name to) the student agreement and commit it to your repo
Work through a git tutorial.
Build a personal website in the class archive describing yourself and your final project. Refer to the lecture material for examples.
Upload parts 1 and 2, to the class archive.

Principles and Practices, Project Management¶

Principles and Practices (part 1 of 2)¶

Plan and sketch a potential final project

Project Management (part 2 of 2)¶

Read, sign (add your name to) the student agreement and commit it to your repo Work through a git tutorial. Build a personal website in the class archive describing yourself and your final project. Refer to the lecture material for examples. Upload parts 1 and 2, to the class archive.

Learning outcomes¶

Communicate an initial project proposal Identify and utilise version control protocol(s) Explore and use website development tool(s)

Have you answered these questions?¶

Sketched your final project idea(s) Described briefly what it will do and who will use it Made a website and described how you did it Created a section about yourself on that website Added a page with your sketch and description of your final project idea(s) Documented steps for setting up your Git repository and adding files to it Pushed to your class GitLab repository Signed and uploaded Student Agreement

It was a week where I learned a lot of things. Normally, development is done by a small team of just one or two people. This class required skills that aren’t often needed, such as file management, website creation techniques, and how to document them, so I’m in a hurry to document them as well. I wonder if I’ll be able to finish in time for class…?

installing Git¶

I had heard of git, but I was only about 1% familiar with it. It was all about clicking on a Zip file to download it. So, I first tried to install git using the terminal. However, since I had previously installed Xcode, it was already installed.Before you know it!!

Terminal and vi¶

Keep a record of terminal and VI operations in case you forget them after a long time.

How to Use terminal¶

Terminal User Guide for Apple

Fiest step¶

`ls`command¶

list to crent directorey

ls
ls -l 
ls -a
ls -la

`cd`command¶

change directory

cd name
cd ~/   # go to home
cd ..   # go back to directory

`mkdir`command¶

make directory

mkdir name

`touch`command¶

make file

touch name.txt

`mv`command¶

move

mv name.txt name2.txt  # change file name
mv name2.txt name/    # move file to directory

`cp`command¶

copy

cp name.txt name/
cp name.txt name2.txt
cp -r name /tmp/

`rm`command¶

remove = Delete

rm name.txt
rm -r name
rm -f name.txt
rm -rf name

`pwd`command¶

print working directory

pwd # now  directory Pass

`open`command¶

Open to Finder on terminal

open .  #now  directory open to finder
open ~/  #open to home directory

`source`command¶

enable to setting file

source ~/.bash_profile
source .bash_profile

`history`command¶

print to command history

history
history -c #Delete to command history

Second Step¶

cat
find
grep
kill
ps
chown
tail
uname
ln
chown
chmod

How to create many folders at once¶

In Excel, a spreadsheet, etc. 1. Enter “mkdir -p” in Column A. 2. Enter the desired folder names in Column B. To create a hierarchy, separate them with a slash (/). In Mac Terminal, use the cd command to navigate to the location where you want to create the folder, then copy and paste the range created in Excel or similar, and press Enter to create multiple folders at once.

A	B
mkdir -p	week01
mkdir -p	week02
mkdir -p	week03
mkdir -p	week04
mkdir -p	week05
mkdir -p	week06
mkdir -p	week07
mkdir -p	week08
mkdir -p	week09
mkdir -p	week10
mkdir -p	week11
mkdir -p	week12
mkdir -p	week13
mkdir -p	week14
mkdir -p	week15
mkdir -p	week16
mkdir -p	week17
mkdir -p	week18
mkdir -p	week19
mkdir -p	week20

How to Use vi¶

[Illustrated Guide] vi Editor Usage Summary.

Edit mode¶

This is the first mode that appears when vi is launched. You can move the cursor, copy, paste, and delete text. You can enter insert mode with i and a, and command mode with :! and :w. To return to either mode, press the esc escape key. To save the file you are editing and exit, press :wq. To exit without saving, press :q!.

move the cursor¶

use h to move left (←), j to move down (↓), k to move up (↑), and l to move right (→).

Delete¶

x deletes the character at the cursor position, X (Shift + x) deletes the character before the cursor position. To delete the line at the cursor position, enter dd.

Copy and Paste¶

yy Copies the line at the cursor position to the clipboard. yw Copies the line from the cursor position to the next space to the clipboard. p Pastes the contents of the clipboard after the cursor position. P (Shift + p) Pastes the contents of the clipboard before the cursor position.

Insert mode¶

You can insert text using keyboard input. i inserts text immediately before the cursor, I (Shift + i) inserts text at the beginning of the line where the cursor is located. a inserts text immediately after the cursor, A (Shift + a) inserts text at the end of the line where the cursor is located.

Command mode¶

Entering : (colon) will put you into command mode. You can exit the editor, save edits to a file, and run terminal commands in the vi editor. :wq Save to a file and exit. :q! Force quit without saving changes. :q Exit the editor. :w Save the file. :!<command> Execute terminal commands while keeping the editor running.

what is ssh¶

It is a protocol used to securely operate other computers and network devices over a network.

Set up SSH key¶

From now on, you will actually move your hands and type into the terminal.

Next, specify the user’s email address and generate a key using RSA encryption.

ssh-keygen -t rsa -C "hanadai0847@gmail.com"

You will be asked where you want to generate the SSH key with that name. In this example, I generated it directly under .ssh with the name fabcloud_rsa_key.

Enter file in which to save the key(/Users/username/.ssh/id_rsa):fabcloud_rsa_key
Enter passphrase (empty for no passphrase):

After deciding on the file name, you will be asked what to do about the password, so if you want to set one, enter it here. If you don’t enter anything, no password will be set. Please note that if you forget the password, the SSH key will become unusable.

Enter same passphrase again:

After entering the password again, if all goes well, the message The key fingerprint is: will be displayed. However, I received an error message. Following Tsuchiya’s advice, I created a config file using the Vi editor within SSH.

vi config

Entering the above into the terminal will create a file named config and launch the VI editor.

Press i to enter insert mode and enter the following statement.

Host gitlab.fabcloud.org
     User git
     identityFile ~/.ssh/fabcloud_rsa_key

When you’re done entering text, press the esc key to exit insert mode.

esc

Save your changes and exit the VI editor with :wq.

:wq

Now, if you generate an SSH key again, you will see the following successful log:

The key fingerprint is:

You can view the contents of the public key with the following command:

cat ~/.ssh/fabcloud_rsa_key.pub

Now copy ssh-rsa ~~~ xxx@xxxx.com the terminal or use the following command to copy it.

pbcopy < ~/.ssh/fabcloud_rsa_key.pub

Log in to gitlab.fabcloud.org, click the user icon in the top right corner and select “settings“

Click “SSH Key” on the left to open the SSH key settings screen and paste the contents of the public key you copied into the form.

How to use Git¶

First, clone each individual’s remote repository to any folder on your PC to create a local repository. Select your personal project from FabCloud’s “Projects” and copy “Clone with SSH” from “Code”, then paste it after “git clone” with a space between them.

git clone xxxxxxxxx

Next, set the email address and username that will run git.

git config --global user.email "xxxxxx@gmail.com"
git config --global user.name "Daisuke Hanamido"

This completes the initial setup. From now on, you will need to perform this procedure each time you make changes to the folder contents.

git pull
git add .
git commit -m'comitname'
git push

No worries, you can’t break anything, all the changes you make are saved under Version Control using GIT. This means that you have all the different versions of your page saved and available all the time in the Gitlab interface.

git

HTML and MkDocs¶

Websites are traditionally written in HTML and customized using CSS and JavaScript. However, I hadn’t created a website in HTML since high school, so I barely remembered it. I was also advised that, considering the amount of documentation I’d need in the future, MkDocs’ Markdown format would be easier to work with than HTML. This is because it’s a very powerful format that allows documents to be converted almost directly into HTML. However, that doesn’t mean HTML isn’t usable at all. MkDocs can be edited via Gitlab. This software converts simple text files written in Markdown into the site you’re currently viewing.

The steps are as follows: First, delete all the contents of the folder you git pulled, then copy the necessary parts of the student template written in Markdown format, put them in your own pulled folder, and push them to change your homepage to MkDocs’ Markdown format.

The steps are outlined below. First, delete the entire contents of the git pulled folder, copy the necessary parts of the student template written in Markdown format, place them in your pulled folder, and push them to change your homepage to MkDocs’ Markdown format. The following five files are required:

.gitlab-ci.yml
docs
Mkdocs.yml
README.md
Requirments.txt

Among these, .gitlab-ci.yml is a hidden file, so be careful as it is often not replaced when copied using the GUI. If it has not been replaced, open the contents using VS Code or similar and rewrite them. This file describes the behavior after being pushed on the git side, and contains instructions for converting Markdown format to HTML.

In short¶

This website is built automatically by gitlab every time you edit the files in the docs folder
It does so thanks to Mkdocs a static site generator written in Python
You must start customizing the file mkdocs.yml with your information
You can change the looks of your website using mkdocs themes, you can find in the mkdocs.yml the options for the Material Mkdocs theme
If you want to start from scratch, you can delete everything (using git-rm) in this repository and push any other static website

Use markdown¶

hed1¶

hed2¶

hed3¶

hed4¶

hed5¶

hed6¶

# hed1
hed1
===
## hed2
hed2
---
### hed3
#### hed4
##### hed5
###### hed6

Bold

italic

~~correction line~~

underline

highlights

Annotation ¹

Folded Area

This is what you write inside the fold area.

**Bold**
*italic*
~~correction line~~
<u>underline</u>
<mark>highlights</mark>


Annotation [^1]

[^1]: This is annotation

<details>
<summary>Folded Area</summary>

This is what you write inside the fold area.
</details>

Try having a seperator line

---
***
___

code¶

Use the three backticks to separate code. ```html:Exampl This is code Exampl

### In line code

Use the one backticks to separate code.

This is `inline code` Exampl

```This is `inline code` Exampl```


## Quotation

>Quotation

Quotation

## Table

| The crass<br>ID | First Name | Last Name | 
| :--- | :---: | ---: |
| 235312 | John | Doe | 
| 453123 |  Mark  |  Jones  | 
| 998332 |  Jonathan  |   Smith  | 
| 345612 |  Andrew  |   McArthur  | 
| 453123 |  Adam  |   Fuller  |

The crass ID	First Name	Last Name
235312	John	Doe
453123	Mark	Jones
998332	Jonathan	Smith
345612	Andrew	McArthur
453123	Adam	Fuller

<!-- 

## PlantUML

```uml
@startuml
Alice -> Bob: Authentication Request
Bob - ->   Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

@startuml
Alice -> Bob: Authentication Request
Bob - -> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

–>

Use HTML¶

HTML Tutorial You may also embed HTML in line of your markdown files.

hed1

hed2

hed3

hed4

hed5

hed6

<h1>hed1</h1>
<h2>hed2</h2>
<h3>hed3</h3>
<h4>hed4</h4>
<h5>hed5</h5>
<h6>hed6</h6>

text

text

Bold

Bold

italic

italic

text red

text red

this is a comment. ↓↓↓↓↓↓↓↓↓↓↓↓↓

↑↑↑↑↑↑↑↑↑↑↑↑↑

↓↓↓↓↓↓↓↓↓↓↓↓↓
<!-- this is a comment. -->

<!-- 
this is a comment.
this is a comment.
 -->
↑↑↑↑↑↑↑↑↑↑↑↑↑

Try having a seperator line

<hr />

Table¶

ID	First Name	Last Name
235312	John	Doe
453123	Mark	Jones
998332	Jonathan	Smith
345612	Andrew	McArthur
453123	Adam	Fuller

<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>235312</td>
            <td>John</td>
            <td>Doe</td>
        </tr>
        <tr>
            <td>453123</td>
            <td>Mark</td>
            <td>Jones</td>
        </tr>
        <tr>
            <td>998332</td>
            <td>Jonathan</td>
            <td>Smith</td>
        </tr>
        <tr>
            <td>345612</td>
            <td>Andrew</td>
            <td>McArthur</td>
        </tr>
        <tr>
            <td>453123</td>
            <td>Adam</td>
            <td>Fuller</td>
        </tr>
    </tbody>
</table>

This is annotation ↩

1-2. Project management¶

Assignments and Assessment this week¶

Principles and Practices, Project Management¶

Principles and Practices (part 1 of 2)¶

Project Management (part 2 of 2)¶

Learning outcomes¶

Have you answered these questions?¶

installing Git¶

Terminal and vi¶

How to Use terminal¶

Fiest step¶

lscommand¶

cdcommand¶

mkdircommand¶

touchcommand¶

mvcommand¶

cpcommand¶

rmcommand¶

pwdcommand¶

opencommand¶

sourcecommand¶

historycommand¶

Second Step¶

How to create many folders at once¶

How to Use vi¶

Edit mode¶

move the cursor¶

Delete¶

Copy and Paste¶

Insert mode¶

Command mode¶

what is ssh¶

Set up SSH key¶

How to use Git¶

HTML and MkDocs¶

In short¶

Use markdown¶

hed1¶

hed1¶

hed2¶

hed2¶

hed3¶

hed4¶

hed5¶

hed6¶

code¶

Use HTML¶

hed1

hed2

hed3

hed4

hed5

hed6

Table¶

`ls`command¶

`cd`command¶

`mkdir`command¶

`touch`command¶

`mv`command¶

`cp`command¶

`rm`command¶

`pwd`command¶

`open`command¶

`source`command¶

`history`command¶