Разверните свое первое приложение со списком дел: 8 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:50

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

Что ж, хорошая новость в том, что кодировать несложно.

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

Время сборки: 90 минут.

Сложность: Легко.

Шаг 1. Что мы построим?

К концу этого урока мы:

• Создайте простое веб-приложение со списком дел с помощью HTML5.
• Интегрируйте Bootstrap с нашим приложением, чтобы добавить красивый и быстрый стиль.
• Используйте библиотеку JavaScript и JQuery, чтобы добавить динамическое поведение в наше приложение.
• Разверните наше приложение в облаке с помощью Ziet / now.

В действии:

Шаг 2: Введение в HTML, Bootstrap, JavaScript и JQuery

Что такое HTML?

Язык гипертекстовой разметки (HTML) можно рассматривать как «язык Интернета». HTML - это стандартный язык разметки, который используется для создания веб-страниц. Изначально он был разработан для обмена научными документами. Адаптация к HTML на протяжении многих лет сделала его подходящим для описания нескольких других типов документов, которые могут отображаться в виде веб-страниц в Интернете.

Единственное требование, которое требуется для отображения HTML-страницы, - это наличие веб-браузера, такого как Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome или Apple Safari.

Что такое Bootstrap?

Bootstrap - это самый популярный фреймворк HTML, CSS и JavaScript для создания адаптивных мобильных веб-сайтов. Bootstrap - это проект с открытым исходным кодом, разработанный Twitter. он состоит из классов CSS, которые можно применять к элементам для согласования их стиля, и кода JavaScript, который выполняет дополнительные улучшения.

Что такое JavaScript?

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

Что такое JQuery?

JQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, которая значительно упрощает такие вещи, как обход документа HTML, манипуляции, обработка событий и анимация.

Доступ ко всем возможностям JQuery осуществляется через JavaScript, поэтому хорошее владение JavaScript необходимо для понимания, структурирования и отладки вашего кода.

Больше подробностей:

HTML

JavaScript

JQuery

Бутстрап

Шаг 3. Ваша первая страница с HTML

ШАГ1: создайте новую папку:

mkdir простой todolist

ШАГ 2: создайте новый файл в папке simple-todolist и назовите его index.html.

cd simple-todolist

сенсорный index.html

ШАГ 3: добавьте следующий код в index.html.

Список дел

Мой список дел

ШАГ 4: Откройте index.html в своем браузере.

Вы увидите, что отображается «Мой список дел» (см. Фото выше).

Шаг 4: Добавление Bootstrap

В этом разделе мы добавим поддержку Bootstrap на нашу страницу index.html, чтобы быстро и качественно добавить стиль в приложение To-Do List.

Примечание: в этом приложении мы будем использовать Bootstrap 3, вы используете любую другую структуру CSS, например Semantic UI.

ШАГ1: добавьте файл CSS Bootstrap в тег заголовка:

ШАГ 2: добавьте файлы сценариев Bootstrap и JQuery CDN в конец тега body:

ШАГ 3. Откройте index.html в своем браузере.

Поздравляем, мы успешно добавили поддержку Bootstrap на нашу страницу за несколько шагов.

Шаг 5. Заполните пользовательский интерфейс

После того, как мы успешно добавим поддержку Bootstrap в наше приложение. Теперь давайте перейдем к пользовательскому интерфейсу (пользовательскому интерфейсу), чтобы позволить пользователю добавлять новые задачи. Список дел сможет добавлять новые элементы в список, а также удалять существующие.

ШАГ1: добавьте следующий код в index.html.

Добавить новую задачу Добавить Очистить все!

Мой список задач

ШАГ 2: откройте файл index.html в своем браузере.

Шаг 6: Добавление логики в приложение

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

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

ШАГ1: создайте новую папку внутри simple-todolist, назовите ее js и дайте имя новому файлу script.js внутри этой папки:

mkdir js

cd js touch script.js

ШАГ 2: свяжите script.js с index.html, добавив следующий код в конце тега head:

ШАГ 3: добавьте следующий код в файл script.js

$ (документ).ready (() => {

var tasks = 0 $ ("# removeAll"). hide (); / * добавляем новый обработчик задачи * / $ ("# add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {задачи + = 1; var elm = $ ("

• "); $ (" # mylist "). append (elem); $ (" input "). val (" "); / * удалить уникальный обработчик задачи * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); tasks - = 1; $ (this).parent.remove ();}); / * показывать кнопку removeAll, когда у нас больше трех задачи * / if (tasks> 2) {$ ("# remveAll"). show ();} / * обработчик removeAll * / $ ("# removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("# removeAll"). hide ();});}});});

  Примечание: вы можете либо клонировать, либо загрузить ZIP-код кода из моего репозитория GitHub, это избавит вас от нажатия.

  git clone github.com/ahmnouira/simple-todolist

  ШАГ 4: проверьте код

  Откройте браузер и введите задачу, затем нажмите Добавить, вы увидите, что новая задача добавлена в список, если вы добавите 3 задачи, вы заметите, что появилась кнопка clearAll, эта кнопка позволяет нам удалить все добавленные задачи, вы также можно удалить только одну задачу купить, нажав на ее кнопку.

  Шаг 7. (Необязательно) Разверните приложение

  

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

  Для этого мы будем использовать облачную платформу под названием ZEIT Now.

  Что такое ZEIT сейчас?

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

  1. Установить сейчас CLI

  Для развертывания с помощью ZEIT Now вам необходимо установить Now CLI.

  важно: убедитесь, что у вас установлен npm.

  npm -v # проверить, установлен ли npm

  npm install -g now @ latest # установить последнюю версию Now CLI глобально сейчас -v # проверить, установлен ли Now CLI, и распечатать его версию

  2. Развернуть

  Все, что вам нужно сделать, это перейти в каталог, а затем развернуть приложение с помощью одной команды:

  now --prod # развернуть приложение

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

  мое приложение:

  Шаг 8: Заключение

  Вот и все!

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

  Чтобы увидеть больше моих работ, посетите мой открытый исходный код на GitHub.

  myYouTube.

  myLinkedIn

  Спасибо, что нашли время прочитать мою инструкцию ^^.

  Хорошего дня.

  Ахмед Нуира