Triển khai ứng dụng danh sách việc cần làm đầu tiên của bạn: 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:32

Nếu bạn hoàn toàn mới học viết mã hoặc có một số mã nền tảng, bạn có thể tự hỏi nên bắt đầu học từ đâu. Bạn cần tìm hiểu cách thức, cái gì, nơi viết mã và sau đó, khi mã đã sẵn sàng, làm thế nào để triển khai nó cho toàn bộ xem.

Chà, tin tốt là viết mã không khó.

Đối tượng mục tiêu: Hướng dẫn này dành cho những người mới bắt đầu muốn bắt đầu sự nghiệp phát triển web, có hiểu biết về công nghệ web nói chung.

Thời gian xây dựng: 90 phút.

Khó khăn: Dễ dàng.

Bước 1: Chúng tôi sẽ xây dựng những gì?

Đến cuối hướng dẫn này, chúng tôi sẽ:

• Tạo một ứng dụng web danh sách việc cần làm đơn giản bằng HTML5.
• Tích hợp Bootstrap với ứng dụng của chúng tôi để thêm kiểu dáng đẹp và nhanh chóng.
• Sử dụng JavaScript và thư viện JQuery để thêm một số hành vi động vào ứng dụng của chúng tôi.
• Triển khai ứng dụng của chúng tôi trên đám mây bằng cách sử dụng Ziet / bây giờ.

Đang hoạt động:

Bước 2: Giới thiệu về HTML, Bootstrap, JavaScript & JQuery

HTML là gì?

Ngôn ngữ đánh dấu siêu văn bản (HTML) có thể được coi là "ngôn ngữ của internet". HTML là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo các trang web. Ban đầu nó được thiết kế để chia sẻ các tài liệu khoa học. Sự thích nghi với HTML trong những năm qua đã làm cho nó phù hợp để mô tả một số loại tài liệu khác có thể được hiển thị dưới dạng các trang web trên internet.

Yêu cầu duy nhất cần thiết để hiển thị trang HTML là trình duyệt web, chẳng hạn như Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome hoặc Apple Safari.

Bootstrap là gì?

Bootstrap là khung công tác HTML, CSS và JavaScript phổ biến nhất để xây dựng các trang web đầu tiên dành cho thiết bị di động, đáp ứng. Bootstrap là một dự án mã nguồn mở được phát triển bởi Twitter. nó bao gồm các lớp CSS có thể được áp dụng cho các phần tử để tạo kiểu cho chúng một cách nhất quán và mã JavaScript thực hiện cải tiến bổ sung.

JavaScript là gì?

JavaScript là một ngôn ngữ lập trình được sử dụng để lập trình phía máy khách trong các ứng dụng web. Mã JavaScript được chạy bởi trình duyệt và cho phép các nhà lập trình ứng dụng web xây dựng nội dung web động, chẳng hạn như các thành phần hiển thị hoặc ẩn động, thay đổi giao diện và xác thực đầu vào của người dùng.

JQuery là gì?

JQuery là thư viện JavaScript nhanh, nhỏ và giàu tính năng, nó làm cho những thứ như duyệt tài liệu HTML và thao tác, xử lý sự kiện, hoạt ảnh đơn giản hơn nhiều.

Tất cả sức mạnh của JQuery đều được truy cập thông qua JavaScript, vì vậy việc nắm chắc JavaScript là điều cần thiết để hiểu, cấu trúc và gỡ lỗi mã của bạn.

Để biết thêm chi tiết:

HTML

JavaScript

JQuery

Bootstrap

Bước 3: Trang đầu tiên của bạn với HTML

BƯỚC1: tạo một thư mục mới:

mkdir simple-todolist

BƯỚC2: tạo tệp mới bên trong thư mục simple-todolist và đặt tên là index.html.

cd simple-todolist

chạm vào index.html

BƯỚC 3: thêm mã sau vào index.html.

Những việc cần làm

Danh sách việc cần làm của tôi

BƯỚC 4: Mở index.html trên trình duyệt của bạn.

Bạn sẽ thấy My To-Do-List được hiển thị (xem ảnh trên).

Bước 4: Thêm Bootstrap

Trong phần này, chúng tôi sẽ thêm hỗ trợ Bootstrap vào trang index.html của chúng tôi, để thêm kiểu nhanh và tốt cho Ứng dụng Danh sách Việc cần làm.

Lưu ý: Trong ứng dụng này, chúng tôi sẽ sử dụng Bootstrap 3, bạn sử dụng bất kỳ khung CSS nào khác, như Semantic UI.

BƯỚC1: thêm tệp Bootstrap CSS trong thẻ head:

BƯỚC2: thêm tệp script Bootstrap và JQuery CDN vào cuối thẻ body:

BƯỚC 3: Mở index.html trên trình duyệt của bạn.

Xin chúc mừng, chúng tôi đã thêm thành công hỗ trợ Bootstrap vào trang của mình trong vài bước.

Bước 5: Hoàn thành giao diện người dùng

Sau khi chúng tôi thêm thành công hỗ trợ Bootstrap vào ứng dụng của mình. Bây giờ chúng ta hãy tiếp tục và cạnh tranh UI (Giao diện người dùng) để cho phép người dùng thêm các tác vụ mới. Danh sách việc cần làm sẽ có thể thêm các mục mới vào danh sách, cũng như xóa các mục hiện có.

BƯỚC1: thêm mã sau vào index.html.

Thêm nhiệm vụ mới Thêm xóa tất cả!

Danh sách công việc của tôi

BƯỚC2: mở tệp index.html trên trình duyệt của bạn.

Bước 6: Thêm Logic vào ứng dụng

Khi bạn nhập tên nhiệm vụ và nhấp vào nút Thêm, không có gì xảy ra vào lúc này. Hãy khắc phục điều đó.

Đến cuối bước này, chúng tôi sẽ chuyển index.html của chúng tôi thành một trang động, vì vậy nó sẽ hoạt động theo tương tác của người dùng.

BƯỚC1: tạo một thư mục mới bên trong simple-todolist, đặt tên là js và đặt tên tệp mới là script.js bên trong thư mục đó:

mkdir js

cd js touch script.js

BƯỚC2: liên kết script.js với index.html bằng cách thêm mã sau vào cuối thẻ head:

BƯỚC 3: thêm mã sau vào tệp script.js

$ (tài liệu).ready (() => {

var task = 0 $ ("# removeAll"). hide (); / * thêm trình xử lý tác vụ mới * / $ ("# add"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {task + = 1; var elm = $ ("

• "); $ (" # mylist "). append (elem); $ (" input "). val (" "); / * xóa trình xử lý tác vụ duy nhất * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); task - = 1; $ (this).parent.remove ();}); / * hiển thị nút removeAll khi chúng ta có nhiều hơn 3 task * / if (task> 2) {$ ("# remveAll"). show ();} / * removeAll handler * / $ ("# removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". bị vô hiệu hóa"). anh chị em ruột (). remove (); task = 0; $ ("# removeAll"). hide ();});}});});

  Lưu ý: Bạn có thể lấy bản sao hoặc tải xuống ZIP của mã từ kho lưu trữ GitHub của tôi, điều này cũng giúp bạn không phải khai thác.

  git clone github.com/ahmnouira/simple-todolist

  BƯỚC 4: kiểm tra mã

  Mở trình duyệt của bạn và nhập một nhiệm vụ sau đó nhấp vào Thêm, bạn sẽ thấy một nhiệm vụ mới được thêm vào danh sách, nếu bạn thêm 3 nhiệm vụ bạn sẽ thấy có nút clearAll xuất hiện, nút này cho phép chúng ta loại bỏ tất cả các nhiệm vụ đã thêm, bạn cũng có thể loại bỏ chỉ một nhiệm vụ mua khi nhấp vào nút của nó.

  Bước 7: (Tùy chọn) Triển khai ứng dụng

  

  Cho đến nay, chúng tôi đã xây dựng một ứng dụng danh sách việc cần làm đơn giản, bây giờ đã đến lúc triển khai nó trên đám mây và chia sẻ công việc của chúng tôi với những người khác trên khắp thế giới.

  Để đạt được điều này, chúng tôi sẽ sử dụng nền tảng đám mây có tên ZEIT Now.

  ZEIT Bây giờ là gì?

  ZEIt Now là một nền tảng đám mây dành cho các trang web tĩnh và Chức năng không có máy chủ, nó cho phép các nhà phát triển lưu trữ các trang web và dịch vụ web triển khai ngay lập tức, tất cả điều này mà không cần cấu hình.

  1. Cài đặt ngay CLI

  Để triển khai với ZEIT Now, bạn sẽ cần cài đặt Now CLI.

  quan trọng: Hãy chắc chắn rằng bạn đã cài đặt npm.

  npm -v # kiểm tra xem có cài đặt npm không

  npm install -g now @ last # install phiên bản cuối cùng của Now CLI trên toàn cầu ngay bây giờ -v # chech nếu Now CLI được cài đặt và in phiên bản đó

  2. Triển khai

  Tất cả những gì bạn phải làm là di chuyển vào thư mục và sau đó triển khai ứng dụng của mình bằng một lệnh duy nhất:

  bây giờ --prod # triển khai ứng dụng

  Sau khi triển khai, bạn sẽ nhận được URL xem trước được chỉ định trên mỗi lần triển khai để chia sẻ những thay đổi mới nhất theo địa chỉ.

  ứng dụng của tôi:

  Bước 8: Kết luận

  Thats tất cả để có nó !

  Vui lòng khám phá mã bằng cách thiết lập các tính năng mới và mở rộng ứng dụng, đồng thời chia sẻ kinh nghiệm và câu hỏi của bạn trong khu vực bình luận.

  Để xem thêm các tác phẩm của tôi, vui lòng truy cập mã nguồn mở của tôi tại GitHub.

  myYouTube.

  myLinkedIn

  Cảm ơn vì đã có thời gian đọc hướng dẫn của tôi ^^.

  Chúc một ngày tốt lành.

  Ahmed Nouira