Desplegueu la vostra primera aplicació de la llista de tasques: 8 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:12

Si és completament nou en la codificació o té alguna codificació de fons, potser us preguntareu per on començar a aprendre. Heu d’aprendre com, què, on codificar i, després, un cop llest el codi, com implementar-lo perquè el vegi tot.

Bé, la bona notícia és que la codificació no és difícil.

Públic objectiu: aquest tutorial està pensat per a principiants que vulguin iniciar una carrera en desenvolupament web, que tinguin coneixement de les tecnologies web en general.

Temps de construcció: 90 minuts.

Dificultat: fàcil.

Pas 1: què construirem?

Al final d'aquest tutorial:

• Creeu una simple aplicació web de Llistes de tasques mitjançant HTML5.
• Integra Bootstrap amb la nostra aplicació per afegir un aspecte elegant i ràpid.
• Utilitzeu la biblioteca JavaScript i JQuery per afegir un comportament dinàmic a la nostra aplicació.
• Desplegueu la nostra aplicació al núvol mitjançant Ziet / now.

En acció:

Pas 2: Introducció a HTML, Bootstrap, JavaScript i JQuery

Què és HTML?

El llenguatge de marcatge de text hiper (HTML) es pot considerar com "el llenguatge d'Internet". HTML és el llenguatge de marques estàndard que s’utilitza per crear pàgines web. Va ser dissenyat originalment per compartir documents científics. Les adaptacions a HTML al llarg dels anys van fer que fos adequat per descriure altres tipus de documents que es poden mostrar com a pàgines web a Internet.

L'únic requisit necessari per mostrar una pàgina HTML és un navegador web, com ara Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome o Apple Safari.

Què és Bootstrap?

Bootstrap és el marc HTML, CSS i JavaScript més popular per a la creació de primers llocs web adaptables i mòbils. Bootstrap és un projecte de codi obert desenvolupat per Twitter. consta de classes CSS que es poden aplicar a elements per dissenyar-los de manera coherent i codi JavaScript que realitza millores addicionals.

Què és JavaScript?

JavaScript és un llenguatge de programació que s’utilitza per a la programació del client en aplicacions web. El codi JavaScript el gestiona el navegador i permet als programadors d’aplicacions web crear contingut web dinàmic, com ara components que mostren o s’amaguen dinàmicament, canvien d’aspecte i validen l’entrada de l’usuari.

Què és JQuery?

JQuery és una biblioteca de JavaScript ràpida, petita i rica en funcions, que facilita coses com ara el recorregut de documents HTML i la manipulació, el tractament d'esdeveniments i l'animació.

S’accedeix a tota la potència de JQuery mitjançant JavaScript, de manera que tenir un fort coneixement de JavaScript és fonamental per entendre, estructurar i depurar el vostre codi.

Per obtenir més detalls:

HTML

JavaScript

JQuery

Bootstrap

Pas 3: la vostra primera pàgina amb HTML

PAS 1: creeu una carpeta nova:

mkdir simple-todolist

PAS 2: creeu un fitxer nou dins de la carpeta simple-todolist i anomeneu-lo index.html.

cd simple-todolist

toqueu index.html

PAS 3: afegiu el codi següent a index.html.

Llista de tasques pendents

La meva llista de tasques

PAS 4: obriu index.html al navegador.

Veureu que apareix La meva llista de tasques (vegeu la foto superior).

Pas 4: afegir Bootstrap

En aquesta secció afegirem suport a Bootstrap a la nostra pàgina index.html, per afegir un estil ràpid i bo a l’aplicació Llista de tasques.

Avís: en aquesta aplicació utilitzarem Bootstrap 3, utilitzeu qualsevol altre marc CSS, com ara la interfície d'usuari semàntica.

PAS 1: afegiu el fitxer CSS Bootstrap a l'etiqueta principal:

PAS 2: afegiu fitxers de scripts Bootstrap i JQuery CDN al final de l'etiqueta del cos:

PAS 3: obriu index.html al vostre navegador.

Enhorabona, hem afegit amb èxit el suport Bootstrap a la nostra pàgina en pocs passos.

Pas 5: completeu la IU

Després d'afegir el suport Bootstrap amb èxit a la nostra aplicació. Ara continuem i competim amb la interfície d’usuari (User Interface) per permetre a l’usuari afegir noves tasques. La llista de tasques podrà afegir elements nous a una llista, així com eliminar els elements existents.

PAS 1: afegiu el codi següent a index.html.

Afegeix una tasca nova Afegeix Esborra-ho tot!

La meva llista de tasques

PAS 2: obriu el fitxer index.html al navegador.

Pas 6: afegir la lògica a l'aplicació

Quan introduïu un nom de tasca i feu clic al botó Afegeix, no passa res de moment. Fixem-ho.

Al final d'aquest pas, convertirem el nostre index.html en una pàgina dinàmica, de manera que es comportarà a la interacció de l'usuari.

PAS 1: creeu una nova carpeta dins de simple-todolist, anomeneu-la js i un nom de fitxer nou script.js dins d'aquesta carpeta:

mkdir js

cd js touch script.js

PAS 2: enllaceu script.js a index.html afegint el codi següent al final de l'etiqueta de capçalera:

PAS 3: afegiu el codi següent al fitxer script.js

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

var tasques = 0 $ ("# removeAll"). hide (); / * add new task handler * / $ ("# add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {tasques + = 1; var elm = $ ("

• "); $ (" # mylist "). append (elem); $ (" input "). val (" "); / * elimina el gestor de tasques únic * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); tasks - = 1; $ (this).parent.remove ();}); / * Mostra el botó removeAll quan tinguem més de 3 tasques * / if (tasques> 2) {$ ("# remveAll"). show ();} / * gestor removeAll * / $ ("# removeAll"). on ("clic", event => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). germans (). remove (); tasques = 0; $ ("# removeAll"). hide ();});}});});

  Nota: Podeu obtenir o clonar o descarregar el codi postal del meu dipòsit GitHub, cosa que us estalviarà de tocar.

  git clone github.com/ahmnouira/simple-todolist

  PAS 4: proveu el codi

  Obriu el navegador i introduïu una tasca i feu clic a Afegeix, veureu que s’afegeix una nova tasca a la llista. Si afegiu 3 tasques, notareu que apareix un botó Esborra tot, aquest botó ens permet eliminar totes les tasques afegides, també pot eliminar només una compra de tasques fent clic al seu botó.

  Pas 7: (Opcional) Desplegueu l'aplicació

  

  Fins ara hem creat una senzilla aplicació de llista de tasques, ara toca desplegar-la al núvol i compartir la nostra feina amb altres persones de tot el món.

  Per aconseguir-ho utilitzarem una plataforma en el núvol anomenada ZEIT Now.

  Què és ara ZEIT?

  ZEIt Now és una plataforma al núvol per a llocs estàtics i funcions sense servidor, que permet als desenvolupadors allotjar llocs web i serveis web que es desplegen a l'instant, tot això sense configuració nul·la.

  1. Instal·leu ara la CLI

  Per implementar-lo amb ZEIT Now, haureu d’instal·lar Now CLI.

  important: assegureu-vos que teniu instal·lat npm.

  npm -v # comproveu si la instal·lació de npm

  npm install -g now @ latest # instal·leu l'última versió de Now CLI globalment ara -v # chech si el Now CLI està instal·lat i imprimiu-la

  2. Desplegar

  Tot el que heu de fer és desplaçar-vos al directori i desplegar la vostra aplicació amb una sola ordre:

  ara --prod # desplega l'aplicació

  Un cop desplegat, obtindreu un URL de previsualització que s’assigna a cada desplegament per compartir els darrers canvis a l’adreça.

  la meva aplicació:

  Pas 8: Conclusió

  Això és tot el que hi ha!

  No dubteu a explorar el codi establint noves funcions, amplieu l'aplicació i compartiu la vostra experiència i preguntes a l'àrea de comentaris.

  Per veure més obres meves, visiteu el meu codi obert a GitHub.

  myYouTube.

  myLinkedIn

  Gràcies per tenir un temps per llegir el meu instructiu ^^.

  Que tinguis un bon dia.

  Ahmed Nouira