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

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

Ако сте съвсем нов за кодиране или имате някакво кодиране на фона, може да се чудите откъде да започнете да учите. Трябва да научите как, какво, къде да кодирате и след това, след като кодът е готов, как да го разгърнете, за да го види целият.

Е, добрата новина е, че кодирането не е трудно.

Целева аудитория: Този урок е предназначен за начинаещи, които искат да започнат кариера в уеб разработката, имат разбиране за уеб технологиите като цяло.

Време за изграждане: 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

Bootstrap

Стъпка 3: Първата ви страница с HTML

СТЪПКА 1: създайте нова папка:

mkdir прост-тодолист

СТЪПКА 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 рамка, като семантичен потребителски интерфейс.

СТЪПКА 1: добавете Bootstrap CSS файл в тага head:

СТЪПКА 2: добавете Bootstrap и JQuery CDN скриптове файлове в края на body tag:

СТЪПКА 3: Отворете index.html в браузъра си.

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

Стъпка 5: Попълнете потребителския интерфейс

След като успешно добавихме поддръжка на Bootstrap към нашето приложение. Сега нека продължим и да се състезаваме с потребителския интерфейс (потребителски интерфейс), за да позволим на потребителя да добавя нови задачи. Списъкът със задачи ще може да добавя нови елементи към списък, както и да премахва съществуващи елементи.

СТЪПКА 1: добавете следния код към index.html.

Добавяне на нова задача Добавяне Изчистване на всички!

Моят списък със задачи

СТЪПКА 2: отворете файла index.html във вашия браузър.

Стъпка 6: Добавяне на логика към приложението

Когато въведете име на задача и кликнете върху бутона Добавяне, нищо не се случва в момента. Нека поправим това.

До края на тази стъпка ще превърнем index.html в динамична страница, така че тя ще се държи при взаимодействие с потребителя.

СТЪПКА 1: създайте нова папка в simple-todolist, назовете я js и ново име на файла it.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 ", функция (събитие) {event.preventDefault (); event.stopPropagation (); задачи -= 1; $ (this).parent.remove ();}); /* покажете бутона RemoveAll, когато имаме повече от 3 задачи */ if (задачи> 2) {$ ("#remveAll"). show ();}/ *removeAll манипулатор */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("#removeAll"). hide ();});}});});

  Забележка: Можете да получите клониране или да изтеглите пощенския код на кода от моето хранилище на GitHub, това ще ви спести от докосване.

  git клонинг 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 в световен мащаб now -v # chech, ако CLI Now е инсталиран и го отпечатайте

  2. Разгърнете

  Всичко, което трябва да направите, е да се преместите в директорията и след това да разгърнете приложението си с една команда:

  сега --prod # разгърнете приложението

  След като бъде разгърнат, ще получите URL адрес за визуализация, който е присвоен за всяко внедряване, за да споделите най -новите промени под адреса.

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

  Стъпка 8: Заключение

  Това е всичко!

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

  За да видите повече мои произведения, моля, посетете моя отворен код в GitHub.

  myYouTube.

  myLinkedIn

  Благодаря, че отделихте време да прочетете инструкциите ми ^^.

  Приятен ден.

  Ахмед Нуира