Wdróż swoją pierwszą aplikację z listą rzeczy do zrobienia: 8 kroków

2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-13 06:58

Jeśli jesteś zupełnie nowy w kodowaniu lub masz trochę kodowania w tle, możesz się zastanawiać, od czego zacząć naukę. Musisz nauczyć się jak, co, gdzie kodować, a potem, gdy kod będzie gotowy, jak go wdrożyć, aby całość mogła zobaczyć.

Dobra wiadomość jest taka, że kodowanie nie jest trudne.

Grupa docelowa: Ten samouczek jest przeznaczony dla początkujących, którzy chcą rozpocząć karierę w tworzeniu stron internetowych, ogólnie rozumieją technologie internetowe.

Czas budowy: 90 minut.

Poziom trudności: łatwy.

Krok 1: Co zbudujemy?

Pod koniec tego samouczka:

• Utwórz prostą aplikację internetową z listą zadań do wykonania, korzystając z HTML5.
• Zintegruj Bootstrap z naszą aplikacją, aby dodać ładnie wyglądającej i szybkiej stylizacji.
• Użyj biblioteki JavaScript i JQuery, aby dodać dynamiczne zachowanie do naszej aplikacji.
• Wdróż naszą aplikację w chmurze za pomocą Ziet/now.

W akcji:

Krok 2: Wprowadzenie do HTML, Bootstrap, JavaScript i JQuery

Co to jest HTML?

Hyper Text Markup Language (HTML) można traktować jako „język internetu”. HTML to standardowy język znaczników używany do tworzenia stron internetowych. Został pierwotnie zaprojektowany do udostępniania dokumentów naukowych. Adaptacje HTML na przestrzeni lat umożliwiły opisanie kilku innych typów dokumentów, które mogą być wyświetlane jako strony internetowe w Internecie.

Jedynym wymaganiem wymaganym do wyświetlenia strony HTML jest przeglądarka internetowa, taka jak Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome lub Apple Safari.

Co to jest Bootstrap?

Bootstrap to najpopularniejsza platforma HTML, CSS i JavaScript do tworzenia responsywnych, mobilnych witryn internetowych. Bootstrap to projekt open source opracowany przez Twittera. składa się z klas CSS, które można zastosować do elementów, aby spójnie je stylizować, oraz kodu JavaScript, który zapewnia dodatkowe ulepszenie.

Co to jest JavaScript?

JavaScript to język programowania używany do programowania po stronie klienta w aplikacjach internetowych. Kod JavaScript jest uruchamiany przez przeglądarkę i umożliwia programistom aplikacji internetowych tworzenie dynamicznej zawartości sieci Web, takiej jak komponenty, które pokazują lub są ukryte dynamicznie, zmieniają wygląd i weryfikują dane wprowadzane przez użytkownika.

Co to jest JQuery?

JQuery jest szybką, małą i bogatą w funkcje biblioteką JavaScript, która znacznie upraszcza takie rzeczy, jak przechodzenie i manipulowanie dokumentami HTML, obsługa zdarzeń i animacja.

Cała moc JQuery jest dostępna za pośrednictwem JavaScript, więc dobra znajomość języka JavaScript jest niezbędna do zrozumienia, strukturyzacji i debugowania kodu.

Po więcej szczegółów:

HTML

JavaScript

JQuery

Bootstrap

Krok 3: Twoja pierwsza strona z HTML

KROK 1: utwórz nowy folder:

mkdir prosty-todolist

KROK 2: utwórz nowy plik w folderze simple-todolist i nazwij go index.html.

cd prosty-todolist

dotknij index.html

KROK 3: dodaj następujący kod do index.html.

Lista rzeczy do zrobienia

Moja lista rzeczy do zrobienia

KROK 4: Otwórz index.html w przeglądarce.

Zobaczysz, że wyświetla się Moja lista rzeczy do zrobienia (patrz zdjęcie powyżej).

Krok 4: Dodawanie Bootstrapa

W tej sekcji dodamy obsługę Bootstrap do naszej strony index.html, aby dodać szybką i dobrą stylizację do aplikacji listy zadań do wykonania.

Uwaga: W tej aplikacji użyjemy Bootstrap 3, używasz dowolnego innego frameworka CSS, takiego jak Semantic UI.

KROK 1: dodaj plik Bootstrap CSS w tagu head:

KROK 2: dodaj pliki skryptów Bootstrap i JQuery CDN na końcu tagu body:

KROK 3: Otwórz index.html w przeglądarce.

Gratulacje, pomyślnie dodaliśmy obsługę Bootstrap do naszej strony w kilku krokach.

Krok 5: Uzupełnij interfejs użytkownika

Po pomyślnym dodaniu obsługi Bootstrap do naszej aplikacji. Teraz przejdźmy dalej i rywalizujmy z interfejsem użytkownika (interfejsem użytkownika), aby umożliwić użytkownikowi dodawanie nowych zadań. Lista zadań do wykonania będzie mogła dodawać nowe pozycje do listy, a także usuwać istniejące.

KROK 1: dodaj następujący kod do index.html.

Dodaj nowe zadanie Dodaj Wyczyść wszystko!

Moja lista zadań

KROK 2: otwórz plik index.html w przeglądarce.

Krok 6: Dodawanie logiki do aplikacji

Po wpisaniu nazwy zadania i kliknięciu przycisku Dodaj w tej chwili nic się nie dzieje. Naprawmy to.

Pod koniec tego kroku zmienimy nasz index.html w stronę dynamiczną, tak aby zachowywał się w interakcji z użytkownikiem.

KROK 1: utwórz nowy folder wewnątrz simple-todolist, nazwij go js i nową nazwę pliku to script.js w tym folderze:

mkdir js

cd js touch script.js

KROK 2: połącz script.js z index.html, dodając następujący kod na końcu tagu head:

KROK 3: dodaj następujący kod do pliku script.js

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

var zadania = 0 $("#usuńWszystko").hide(); /* dodaj nową obsługę zadań */ $("#add").on("kliknij", (event) => { event.preventDefault(); event.stopPropagation(); var val = $("input"). val(); if(val !=="") { zadania +=1; var elm =$("

• "); $("#mylist").append(elem); $("input").val(""); /* usuń unikalny program obsługi zadań */ $(".text-right").on(" clikc", function(event) { event.preventDefault(); event.stopPropagation(); zadania -=1; $(this.parent.remove(); }); /* pokaż przycisk removeAll gdy mamy więcej niż 3 zadania */ if(tasks > 2) { $("#remveAll").show(); } /* procedura obsługi removeAll */ $("#removeAll").on("click", event => { event.preventDefault (); event.stopPropagation(); $(".disabled").siblings().remove(); zadania = 0; $("#removeAll").hide(); }); } }); });

  Uwaga: Możesz sklonować lub pobrać kod ZIP z mojego repozytorium GitHub, to dobrze uchroni Cię przed stukaniem.

  git klon github.com/ahmnouira/simple-todolist

  KROK 4: przetestuj kod!

  Otwórz przeglądarkę i wprowadź zadanie, a następnie kliknij Dodaj, zobaczysz nowe zadanie dodawane do listy, jeśli dodasz 3 zadania, zauważysz, że pojawił się przycisk wyczyść wszystko, ten przycisk pozwala nam usunąć wszystkie dodane zadania, ty może również usunąć tylko jedno zadanie kupna klikając na jego przycisk.

  Krok 7: (Opcjonalnie) Wdróż aplikację

  

  Do tej pory stworzyliśmy prostą aplikację z listą rzeczy do zrobienia, teraz nadszedł czas, aby wdrożyć ją w chmurze i udostępnić naszą pracę innym na całym świecie.

  W tym celu wykorzystamy platformę chmurową o nazwie ZEIT Now.

  Czym jest teraz ZEIT?

  ZEIt Now to platforma w chmurze dla witryn statycznych i funkcji bezserwerowych, która umożliwia programistom hostowanie witryn i usług internetowych, które są wdrażane natychmiast, a wszystko to przy zerowej konfiguracji.

  1. Zainstaluj teraz CLI

  Aby wdrożyć z ZEIT Now, musisz zainstalować Now CLI.

  ważne: upewnij się, że masz zainstalowany npm.

  npm -v # sprawdź, czy zainstalowano npm

  npm install -g now@latest # zainstaluj ostatnią wersję Now CLI globalnie teraz -v # sprawdź, czy zainstalowano Now CLI i wydrukuj jego wersję

  2. Wdróż

  Wszystko, co musisz zrobić, to przenieść się do katalogu, a następnie wdrożyć aplikację za pomocą jednego polecenia:

  teraz --prod # wdróż aplikację

  Po wdrożeniu otrzymasz adres URL podglądu, który jest przypisany do każdego wdrożenia, aby udostępniać najnowsze zmiany pod adresem.

  moja aplikacja:

  Krok 8: Wniosek

  To wszystko !

  Zachęcamy do zapoznania się z kodem, ustawiając nowe funkcje i rozszerzając aplikację, a także dzieląc się swoimi doświadczeniami i pytaniami w obszarze komentarzy.

  Aby zobaczyć więcej moich prac, odwiedź moje open source na GitHub.

  myYouTube.

  myLinkedIn

  Dziękuję za czas na przeczytanie mojego instruktażowego ^^.

  Miłego dnia.

  Ahmed Nouira