Dev Front-end Học Được Gì Khi Clone Amazon Web?

Dev Front-end Học Được Gì Khi Clone Amazon Web?

Có nhiều cách để trở thành một version tốt hơn của bản thân mỗi ngày trong công việc lập trình. Và một trong những phương pháp hiệu quả nhất để làm điều đó chỉ đơn giản là dành thời gian để làm một số project, bạn sẽ bất ngờ với những gì mình học được đó. Bạn sử dụng công nghệ hoặc công cụ nào không quan trọng, miễn là bạn hoàn thành công việc và thực sự bắt tay vào làm..

Không cần thêm lời khuyên, và đây là những thách thức về giao diện người dùng mà bạn có thể bắt đầu thử:

Một bản sao Jira

Jira là một sản phẩm theo dõi task độc quyền do Atlassian phát triển, cho phép theo dõi lỗi và quản lý dự án nhanh. Tên sản phẩm là sự cắt ngắn của Gojira, từ tiếng Nhật có nghĩa là Godzilla.

Đây là những gì bạn sẽ học được bằng cách tạo bản sao Jira:

  • Cách API kéo và thả (DnD) hoạt động cho các trình duyệt - Mỗi bảng Jira có một bộ sưu tập các bảng kanban, nơi bạn có thể kéo và thả các tác vụ dựa trên tiến trình của chúng.
  • Cách sắp xếp vai trò người dùng và logic quyền truy cập - Mỗi bảng Kanban có các thành viên liên kết với nó. Các thành viên có thể có các cấp độ truy cập khác nhau.
    Ví dụ: người quản lý dự án có thể có quyền đọc, ghi và chỉnh sửa, trong khi khách hàng có thể chỉ có quyền đọc. Khách hàng có thể thấy những gì đang diễn ra và đã hoàn thành, nhưng họ không thể thay đổi bất cứ điều gì nhóm đang làm hiện tại.
  • HTML và CSS - Cách cấu trúc ngữ nghĩa và tạo kiểu ứng dụng là một bộ kỹ năng thuận lợi mà ai cũng có thể có.

Một ứng dụng Beatbox thú vị

Ứng dụng Beatbox phát các âm thanh khác nhau dựa trên phím bạn hiện đang nhấn. Bạn có thể chơi một giai điệu chỉ với bàn phím của mình.

Đây là những gì bạn sẽ học được khi xây dựng ứng dụng Beatbox

  • Để kích thích âm thanh, bạn cần phải làm quen với cách hoạt động của API âm thanh web.
  • Làm việc với các sự kiện bàn phím JavaScript. Bạn sẽ phải tìm ra phím nào đang được nhấn và chơi đúng giai điệu.
  • “API Web Audio cung cấp một hệ thống mạnh mẽ và linh hoạt để kiểm soát âm thanh trên Web, cho phép các nhà phát triển chọn nguồn âm thanh, thêm hiệu ứng cho âm thanh, tạo hình ảnh trực quan về âm thanh, áp dụng các hiệu ứng không gian (chẳng hạn như lia máy) và hơn thế nữa”.

Version git hub mà tôi tìm thấy, bạn có thể tham khảo ở đây

Một Album Spotify cần gì?

Bạn có thể phát và tải lên các bài hát trên Spotify. Spotify có một phần nơi bạn có thể duyệt nhạc và nghệ sĩ dựa trên album. Đây là một trong những album yêu thích nhất của tôi.

Đây là những gì bạn sẽ học được bằng cách tạo bản sao Spotify

  • Cách tìm nạp dữ liệu qua API và hiển thị các album chính xác cho nghệ sĩ được liên kết. Rất may, Spotify có một API mà bạn có thể sử dụng miễn phí - đây là liên kết tài liệu API.
  • Bạn có thể xây dựng ứng dụng dưới dạng ứng dụng web hoặc PC. Cả hai ứng dụng đều yêu cầu kiến thức về cách bố trí các phần tử trên trang và tạo kiểu cho nó một cách thích hợp.

Một bản sao Amazon

Khi Amazon bắt đầu, họ chỉ là một trang web thương mại điện tử nhỏ bé chỉ bán sách. Tính đến năm 2020, họ là ông lớn trong lĩnh vực thương mại điện tử.
Hãy bắt đầu từ những bước nhỏ, học tập từ những thứ đơn giản nhất, dành thời gian của bạn để suy nghĩ đến từng tính năng. Đừng cố gắng sao chép Amazon như một doanh nghiệp, nhưng hãy cố gắng xây dựng trải nghiệm web tương tự.
Về cốt lõi, Amazon là một cơ sở dữ liệu lớn và khi tìm kiếm, nó sẽ trả về cho bạn các mục lấy từ cơ sở dữ liệu. Tất nhiên, Amazon còn nhiều hơn thế nữa, nhưng đó là một ví dụ rất đơn giản hóa.

Đây là những gì bạn sẽ học được bằng cách xây dựng bản sao Amazon

  • Thiết lập MySQL hoặc PostgreSQL và có khả năng lưu trữ các mục bên trong cơ sở dữ liệu - Bạn sẽ cần lưu trữ các mục trong cơ sở dữ liệu và sau đó truy vấn các mục từ đó.
  • Bật chức năng tìm kiếm - Người dùng truy cập trang web của bạn, tìm kiếm các cụm từ và bạn sẽ cần trả lại các mục thích hợp. Bạn làm điều đó như thế nào?
  • HTML và CSS - Mọi trang web đều sử dụng hai công nghệ đã đề cập trước đó. Chúng đang được sử dụng từ các trang web rất phức tạp như Netflix hoặc Amazon cho đến một dự án phụ rất đơn giản dành cho người mới bắt đầu.

Trong trường hợp bạn thấy nó hữu ích, đây là một bản sao Amazon đơn giản mà tôi đã tìm thấy trên GitHub:

Netflix - Những bộ phim bom tấn

Netflix là lựa chọn phổ biến để xem phim truyền hình dài tập, phim điện ảnh và phim tài liệu. Họ đã cách mạng hóa cách chúng ta xem các chương trình. Xem từ mọi nơi và trên bất kỳ thiết bị nào là một lập luận thuyết phục.

Đây là những gì bạn sẽ học được bằng cách tạo bản sao Netflix

  • API Video và Audio — Về cốt lõi, Netflix là một dịch vụ phát trực tuyến. Mọi dịch vụ phát trực tuyến đều liên quan đến video hoặc âm thanh ở một số cấp độ.
  • Làm việc với HTML và CSS.
  • Tùy chọn: Cách tìm nạp phim và phim truyền hình từ API. Đây là API và tài liệu.

Tạm kết

Những điều vĩ đại đều có chung một bước đó là "bắt đầu". Tất cả những poject dù lớn hay nhỏ đều cho bạn những kinh nghiệm về nhiều khía cạnh trong công việc. Hi vọng với việc lựa chọn thử một trong những project trên đây sẽ giúp các bạn có những bài học hữu ích. Chúc các bạn thành công.

Nguồn: Medium.com