Первый запуск веб страницы ​

На одноплатном компьютере возможно запустить веб-сервер, чтобы на нем работал, например, ваш веб-сайт. Веб-сайт может выступать в роли панели управления для робота с одноплатным компьютером. Веб-сервер будет работать на языке Python с помощью фреймворка flask. Для начала его надо установить:

sudo apt install python3-flask

Далее требуется создать папку, в которой будут храниться все файлы веб-проекта:

mkdir server

В ней требуется создать еще две папки: в папке templtes будут храниться веб-страницы, в папке static --- изображения для сайта и прочие файлы.

cd server
mkdir static
mkdir templates

Теперь создадим файл hello_world.py со следующим кодом:

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
   return 'Hello world'
if __name__ == '__main__':
   app.run(debug=True, port=80, host='0.0.0.0')

Запустим файл командой:

sudo python3 hello_world.py

И перейдем по IP-адресу одноплатного компьютера в браузер. В браузере отобразится фраза “Hello world”. Клиент (браузер) отправляет запрос на сервер (nanopi), и сервер возвращает веб-страницу. Однако для создания сайта, которым будет удобно пользоваться, недостаточно языка Python. Чтобы создать “скелет” веб-страницы, определить, где и какой элемент будет находиться, нужен язык разметки HTML. Создавая файл HTML, который будет находиться в подпапке «templates», мы можем использовать отдельный файл под каждую страницу и динамически дополнять эту страницу данными из кода на питоне.

Итак, мы создадим файл с именем index.html, который будет сохранен в /templates. Вы можете использовать любой текстовый редактор для создания HTML-файла. Это может быть Geany, «nano» в терминале или gedit. Введем в файл index.html следующий код:

<!DOCTYPE html>
  <head>
     <title>{{ title }}</title>
  </head>
  <body>
     <h1>Hello, World!</h1>
     <h2>Время на сервере: {{ time }}</h2>
  </body>
</html>

На этой веб-странице будет отображаться текущее время, которое будет заполняться в шаблоне из кода Python. Модифицируем код на питоне, чтобы он мог отправить время на веб-страницу:

from flask import Flask, render_template
import datetime
app = Flask(__name__)
@app.route("/")
def hello():
  now = datetime.datetime.now()
  timeString = now.strftime("%Y-%m-%d %H:%M")
  templateData = {
     'title' : 'HELLO!',
     'time': timeString
     }
  return render_template('index.html', **templateData)
if __name__ == "__main__":
  app.run(host='0.0.0.0', port=80, debug=True)

Таким образом, при вводе IP-адреса NanoPi в адресную строку браузера будет отображаться веб-страница, содержащая строку “Hello world!” и текущее время. С помощью языка разметки html и каскадной таблицы стилей css можно разметить удобный для использования интерфейс робота или умного дома, которым управляет одноплатный компьютер. Из кода Pyhton доступны библиотеки, позволяющие работать с камерой, портами gpio NanoPi и прочими функциями, следовательно, с помощью веб-сайта можно контролировать почти любой параметр устройства, которым управляет одноплатный компьютер. В следующем примере будет описан способ управления светодиодами через веб-сайт.