Бірінші әрекеттер тізімінің қосымшасын орналастырыңыз: 8 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:24

Егер сізде кодтау мүлде жаңадан болса немесе фондық кодтау болса, онда сіз оқуды қайдан бастау керектігін ойлайтын шығарсыз. Сіз қалай, нені, қайда кодтау керектігін білуіңіз керек, содан кейін код дайын болғаннан кейін оны қалай көруге болатынын қалай орналастыру керектігін білуіңіз керек.

Жақсы жаңалық - кодтау қиын емес.

Мақсатты аудитория: Бұл оқулық веб -дамуда мансапты бастағысы келетіндерге, жалпы веб -технологиялар туралы түсінігі барларға арналған.

Құрылыс уақыты: 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 қарапайым-todolist

2-ҚАДАМ: қарапайым todolist қалтасында жаңа файл жасаңыз және оны index.html деп атаңыз.

cd қарапайым-todolist

index.html түрту

ҚАДАМ 3: index.html файлына келесі кодты қосыңыз.

Тізім жасау

Менің істер тізімім

4 -ҚАДАМ: шолғышта index.html ашыңыз.

Сіз менің істер тізімімді көресіз (жоғарыдағы суретті қараңыз).

4 -қадам: Bootstrap қосу

Бұл бөлімде біз істер тізімінің қосымшасына жылдам және жақсы сәндеуді қосу үшін index.html бетіне Bootstrap қолдауын қосамыз.

Ескерту: Бұл бағдарламада біз Bootstrap 3 қолданамыз, сіз Semantic UI сияқты кез келген басқа CSS құрылымын қолданасыз.

ҚАДАМ1: Bootstrap CSS файлын бас тегіне қосыңыз:

ҚАДАМ2: негізгі тегтің соңына Bootstrap және JQuery CDN сценарийлерінің файлдарын қосыңыз:

3 -ҚАДАМ: шолғышта index.html ашыңыз.

Құттықтаймыз, біз бірнеше қадаммен Bootstrap қолдауын өз бетімізге сәтті қосамыз.

5 -қадам: UI толтырыңыз

Біз Bootstrap қолдауын қосымшамызға сәтті қосқаннан кейін. Енді қолданушыға жаңа тапсырмалар қосуға мүмкіндік беру үшін интерфейс интерфейсімен жарысайық. Істер тізімі тізімге жаңа элементтерді қоса алады, сонымен қатар бар элементтерді жоя алады.

ҚАДАМ1: index.html файлына келесі кодты қосыңыз.

Жаңа тапсырма қосу Барлығын өшіруді қосу!

Менің тапсырмалар тізімім

2 -ҚАДАМ: шолғышта index.html файлын ашыңыз.

6 -қадам: логиканы қолданбаға қосу

Тапсырма атын енгізіп, Қосу түймесін басқанда, қазіргі уақытта ештеңе болмайды. Мұны жөндейік.

Бұл қадамның соңында біз index.html файлын динамикалық бетке айналдырамыз, сондықтан ол пайдаланушылардың өзара әрекеттесуіне әсер етеді.

ҚАДАМ1: қарапайым-todolist ішінде жаңа қалта жасаңыз, оны js деп атаңыз және осы файлдың ішіндегі script.js жаңа файл атауын беріңіз:

mkdir js

cd js touch script.js

2 -ҚАДАМ: script.js файлын index.html файлына сілтеме жасау үшін келесі кодты сілтеме арқылы қосыңыз:

3 -ҚАДАМ: келесі кодты script.js файлына қосыңыз

$ (құжат).ready (() => {

var task = 0 $ («#removeAll»). hide (); / * жаңа тапсырма өңдегішті қосу */ $ («#қосу»). on («басу», (оқиға) => {event.preventDefault (); event.stopPropagation (); var val = $ («енгізу»). val (); if (val! == «») {міндеттер += 1; var elm = $ («

• $) clikc «, функция (оқиға) {event.preventDefault (); event.stopPropagation (); тапсырмалар -= 1; $ (бұл).parent.remove ();}); /* бізде 3 -тен көп болған кезде removeAll батырмасын көрсету тапсырмалар */ if (міндеттер> 2) {$ («#remveAll»). show ();}/ *removeAll өңдегіші */ $ («#removeAll»). on («басу», оқиға => {event.preventDefault (); event.stopPropagation (); $ («. ажыратылған»). бауырлар (). алып тастау (); тапсырмалар = 0; $ («#removeAll»). жасыру ();});}});});

  Ескерту: Сіз GitHub репозиторийінен кодтың ZIP кодын жүктей аласыз немесе жүктей аласыз, бұл сізді түртуден сақтайды.

  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 # chech, егер Now CLI орнатылса және оның нұсқасын басып шығарыңыз

  2. Орналастыру

  Сізге тек каталогқа көшу керек, содан кейін қосымшаны бір пәрменмен орналастыру керек:

  now --prod # қосымшаны орналастыру

  Орналастырылғаннан кейін сіз мекен -жай бойынша соңғы өзгерістерді бөлісу үшін әр орналастыруда тағайындалған алдын ала қарау URL мекенжайын аласыз.

  менің қосымшам:

  8 -қадам: Қорытынды

  Бар болғаны осы!

  Жаңа мүмкіндіктерді орнату және қосымшаны кеңейту арқылы кодты зерттеп, түсініктеме аймағында өз тәжірибеңізбен және сұрақтарыңызбен бөлісіңіз.

  Менің туындыларым туралы көбірек білу үшін GitHub ашық көзіне кіріңіз.

  myYouTube.

  myLinkedIn

  Менің нұсқаулықты оқуға уақыт бөлгеніңіз үшін рахмет ^^.

  Бүгінгі күніңіз жақсы өтсін.

  Ахмед Нуира