Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified chapter1.txt
100755 → 100644
Empty file.
Empty file modified chapter2.txt
100755 → 100644
Empty file.
56 changes: 34 additions & 22 deletions chapter8.txt
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Raspberry Pi web server

When I was looking for projects for the Raspberry Pi(Rpi), I thought of various angles to cover it from. We could treat it an embedded device, but that would require knowledge of C. We could treat it as a normal learning computer, but that would be more for children.
When I was looking for projects for the Raspberry Pi(Rpi), I thought of various angles to cover it from. We could treat it as an embedded device, but that would require knowledge of C. We could treat it as a normal learning computer, but that would be more for children.

But then I was talking to a few people new to the Rpi, and what hit me most was that they didn't realise that the Rpi is a full fledged Linux box. Everything that a computer running Linux can do, Rpi can do, the only limitation being it has a much slower processor and limited RAM/disk.

That said, since command line Linux doesn't take much resources, you can do a lot with even limited hardware.

With that in mind, we'll go over how to turn your Rpi into a webserver, so that you can run commands on it from your browser, running on your laptop or iPad or anything.

The webserver will be limited to your local Wifi, for security reasons.
The webserver will be limited to your local Wifi, for security reasons.

## Prequisites

Expand All @@ -23,13 +23,13 @@ You can also connect your RPI via your laptop, but I found it hard to get inter

**Writing code**

You can write your code directly on the Rpi, if you love text based editors like vi or nano. If like me, you love your GUI, you can write your code on your PC and then copy it across. That's what I did.
You can write your code directly on the Rpi by using text based editors such as vi or nano. If like me, you prefer a GUI, you can also write your code on your PC and then copy it across. That's what I did.

Actually, you can do the entire development on your PC. If you are running Linux (or a VM), the code will work as is. Like I said earlier, the Rpi is just another Linux box.

If you are running Windows, you can still run the examples, but will be need to enter Windows commands instead of Linux commands, like I do. So *dir* instead of *ls*.
If you are running Windows, you can still run the examples, but you will have to enter Windows commands instead of Linux commands. For example, in Windows you will write *dir*, but in Linux you write *ls*.

One thing you will need to know is the IP address of your Rpi. If you are connected with a keyboard, this is found by running *ifconfig*
One thing you will need to know is the IP address of your Rpi. You can find it by tiping in a console the following command:

```
ifconfig
Expand All @@ -45,6 +45,18 @@ Your router will usually have its own web page (Google for it, as it will depend

There are several ways to run a web server on the Rpi. I am going to be using the Flask web server (http://flask.pocoo.org/). Flask is a great tiny webserver that is super easy and fun to learn. If you have never used Flask before, don't worry, I'll guide you through.

**Prerequisites**

First of all, make sure that your Rpi is up-to-date by typing in a console
```
sudo apt-get update && sudo apt-get upgrade
```
Then, pip needs to be installed in order to grab all the packages from the python repositories:
```
sudo apt-get install python-pip
```
Be aware that the command above will install pip for python 2.x on your Rpi.


**Installation**

Expand All @@ -67,9 +79,9 @@ We import Flask, and create an instance of it.

**Routing in Flask**

If you are new to webservers, the root path of a server is the default or main site. Eg, www.google.com is the root for the Google website. www.google.com/mail is a sub-site.
If you are new to webservers, the root path of a server is the default or main site. For example, www.google.com is the root for the Google website. www.google.com/mail is a sub-site.

The terminology of *root* is taken from Unix/Linux, where most of the early web work was done. On Linux, the root is the highest directory (equal to C:\ on Windows), and is signified by */* .
The terminology of *root* is taken from Unix, where most of the early web work was done. On Unix systems, the root directory is the base of every other directories in the system (equal to C:\ on Windows), and is signified by */* .

If you understand that, you will understand Flask's routing better.

Expand Down Expand Up @@ -135,7 +147,7 @@ Finally, we need to run the code. There are two variations, depending if you are

```

# For the RPI
# For the RPI
#app.run(host='0.0.0.0', port=80, debug=True)

# For testing on a normal Pc
Expand Down Expand Up @@ -164,7 +176,7 @@ The above command will copy the local file *hello_world.py* to the remote direct
Make sure the code has this part uncommented:

```
# For the RPI
# For the RPI
app.run(host='0.0.0.0', port=80, debug=True)

```
Expand Down Expand Up @@ -197,28 +209,28 @@ If you get the output above, that means the code is running on the Rpi. You can
First, on my PC:

![](images/rpi3.jpg)

![](images/rpi4.jpg)

We can even put spaces. In the image below, I enter *Mr Potato Head*:

![](images/rpi5.jpg)

Now on on **iPhone**:

![](images/rpi_iphone1.png)

![](images/rpi_iphone2.png)


Note how tiny everything is. We will address this problem later.

**iPad**:

![](images/rpi_ipad1.png)

![](images/rpi_ipad2.png)

On your iPhone or iPad, it will not like spaces. So if you want to go to *Mr Potato*, you will need to type *Mr%20Potato*. *%20* is the HTML code for space.

You should have the above working before you proceed to the next step.
Expand Down Expand Up @@ -256,11 +268,11 @@ This is a simple html form. If you open it in a web browser, this is what it loo

![](images/rpi6.jpg)

I won't go over the HTML part. If you have never seen a HTML form, there are many resources online. It's quite simple, and I just copy pasted this from an example.
I won't go over the HTML part. If you have never seen a HTML form, there are many resources online. It's quite simple, and I just copy pasted this from an example.

All the form is doing is asking the user for a command to run. When you push the button, that command is sent to the Flask server.

The only thing different is this part:
The only thing different is this part:

```
form action="{{ url_for('add') }}"
Expand All @@ -285,14 +297,14 @@ form action="{{ url_for('add') }}"
@app.route('/add', methods = ["POST"])
```

We are adding a route to */add*, as that's what our form will call. *methods = ["POST"]* means you can only post to this page, not read anything from it (as all this page is doing is processing the form data).
We are adding a route to */add*, as that's what our form will call. *methods = ["POST"]* means you can only post to this page, not read anything from it (as all this page is doing is processing the form data).

```
def add():
command = request.form['post']
```

The *index.html* page we created will send us the form with the command to run.
The *index.html* page we created will send us the form with the command to run.

If you remember the HTML file:

Expand Down Expand Up @@ -377,7 +389,7 @@ means that we are passing the standard output and error to our Python code.

```
msg = p.communicate()[0]
```
```

*p.communicate()* runs the command line program and returns the result. It returns both *stdout* and *stderr*. I only want *stdout*, which is why I'm doing a *[0]*.

Expand Down Expand Up @@ -463,7 +475,7 @@ And check it's gone:
Now let's try to do the same on our iPad.

![](images/rpi_ipad3.png)

![](images/rpi_ipad4.png)

That's not very clear, is it?
Expand Down Expand Up @@ -492,4 +504,4 @@ Or if you have a robotics project (or any other project where the Rpi is connect

Many people I know are using the Rpi as a cheap Linux server. In many companies, buying a full server can takes months (because of processes and rules). But a Rpi can be bought over a weekend. If you don't care about real time performance (like reading data from a sensor, as I mentioned above), then the Rpi is much better than a full server, as not only is it cheaper, it is easy to move around and install as well.

So start treating the Rpi as a full fledged Linux box rather than a toy, and you will really start to see its benefits.
So start treating the Rpi as a full fledged Linux box rather than a toy, and you will really start to see its benefits.
Empty file.
Empty file added images/.blue_test.jpg.~69a08062
Empty file.
Empty file.
Empty file added images/.data_plot.png.~633c3ad9
Empty file.
Empty file.
Empty file added images/.face1.jpg.~5b9142ca
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.