Ontplooi u eerste taaklyslys-toepassing: 8 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25

As u heeltemal nuut is in kodering of agtergrondkodering het, wonder u miskien waar om te begin leer. U moet leer hoe, wat, waar om te kodeer en dan, sodra die kode gereed is, hoe om dit te implementeer sodat die hele dit kan sien.

Die goeie nuus is dat kodering nie moeilik is nie.

Doelgehoor: Hierdie tutoriaal is bedoel vir beginners wat 'n loopbaan in webontwikkeling wil begin, 'n begrip van webtegnologieë in die algemeen wil hê.

Bou tyd: 90 minute.

Moeilikheidsgraad: maklik.

Stap 1: Wat sal ons bou?

Aan die einde van hierdie tutoriaal sal ons:

• Skep 'n eenvoudige taaklyslys-toepassing met HTML5.
• Integreer Bootstrap met ons app om 'n mooi en vinnige styl by te voeg.
• Gebruik JavaScript en JQuery -biblioteek om dinamiese gedrag by ons toepassing te voeg.
• Implementeer ons toepassing in die wolk met behulp van Ziet/now.

In aksie:

Stap 2: Inleiding tot HTML, Bootstrap, JavaScript en JQuery

Wat is HTML?

Hyper Text Markup Language (HTML) kan beskou word as "die taal van die internet". HTML is die standaard opmaaktaal wat gebruik word om webblaaie te skep. Dit is oorspronklik ontwerp om wetenskaplike dokumente te deel. Aanpassings aan HTML oor die jare het dit geskik gemaak om verskeie ander soorte dokumente te beskryf wat as webbladsye op die internet vertoon kan word.

Die enigste vereiste wat nodig is om 'n HTML -bladsy te vertoon, is 'n webblaaier, soos Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome of Apple Safari.

Wat is Bootstrap?

Bootstrap is die gewildste HTML-, CSS- en JavaScript -raamwerk vir die bou van responsiewe, mobiele eerste webwerwe. Bootstrap is 'n open source -projek wat deur Twitter ontwikkel is. dit bestaan uit CSS -klasse wat op elemente toegepas kan word om dit konsekwent te styl, en JavaScript -kode wat ekstra verbetering verrig.

Wat is JavaScript?

JavaScript is 'n programmeertaal wat gebruik word vir die programmering aan die kant van die kliënt in webtoepassings. JavaScript -kode word deur die blaaier bestuur en laat programmeerders van webtoepassings toe om dinamiese webinhoud te bou, soos komponente wat dinamies wys of versteek is, voorkoms verander en gebruikersinvoer bekragtig word.

Wat is JQuery?

JQuery is 'n vinnige, klein en funksie-ryk JavaScript-biblioteek, dit maak dinge soos die deurkruising van HTML-dokumente en manipulasie, gebeurtenishantering en animasie baie eenvoudiger.

U kry toegang tot al die krag van JQuery via JavaScript, dus om 'n goeie begrip van JavaScript te hê, is noodsaaklik om u kode te verstaan, te struktureer en te ontfout.

Vir meer besonderhede:

HTML

JavaScript

JQuery

Bootstrap

Stap 3: u eerste bladsy met HTML

STAP1: skep 'n nuwe gids:

mkdir simple-todolist

STAP2: skep 'n nuwe lêer in die gids vir eenvoudige todoliste en noem dit index.html.

cd simple-todolist

raak index.html

STAP3: voeg die volgende kode by index.html.

To-Do-List

My taaklys

STAP4: Maak die index.html in u blaaier oop.

U sal sien dat my taaklys vertoon word (sien die foto hierbo).

Stap 4: Voeg Bootstrap by

In hierdie afdeling sal ons Bootstrap-ondersteuning by ons index.html-bladsy voeg om 'n vinnige en goeie styl by die taaklyslys-app te voeg.

Let op: in hierdie app gebruik ons Bootstrap 3; u gebruik enige ander CSS -raamwerk, soos Semantic UI.

STAP1: voeg Bootstrap CSS -lêer by in die kopmerker:

STAP2: voeg Bootstrap en JQuery CDN scripts lêers by aan die einde van die body tag:

STAP3: Maak index.html oop in u blaaier.

Baie geluk, ons het Bootstrap -ondersteuning in enkele stappe suksesvol by ons bladsy gevoeg.

Stap 5: Voltooi die UI

Nadat ons Bootstrap -ondersteuning suksesvol by ons app gevoeg het. Kom ons gaan voort met die UI (gebruikersinterface) om die gebruiker nuwe take by te voeg. Die taaklys sal nuwe items by 'n lys kan voeg, sowel as bestaande items kan verwyder.

STAP1: voeg die volgende kode by index.html.

Voeg nuwe taak by Voeg Alles skoon!

My taaklys

STAP2: maak die index.html -lêer in u blaaier oop.

Stap 6: Voeg die logika by die app

As u 'n taaknaam invoer en op die Add -knoppie klik, gebeur daar tans niks. Kom ons maak dit reg.

Aan die einde van hierdie stap verander ons ons index.html na 'n dinamiese bladsy, sodat dit sal optree na gebruikersinteraksie.

STAP1: skep 'n nuwe gids in simple-todolist, noem dit js en 'n nuwe lêernaam script.js in die gids:

mkdir js

cd js raak script.js aan

STAP2: koppel die script.js aan die index.html deur die volgende kode aan die einde van die kopmerker by te voeg:

STAP3: voeg die volgende kode by die script.js -lêer

$ (dokument).ready (() => {

var taken = 0 $ ("#removeAll"). hide (); / * voeg nuwe taakhanteerder */ $ ("#add") by. op ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); as (val! == "") {take += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * verwyder unieke taakhanteerder * / $ (". text-right "). on (" klik ", funksie (gebeurtenis) {event.preventDefault (); event.stopPropagation (); take -= 1; $ (hierdie).parent.remove ();}); /* wys removeAll -knoppie as ons meer as 3 het take */ as (take> 2) {$ ("#remveAll"). show ();}/ *removeAll hanteerder */ $ ("#removeAll"). op ("klik", event => {event.preventDefault (); event.stopPropagation (); $ (". gedeaktiveer"). broers en susters (). remove (); taken = 0; $ ("#removeAll"). verberg ();});}});});

  Opmerking: u kan 'n kloon kry of die zip -kode van die kode aflaai van my GitHub -bewaarplek, dit kan u verhinder om te tik.

  git-kloon github.com/ahmnouira/simple-todolist

  STAP4: toets die kode

  Maak u blaaier oop en voer 'n taak in, klik dan op Voeg, u sal sien dat 'n nuwe taak by die lys gevoeg word, as u 3 take byvoeg, sal u sien dat 'n duidelike knoppie verskyn, met hierdie knoppie kan ons al die bygevoegde take verwyder, u kan ook slegs een taak koop verwyder deur op die knoppie te klik.

  Stap 7: (opsioneel) Implementeer die app

  

  Tot dusver het ons 'n eenvoudige todo list -app gebou, dit is nou tyd om dit in die wolk te implementeer en ons werk met ander oor die hele wêreld te deel.

  Om dit te bereik, gebruik ons 'n wolkplatform genaamd ZEIT Now.

  Wat is ZEIT Now?

  ZEIt Now is 'n wolkplatform vir statiese webwerwe en bedienerlose funksies; dit stel ontwikkelaars in staat om webwerwe en webdienste wat onmiddellik ontplooi, te huisves, dit alles sonder konfigurasie.

  1. Installeer nou CLI

  Om met ZEIT Now te implementeer, moet u Now CLI installeer.

  belangrik: Maak seker dat npm geïnstalleer is.

  npm -v # kyk of die npm geïnstalleer is

  npm installeer -g nou@nuutste # installeer die laaste weergawe van Now CLI wêreldwyd nou -v # chech as die Now CLI geïnstalleer is en druk die weergawe af

  2. Ontplooi

  Al wat u hoef te doen is om na die gids te gaan en dan u app met 'n enkele opdrag te implementeer:

  nou -produseer # ontplooi die app

  Sodra dit ontplooi is, kry u 'n voorskou -URL wat aan elke implementering toegewys is om die nuutste veranderinge onder die adres te deel.

  my app:

  Stap 8: Gevolgtrekking

  Dit is al wat daar is!

  Verken gerus die kode deur nuwe funksies in te stel en die app uit te brei en u ervaring en vrae in die kommentaargebied te deel.

  Besoek my open source by GitHub vir meer inligting oor my werke.

  myYouTube.

  myLinkedIn

  Dankie dat u tyd gehad het om my instruksies te lees ^^.

  Geniet die dag.

  Ahmed Nouira