Tumia Maombi ya Orodha ya Kwanza ya Kufanya: Hatua 8

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:51

Ikiwa ni mpya kabisa kwenye usimbuaji au una usimbuaji wa nyuma, unaweza kujiuliza ni wapi utaanza kujifunza. Unahitaji kujifunza jinsi, nini, wapi kuweka nambari halafu, mara tu nambari iko tayari, jinsi ya kuipeleka kwa jumla kuona.

Kweli, habari njema ni kwamba kuweka coding sio ngumu.

Hadhira lengwa: Mafunzo haya yamekusudiwa kwa Kompyuta ambao wanataka kuanza taaluma katika ukuzaji wa wavuti, wana uelewa wa teknolojia za wavuti kwa ujumla.

Jenga Wakati: Dakika 90.

Ugumu: Rahisi.

Hatua ya 1: Tutajenga Nini?

Mwisho wa mafunzo haya tutafanya:

• Unda Maombi rahisi ya Wavuti ya Orodha ya Kufanya kwa kutumia HTML5.
• Jumuisha Bootstrap na programu yetu ili kuongeza urembo mzuri na mtindo wa haraka.
• Tumia maktaba ya JavaScript na JQuery kuongeza tabia fulani ya nguvu kwenye programu yetu.
• Tuma maombi yetu kwenye wingu ukitumia Ziet / sasa.

Katika Utekelezaji:

Hatua ya 2: Utangulizi wa HTML, Bootstrap, JavaScript & JQuery

HTML ni nini?

Lugha ya Markup ya Nakala ya Hyper (HTML) inaweza kuzingatiwa kama "lugha ya mtandao". HTML ni lugha ya markup ya kawaida ambayo hutumiwa kuunda kurasa za wavuti. Hapo awali iliundwa kwa kushiriki hati za kisayansi. Marekebisho kwa HTML kwa miaka ilifanya iwe sawa kuelezea aina zingine kadhaa za hati ambazo zinaweza kuonyeshwa kama kurasa za wavuti kwenye wavuti.

Mahitaji pekee ambayo inahitajika kuonyesha ukurasa wa HTML ni kivinjari, kama vile Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, au Apple Safari.

Bootstrap ni nini?

Bootstrap ni mfumo maarufu zaidi wa HTML, CSS, na JavaScript wa kujenga wavuti zinazovutia, za wavuti za kwanza. Bootstrap ni mradi wa chanzo wazi uliotengenezwa na Twitter. Inayo madarasa ya CSS ambayo yanaweza kutumiwa kwa vitu kuviweka mtindo kila wakati na msimbo wa JavaScript ambao hufanya nyongeza ya ziada.

JavaScript ni nini?

JavaScript ni lugha ya programu ambayo hutumiwa kwa programu ya upande wa mteja katika programu za wavuti. Msimbo wa JavaScript unaendeshwa na kivinjari na inaruhusu waandaaji programu za wavuti kujenga yaliyomo kwenye wavuti yenye nguvu, kama vile vifaa vinavyoonyesha au vimefichwa kwa nguvu, kubadilisha muonekano, na kuhalalisha uingizaji wa mtumiaji.

JQuery ni nini?

JQuery ni ya haraka, ndogo, na ina utajiri wa maktaba ya JavaScript, inafanya vitu kama hati ya HTML kupita, na kudanganywa, utunzaji wa hafla, uhuishaji rahisi sana.

Nguvu zote za JQuery zinapatikana kupitia JavaScript, kwa hivyo kuwa na ufahamu mkali wa JavaScript, ni muhimu kwa uelewa, muundo, na utatuzi wa nambari yako.

Kwa Maelezo Zaidi:

HTML

JavaScript

JQuery

Kamba ya Boot

Hatua ya 3: Ukurasa wako wa kwanza na HTML

STEP1: unda folda mpya:

mkdir rahisi-todolist

STEP2: tengeneza faili mpya ndani ya folda rahisi ya todolist na uipe jina index.html.

cd rahisi-todolist

gusa index.html

STEP3: ongeza nambari ifuatayo kwa index.html.

Orodha ya Kufanya

Orodha Yangu ya Kufanya

STEP4: Fungua index.html kwenye kivinjari chako.

Utaona Orodha Yangu ya Kufanya-Inaonyeshwa (tazama picha hapo juu).

Hatua ya 4: Kuongeza Bootstrap

Katika sehemu hii tutaongeza msaada wa Bootstrap kwenye ukurasa wetu wa index.html, ili kuongeza haraka, na mtindo mzuri kwenye Programu ya Orodha ya Kufanya.

Kumbuka: Katika programu hii tutatumia Bootstrap 3, unatumia mfumo wowote wa CSS, kama Semantic UI.

STEP1: ongeza faili ya Bootstrap CSS kwenye lebo ya kichwa:

STEP2: ongeza faili za hati za Bootstrap na JQuery CDN mwishoni mwa lebo ya mwili:

STEP3: Fungua index.html kwenye kivinjari chako.

Hongera, tumefanikiwa kuongeza msaada wa Bootstrap kwenye ukurasa wetu kwa hatua chache.

Hatua ya 5: Kamilisha UI

Baada ya kufanikiwa kuongeza msaada wa Bootstrap kwenye programu yetu. Sasa wacha tuendelee na kushindana na UI (Kiolesura cha Mtumiaji) kumruhusu mtumiaji aongeze kazi mpya. Orodha ya Kufanya itaweza kuongeza vitu vipya kwenye orodha, na pia kuondoa vitu vilivyopo.

STEP1: ongeza nambari ifuatayo kwa index.html.

Ongeza Kazi Mpya Ongeza Wazi Wote!

Orodha yangu ya Kazi

STEP2: fungua faili ya index.html kwenye kivinjari chako.

Hatua ya 6: Kuongeza Mantiki kwenye App

Unapoingiza jina la kazi na bonyeza kitufe cha Ongeza, hakuna kinachotokea kwa sasa. Wacha turekebishe hilo.

Mwisho wa hatua hii tutageuza index.html yetu kuwa ukurasa wenye nguvu, kwa hivyo itakuwa na mwingiliano wa mtumiaji.

STEP1: unda folda mpya ndani ya rahisi-todolist, iipe jina js na jina jipya la jina ni script.js ndani ya folda hiyo:

mkdir js

cd js gusa script

STEP2: unganisha script.js na index.html kwa kuongeza nambari ifuatayo mwishoni mwa lebo ya kichwa:

STEP3: ongeza nambari ifuatayo kwenye faili ya script.js

$ (hati) tayari (() => {

kazi za var = 0 $ ("# OndoaZote"). ficha (); / * ongeza mshughulikiaji mpya wa kazi * / $ ("# add"). kwenye ("bonyeza", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); ikiwa (val! == "") {majukumu + = 1; var elm = $ ("

• "()" orodha ("# orodha"). append (elem); clikc ", kazi (tukio) {event.preventDefault (); event.stopPropagation (); majukumu - = 1; $ (this).parent.remove ();}); majukumu * / ikiwa (kazi> 2) {$ ("# remveAll"). onyesha ();} / * kuondoaVishughulikia vyote * / $ ("# removeAll"). kwenye ("bonyeza", event => {event.preventDefault.;

  Kumbuka: Unaweza kupata clone au kupakua ZIP ya nambari kutoka kwa hazina yangu ya GitHub, hii inakuokoa kutokana na kugonga.

  clone ya git github.com/ahmnouira/simple-todolist

  STEP4: jaribu nambari

  Fungua kivinjari chako na uandike kazi kisha bonyeza Ongeza, utaona kazi mpya imeongezwa kwenye orodha, ukiongeza kazi 3 utaona kuwa kitufe wazi kabisa kimeonekana, kitufe hiki kinaturuhusu kuondoa kazi zote zilizoongezwa, wewe pia inaweza kuondoa kazi moja tu kununua kubonyeza kitufe chake.

  Hatua ya 7: (Hiari) Tumia App

  

  Hadi sasa tumeunda programu rahisi ya orodha, sasa ni wakati wa kuipeleka kwenye wingu na kushiriki kazi yetu na wengine ulimwenguni kote.

  Ili kufanikisha hili tutatumia jukwaa la wingu liitwalo ZEIT Sasa.

  ZEIT ni nini sasa?

  ZEIt Sasa ni jukwaa la wingu la tovuti za tuli na Kazi zisizo na Seva, inawawezesha watengenezaji kuwa mwenyeji wa wavuti na huduma za wavuti ambazo hutumia mara moja, yote haya na usanidi wa sifuri.

  1. Sakinisha Sasa CLI

  Kupeleka na ZEIT Sasa, utahitaji kusakinisha Sasa CLI.

  muhimu: Hakikisha umeweka npm.

  npm -v # angalia ikiwa npm imewekwa

  npm install -g now @ karibuni # sakinisha toleo la mwisho la Sasa CLI ulimwenguni sasa -v # chech ikiwa CLI ya Sasa imewekwa na ichapishe toleo

  2. Tumia

  Unachohitaji kufanya ni kuhamia kwenye saraka na kisha upeleke programu yako kwa amri moja:

  sasa - prod # tumia programu

  Ukishapelekwa, utapata URL ya hakikisho ambayo imepewa kila kupelekwa ili kushiriki mabadiliko ya hivi karibuni chini ya anwani.

  programu yangu:

  Hatua ya 8: Hitimisho

  Hiyo ni yote kuna hiyo!

  Jisikie huru kuchunguza nambari kwa kuweka huduma mpya na kupanua programu, na ushiriki uzoefu wako na maswali katika eneo la maoni.

  Ili kuona zaidi kazi zangu tafadhali tembelea chanzo changu wazi kwenye GitHub.

  myYouTube.

  myLinkedIn

  Asante kwa kuwa na wakati wa kusoma ^ ^ yangu inayoweza kufundishwa.

  Siku njema.

  Ahmed Nouira