Déployez votre première application de liste de tâches : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Si vous êtes complètement novice en matière de codage ou si vous avez des antécédents en matière de codage, vous vous demandez peut-être par où commencer à apprendre. Vous devez apprendre comment, quoi, où coder et ensuite, une fois le code prêt, comment le déployer pour que tout le monde le voie.

Eh bien, la bonne nouvelle est que le codage n'est pas difficile.

Public cible: Ce tutoriel est destiné aux débutants qui souhaitent débuter une carrière dans le développement Web, ont une compréhension des technologies Web en général.

Temps de construction: 90 minutes.

Difficulté: Facile.

Étape 1: Qu'allons-nous construire ?

À la fin de ce tutoriel, nous allons:

• Créez une simple application Web de liste de tâches à l'aide de HTML5.
• Intégrez Bootstrap à notre application pour ajouter un style attrayant et rapide.
• Utilisez la bibliothèque JavaScript et JQuery pour ajouter un comportement dynamique à notre application.
• Déployez notre application dans le cloud avec Ziet/now.

En action:

Étape 2: Introduction à HTML, Bootstrap, JavaScript et JQuery

Qu'est-ce que le HTML ?

L'Hyper Text Markup Language (HTML) peut être considéré comme "le langage d'Internet". HTML est le langage de balisage standard utilisé pour créer des pages Web. Il a été conçu à l'origine pour le partage de documents scientifiques. Les adaptations au HTML au fil des ans ont permis de décrire plusieurs autres types de documents pouvant être affichés sous forme de pages Web sur Internet.

La seule condition requise pour afficher une page HTML est un navigateur Web, tel que Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ou Apple Safari.

Qu'est-ce que Bootstrap ?

Bootstrap est le framework HTML, CSS et JavaScript le plus populaire pour créer des sites Web réactifs et mobiles. Bootstrap est un projet open source développé par Twitter. il se compose de classes CSS qui peuvent être appliquées aux éléments pour les styliser de manière cohérente et de code JavaScript qui effectue des améliorations supplémentaires.

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation utilisé pour la programmation côté client dans les applications Web. Le code JavaScript est exécuté par le navigateur et permet aux programmeurs d'applications Web de créer du contenu Web dynamique, tel que des composants qui s'affichent ou sont masqués dynamiquement, de modifier l'apparence et de valider les entrées de l'utilisateur.

Qu'est-ce que JQuery ?

JQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités, elle simplifie considérablement la navigation et la manipulation de documents HTML, la gestion des événements et l'animation.

Toute la puissance de JQuery est accessible via JavaScript, donc une bonne maîtrise de JavaScript est essentielle pour comprendre, structurer et déboguer votre code.

Pour plus de détails:

HTML

JavaScript

JQuery

Amorcer

Étape 3: Votre première page avec HTML

ÉTAPE 1: créez un nouveau dossier:

mkdir simple-todolist

ÉTAPE 2: créez un nouveau fichier dans le dossier simple-todolist et nommez-le index.html.

cd simple-todolist

toucher index.html

ÉTAPE 3: ajoutez le code suivant à index.html.

Liste de choses à faire

Ma liste de choses à faire

ÉTAPE 4: Ouvrez le fichier index.html sur votre navigateur.

Vous verrez que My To-Do-List s'affiche (voir la photo ci-dessus).

Étape 4: Ajout de Bootstrap

Dans cette section, nous ajouterons la prise en charge de Bootstrap à notre page index.html, afin d'ajouter un style rapide et efficace à l'application To-Do List.

Remarque: dans cette application, nous utiliserons Bootstrap 3, vous utilisez n'importe quel autre framework CSS, comme Semantic UI.

ÉTAPE 1: ajoutez le fichier CSS Bootstrap dans la balise head:

ÉTAPE 2: ajoutez les fichiers de scripts Bootstrap et JQuery CDN à la fin de la balise body:

ÉTAPE 3: Ouvrez index.html sur votre navigateur.

Félicitations, nous ajoutons avec succès la prise en charge de Bootstrap à notre page en quelques étapes.

Étape 5: Complétez l'interface utilisateur

Après avoir ajouté avec succès la prise en charge de Bootstrap à notre application. Passons maintenant à l'interface utilisateur (interface utilisateur) pour permettre à l'utilisateur d'ajouter de nouvelles tâches. La liste de tâches pourra ajouter de nouveaux éléments à une liste, ainsi que supprimer des éléments existants.

ÉTAPE 1: ajoutez le code suivant à index.html.

Ajouter une nouvelle tâche Ajouter Effacer tout !

Ma liste de tâches

ÉTAPE 2: ouvrez le fichier index.html sur votre navigateur.

Étape 6: Ajout de la logique à l'application

Lorsque vous entrez un nom de tâche et cliquez sur le bouton Ajouter, rien ne se passe pour le moment. Réparons ça.

À la fin de cette étape, nous transformerons notre index.html en une page dynamique, de sorte qu'il se comportera face à l'interaction de l'utilisateur.

ÉTAPE 1: créez un nouveau dossier dans simple-todolist, nommez-le js et un nouveau nom de fichier it script.js dans ce dossier:

mkdir js

cd js touch script.js

ÉTAPE 2: associez le script.js au fichier index.html en ajoutant le code suivant à la fin de la balise head:

ÉTAPE 3: ajoutez le code suivant au fichier script.js

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

var task = 0 $("#removeAll").hide(); /* ajouter un nouveau gestionnaire de tâches */ $("#add").on("click", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") { tâches +=1; var elm =$("

• "); $("#mylist").append(elem); $("input").val(""); /* supprimer le gestionnaire de tâches unique */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); task -=1; $(this).parent.remove(); }); /* afficher le bouton removeAll lorsque nous en avons plus de 3 tâches */ if(tasks > 2) { $("#remveAll").show(); } /* removeAll handler */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); task = 0; $("#removeAll").hide(); }); } }); });

  Remarque: vous pouvez soit cloner, soit télécharger le ZIP du code à partir de mon référentiel GitHub, cela vous évite de taper.

  git clone github.com/ahmnouira/simple-todolist

  ÉTAPE 4: tester le code

  Ouvrez votre navigateur et entrez une tâche puis cliquez sur Ajouter, vous verrez une nouvelle tâche s'ajouter à la liste, si vous ajoutez 3 tâches vous remarquerez qu'un bouton clearAll est apparu, ce bouton nous permet de supprimer toutes les tâches ajoutées, vous peut également supprimer une seule tâche acheter en cliquant sur son bouton.

  Étape 7: (Facultatif) Déployez l'application

  

  Jusqu'à présent, nous avons créé une simple application de liste de tâches, il est maintenant temps de la déployer dans le cloud et de partager notre travail avec d'autres dans le monde.

  Pour y parvenir, nous utiliserons la plate-forme cloud appelée ZEIT Now.

  Qu'est-ce que ZEIT Now ?

  ZEIt Now est une plate-forme cloud pour les sites statiques et les fonctions sans serveur, elle permet aux développeurs d'héberger des sites Web et des services Web qui se déploient instantanément, le tout sans configuration.

  1. Installer maintenant CLI

  Pour déployer avec ZEIT Now, vous devrez installer Now CLI.

  important: assurez-vous que npm est installé.

  npm -v # vérifie si le npm s'installe

  npm install -g now@latest # installe la dernière version de Now CLI globalement maintenant -v # vérifie si la Now CLI est installée et imprime la version

  2. Déployer

  Tout ce que vous avez à faire est de vous déplacer dans le répertoire, puis de déployer votre application avec une seule commande:

  maintenant --prod # déployer l'application

  Une fois déployé, vous obtiendrez une URL d'aperçu qui est attribuée à chaque déploiement pour partager les dernières modifications sous l'adresse.

  mon application:

  Étape 8: Conclusion

  C'est tout ce qu'on peut en dire !

  N'hésitez pas à explorer le code en définissant de nouvelles fonctionnalités et en développant l'application, et partagez votre expérience et vos questions dans la zone de commentaires.

  Pour voir plus de mes travaux, veuillez visiter mon open source sur GitHub.

  monYouTube.

  monLinkedIn

  Merci d'avoir pris le temps de lire mon instructable ^^.

  Bonne journée.

  Ahmed Nouira