Quản lý hình ảnh toàn bộ (feat. Node.js, React, MongoDB, AWS)

Bí quyết quản lý hình ảnh nằm trong tay bạn! 💾
Hãy tham gia cùng chúng tôi để có một ví dụ đầy đủ thú vị.

Quản lý hình ảnh
Nó có ảnh hưởng đến tính hoàn chỉnh của dịch vụ không?

Nếu tốc độ tải hình ảnh quá chậm thì sao?

_{Điều này sẽ gây hại đến khả năng sử dụng dịch vụ và ảnh hưởng nghiêm trọng đến trải nghiệm của người dùng.}

Nhiều mối quan tâm xung quanh việc quản lý hình ảnh 🤔

• Tôi có thể gửi và nhận hình ảnh như thế nào?
• Có gì khác biệt nếu tôi lưu trữ hình ảnh riêng biệt trên máy chủ/phần mềm/đám mây?
• Có cách nào để hiển thị bản xem trước tệp hoặc trạng thái đang tải khi tải hình ảnh lên không?
• Tôi cũng cần triển khai phân trang và cuộn vô hạn...

Tốc độ và khả năng mở rộng
Bạn không thể bỏ lỡ cả hai.

Khi phát triển trang web hoặc ứng dụng, có hai điều chính mà các nhà phát triển mong muốn.

Đầu tiên, nó phải nhanh.

Theo dữ liệu được Amazon công bố cách đây khoảng 10 năm, cứ tăng tốc độ tải 100ms thì doanh số giảm 1%. Đối với một công ty lớn như Amazon, ngay cả 1% cũng là một khoản lỗ rất lớn.

Thứ hai, nó phải có khả năng mở rộng.

Nếu tốc độ tải chậm lại chỉ vì số lượng người dùng dịch vụ tăng lên thì điều đó chẳng có ý nghĩa gì, đúng không? Bởi vì mọi người đều muốn tạo ra một dịch vụ được nhiều người sử dụng.

Các tệp như hình ảnh ở đây có thể có tác động rất lớn đến tốc độ và khả năng mở rộng. Như chúng ta đã thấy ở trên, trang web sẽ tự tải, nhưng đôi khi bạn có thể cảm thấy bực bội vì hình ảnh không tải nhanh và chậm. Nếu bạn không xử lý các tệp như hình ảnh một cách hiệu quả, nó sẽ xuất hiện sớm hơn so với các thành phần phụ trợ/giao diện khác. Và nếu thực hiện sai, nó có thể gây ra gánh nặng không cần thiết cho máy chủ chính của bạn.

Chúng ta có nên nghĩ đến nguyên nhân gốc rễ không? Tệp hình ảnh có dung lượng rất lớn. Thông thường, khi giao diện người dùng gọi giao diện người dùng, lượng dữ liệu nhận được sẽ được tính bằng kilobyte (KB), ngay cả khi lượng dữ liệu đó rất lớn. Các tập tin như hình ảnh có thể có kích thước lên tới hàng chục megabyte (MB). Việc tải một hình ảnh lớn như vậy chắc chắn sẽ làm chậm dịch vụ.

Do đó, chúng ta có thể thấy rằng việc xử lý và quản lý tốt các tập tin hình ảnh là một yếu tố rất quan trọng trong phát triển dịch vụ .

Tôi cảm thấy điều đó thông qua trải nghiệm của riêng tôi
Tôi sẽ cho bạn biết bí quyết.

Tôi đã gặp vấn đề này rất nhiều khi phát triển thương mại điện tử trước đây. Tôi gặp vấn đề với thời gian tải trang khá lâu. Sau khi xem xét, tôi thấy rằng không chỉ hình ảnh chi tiết do các nhà thiết kế tải lên mà cả hình ảnh do khách hàng tải lên trong bài đánh giá của họ cũng chiếm khá nhiều dung lượng.

Cho dù tôi có tối ưu hóa DB và phần phụ trợ bao nhiêu đi nữa thì cũng vô nghĩa. Việc tải hình ảnh đã trở thành một nút thắt cổ chai. Chúng tôi đã giải quyết vấn đề này một cách tối ưu khi xây dựng trung tâm thương mại của riêng mình.

Nhưng đáng ngạc nhiên là có rất nhiều người xung quanh tôi không biết rõ về giải pháp này. Mặc dù nhiều người đã triển khai một phần giải pháp, nhưng vẫn còn nhiều người chưa biết về việc Thay đổi kích thước bằng AWS Lambda , đặc biệt là hàm presignedUrl của AWS S3 . Khi bạn xây dựng cơ sở hạ tầng đúng cách thì mọi việc rất dễ dàng, nhưng vấn đề là có rất nhiều quy trình tẻ nhạt và nếu thực hiện sai, bạn có thể gặp rủi ro bảo mật đám mây. Ngay cả khi bạn cố gắng tìm kiếm thông tin thì chúng cũng nằm rải rác ở đây đó nên lúc đầu không dễ để hiểu. Tôi quyết định tạo bài giảng này vì tôi muốn có thể xem thông tin rời rạc này như một nguồn tài nguyên được tinh chỉnh.

Vì vậy, bài giảng này được sản xuất dưới dạng một ngăn xếp đầy đủ, bao gồm cả đám mây cũng như phần phụ trợ và phần giao diện. Tuy nhiên, khóa học này không tập trung vào full-stack. Để quản lý hình ảnh đúng cách, bạn cần chú ý đến front-end, back-end và cơ sở hạ tầng (đám mây), vì vậy chúng tôi đã tạo ra bài giảng này dưới dạng bài giảng đầy đủ để hiểu đúng về cấu trúc. 😊 Xin lưu ý rằng tập trung vào quản lý hình ảnh !

Chỉ dành cho bài giảng này
Để tôi cho bạn biết các tính năng.

_{Quản lý hình ảnh
Bao phủ mọi thứ
Bài giảng đầy đủ!}

_{Phù hợp với cuộc sống thực
Kỹ năng giải quyết vấn đề
Tôi sẽ nuôi dưỡng bạn.}

_{Tập trung cốt lõi!
Chỉ những thứ cần thiết
Một cách gọn nhẹ.}

Khóa học này tập trung vào quản lý hình ảnh.

Khóa học này là khóa học đầy đủ bao gồm cả phần back-end, front-end và cơ sở hạ tầng (đám mây). Xin lưu ý rằng các kỹ thuật được sử dụng trong bài giảng sẽ cố gắng giải thích các khái niệm, nhưng trọng tâm là 'quản lý hình ảnh' .

Khóa học sử dụng nhiều công nghệ khác nhau như Node.js, MongoDB và React. Tôi nghĩ điều này hữu ích cho những người mới tham gia phát triển dịch vụ khi thấy được luồng toàn bộ ngăn xếp 🙂

Giải quyết vấn đề từ nhỏ đến lớn.

Một nhà phát triển giỏi đóng vai trò là người giải quyết vấn đề phải có khả năng xác định chính xác nguyên nhân của vấn đề và tạo ra giải pháp tối ưu trong thời gian (nguồn lực) nhất định. Do đó, việc học bằng cách chỉ ghi nhớ giải pháp là vô nghĩa.

Một ví dụ tiêu biểu là Kiến trúc vi dịch vụ (MSA). Nếu bạn giới thiệu nó cho một dịch vụ mà bạn mới bắt đầu sau khi nghe mọi người nói tốt về nó, nó có thể dẫn đến thảm họa... Bạn thậm chí có thể không hiểu tại sao lại cần nó. Trên thực tế, nó thậm chí có thể có tác dụng ngược lại.

Vì vậy, khóa học này sẽ không dạy cho bạn giải pháp hoàn hảo ngay từ đầu. Tôi sẽ bắt đầu bằng một vấn đề nhỏ mà bạn có thể liên tưởng đến. Và chúng tôi sẽ tăng dần mức độ khó và chỉ cho bạn phương pháp giải quyết vấn đề tối ưu .

Chứa đựng bản chất của việc quản lý hình ảnh.

Khóa học này chỉ đề cập đến những kỹ thuật thiết yếu để học quản lý hình ảnh. Ví dụ, bạn có thể tạo một trang web đẹp bằng cách sử dụng khung CSS hoặc tự thiết kế trang web, đúng không? Tuy nhiên, vì nó không liên quan gì đến việc học quản lý hình ảnh nên tôi đã áp dụng kiểu dáng tối giản mặc dù thiết kế khá mộc mạc. Hãy theo dõi bài giảng và tìm hiểu những kiến ​​thức cốt lõi, thiết yếu!

Đối với những người này
Tôi khuyên bạn nên làm vậy.

Sử dụng hình ảnh
Ứng dụng web hoặc di động
Bất kỳ ai muốn phát triển

Phát triển toàn bộ ngăn xếp
Nhẹ nhàng một lần
Bất cứ ai muốn nếm thử nó

AWS (Dịch vụ web của Amazon)
Đám mây
Bất cứ ai muốn sử dụng nó

Hình ảnh, v.v.
Quản lý các tập tin có dung lượng cao
Dành cho những ai muốn làm đúng

Như một ví dụ vui
Hãy theo dõi và học hỏi.

Chúng tôi sẽ tạo một trang album ảnh đơn giản sử dụng nhiều ảnh và phân phối lên đám mây.
Thực hiện theo hướng dẫn từ đầu đến cuối để tạo một ứng dụng web có thể dễ dàng tải nhiều hình ảnh!

_{Dịch vụ album ảnh mà chúng ta sẽ tạo trong bài giảng này có cấu trúc như sau.}

Câu hỏi dự kiến ​​Q&A

Người chia sẻ kiến ​​thức
Bạn có tò mò về các bài giảng khác không?

Cơ bản về MongoDB
Để thực hành (hợp tác với Node.js)
DB đúng
Thiết kế và sử dụng!