Первые шаги в программировании - создание базового веб-сайта

Другая философия

Представьте, что вы начинаете изучать французский язык. Вы начнете с того, что выучите последовательность слов, которая дает вам смысл. «Комментарий ça va?» означает «Как дела?». Я не видел, чтобы учитель объяснял вам значение каждого слова 1-го, а затем учил вас этой фразе. Или, что еще хуже, забросать вас 50 случайными словами без инструкций по их соединению. Иногда вначале нужно просто знать последовательность слов и то, что они передают, а не каждую деталь. Тем не менее, многие учебники по программированию используют противоположный подход. На мой взгляд, это заставляет довольно много любопытных бросить мир программирования из-за этого скучного способа обучения, в котором нет необходимости.

Изучение языка - это гораздо больше, чем знание доступных вам слов. Речь идет о том, чтобы соединить все вместе.

Поэтому в этом уроке я немного изменю его. Сначала я попытаюсь показать вам то, что работает, а затем объясню наиболее важные части. Действие 1-е, теория позже. Более сложные темы будут объяснены в следующих главах. Таким образом вы действительно узнаете, почему вы что-то изучаете, и сконцентрируетесь на цели.

Итак, давайте изучим программирование, создав веб-сайт, который покажем своим друзьям!

Расходы

0 $. Используемый хостинг бесплатный, и все используемые технологии бесплатны.

Это бесполезная информация?

Используемые технологии соответствуют отраслевым стандартам, поэтому вы можете быть уверены, что тысячи рабочих мест ищут то, что здесь используется. Вы также можете использовать его для размещения веб-сайтов с миллионами пользователей. По сути, вы не будете тратить время попусту после того, как закончите с этим, так как оно хорошо переносится в реальный мир.

Однако вы не получите работу, прочитав пару статей, но это руководство действительно является хорошей отправной точкой.

Установка вещей

Пожалуйста, следуйте приведенному ниже порядку.

Python

Python - это язык программирования, который мы будем использовать. Это третий по популярности язык в мире, второй по популярности среди разработчиков и самый быстрорастущий язык программирования.

1- Перейдите на python.org/downloads/

2- Нажмите «Загрузить Python 3.8.2».

3- Дважды щелкните установщик

4- На 1-м экране установите флажок «Добавить Python 3.8 в ПУТЬ».

5- Нажмите «Установить сейчас».

Чтобы убедиться, что он установлен правильно, откройте командную строку (найдите в Windows «команда», и она должна появиться) и введите

python

Он должен вывести что-то вроде

Python 3.8.2
Type "help", "copyright", "credits" or "license" for more information.
>>>

Колба

Просто запустите «pip install flask» из командной строки.

Sublime Text (необязательно)

Это текстовый редактор, которым я пользуюсь. Вы можете использовать свой собственный (пожалуйста, не используйте Блокнот, вы пожалеете об этом), но я настоятельно рекомендую использовать этот. Он имеет приятные цвета, которые выделяют различные элементы, связанные с программированием, что упрощает понимание того, что вы делаете.

1- Загрузите его с sublimetext.com и просто запустите установщик.

Давайте начнем

Создайте папку, в которой вы хотите сохранить свой проект. С этого момента я буду называть эту папку «папкой проекта».

Откройте Sublime text. Затем перетащите папку в Sublime Text. Щелкните Файл ›Новый файл, затем Файл› Сохраните его с именем website.py и сохраните его в папке проекта.

Давай просто покажем тебе что-нибудь классное!

Обратите внимание, насколько все это легко читается. Вы, наверное, знаете, что будет дальше!

Поместите это на website.py. Python использует отступы как способ группировки строк кода, поэтому он должен быть точно таким, как показано ниже.

from flask import Flask
website= Flask("My website")
@website.route("/my-first-website")
def homepage():
    return "This is my 1st website! Urray!"
website.run()

Откройте командную строку и выполните следующее. Когда я использую ‹›, это означает, что вам нужно будет вставить туда конкретную информацию, запрошенную в тексте.

cd <path to project folder>
python website.py

В моем случае мне пришлось бежать

cd C:\dev\tutorial
python website.py

Он должен напечатать около 7 строк, которые выглядят следующим образом

* Serving Flask app "My website" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Теперь все, что вам нужно сделать, это вставить http://127.0.0.1:5000/my-first-website в ваш браузер, и вы должны увидеть сообщение, которое мы определили выше.

Что, черт возьми, я только что сделал?

Импорт

from flask import Flask
Hey python! I know there's something (a class) called "Flask" inside the "flask" thingy (a package) that I installed before. I want to use that in my code!

Помните, когда вы запускали «pip install flask»? Вы установили что-то, называемое «пакетом». Судя по названию, он объединяет кучу разных вещей (например, функций) под одним легко запоминающимся именем. Вы просто выбираете одну из множества вещей, доступных в этом пакете.

В нашем случае команда действительно хороших программистов разрабатывала это программное обеспечение под названием «flask», которое помогает вам очень быстро создавать веб-сайты (как вы только что видели). И внутри этого пакета они сделали доступным нечто, называемое «классом», и назвали его «Flask» (они используют его с большой буквы, чтобы другие программисты знали, что это класс). Знать, что такое класс прямо сейчас, не так уж важно.

Что вам нужно знать, так это то, что когда вы что-то устанавливаете и хотите использовать это в своем файле python, вы должны написать

from <package> import <something>

Использование переменных

А теперь сделаем шаг назад. Позвольте познакомить вас с переменными.

Представьте, что вы пишете электронное письмо более чем 100 людям. Вы, вероятно, создадите группу со всеми этими людьми, а затем будете использовать группу в разделе «Кому:» электронного письма. Вы предполагаете, что когда вы пишете там название группы, электронная почта знает, о каких людях идет речь. В следующий раз, когда вы захотите отправить этой группе электронное письмо, просто укажите название группы в разделе «Кому:», и оно попадет в почтовый ящик тех же людей.

Это концепция переменных. Чтобы сообщить компьютеру, что, когда он видит какое-то имя, вы имеете в виду что-то, что вы определили ранее. И их можно использовать бесконечное количество раз.

Переменные:

1- Держите ссылку на что-то, что вы определили ранее, например, число

2- Их можно использовать несколько раз

Чтобы определить переменную, все, что вам нужно сделать, это ввести:

some_var = 123

Почему у некоторых вещей есть цитаты?

Представьте, что вы хотите сообщить компьютеру, что какая-то переменная ссылается на какой-то текст, например «Привет!». Как бы Вы это сделали?

some_var = Hello!
Wrong!

Компьютер думает: «Привет!» part - это переменная, и она попытается найти в вашем коде то, что она означает. Если вы хотите сказать, что это настоящий текст, просто заключите его в кавычки. Это называется строкой.

some_var = "Hello!"
Right!

Переменные могут быть разными. Как удивительно! Вы можете изменить то, к чему это относится, вот так:

some_var = "Hello!"
<Do some stuff>
some_var = "Goodbye!"
<Do some stuff that requires some_var to be equal to Goodbye!>

Использование чужого тяжелого труда

website= Flask("My website")
From now on when you see website in my code, I am referring to the Flask app called "My website"

Надеюсь, после объяснения переменных выше вы знаете, что я создаю переменную для использования в будущем.

Что касается того, почему я создаю переменную, это просто потому, что разработчики Flask определили, что вы должны назначить переменную их классу и выполнять все операции (например, создание страниц на вашем веб-сайте) с этой переменной.

Создание страниц

Теперь, если вы хотите добавить URL-адрес на свой веб-сайт, вы должны следовать синтаксису

@website.route("/my-first-website")
There will be a route /my-first-website in my website now

«/ My-first-website» называется относительным URL. Он автоматически получит имя хоста (например, google.com) и добавит к нему «/ my-first-website».

Это полезно, потому что прямо сейчас мы запускаем веб-сайт на нашем компьютере, но когда мы разместим его в сети, он будет иметь традиционное имя, и в этом случае нам не придется изменять наш код.

Чтобы Flask знал, что должна делать эта страница при доступе пользователя, вы должны написать следующее прямо под @ website.route

def homepage():
  return "This is my 1st website! Urray!"

Но что это?

Функции

Если вы помните класс Math, функция в основном принимает какой-то ввод, преобразует его и что-то выводит. Однако он также может не иметь ввода, не иметь преобразований и ничего не выводить.

Чтобы определить функцию в Python, вы используете следующий синтаксис

def function_name(input1, input2, ...):
    <do something>
    return <something>

def означает «определять». «Input1, input2,…», «‹ do something ›» и «return» необязательны.

Здесь вы определяете функцию, а не выполняете ее. Если вы хотите его выполнить, сделайте следующее:

function_name(input1, input2, ...)

Пример

def sum_five(number):    ]=I
    sum = number + 5       I     Define what the function does
    return sum           ]=I
some_var = sum_five(5)
               ^
           Execute the function with input 5

Компьютер выполнит функцию и вернет 10, которое будет присвоено some_var

Вернуться на наш сайт

Зачем нам нужна функция? Опять же, это, по сути, способ, которым ребята из Flask должны знать, какую обработку должен выполнять этот конкретный маршрут (механизм передачи функции во Flask будет объяснен позже). Функция + строка над ней гарантирует, что функция, которая будет выполнять некоторую обработку, будет выполняться, когда пользователь обращается к определенному URL-адресу. Выполнение функции выполняется Flask, вам просто нужно определить функцию.

Запустить сайт

website.run()

Если вы обратили внимание, то знаете, что мы выполняем функцию с помощью run (). Также вы знаете, что сайт относится к классу (не совсем правильно, но пока этого достаточно). Значок "." тоже имеет значение.

Вы, наверное, спрашиваете:

«Есть ли связь между классами и функциями?»

Они есть, но это будет объяснено в другой главе, когда мы будем говорить о классах. А пока просто воспринимайте это как команду для запуска сервера на вашем компьютере.

Вывод

В 1-й части этого урока вы узнали, как запустить самый простой веб-сайт, который только можно представить. Как бы просто это ни было, вы всего в нескольких шагах от того, чтобы открыть его для своих друзей в Интернете. На самом деле это не так уж и сложно, не так ли? Но прежде чем мы выложим его в Интернет, мы создадим что-то более интерактивное!

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