|
|
|
|
|
|
|
|
|
|
|
# Session 1: Tools-I
|
|
|
|
|
|
|
|
* **Time**: 2h
|
|
|
|
* **Goals**:
|
|
|
|
* Brief introduction to Github/Gitlab
|
|
|
|
* Create your first repository
|
|
|
|
* Learn how to access to Github from the Pycharm IDE
|
|
|
|
* Testing the "Hello world" program in Pycharm
|
|
|
|
|
|
|
|
# Contents
|
|
|
|
|
|
|
|
* [Introduction](#introduction)
|
|
|
|
* [Introduction to Git](#introduction-to-git)
|
|
|
|
* [Your Github's account](#your-githubs-account)
|
|
|
|
* [Playing with repositories](#playing-with-repositories)
|
|
|
|
* [Wikis](#wikis)
|
|
|
|
* [Downloading all the files in a repo](#downloading-all-the-files-in-a-repo)
|
|
|
|
* [Creating your repo](#creating-our-working-repo)
|
|
|
|
* [Working with PyCharm and Github](#working-with-pycharm-and-github)
|
|
|
|
* [Opening Pycharm](#opening-pycharm)
|
|
|
|
* [Cloning you working repo](#cloning-your-working-repo)
|
|
|
|
* [Our first commit to the repo](#our-first-commit-to-the-repo)
|
|
|
|
* [Hello world with Pycharm!](#hello-world-with-pycharm)
|
|
|
|
* [Configuring the python environment](#configuring-the-python-environment)
|
|
|
|
* [Writting the Hello world program](#writing-the-hello-world-program)
|
|
|
|
* [Creating the hello folder](#creating-the-hello-folder)
|
|
|
|
* [Creating a python file](#creating-a-python-file)
|
|
|
|
* [Writing the code](#writing-the-code)
|
|
|
|
* [Running the program](#running-the-program)
|
|
|
|
* [Adding the program to the Github Repo](#adding-the-program-to-the-github-repo)
|
|
|
|
* [Exercises](#exercises)
|
|
|
|
* [Ex-1: hello.py](#ex-1-hellopy)
|
|
|
|
* [Ex-2: count.py](#ex-2-countpy)
|
|
|
|
* [Ex-3: sum20.py](#ex-3-sum20py)
|
|
|
|
* [End of the session](#end-of-the-session)
|
|
|
|
* [Credits](#credits)
|
|
|
|
* [License](#license)
|
|
|
|
|
|
|
|
## Introduction
|
|
|
|
|
|
|
|
In the **Programming in Network Environment** subject we will learn how to create programs capable of **communicating** one to other through Internet
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
But first, we need to learn about the tools we are going to use: [Github](https://github.com/), [Python](https://www.python.org/), [Firefox](https://www.mozilla.org/es-ES/firefox/new/) and [Pycharm](https://www.jetbrains.com/es-es/pycharm/download) (Community Edition)
|
|
|
|
|
|
|
|
## Introduction to Git
|
|
|
|
|
|
|
|
Modern **programming projects** have thousand of lines of code and hundred of **developers** working on them. It is necessary to use **powerful tools** to manage it: [The revision control systems](https://en.wikipedia.org/wiki/Repository\_(version_control)). The projects are located into a what we call a **repository**
|
|
|
|
|
|
|
|
Currently, the two most used controls systems are [Github](https://github.com/) and [GitLab](https://gitlab.com/). Both are based on the **opensource** engine called [git](https://es.wikipedia.org/wiki/Git), developed in 2005 by [Linux Torvalds](https://es.wikipedia.org/wiki/Linus_Torvalds), the creator of the [Linux Kernel](https://en.wikipedia.org/wiki/Linux_kernel)
|
|
|
|
|
|
|
|
In this **course** we will use **Github**
|
|
|
|
|
|
|
|
### Your Github's account
|
|
|
|
|
|
|
|
* Create your account on [Github](https://github.com).
|
|
|
|
* Generate a [token](https://github.com/settings/tokens/new). Please, **choose an appropriate expiration time (no expiration time) and copy your token in a safe place**. In case you lose your token, you will need to generate a new one.
|
|
|
|
* Once you have your account and token created, you can create and edit your profile. Mine is [sarroutbi](https://github.com/sarroutbi).
|
|
|
|
|
|
|
|
### Playing with repositories
|
|
|
|
|
|
|
|
Just to get familiar with Github, Let's see some repositories. Click on the [this repo](https://github.com/Obijuan/3D-parts) with 3D-parts. This is the one a colleague of mine uses for sharing all his **3D printable designs**. Anyone can download them, and print them.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The designs are stored in **folders**. We can organize every repository **as we want**, using all the folders we may need. At the bottom of the page you will see images and texts, which are the contents of the **README.md** file, that we can add optionally in every folder or repo.
|
|
|
|
|
|
|
|
Let's continue our journey through the repos!. Let's enter into [this folder](https://github.com/Obijuan/3D-parts/tree/master/2017-10-09-urjc-logo).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
There are **3 files** and **3 folders**. Most of the files can be seen directly just by clicking on them. For example, let's click on the [Logo_URJC.png](https://github.com/Obijuan/3D-parts/blob/master/2017-10-09-urjc-logo/Logo_URJC.png) file.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As it is a png file, Github shows it as an image. If we want to download it, just press the **Download** button in to top right.
|
|
|
|
|
|
|
|
Any file from the repository can be downloaded. There is **no need for checking in**. No account is needed for browsing the report or for downloading files.
|
|
|
|
|
|
|
|
Let's see now this other file: [logo-urjc.svg](https://github.com/Obijuan/3D-parts/blob/master/2017-10-09-urjc-logo/logo-urjc.svg). It is a drawing, in the [SVG](https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables) vectorial format.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As this is a **text file** (the SVG files are written in plain text), instead of the Download button there is a **RAW Button**. If we want to download it, just click with the **right mouse button** and select the _save link as_ option.
|
|
|
|
|
|
|
|
If we enter the **STL** folder and click on the file [urjc-coin.stl](https://github.com/Obijuan/3D-parts/blob/master/2017-10-09-urjc-logo/stl/urjc-coin.stl), as it is a 3D design, Github will render it and allow us to **rotate** it and **change the point of view**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** you can see our journey through this repository.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Wikis
|
|
|
|
|
|
|
|
Optionally, a **wiki page** can be added to any repo for storing the documentation, and making the information more accessible to the users. For example, in the previous 3D-part repo, I have added a **index** with the most import 3D parts.
|
|
|
|
|
|
|
|
If you want to **access the wiki**, just click on the **wiki tab**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The wiki's link is also available: https://github.com/Obijuan/3D-parts/wiki. It allows us to access it as if a standard. It looks like this:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Now we can browse normally. The documentation that you are reading now, from the Programming in Network Environment subject, is located in its **its own wiki page** :slight_smile:.
|
|
|
|
|
|
|
|
From the [3D parts wiki](https://github.com/Obijuan/3D-parts/wiki), enter to the [this design](https://github.com/Obijuan/3D-parts/wiki/Llavero-moneda-URJC). It is located on the same folder we saw before, but now you are looking at the wiki, that is easier for the users.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** you can see our **journey** though the wiki.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Downloading all the files in a repo
|
|
|
|
|
|
|
|
You can download either individual files from the repo or all of them. Let's try the second option with this repo [RISC-V-FPGA](https://github.com/Obijuan/RISC-V-FPGA) (We do not use the previous repo because is too big and it will take us more time).
|
|
|
|
|
|
|
|
In the **main page** of the repo, click on the **Clone or Download** green button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Select the **DOWNLOAD ZIP** option in the bottom of the new windows.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The browser will show us another window with the **file to download**. Click on the **OK** button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The complete process is shown in this animation.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In our Download folder we will find the file we just downloaded But, **be careful!**, it only contains the latest version of the files, not the repo itself. All the information regarding changes, revisions and versions is not there.
|
|
|
|
|
|
|
|
We can **decompress** this file as usual to have access to all the files and folders.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Creating your repo
|
|
|
|
|
|
|
|
In this course, all your work will be stored in a **public Github repo**. You will fork from [this repo,](https://github.com/2023-2024-pne/pne-studentslab) In other words, you will have your own branch. Just click on the 'fork' button on the top right and complete the requested information (select your username for the namespace and set a project slug you are happy with).
|
|
|
|
|
|
|
|
After some seconds **your repository will be ready**. You can have a look at your main Github page to check that it is there.
|
|
|
|
|
|
|
|
Your repo is ready for start working!
|
|
|
|
|
|
|
|
But before you start, make sure **you add me as a project member**. Go to the *Members* section (under *Project information*), click the button that says *Invite members*, and invite me as a *Maintainer*! You can use my Github's username (sarroutbi). Do not set an expiration date.
|
|
|
|
|
|
|
|
## Working with Pycharm and Github
|
|
|
|
|
|
|
|
For developing in python we are going to use the [PyCharm IDE](https://www.jetbrains.com/pycharm/download/?gclid=Cj0KCQiA-JXiBRCpARIsAGqF8wU4k1AvuaMc2tQ7gsbn23gdFIMNlczsnPDi-WyXa-cKkdUgxcbW7hYaAn2uEALw_wcB&gclsrc=aw.ds#section=linux) (Community edition 2022.2). It is already installed in the lab environment. If you like, you can activate the professional version with your university credentials.
|
|
|
|
|
|
|
|
### Opening PyCharm
|
|
|
|
|
|
|
|
Go to the **activities menu** in the top left corner and write pycharm. Click on the PyCharm icon. **CAUTION!** In the lab there are two version of the program. We will use the **Community Edition** (which is OpenSource). Make sure the icon looks like this one (squared):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If this is **the first time** it is opened, some configuration windows will appear.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The initial window will show up (maybe the program requests some other information, but that would be easy to handle):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Cloning your working repo
|
|
|
|
|
|
|
|
We are going to work on our own **working repository** that is in Github (you just forked it!). The first step is called **cloning the repo**. It will **copy the repository** from Github and create a **local copy** in **your computer**.This operation is executed just **once per computer**, so, if you are working in two computers, you will have to **clone the repository twice**.
|
|
|
|
|
|
|
|
From the main Pycharm windows we select the option **Get from VCS**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
This window shows up. It is asking us for the location of our project in the repository:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
We just click on the "Clone" button:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click on the "Trust the Authors" button. **We are ready to work!**
|
|
|
|
|
|
|
|
### Our first commit to the repo
|
|
|
|
|
|
|
|
If you click on the top left folder, you will see all the **contents** of your working project, with the structure I have designed.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Before doing our first Python program, let's make some **changes** to the **README file** and upload into our remote repository in Github. Click on the README file to edit it, select the Editor Mode and introduce some change.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Add some text. Notice how the color of the README file has changed. It is indicating that a change has been made: the **current README** file is **different** than the one stored in the **repository**.
|
|
|
|
|
|
|
|
Let's **commit** that change. Click on the README.md file to select it, include a commit message and select **Commit and Push**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You will be asked by your username and mail. Fill them and click on "Push"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Congrats! You've done your first commit!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
But you have committed your change to the **local repository** in your computer. It is not yet in Github. You have to execute a **push command**. Click on the option at **VCS/Git/Push**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In the next screen click on the **Push** button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Enter your Github **token** (created previously) and click on **Push**.
|
|
|
|
|
|
|
|
After some seconds your changes will be pushed.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Congrats!** You've made your first contribution to your remote Github repository!
|
|
|
|
|
|
|
|
If you go to your Github repo page, you will see the changes you just did.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Hello world with Pycharm!
|
|
|
|
|
|
|
|
Let's write our first python program in PyCharm. The first step is to configure the python environment.
|
|
|
|
|
|
|
|
### Configuring the python environment
|
|
|
|
|
|
|
|
We have to chose which python interpreter to use. Go to **File/Setting** and click to select the project interpreter as shown in the image below.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click on the **configure** button on the right.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
And then on the **Add** option.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Select the first option: **Virtual Environment**. Check **New Environment** and click on **OK**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
And click again on **OK** for closing the Settings Windows
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The **python interpreter** is ready! You will see the new folder called **venv**. It contains the python interpreter and all the related files needed.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Writing the Hello world program
|
|
|
|
|
|
|
|
Let's write our first Hello World program in PyCharm. You could create a specific folder to store this first script, but as you forked from a repo I designed myself, I did it for you. I named it "Hello".
|
|
|
|
|
|
|
|
#### Creating a python file
|
|
|
|
|
|
|
|
Let's create our first python file. Make sure the **Hello folder is selected**, as we want to create our new file in that directory. Then click on **File/new/python file**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Type in** the **filename**. For example **hello**. It is not necessary to introduce the extension (.py) since we already indicated we were creating a Python script.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As we are working with the **Github repo**, PyCharm asks us if we want this new file to be **added** to our **local repository**. Click on **Add**. Sometimes you just want to make a quick test on a temporary file. In that case you may not want it to be included in the repo. But in this case, we want to include our **hello.py** file into the repo.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
We can see now the **new hello.py file** in the **project view** on the right side.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Also, the file is opened on a new tab. **We are now ready for typing python code!**. Look at the **green tick** in the upper right corner. It tells us that the hello.py is **ok**, with **no errors**.
|
|
|
|
|
|
|
|
Notice the color of the new file: green. It means that is a new file, added to the project, but it is not already in the repository, because we still have **not committed** the file.
|
|
|
|
|
|
|
|
In this **animation** the process of creating a **new python file** is shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Writing the code
|
|
|
|
|
|
|
|
It is time to write the **hello world program**.
|
|
|
|
|
|
|
|
```python
|
|
|
|
print("This is my first python program in the Pycharm IDE")
|
|
|
|
print("Hello world!!")
|
|
|
|
```
|
|
|
|
|
|
|
|
When the editor detects you have written the first letters, _pr_, it shows below some of the functions that matches. You can continue typing or pressing the **TAB key** for accepting the first choice,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Once the **print()** function is typed, the editor will show us all the possible **parameters** that the print function has. The first one (values) are variables or strings we want to print.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
We continue writing the string we want to print. Finish pressing the **ENTER** key. You should see something like this, with the **green tick** on the right.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Imagine that you make a mistake typing the print. In that case you will see a **red exclamation marl** and a **red sign** on the location where the error is detected.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you place the **mouse pointer** on the **red line** below the red icon, you will get **more information** about the error.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A typical error is to add a **blank new line** after the last line. The **python style guide** recommends not to do that. Therefore, you will see a **warning** in that case.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you place the pointer in the **upper mark**, you will read that there is **1 weak error**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you place the pointer in the **second mark** on the right, you will see the **error message**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** the process of **writing the hello world** is shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** some **errors** are forced and corrected.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Running the program
|
|
|
|
|
|
|
|
The first time a file is created, cannot be executed directly. The buttons for running and debugging cannot be pressed. Also there is an option that says: **add configuration**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Instead of creating a custom configuration, we will let PyCharm to create one for us. Click on **Run/Run**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click on the **hello** option.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The program will **run**. A **new run** tab is open in the bottom. There you will see the **messages** we have printed. Also notice that now there is a **new configuration**, called **hello** and the run and debug **green buttons** are activated.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Once the configuration has been created, **running the program is straightforward**. Just click on the green run button in the toolbar.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Adding the program to the Github repo
|
|
|
|
|
|
|
|
Now that the program is working, it is time to **add** it to our **repo**. First we have lo add it to our **local repo** (commit) and then **pushing** it to the **remote repo** at Github.
|
|
|
|
|
|
|
|
* Click on the **commit button**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Add a **comment** to the commit and press the commit button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Notice that now the hello.py file is **NOT green anymore**. It has the same color than the other files in the local repo.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Now go to **VCS/Git/Push** and click on **Push**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
After some seconds, you will see the **confirmation message**. Our local repo has been pushed to Github!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Go to the browser and **check** that the changes are in **Github**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you enter into the Hello folder, the **hello.py** file will be there.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Congrats! You have created, run and committed to the Github repo your first python program.
|
|
|
|
|
|
|
|
## Exercises
|
|
|
|
|
|
|
|
The only way of **mastering** something is practicing, practicing and practicing!
|
|
|
|
|
|
|
|
### Ex-1: hello.py
|
|
|
|
|
|
|
|
* Add another **print()** statement to the _hello.py_ program.
|
|
|
|
* Add some **comments**.
|
|
|
|
* Make sure you get a **green tick**.
|
|
|
|
* **Run** the program.
|
|
|
|
* **Upload** the changes to your Github repo.
|
|
|
|
|
|
|
|
### Ex-2: count.py
|
|
|
|
|
|
|
|
* In your project create a **new folder** called: **S01**.
|
|
|
|
* Inside this new folder, code a python script called **count.py** that prints the number from 1 to 20.
|
|
|
|
* **Upload** that new file in your Github repo.
|
|
|
|
|
|
|
|
### Ex-3: sum20.py
|
|
|
|
|
|
|
|
* Within the same folder, code a script called **sum20.py** for calculating the sum of the first 20 integer numbers (1+2+3+...+20). The result should be printed out.
|
|
|
|
* Upload that file in your Github repo.
|
|
|
|
|
|
|
|
# END of the session
|
|
|
|
|
|
|
|
The session is finished. Make sure, during this week, that everything in this list is checked!
|
|
|
|
|
|
|
|
* [ ] You have a Github account
|
|
|
|
* [ ] You have sent me your real name and Github user name
|
|
|
|
* [ ] You have the **pne-studentslab** working repo created in your account
|
|
|
|
* [ ] You know how to write and run programs in Pycharm
|
|
|
|
* [ ] You have uploaded the **Hello folder** with the **hello.py** program to the repo
|
|
|
|
* [ ] Exercise 1 done!
|
|
|
|
* [ ] Exercise 2 done!
|
|
|
|
* [ ] Exercise 3 done!
|
|
|
|
|
|
|
|
# Credits
|
|
|
|
|
|
|
|
* Rodrigo Pérez Rodríguez
|
|
|
|
|
|
|
|
# License
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# Links
|
|
|
|
|
|
|
|
* [Universidad Rey Juan Carlos de Madrid](https://www.urjc.es/)
|
|
|
|
|
|
|
|
|
|
|
|
# Session 1: Tools-I
|
|
|
|
|
|
|
|
* **Time**: 2h
|
|
|
|
* **Goals**:
|
|
|
|
* Brief introduction to Github/Gitlab
|
|
|
|
* Create your first repository
|
|
|
|
* Learn how to access to Github from the Pycharm IDE
|
|
|
|
* Testing the "Hello world" program in Pycharm
|
|
|
|
|
|
|
|
# Contents
|
|
|
|
|
|
|
|
* [Introduction](#introduction)
|
|
|
|
* [Introduction to Git](#introduction-to-git)
|
|
|
|
* [Your Github's account](#your-githubs-account)
|
|
|
|
* [Playing with repositories](#playing-with-repositories)
|
|
|
|
* [Wikis](#wikis)
|
|
|
|
* [Downloading all the files in a repo](#downloading-all-the-files-in-a-repo)
|
|
|
|
* [Creating your repo](#creating-our-working-repo)
|
|
|
|
* [Working with PyCharm and Github](#working-with-pycharm-and-github)
|
|
|
|
* [Opening Pycharm](#opening-pycharm)
|
|
|
|
* [Cloning you working repo](#cloning-your-working-repo)
|
|
|
|
* [Our first commit to the repo](#our-first-commit-to-the-repo)
|
|
|
|
* [Hello world with Pycharm!](#hello-world-with-pycharm)
|
|
|
|
* [Configuring the python environment](#configuring-the-python-environment)
|
|
|
|
* [Writting the Hello world program](#writing-the-hello-world-program)
|
|
|
|
* [Creating the hello folder](#creating-the-hello-folder)
|
|
|
|
* [Creating a python file](#creating-a-python-file)
|
|
|
|
* [Writing the code](#writing-the-code)
|
|
|
|
* [Running the program](#running-the-program)
|
|
|
|
* [Adding the program to the Github Repo](#adding-the-program-to-the-github-repo)
|
|
|
|
* [Exercises](#exercises)
|
|
|
|
* [Ex-1: hello.py](#ex-1-hellopy)
|
|
|
|
* [Ex-2: count.py](#ex-2-countpy)
|
|
|
|
* [Ex-3: sum20.py](#ex-3-sum20py)
|
|
|
|
* [End of the session](#end-of-the-session)
|
|
|
|
* [Credits](#credits)
|
|
|
|
* [License](#license)
|
|
|
|
|
|
|
|
## Introduction
|
|
|
|
|
|
|
|
In the **Programming in Network Environment** subject we will learn how to create programs capable of **communicating** one to other through Internet
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
But first, we need to learn about the tools we are going to use: [Github](https://github.com/), [Python](https://www.python.org/), [Firefox](https://www.mozilla.org/es-ES/firefox/new/) and [Pycharm](https://www.jetbrains.com/es-es/pycharm/download) (Community Edition)
|
|
|
|
|
|
|
|
## Introduction to Git
|
|
|
|
|
|
|
|
Modern **programming projects** have thousand of lines of code and hundred of **developers** working on them. It is necessary to use **powerful tools** to manage it: [The revision control systems](https://en.wikipedia.org/wiki/Repository\_(version_control)). The projects are located into a what we call a **repository**
|
|
|
|
|
|
|
|
Currently, the two most used controls systems are [Github](https://github.com/) and [GitLab](https://gitlab.com/). Both are based on the **opensource** engine called [git](https://es.wikipedia.org/wiki/Git), developed in 2005 by [Linux Torvalds](https://es.wikipedia.org/wiki/Linus_Torvalds), the creator of the [Linux Kernel](https://en.wikipedia.org/wiki/Linux_kernel)
|
|
|
|
|
|
|
|
In this **course** we will use **Github**
|
|
|
|
|
|
|
|
### Your Github's account
|
|
|
|
|
|
|
|
* Create your account on [Github](https://github.com).
|
|
|
|
* Generate a [token](https://github.com/settings/tokens/new). Please, **choose an appropriate expiration time (no expiration time) and copy your token in a safe place**. In case you lose your token, you will need to generate a new one.
|
|
|
|
* Once you have your account and token created, you can create and edit your profile. Mine is [sarroutbi](https://github.com/sarroutbi).
|
|
|
|
|
|
|
|
### Playing with repositories
|
|
|
|
|
|
|
|
Just to get familiar with Github, Let's see some repositories. Click on the [this repo](https://github.com/Obijuan/3D-parts) with 3D-parts. This is the one a colleague of mine uses for sharing all his **3D printable designs**. Anyone can download them, and print them.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The designs are stored in **folders**. We can organize every repository **as we want**, using all the folders we may need. At the bottom of the page you will see images and texts, which are the contents of the **README.md** file, that we can add optionally in every folder or repo.
|
|
|
|
|
|
|
|
Let's continue our journey through the repos!. Let's enter into [this folder](https://github.com/Obijuan/3D-parts/tree/master/2017-10-09-urjc-logo).
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
There are **3 files** and **3 folders**. Most of the files can be seen directly just by clicking on them. For example, let's click on the [Logo_URJC.png](https://github.com/Obijuan/3D-parts/blob/master/2017-10-09-urjc-logo/Logo_URJC.png) file.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As it is a png file, Github shows it as an image. If we want to download it, just press the **Download** button in to top right.
|
|
|
|
|
|
|
|
Any file from the repository can be downloaded. There is **no need for checking in**. No account is needed for browsing the report or for downloading files.
|
|
|
|
|
|
|
|
Let's see now this other file: [logo-urjc.svg](https://github.com/Obijuan/3D-parts/blob/master/2017-10-09-urjc-logo/logo-urjc.svg). It is a drawing, in the [SVG](https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables) vectorial format.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As this is a **text file** (the SVG files are written in plain text), instead of the Download button there is a **RAW Button**. If we want to download it, just click with the **right mouse button** and select the _save link as_ option.
|
|
|
|
|
|
|
|
If we enter the **STL** folder and click on the file [urjc-coin.stl](https://github.com/Obijuan/3D-parts/blob/master/2017-10-09-urjc-logo/stl/urjc-coin.stl), as it is a 3D design, Github will render it and allow us to **rotate** it and **change the point of view**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** you can see our journey through this repository.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Wikis
|
|
|
|
|
|
|
|
Optionally, a **wiki page** can be added to any repo for storing the documentation, and making the information more accessible to the users. For example, in the previous 3D-part repo, I have added a **index** with the most import 3D parts.
|
|
|
|
|
|
|
|
If you want to **access the wiki**, just click on the **wiki tab**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The wiki's link is also available: https://github.com/Obijuan/3D-parts/wiki. It allows us to access it as if a standard. It looks like this:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Now we can browse normally. The documentation that you are reading now, from the Programming in Network Environment subject, is located in its **its own wiki page** :slight_smile:.
|
|
|
|
|
|
|
|
From the [3D parts wiki](https://github.com/Obijuan/3D-parts/wiki), enter to the [this design](https://github.com/Obijuan/3D-parts/wiki/Llavero-moneda-URJC). It is located on the same folder we saw before, but now you are looking at the wiki, that is easier for the users.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** you can see our **journey** though the wiki.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Downloading all the files in a repo
|
|
|
|
|
|
|
|
You can download either individual files from the repo or all of them. Let's try the second option with this repo [RISC-V-FPGA](https://github.com/Obijuan/RISC-V-FPGA) (We do not use the previous repo because is too big and it will take us more time).
|
|
|
|
|
|
|
|
In the **main page** of the repo, click on the **Clone or Download** green button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Select the **DOWNLOAD ZIP** option in the bottom of the new windows.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The browser will show us another window with the **file to download**. Click on the **OK** button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The complete process is shown in this animation.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In our Download folder we will find the file we just downloaded But, **be careful!**, it only contains the latest version of the files, not the repo itself. All the information regarding changes, revisions and versions is not there.
|
|
|
|
|
|
|
|
We can **decompress** this file as usual to have access to all the files and folders.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Creating your repo
|
|
|
|
|
|
|
|
In this course, all your work will be stored in a **public Github repo**. You will fork from [this repo,](https://github.com/2023-2024-pne/pne-studentslab) In other words, you will have your own branch. Just click on the 'fork' button on the top right and complete the requested information (select your username for the namespace and set a project slug you are happy with).
|
|
|
|
|
|
|
|
After some seconds **your repository will be ready**. You can have a look at your main Github page to check that it is there.
|
|
|
|
|
|
|
|
Your repo is ready for start working!
|
|
|
|
|
|
|
|
But before you start, make sure **you add me as a project member**. Go to the *Members* section (under *Project information*), click the button that says *Invite members*, and invite me as a *Maintainer*! You can use my Github's username (sarroutbi). Do not set an expiration date.
|
|
|
|
|
|
|
|
## Working with Pycharm and Github
|
|
|
|
|
|
|
|
For developing in python we are going to use the [PyCharm IDE](https://www.jetbrains.com/pycharm/download/?gclid=Cj0KCQiA-JXiBRCpARIsAGqF8wU4k1AvuaMc2tQ7gsbn23gdFIMNlczsnPDi-WyXa-cKkdUgxcbW7hYaAn2uEALw_wcB&gclsrc=aw.ds#section=linux) (Community edition 2022.2). It is already installed in the lab environment. If you like, you can activate the professional version with your university credentials.
|
|
|
|
|
|
|
|
### Opening PyCharm
|
|
|
|
|
|
|
|
Go to the **activities menu** in the top left corner and write pycharm. Click on the PyCharm icon. **CAUTION!** In the lab there are two version of the program. We will use the **Community Edition** (which is OpenSource). Make sure the icon looks like this one (squared):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If this is **the first time** it is opened, some configuration windows will appear.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The initial window will show up (maybe the program requests some other information, but that would be easy to handle):
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Cloning your working repo
|
|
|
|
|
|
|
|
We are going to work on our own **working repository** that is in Github (you just forked it!). The first step is called **cloning the repo**. It will **copy the repository** from Github and create a **local copy** in **your computer**.This operation is executed just **once per computer**, so, if you are working in two computers, you will have to **clone the repository twice**.
|
|
|
|
|
|
|
|
From the main Pycharm windows we select the option **Get from VCS**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
This window shows up. It is asking us for the location of our project in the repository:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
We just click on the "Clone" button:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click on the "Trust the Authors" button. **We are ready to work!**
|
|
|
|
|
|
|
|
### Our first commit to the repo
|
|
|
|
|
|
|
|
If you click on the top left folder, you will see all the **contents** of your working project, with the structure I have designed.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Before doing our first Python program, let's make some **changes** to the **README file** and upload into our remote repository in Github. Click on the README file to edit it, select the Editor Mode and introduce some change.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Add some text. Notice how the color of the README file has changed. It is indicating that a change has been made: the **current README** file is **different** than the one stored in the **repository**.
|
|
|
|
|
|
|
|
Let's **commit** that change. Click on the README.md file to select it, include a commit message and select **Commit and Push**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
You will be asked by your username and mail. Fill them and click on "Push"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Congrats! You've done your first commit!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
But you have committed your change to the **local repository** in your computer. It is not yet in Github. You have to execute a **push command**. Click on the option at **VCS/Git/Push**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In the next screen click on the **Push** button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Enter your Github **token** (created previously) and click on **Push**.
|
|
|
|
|
|
|
|
After some seconds your changes will be pushed.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Congrats!** You've made your first contribution to your remote Github repository!
|
|
|
|
|
|
|
|
If you go to your Github repo page, you will see the changes you just did.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Hello world with Pycharm!
|
|
|
|
|
|
|
|
Let's write our first python program in PyCharm. The first step is to configure the python environment.
|
|
|
|
|
|
|
|
### Configuring the python environment
|
|
|
|
|
|
|
|
We have to chose which python interpreter to use. Go to **File/Setting** and click to select the project interpreter as shown in the image below.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click on the **configure** button on the right.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
And then on the **Add** option.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Select the first option: **Virtual Environment**. Check **New Environment** and click on **OK**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
And click again on **OK** for closing the Settings Windows
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The **python interpreter** is ready! You will see the new folder called **venv**. It contains the python interpreter and all the related files needed.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Writing the Hello world program
|
|
|
|
|
|
|
|
Let's write our first Hello World program in PyCharm. You could create a specific folder to store this first script, but as you forked from a repo I designed myself, I did it for you. I named it "Hello".
|
|
|
|
|
|
|
|
#### Creating a python file
|
|
|
|
|
|
|
|
Let's create our first python file. Make sure the **Hello folder is selected**, as we want to create our new file in that directory. Then click on **File/new/python file**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**Type in** the **filename**. For example **hello**. It is not necessary to introduce the extension (.py) since we already indicated we were creating a Python script.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
As we are working with the **Github repo**, PyCharm asks us if we want this new file to be **added** to our **local repository**. Click on **Add**. Sometimes you just want to make a quick test on a temporary file. In that case you may not want it to be included in the repo. But in this case, we want to include our **hello.py** file into the repo.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
We can see now the **new hello.py file** in the **project view** on the right side.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Also, the file is opened on a new tab. **We are now ready for typing python code!**. Look at the **green tick** in the upper right corner. It tells us that the hello.py is **ok**, with **no errors**.
|
|
|
|
|
|
|
|
Notice the color of the new file: green. It means that is a new file, added to the project, but it is not already in the repository, because we still have **not committed** the file.
|
|
|
|
|
|
|
|
In this **animation** the process of creating a **new python file** is shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Writing the code
|
|
|
|
|
|
|
|
It is time to write the **hello world program**.
|
|
|
|
|
|
|
|
```python
|
|
|
|
print("This is my first python program in the Pycharm IDE")
|
|
|
|
print("Hello world!!")
|
|
|
|
```
|
|
|
|
|
|
|
|
When the editor detects you have written the first letters, _pr_, it shows below some of the functions that matches. You can continue typing or pressing the **TAB key** for accepting the first choice,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Once the **print()** function is typed, the editor will show us all the possible **parameters** that the print function has. The first one (values) are variables or strings we want to print.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
We continue writing the string we want to print. Finish pressing the **ENTER** key. You should see something like this, with the **green tick** on the right.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Imagine that you make a mistake typing the print. In that case you will see a **red exclamation marl** and a **red sign** on the location where the error is detected.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you place the **mouse pointer** on the **red line** below the red icon, you will get **more information** about the error.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
A typical error is to add a **blank new line** after the last line. The **python style guide** recommends not to do that. Therefore, you will see a **warning** in that case.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you place the pointer in the **upper mark**, you will read that there is **1 weak error**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you place the pointer in the **second mark** on the right, you will see the **error message**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** the process of **writing the hello world** is shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
In this **animation** some **errors** are forced and corrected.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Running the program
|
|
|
|
|
|
|
|
The first time a file is created, cannot be executed directly. The buttons for running and debugging cannot be pressed. Also there is an option that says: **add configuration**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Instead of creating a custom configuration, we will let PyCharm to create one for us. Click on **Run/Run**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Click on the **hello** option.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The program will **run**. A **new run** tab is open in the bottom. There you will see the **messages** we have printed. Also notice that now there is a **new configuration**, called **hello** and the run and debug **green buttons** are activated.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Once the configuration has been created, **running the program is straightforward**. Just click on the green run button in the toolbar.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Adding the program to the Github repo
|
|
|
|
|
|
|
|
Now that the program is working, it is time to **add** it to our **repo**. First we have lo add it to our **local repo** (commit) and then **pushing** it to the **remote repo** at Github.
|
|
|
|
|
|
|
|
* Click on the **commit button**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Add a **comment** to the commit and press the commit button.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Notice that now the hello.py file is **NOT green anymore**. It has the same color than the other files in the local repo.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Now go to **VCS/Git/Push** and click on **Push**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
After some seconds, you will see the **confirmation message**. Our local repo has been pushed to Github!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* Go to the browser and **check** that the changes are in **Github**.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
If you enter into the Hello folder, the **hello.py** file will be there.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Congrats! You have created, run and committed to the Github repo your first python program.
|
|
|
|
|
|
|
|
## Exercises
|
|
|
|
|
|
|
|
The only way of **mastering** something is practicing, practicing and practicing!
|
|
|
|
|
|
|
|
### Ex-1: hello.py
|
|
|
|
|
|
|
|
* Add another **print()** statement to the _hello.py_ program.
|
|
|
|
* Add some **comments**.
|
|
|
|
* Make sure you get a **green tick**.
|
|
|
|
* **Run** the program.
|
|
|
|
* **Upload** the changes to your Github repo.
|
|
|
|
|
|
|
|
### Ex-2: count.py
|
|
|
|
|
|
|
|
* In your project create a **new folder** called: **S01**.
|
|
|
|
* Inside this new folder, code a python script called **count.py** that prints the number from 1 to 20.
|
|
|
|
* **Upload** that new file in your Github repo.
|
|
|
|
|
|
|
|
### Ex-3: sum20.py
|
|
|
|
|
|
|
|
* Within the same folder, code a script called **sum20.py** for calculating the sum of the first 20 integer numbers (1+2+3+...+20). The result should be printed out.
|
|
|
|
* Upload that file in your Github repo.
|
|
|
|
|
|
|
|
# END of the session
|
|
|
|
|
|
|
|
The session is finished. Make sure, during this week, that everything in this list is checked!
|
|
|
|
|
|
|
|
* [ ] You have a Github account
|
|
|
|
* [ ] You have sent me your real name and Github user name
|
|
|
|
* [ ] You have the **pne-studentslab** working repo created in your account
|
|
|
|
* [ ] You know how to write and run programs in Pycharm
|
|
|
|
* [ ] You have uploaded the **Hello folder** with the **hello.py** program to the repo
|
|
|
|
* [ ] Exercise 1 done!
|
|
|
|
* [ ] Exercise 2 done!
|
|
|
|
* [ ] Exercise 3 done!
|
|
|
|
|
|
|
|
# Credits
|
|
|
|
|
|
|
|
* Rodrigo Pérez Rodríguez
|
|
|
|
|
|
|
|
# License
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# Links
|
|
|
|
|
|
|
|
* [Universidad Rey Juan Carlos de Madrid](https://www.urjc.es/)
|
|
|
|
* [Escuela Técnica Superior de Ingeniería de Telecomunicaciones (URJC)](https://www.urjc.es/universidad/facultades/escuela-tecnica-superior-de-ingenieria-de-las-telecomunicaciones/content/etsit-escuela-tecnica-superior-de-ingenieria-de-telecomunicacion) |
|
|
\ No newline at end of file |
