I-deploy ang iyong Unang Application na Listahan ng Dapat Gawin: 8 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:12

Kung ang iyong ganap na bago sa pag-coding o mayroong ilang pag-coding sa background, maaaring nagtataka ka kung saan magsisimulang matuto. Kailangan mong malaman kung paano, ano, saan mag-code at pagkatapos, sa sandaling handa na ang code, kung paano i-deploy ito para makita ng kabuuan.

Sa gayon, ang magandang balita ay hindi mahirap ang pag-coding.

Target na Madla: Ang tutorial na ito ay inilaan para sa mga nagsisimula na nais na magsimula ng isang karera sa pagbuo ng web, na may pag-unawa sa mga teknolohiya sa web sa pangkalahatan.

Oras ng Pagbuo: 90 Minuto.

Pinagkakahirapan: Madali.

Hakbang 1: Ano ang Itatayo?

Sa pagtatapos ng tutorial na ito ay:

• Lumikha ng isang simpleng Listahan sa Web na Dapat Gawin gamit ang HTML5.
• Isama ang Bootstrap sa aming app upang magdagdag ng magandang hitsura at mabilis na estilo.
• Gumamit ng JavaScript at JQuery library upang magdagdag ng ilang mga dynamic na pag-uugali sa aming application.
• I-deploy ang aming application sa cloud gamit ang Ziet / ngayon.

Sa Aksyon:

Hakbang 2: Panimula sa HTML, Bootstrap, JavaScript at JQuery

Ano ang HTML?

Ang Hyper Text Markup Language (HTML) ay maaaring isipin bilang "wika ng internet". Ang HTML ay ang pamantayang markup na wika na ginagamit upang lumikha ng mga web page. Orihinal na ito ay dinisenyo para sa pagbabahagi ng mga siyentipikong dokumento. Ang mga pag-aangkop sa HTML sa mga nakaraang taon ay ginawang angkop upang ilarawan ang maraming iba pang mga uri ng mga dokumento na maaaring ipakita bilang mga web page sa internet.

Ang kinakailangan lamang na kinakailangan upang maipakita ang isang pahina ng HTML ay isang web browser, tulad ng Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome, o Apple Safari.

Ano ang Bootstrap?

Ang Bootstrap ay ang pinakatanyag na balangkas ng HTML, CSS, at JavaScript para sa pagbuo ng tumutugon, mga unang web site sa mobile. Ang Bootstrap ay isang bukas na proyekto ng mapagkukunan na binuo ng Twitter. binubuo ito ng mga klase ng CSS na maaaring mailapat sa mga elemento upang mai-istilo ang mga ito nang tuloy-tuloy at ang JavaScript code na nagsasagawa ng karagdagang pagpapahusay.

Ano ang JavaScript?

Ang JavaScript ay isang wika ng programa na ginagamit para sa pagprogram ng panig ng kliyente sa mga web application. Ang JavaScript code ay pinamamahalaan ng browser at pinapayagan ang mga programmer ng application ng web na bumuo ng nilalaman ng web na pabago-bago, tulad ng mga sangkap na nagpapakita o itinatago nang pabago-bago, binabago ang hitsura, at napatunayan ang pag-input ng gumagamit.

Ano ang JQuery?

Ang JQuery ay mabilis, maliit, at mayaman sa tampok na library ng JavaScript, ginagawang mas madali ang mga bagay tulad ng traversal ng dokumento ng HTML, at pagmamanipula, paghawak ng kaganapan, animasyon.

Ang lahat ng kapangyarihan ng JQuery ay na-access sa pamamagitan ng JavaScript, kaya't ang pagkakaroon ng isang malakas na pag-unawa ng JavaScript, ay mahalaga para sa pag-unawa, pagbubuo, at pag-debug ng iyong code.

Para sa Higit Pang Mga Detalye:

HTML

JavaScript

JQuery

Bootstrap

Hakbang 3: Ang iyong Unang Pahina Sa HTML

STEP1: lumikha ng isang bagong folder:

mkdir simpleng-todolist

STEP2: lumikha ng bagong file sa loob ng simple-todolist folder at pangalanan ito index.html.

simpleng-todolist ng cd

pindutin ang index.html

STEP3: idagdag ang sumusunod na code sa index.html.

Listahan na Dapat Gawin

Ang Aking Listahan na Dapat Gawin

STEP4: Buksan ang index.html sa iyong browser.

Makikita mo ang Ipinapakita ang Aking Gagawin-Listahan (tingnan ang larawan sa itaas).

Hakbang 4: Pagdaragdag ng Bootstrap

Sa seksyong ito ay idaragdag namin ang suporta ng Bootstrap sa aming pahina ng index.html, upang magdagdag ng mabilis, at mahusay na istilo sa Listahan ng Listahan ng App.

Paunawa: Sa app na ito gagamitin namin ang Bootstrap 3, gagamit ka ng anumang iba pang balangkas ng CSS, tulad ng Semantic UI.

STEP1: magdagdag ng Bootstrap CSS file sa head tag:

STEP2: magdagdag ng mga file ng script ng Bootstrap at JQuery CDN sa dulo ng body tag:

STEP3: Buksan ang index.html sa iyong browser.

Binabati kita, matagumpay naming naidagdag ang suporta ng Bootstrap sa aming pahina sa ilang mga hakbang.

Hakbang 5: Kumpletuhin ang UI

Matapos naming matagumpay na maidagdag ang suporta ng Bootstrap sa aming app. Ngayon magpatuloy tayo at makipagkumpitensya sa UI (User Interface) upang hayaang magdagdag ang gumagamit ng mga bagong gawain. Ang listahan ng Gagawin ay maaaring magdagdag ng mga bagong item sa isang listahan, pati na rin alisin ang mga mayroon nang mga item.

STEP1: idagdag ang sumusunod na code sa index.html.

Magdagdag ng Bagong Gawain Magdagdag ng I-clear ang Lahat!

Listahan ng Gawain ko

STEP2: buksan ang index.html file sa iyong browser.

Hakbang 6: Pagdaragdag ng Logic sa App

Kapag nagpasok ka ng isang pangalan ng gawain at nag-click sa pindutang Magdagdag, walang nangyari sa ngayon. Ayusin natin yan.

Sa pagtatapos ng hakbang na ito, ibabago namin ang aming index.html sa isang pahina ng pabago-bago, sa gayon ay uugali ito sa pakikipag-ugnay ng gumagamit.

STEP1: lumikha ng isang bagong folder sa loob ng simpleng todolist, pangalanan itong js at isang bagong pangalan ng file na ito script.js sa loob ng folder na iyon:

mkdir js

cd js touch script.js

STEP2: i-link ang script.js sa index.html sa pamamagitan ng pagdaragdag ng sumusunod na code sa dulo ng head tag:

STEP3: idagdag ang sumusunod na code sa script.js file

$ (dokumento). handa na (() => {

mga gawain sa var = 0 $ ("# alisinAll"). itago (); / * magdagdag ng bagong task handler * / $ ("# add"). sa ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); kung (val! == "") {mga gawain + = 1; var elm = $ ("

• "); $ (" # mylist "). idugtong (elem); $ (" input "). val (" "); / * alisin ang natatanging handler ng gawain * / $ (". text-right "). sa (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); mga gawain - = 1; $ (ito).parent.remove ();}); / * ipakita ang alisin ang Lahat ng pindutan kapag mayroon kaming higit sa 3 mga gawain * / kung (mga gawain> 2) {$ ("# remveAll"). ipakita ();} / * alisinAll handler * / $ ("# alisinAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". hindi pinagana"). magkakapatid (). alisin (); mga gawain = 0; $ ("# alisinAll"). itago ();});}});});

  Tandaan: Maaari kang makakuha ng alinman sa pag-clone o pag-download ng ZIP ng code mula sa aking GitHub na lalagyan, ito ay makakatipid sa iyo mula sa pag-tap.

  git clone github.com/ahmnouira/simple-todolist

  STEP4: subukan ang code

  Buksan ang iyong browser at magpasok ng isang gawain pagkatapos ay i-click ang Magdagdag, makakakita ka ng isang bagong gawain na naidagdag sa listahan, kung magdagdag ka ng 3 mga gawain mapapansin mo na lumilitaw ang isang malinaw na Lahat ng pindutan, pinapayagan kami ng pindutan na ito na alisin ang lahat ng mga idinagdag na gawain, ikaw maaari ring alisin ang isang gawain lamang sa pagbili ng pag-click sa pindutan nito.

  Hakbang 7: (Opsyonal) I-deploy ang App

  

  Sa ngayon ay nagtayo kami ng isang simpleng listahan ng todo list, oras na upang i-deploy ito sa cloud at ibahagi ang aming trabaho sa iba pa sa buong mundo.

  Upang makamit ito gagamitin namin ang cloud platform na tinatawag na ZEIT Now.

  Ano ang ZEIT Ngayon?

  Ang ZEIt Ngayon ay isang cloud platform para sa mga static na site at Serverless Function, pinapayagan nito ang mga developer na mag-host ng mga website at serbisyo sa web na agad na naka-deploy, lahat ng ito ay may zero na pagsasaayos.

  1. I-install Ngayon CLI

  Upang ma-deploy sa ZEIT Ngayon, kakailanganin mong i-install ang Ngayon CLI.

  mahalaga: Siguraduhing naka-install ka.

  npm -v # suriin kung nag-install ang npm

  npm i-install -g ngayon @ pinakabagong # i-install ang huling bersyon ng Ngayon CLI sa buong mundo ngayon -v # chech kung naka-install ang Ngayon CLI at i-print ang bersyon na ito

  2. Pag-deploy

  Ang kailangan mo lang gawin ay lumipat sa direktoryo at pagkatapos ay i-deploy ang iyong app gamit ang isang solong utos:

  ngayon --prod # deploy ang app

  Kapag na-deploy, makakakuha ka ng isang preview URL na nakatalaga sa bawat pag-deploy upang ibahagi ang pinakabagong mga pagbabago sa ilalim ng address.

  aking app:

  Hakbang 8: Konklusyon

  Iyon lang ang mayroon dito!

  Huwag mag-atubiling galugarin ang code sa pamamagitan ng pagtatakda ng mga bagong tampok at palawakin ang app, at ibahagi ang iyong karanasan at mga katanungan sa lugar ng komento.

  Upang makita ang higit pa sa aking mga gawa mangyaring bisitahin ang aking bukas na mapagkukunan sa GitHub.

  myYouTube.

  myLinkedIn

  Salamat sa pagkakaroon ng oras upang mabasa ang aking itinuturo ^^.

  Magandang araw.

  Ahmed Nouira