Cách xây dựng một gian hàng ảnh liên hành tinh

Tìm hiểu cách tích hợp buồng chụp ảnh vào IPFS và biến ảnh tự chụp của bạn trở nên liên hành tinh với web3.storage.

Trong Hội nghị thượng đỉnh web 2022, nhóm sáng tạo và sự kiện Filecoin đã thiết lập một gian hàng triển lãm tuyệt vời tại hội nghị thu hút hơn 3500 khách truy cập muốn tìm hiểu thêm về Web3, Hệ thống tệp liên hành tinh (IPFS) và các giải pháp lưu trữ phân tán của mạng Filecoin.

Filecoin cung cấp nhiều giải pháp để lưu trữ và duy trì các tệp trên Web3 thông qua Giao thức IPFS. Một trong những ứng dụng phổ biến và dễ sử dụng nhất là web3.Storage, giải pháp “một lệnh gọi API tới IPFS và Filecoin” dành cho nhà phát triển.

IPFS là một giao thức web cho phép chia sẻ tệp trong mạng ngang hàng và chia sẻ dữ liệu trong mạng máy tính phân tán. Filecoin đã tạo một giao thức mã nguồn mở cho phép thị trường lưu trữ duy trì các tệp trên IPFS trong một thời gian dài với chi phí thấp. Giải pháp này giải quyết vấn đề lưu trữ trong Web3 và nâng cấp Internet như chúng ta biết để xử lý các thách thức như liên lạc giữa các hành tinh.

Giao tiếp liên hành tinh phải bao gồm ảnh tự chụp! Tìm hiểu cách sử dụng ứng dụng node.js nhẹ để tạo phần mềm gian hàng ảnh có tên Sparkbooth để kết nối với web3.storage và tải ảnh tự chụp của bạn lên IPFS.

Làm thế nào nó hoạt động?

Các bộ phận chính của buồng ảnh là: máy ảnh kỹ thuật số, một số đèn chiếu sáng, máy tính có màn hình cảm ứng, một số phần mềm điều khiển máy ảnh để chụp ảnh và khả năng tải chúng lên mạng IPFS và Filecoin.

Một luồng sự kiện trông như thế này:

1. Màn hình cảm ứng nhận lệnh từ người dùng để chụp ảnh

   
   

2. Phần mềm Photo Booth (gọi là Sparkbooth) sẽ nói chuyện với camera để thực hiện hành động

   
   

3. Sparkbooth lưu ảnh cục bộ trên máy tính

   
   

4. Sparkbooth hỏi người dùng xem họ có muốn gửi đến máy chủ không (thông qua web3.storage)

   
   

5. Sparkbooth gửi ảnh, tên người dùng, mật khẩu và thông báo thành công trong lệnh gọi API tới * fil-photo-booth-uploader * ứng dụng nodejs tùy chỉnh

   
   

6. ứng dụng fil-photobooth-uploader sẽ:

   1. xác thực tên người dùng và mật khẩu

   2. thay đổi định dạng của ảnh thành những gì web3.storage chấp nhận

   3. truy xuất mã thông báo/khóa API từ hệ thống và gửi tới __ web3. __Kho

   4. w__ eb3.storage __ gửi ảnh tới mạng IPFS và sao lưu trên Filecoin

   5. w__ eb3.storage __ sẽ trả ID nội dung IPFS (CID) trở lại fil-photo-booth-uploader

   6. fil-photo-booth-uploader sẽ xây dựng phiên bản http của url CID thông qua web3.storage cổng IPFS

   7. fil-photo-booth-uploader trả lại thông báo thành công cho Sparkbooth 7

      
      

7. Sparkbooth nhận được thông báo thành công: “Ảnh của bạn được gửi tới IPFS qua web3.storage . :-)” cùng với URL của ảnh

   
   

8. Sparkbooth hiển thị mã QR được tạo trên màn hình

Cái nhìn? Nó giống như một gian hàng ảnh bình thường:

Một ví dụ về url IPFS CID:

Một ví dụ:

Toàn bộ dòng chảy trông như thế này:

Để tìm hiểu thêm về IPFS và CID, vui lòng truy cập proto.school .

Hướng dẫn từng bước một

điều kiện tiên quyết

Có một vài điều bạn có thể cần để chạy qua hướng dẫn này:

• 📸 Máy ảnh - bất kỳ Canon hiện đại nào
• 💻 Máy tính - bất kỳ máy tính để bàn đa năng nào có màn hình cảm ứng hoặc máy tính xách tay có màn hình cảm ứng
• 👨🏻‍💻 Phần mềm Photo Booth - Sparkbooth 7
• 🤖 Một máy chủ ứng dụng - Tôi đang sử dụng Heroku để thuận tiện
• 📦 Sản phẩm hỗ trợ IPFS - tài khoản web3.storage
• 🌎 Kết nối Internet - một cách để nói chuyện với WWW có dây hoặc không dây (wifi)\

Bước 1, Thiết lập Web3.Storage

1. Tạo một web3.storage tài khoản thông qua của bạn Github tài khoản hoặc email

2. Chuyển đến Tài khoản > Mã thông báo API

3. Tạo Mã thông báo API mới, đặt tên theo bất kỳ thứ gì bạn thích (ví dụ: Filecoin Web Summit 2022)

4. Sao chép khóa API bằng cách sử dụng nút sao chép

5. Lưu cái này để dùng sau. Bạn sẽ cần đặt cái này trong ứng dụng fil-photo-booth-uploader làm biến môi trường

Bước 2: triển khai ứng dụng nodejs

Để Sparkbooth 7 và web3.storage nói chuyện dễ dàng, chúng tôi sẽ cần một chút trợ giúp để dịch ngôn ngữ của họ. Ứng dụng nodejs sẽ giúp chúng tôi đạt được điều này. Nó sẽ cần được lưu trữ trên một máy chủ và chúng tôi đang sử dụng Heroku cho nó (Nếu bạn biết một cách Web3 gốc để lưu trữ nó, vui lòng DM cho tôi. Tôi rất muốn thử).

1. đầu tiên đi đến github.com (đăng ký tài khoản mới nếu chưa có)

2. Tham quan Trình tải lên gian hàng ảnh Filecoin và sau đó nhấp vào Ngã ba. Điều này sẽ cho phép bạn sao chép mã nguồn vào tài khoản hoặc kho lưu trữ của riêng bạn và cho phép bạn kết nối nó với Heroku.

3. Đăng ký với một tài khoản heroku . Heroku giống như AWS, một nền tảng dành cho nhà phát triển tập trung giúp chạy các ứng dụng hoặc máy chủ gần như miễn phí.

4. Tạo một ứng dụng mới và đặt tên sự kiện trong đó.

5. Chúng tôi có thể sẽ cần một ứng dụng mới cho mỗi sự kiện.

6. Trong “Phương thức triển khai”, hãy chọn GitHub rồi đăng nhập vào tài khoản GitHub của bạn. Cho phép Heroku kéo mã vào chính nó để xây dựng ứng dụng và chạy máy chủ.

7. Trong phần “Kết nối với GitHub”, tìm kiếm tên repo bạn vừa rẽ nhánh (ví dụ: fil-photo) sau đó kết nối kho lưu trữ mã.

8. Để lại tất cả các cài đặt và nhấp vào “Triển khai nhánh” để khởi động bản dựng đầu tiên. Heroku đủ thông minh để có thể nhận ra loại ứng dụng. Tiếp theo: xây dựng và triển khai nó.

9. Tuy nhiên, trước khi máy chủ hoạt động, chúng tôi sẽ cần đặt tên người dùng, mật khẩu và web3.storage Mã thông báo API trong môi trường máy chủ. Heroku có thể truy cập nó một cách an toàn mà không cần đưa chúng ra internet. Chuyển đến “Cài đặt” rồi đến “Vars cấu hình”.

10. Đặt các cấu hình sau, hoán đổi SPARKBOOTH_PASSWORD, SPARKBOOTH_USER, W3S_API_TOKEN bằng mật khẩu, tên người dùng và web3.storage mã thông báo api tương ứng. Tên phải chính xác như trên.

11. Ứng dụng sẽ được chạy ngay bây giờ! Bạn có thể vào “Miền” trong “Cài đặt” để tìm URL để đưa vào sparkbooth 7 sau này.

Bước 3: Thiết lập Sparkbooth 7

Bước cuối cùng là chuẩn bị phần mềm trên máy tính xách tay của buồng chụp ảnh để nói chuyện với ứng dụng nodejs tùy chỉnh của chúng tôi để hoàn tất quy trình thiết lập. \

1. Đi đến Sparkbooth.com . Tải xuống Gian hàng điện tử 7 máy ảnh DSLR , trả cho lệ phí cấp giấy phép hoặc dùng thử.

2. Mở Sparkbooth và xác nhận mua hàng của bạn.

3. Khi bạn mở ứng dụng, nó sẽ tối đa hóa, nhưng bạn có thể nhấn “ESC” để thoát. Chuyển đến cài đặt ở trên cùng bên trái:

4. Định cấu hình “Gửi tới tài khoản” sau đó nhập tên người dùng và mật khẩu bạn muốn sử dụng. “URL dịch vụ” phải là địa chỉ ứng dụng Heroku + “/upload-w3s”. (ví dụ http://fil-photo-booth-uploader.herokuapp.com:443/upload-w3s)

5. Bạn có thể kiểm tra kết nối bằng cách sử dụng nút kiểm tra. Nó sẽ dẫn đến một thông báo lỗi, nhưng lệnh gọi API vẫn sẽ chuyển đến ứng dụng Heroku và đặt một ảnh thử nghiệm vào của bạn web3.storage tài khoản. Bạn có thể kiểm tra hình ảnh thử nghiệm trong tài khoản web3.storage của mình. Nếu bạn có thể nhìn thấy ảnh “thử nghiệm gian hàng ảnh”, thiết lập đã thành công! Nhấp chuột đây để kiểm tra.

w3up beta sắp ra mắt

Ứng dụng này được xây dựng vào năm 2022 và sử dụng các API web3.storage hiện có. Tại thời điểm viết bài này, có các API w3up beta mới có sẵn từ web3.storage, bao gồm các thành phần web giao diện người dùng cho nhiều khung . Điều này sẽ giúp việc bắt đầu viết các ứng dụng sử dụng IPFS trở nên dễ dàng hơn.

Một số gợi ý cải tiến

Ứng dụng này không hoàn hảo! Có một vài lĩnh vực có thể được cải thiện:

1. Bảo vệ

Mặc dù đây chỉ là một mánh lới quảng cáo để thể hiện cơ sở, tính bảo mật của ứng dụng nodejs không phải là lý tưởng. Việc xác thực mật khẩu và tên người dùng trong logic ứng dụng không được ưu tiên. Tôi tin rằng chúng ta nên đặt ứng dụng phía sau tường lửa hoặc cổng API để xác thực ủy quyền trong tiêu đề trước khi chuyển lệnh gọi đến ứng dụng của chúng ta.

2. Kinh nghiệm

Sparkbooth 7 rất tuyệt, nhưng giao diện người dùng có vẻ khá hạn chế. Sẽ tốt hơn nếu chúng ta có thể tùy chỉnh điều này nhiều hơn một chút. Có lẽ một phần mềm gian hàng ảnh mã nguồn mở có thể giúp chúng tôi đạt được điều này?

3. Thư viện ảnh gần đây

Có khả năng, chúng tôi có thể sử dụng một máy tính riêng để hiển thị những bức ảnh mới nhất cho khách truy cập. Họ có thể chọn ảnh họ muốn để gửi email cho chính họ, hiển thị lại mã QR hoặc chia sẻ ảnh trên mạng xã hội. Điều này sẽ liên quan đến việc xây dựng giao diện người dùng cho trình tải lên fil-photo-booth, đây có thể là một dự án rất thú vị đối với nhà phát triển giao diện người dùng.

4. Sử dụng một chương trình phụ trợ ứng dụng phi tập trung. Có thể ai đó như Fluence hoặc IPVM có thể trợ giúp.

Phần kết luận

Trong Hội nghị thượng đỉnh web kéo dài ba ngày, gian hàng ảnh Filecoin có thời gian hoạt động là 99% và mất điện 1% do sự cố kết nối internet tại hội nghị. Tổng cộng, gian hàng ảnh đã xuất bản 934 bức ảnh lên Mạng Filecoin. Đó là gần một nghìn ảnh tự chụp đã sẵn sàng để đi liên hành tinh nhờ dịch vụ rất tiện dụng của web3.storage!

Gian hàng chụp ảnh cũng nổi tiếng. Vào ngày thứ ba, một phóng viên của CNN cũng đã phỏng vấn gian hàng, (vâng, gian hàng đang trở nên nổi tiếng… không phải tôi).

Phóng viên CNN phỏng vấn Photo Booth Filecoin tại Web Summit, Lisbon, Bồ Đào Nha

Vui lòng sử dụng hướng dẫn này để xây dựng gian hàng ảnh liên hành tinh của riêng bạn cho các sự kiện, buổi họp mặt, buổi gặp mặt, bữa tiệc hoặc chỉ để giải trí.

Mạng Filecoin hiện có 16EiB dung lượng lưu trữ và hơn 300PiB dữ liệu đã được lưu trữ trên đó. Có nhiều cách để đóng góp hoặc sử dụng dự án này. Tìm hiểu thêm về việc tham gia đây .