Distribuisci la tua prima applicazione per l'elenco delle cose da fare: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Se sei completamente nuovo nella programmazione o hai del codice in background, potresti chiederti da dove iniziare a imparare. Devi imparare come, cosa, dove codificare e poi, una volta che il codice è pronto, come distribuirlo affinché l'intero lo veda.

Bene, la buona notizia è che la codifica non è difficile.

Destinatari: questo tutorial è destinato ai principianti che desiderano iniziare una carriera nello sviluppo web, avere una comprensione delle tecnologie web in generale.

Tempo di costruzione: 90 minuti.

Difficoltà: Facile.

Passaggio 1: cosa costruiremo?

Alla fine di questo tutorial:

• Crea una semplice applicazione Web Elenco attività utilizzando HTML5.
• Integra Bootstrap con la nostra app per aggiungere un bell'aspetto e uno stile veloce.
• Usa JavaScript e la libreria JQuery per aggiungere un comportamento dinamico alla nostra applicazione.
• Distribuisci la nostra applicazione nel cloud utilizzando Ziet/now.

In azione:

Passaggio 2: Introduzione a HTML, Bootstrap, JavaScript e JQuery

Che cos'è l'HTML?

Hyper Text Markup Language (HTML) può essere considerato "il linguaggio di Internet". HTML è il linguaggio di markup standard utilizzato per creare pagine web. È stato originariamente progettato per la condivisione di documenti scientifici. Gli adattamenti all'HTML nel corso degli anni lo hanno reso adatto a descrivere diversi altri tipi di documenti che possono essere visualizzati come pagine Web su Internet.

L'unico requisito necessario per visualizzare una pagina HTML è un browser Web, come Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome o Apple Safari.

Cos'è Bootstrap?

Bootstrap è il framework HTML, CSS e JavaScript più popolare per la creazione di siti Web reattivi e mobile first. Bootstrap è un progetto open source sviluppato da Twitter. è costituito da classi CSS che possono essere applicate agli elementi per modellarli in modo coerente e dal codice JavaScript che esegue ulteriori miglioramenti.

Cos'è JavaScript?

JavaScript è un linguaggio di programmazione utilizzato per la programmazione lato client nelle applicazioni web. Il codice JavaScript viene eseguito dal browser e consente ai programmatori di applicazioni Web di creare contenuti Web dinamici, come componenti che mostrano o sono nascosti dinamicamente, modificano l'aspetto e convalidano l'input dell'utente.

Cos'è JQuery?

JQuery è una libreria JavaScript veloce, piccola e ricca di funzionalità, rende molto più semplici cose come l'attraversamento e la manipolazione di documenti HTML, la gestione degli eventi e l'animazione.

Tutta la potenza di JQuery è accessibile tramite JavaScript, quindi avere una solida conoscenza di JavaScript è essenziale per comprendere, strutturare ed eseguire il debug del codice.

Per ulteriori dettagli:

HTML

JavaScript

JQuery

Bootstrap

Passaggio 3: la tua prima pagina con HTML

PASSO1: crea una nuova cartella:

mkdir semplice-todolist

STEP2: crea un nuovo file all'interno della cartella simple-todolist e chiamalo index.html.

cd semplice-todolist

tocco index.html

STEP3: aggiungi il seguente codice a index.html.

Lista di cose da fare

La mia lista di cose da fare

PASSO4: Apri index.html sul tuo browser.

Vedrai che la mia lista di cose da fare è visualizzata (vedi la foto sopra).

Passaggio 4: aggiunta di Bootstrap

In questa sezione aggiungeremo il supporto Bootstrap alla nostra pagina index.html, per aggiungere uno stile veloce e buono all'app To-Do List.

Avviso: in questa app utilizzeremo Bootstrap 3, utilizzerai qualsiasi altro framework CSS, come l'interfaccia utente semantica.

STEP1: aggiungi il file CSS Bootstrap nel tag head:

STEP2: aggiungi i file di script Bootstrap e JQuery CDN alla fine del tag body:

PASSO 3: Apri index.html sul tuo browser.

Congratulazioni, abbiamo aggiunto con successo il supporto Bootstrap alla nostra pagina in pochi passaggi.

Passaggio 5: completare l'interfaccia utente

Dopo aver aggiunto con successo il supporto Bootstrap alla nostra app. Ora andiamo avanti e competiamo l'interfaccia utente (interfaccia utente) per consentire all'utente di aggiungere nuove attività. L'elenco delle cose da fare sarà in grado di aggiungere nuovi elementi a un elenco, nonché rimuovere elementi esistenti.

STEP1: aggiungi il seguente codice a index.html.

Aggiungi nuova attività Aggiungi Cancella tutto!

La mia lista delle attività

PASSO2: apri il file index.html sul tuo browser.

Passaggio 6: aggiunta della logica all'app

Quando inserisci il nome di un'attività e fai clic sul pulsante Aggiungi, al momento non accade nulla. Risolviamolo.

Alla fine di questo passaggio trasformeremo il nostro index.html in una pagina dinamica, quindi si comporterà all'interazione dell'utente.

STEP1: crea una nuova cartella all'interno di simple-todolist, chiamala js e un nuovo file chiamalo script.js all'interno di quella cartella:

mkdir js

cd js touch script.js

STEP2: collega lo script.js a index.html aggiungendo il seguente codice alla fine del tag head:

STEP3: aggiungi il seguente codice al file script.js

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

var task = 0 $("#removeAll").hide(); /* aggiungi un nuovo gestore di attività */ $("#add").on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") { task +=1; var elm =$("

• "); $("#mylist").append(elem); $("input").val(""); /* rimuove il gestore attività univoco */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); task -=1; $(this).parent.remove(); }); /* mostra il pulsante removeAll quando ne abbiamo più di 3 task */ if(tasks > 2) { $("#remveAll").show(); } /* removeAll handler */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); task = 0; $("#removeAll").hide(); }); } }); });

  Nota: puoi ottenere un clone o scaricare lo ZIP del codice dal mio repository GitHub, questo ti evita di toccare.

  git clone github.com/ahmnouira/simple-todolist

  PASSO4: testare il codice

  Apri il tuo browser e inserisci un'attività, quindi fai clic su Aggiungi, vedrai una nuova attività aggiunta all'elenco, se aggiungi 3 attività noterai che è apparso un pulsante clearAll, questo pulsante ci consente di rimuovere tutte le attività aggiunte, tu puoi anche rimuovere una sola attività acquista cliccando sul relativo pulsante.

  Passaggio 7: (Facoltativo) distribuire l'app

  

  Finora abbiamo creato una semplice app per l'elenco delle cose da fare, ora è il momento di distribuirla nel cloud e condividere il nostro lavoro con altri in tutto il mondo.

  Per raggiungere questo obiettivo utilizzeremo la piattaforma cloud chiamata ZEIT Now.

  Cos'è ZEIT Now?

  ZEIt Now è una piattaforma cloud per siti statici e funzioni serverless, consente agli sviluppatori di ospitare siti Web e servizi Web che si distribuiscono istantaneamente, tutto questo senza alcuna configurazione.

  1. Installa ora CLI

  Per distribuire con ZEIT Now, dovrai installare Now CLI.

  importante: assicurati di aver installato npm.

  npm -v # controlla se l'installazione di npm

  npm install -g now@latest # installa l'ultima versione di Now CLI globalmente ora -v # controlla se Now CLI è installato e stampa la versione

  2. Distribuire

  Tutto quello che devi fare è spostarti nella directory e quindi distribuire la tua app con un singolo comando:

  ora --prod # distribuisce l'app

  Una volta distribuito, otterrai un URL di anteprima assegnato a ogni distribuzione per condividere le ultime modifiche sotto l'indirizzo.

  la mia app:

  Passaggio 8: conclusione

  Questo è tutto quello che c'è da fare!

  Sentiti libero di esplorare il codice impostando nuove funzionalità ed espandi l'app e condividi la tua esperienza e le tue domande nell'area dei commenti.

  Per vedere altri miei lavori, visita il mio open source su GitHub.

  mioYouTube.

  myLinkedIn

  Grazie per aver avuto il tempo di leggere il mio istruibile ^^.

  Buona giornata.

  Ahmed Nouira