- Узнайте, что такое веб-приложения и чем они отличаются от мобильных приложений
- Узнайте о различных вариантах кодирования и создания веб-приложений
- Установите необходимое программное обеспечение для создания веб-приложения
Вот задания для этого урока:
ВЕБ-ПРИЛОЖЕНИЯ
В рамках проекта "Техновация" у вас есть возможность создать мобильное приложение или веб-приложение.
Для участников, которые уже принимали участие в Technovation и ищут новую задачу, или для новых участников, которые уже имеют опыт кодирования, вы можете рассмотреть возможность создания веб-приложения для своего проекта Technovation.
Многие участники предпочтут создать мобильное приложение с помощью одного из предложенных нами конструкторов приложений, App Inventor или Thunkable. Если вы новичок в кодинге или знаете, что хотите использовать App Inventor или Thunkable для создания своего приложения, вы можете пропустить этот урок!
Создание веб-приложения подразумевает кодирование с помощью текста и является более сложным, чем кодирование с помощью блоков в App Inventor или Thunkable.
Для начала давайте рассмотрим разницу между мобильными приложениями, веб-приложениями и прогрессивными веб-приложениями.
Мобильное приложение
- программа, которая запускается на телефоне
- загрузите и установите на устройство
- можно получить доступ к функциям телефона, таким как GPS и камера
- зависит от конкретной платформы (iOS или Android)
- кодируются на определенных языках в соответствии с операционной системой
Веб-приложение
- очень похоже на мобильное приложение
- работает в интернет-браузере
- не являются родными для конкретного устройства (iOS или Android)
- обычно кодируется с помощью HTML, CSS, Javascript и Python.
- Невозможно запустить в автономном режиме
Прогрессивное веб-приложение
- особый тип веб-приложения, представляющий собой гибрид между мобильным и веб-приложением
- запускается в браузере
- также может быть установлено на мобильное устройство, как обычное мобильное приложение
- может выполняться, даже когда пользователь находится в автономном режиме
Обратите внимание, что веб-приложение отличается от веб-сайта. Веб-сайт статичен, он создается с помощью HTML и CSS. Веб-приложения динамичны и изменяются на основе пользовательского ввода и других внешних взаимодействий. Для вашего проекта "Техновация" веб-сайт неприемлем.
Мы рассмотрим несколько вариантов создания веб-приложений для начинающих.
Одно большое отличие от платформ для создания приложений, которые мы рассматриваем для мобильных приложений, заключается в том, что вы будете создавать веб-приложение, используя текстовый язык программирования, а не язык, основанный на блоках.
Существует два основных языка, которые используются для создания веб-приложений.
JAVASCRIPT
Javascript, или JSЯвляется языком сценариев. Это означает, что код выполняется во время исполнения, а не компилируется, как в мобильных приложениях. Это похоже на то, как актер выполняет свой сценарий во время спектакля каждый раз, когда он запускается.
Javascript часто сочетается с HTML и CSS для создания веб-сайтов. HTML и CSS используются для создания статичных сайтов, которые могут представлять информацию, но не меняться. Javascript добавляет интерактивность и способность сайта меняться и обновляться в зависимости от внешних факторов. А динамичный, интерактивный сайт - это, по сути, веб-приложение.
PYTHON
Python Это очень популярный язык программирования общего назначения. Python - это одновременно и язык программирования и язык сценариев, поэтому он может быть скомпилирован для запуска, но также может выполняться во время выполнения.
Он считается простым и универсальным языком, доступным для начинающих программистов. Он используется во многих различных аспектах разработки программного обеспечения. Одна из областей - веб-разработка. Другая - машинное обучение. Таким образом, Python - отличный вариант для изучения и разработки более продвинутых веб-приложений с искусственным интеллектом.
В этом учебном курсе мы сосредоточимся на создании веб-приложений с помощью Python. Чтобы легко создать веб-приложение на Python, мы будем использовать фреймворк под названием Streamlit. Streamlit позволяет создавать мощные интерактивные веб-приложения с небольшим количеством кода. Он специализируется на приложениях, связанных с данными, и позволяет легко использовать библиотеки машинного обучения Python для внедрения искусственного интеллекта в ваши приложения.
Вот некоторые основные характеристики.
- Хороший вариант для тех, кто имеет большой опыт кодирования на основе блоков и ищет новые задачи.
- Хорошо подходит для тех, кто уже занимался текстовым кодированием.
- Очень универсальный язык, используемый повсеместно
- Вам потребуется установить на компьютер программное обеспечение
- Python и связанные с ним библиотеки
- Редактор кода
- Streamlit имеет возможность запускаться в браузере, используя Github
- Мы не будем рассматривать этот вариант в данной учебной программе.
- С его помощью можно использовать искусственный интеллект
- Самый популярный язык для построения и использования моделей машинного обучения
- В этой программе мы будем использовать блокноты Jupyter для построения моделей
НАЧАЛО РАБОТЫ
Для создания веб-приложений для проекта Technovation вам понадобятся:
- компьютер или ноутбук
- Доступ в Интернет
Вам должно быть удобно пользоваться окном Terminal на Mac или Linux, а также Terminal или command prompt в Windows. Если у вас нет опыта или вы даже не знаете, что такое окно Terminal, посмотрите эти видео для начинающих, прежде чем переходить к выполнению задания.
Посмотрите соответствующий видеоролик для вашей операционной системы.
Мы рассмотрим два варианта разработки веб-приложений. Вы можете писать на своем компьютере или ноутбуке, а можете писать все в облаке. Вы можете выбрать любой вариант, но рекомендуется выбрать один вариант и придерживаться его на протяжении всего проекта Technovation. Знания о том, как использовать команды терминала, приведенные выше, пригодятся при любом варианте.
Вот несколько плюсов и минусов для каждого из них.
НА ВАШЕМ КОМПЬЮТЕРЕ
PROS:
- Файлы сохраняются на вашем компьютере
- Научитесь использовать Visual Studio Code, очень популярную IDE
- Вы узнаете много нового об использовании окна терминала, установке пакетов и т.д.
- Полный контроль и выбор используемого программного обеспечения
- Можно кодировать, не имея постоянного доступа к Интернету
CONS:
- Нелегко обмениваться файлами и кодом с командой.
- Установка пакетов может быть очень сложной, а их настройка может занять много времени
- Возможность потери файлов при сбое компьютера
В ОБЛАКЕ
PROS:
- Файлы хранятся в облаке
- Не нужно ничего устанавливать на компьютер
- Автоматическая ссылка на Github для портфолио
- Легко делиться и кодировать в команде
CONS:
- Не будет иметь опыта использования программного обеспечения на местах
- Зависимость от интернет-соединения
Выберите действие A или действие B, в зависимости от того, хотите ли вы кодировать локально на своем компьютере или в облаке.
УПРАЖНЕНИЕ A: НАЧНИТЕ РАБОТУ С PYTHON НА СВОЕМ КОМПЬЮТЕРЕ
УСТАНОВИТЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ И СОЗДАЙТЕ СТАРТОВОЕ ПРИЛОЖЕНИЕ
- Шаг 1: Установите Python. Вот хороший набор инструкций для Window, Mac или Linux.
- Шаг 2: Установите редактор кода и Streamlit. В этом видео показано, как установить Visual Studio Code, а затем установить Streamlit, чтобы запускать его из редактора кода.
- Шаг 3: Запустите очень простое веб-приложение Streamlit в среде VS Code, следуя этому видео.
- Отпразднуйте это событие, сделав скриншот вашего первого веб-приложения и отправив его вместе с заметкой на ментор!
ЗАНЯТИЕ B: НАЧНИТЕ РАБОТАТЬ С PYTHON В ОБЛАКЕ
СОЗДАВАЙТЕ АККАУНТЫ И КОДИРУЙТЕ ПРИЛОЖЕНИЯ
ОБЗОР ОСНОВНЫХ ТЕРМИНОВ
- Веб-приложение - Приложение, которое выглядит как мобильное, но запускается в интернет-браузере и создается с помощью HTML, CSS и Javascript или Python
РЕФЛЕКСИЯ
Поздравляем вас с тем, что вы попробовали кодирование на основе текста! Вот несколько вопросов для размышления, которые вы можете обсудить со своей командой и со своим ментор.
ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ
За помощью в работе с Python и Streamlit вам придется обратиться к документации и поддержке. Ниже приведены несколько хороших мест, с которых стоит начать.
- В руководстве для начинающих Python.org есть несколько хороших ссылок для изучения языка Python.
- Галерея приложений Streamlit
- Полный плейлист курса Streamlit от Nileg Production
