Dapplets × NEAR là một Dapplet (một Ứng dụng tăng cường) có thể phân tích cú pháp các bài đăng trên Twitter và lưu trữ chúng trong hợp đồng NEAR. Nó cũng có thể hiển thị các tweet đã lưu của bạn trên trang.
1. Giới Thiệu
Dapplets — là các ứng dụng tương tác với các trang web, tăng cường chúng bằng cách chèn các tiện ích con khác nhau, phân tích cú pháp dữ liệu của các trang và thêm một số chức năng mới. Họ có thể cải thiện trải nghiệm người dùng khi sử dụng mạng xã hội, dịch vụ video và các nguồn khác.
Dapplets sử dụng tiện ích mở rộng mà chúng tôi đang tạo. Tiện ích mở rộng này cung cấp một API đơn giản cho các nhà phát triển dapplets và có khả năng lớn cho cộng đồng dapplets. Nền tảng của chúng tôi là phi tập trung. Chúng tôi sử dụng mạng NEAR và Ethereum cho các đăng ký và hợp đồng của mình. Chúng tôi cũng sử dụng các kho lưu trữ phi tập trung, như Swarm, IPFS và SIA để lưu trữ code dapplets và đa phương tiện.
Để sử dụng nền tảng của chúng tôi, trước tiên bạn cần cài đặt Dapplets Extension. Hiện nó đang ở giai đoạn alpha và chưa được xuất bản lên Google Chrome hoặc bất kỳ cửa hàng nào khác. Để cài đặt nó, hãy làm theo các bước sau:
- Mở một trong các trình duyệt sau: Google Chrome, Firefox, Brave, Tor. (Các bước sau đây được mô tả cho Google Chrome. Các bước có thể khác nhau ở các trình duyệt khác.)
The following steps are described for Google Chrome. The steps may differ in other browsers.
- Tải xuống Tiện ích mở rộng trình duyệt Dapplets.
- Mở chrome://extensions trong một tab mới.
- Bật chế độ Nhà phát triển và nhấn F5 để làm mới trang.
- Kéo và Thả tệp đã tải xuống vào trang tiện ích mở rộng. Phần mở rộng sẽ tự động cài đặt.
- Nhấp vào biểu tượng tiện ích mở rộng Dapplets trên thanh tiện ích mở rộng. Hãy thử ứng dụng Dapplets × NEAR.
2. Hướng Dẫn
Hãy cùng nghiên cứu cách thức hoạt động của Dapplet này và tại sao Dapplet lại là một nền tảng NEAR miễn phí.
Mục tiêu của ví dụ này là thể hiện sự tương tác giữa NEAR và Dapplets. Nếu đây là lần đầu tiên bạn gặp Dapplets, chúng tôi khuyên bạn nên xem thử tài liệu của chúng tôi trước. Nó bao gồm một số bài tập giải thích cách tạo dapplet và bộ điều hợp, từ những cái đơn giản đến phức tạp. Chúng tôi thực sự khuyên bạn nên xem qua các ví dụ ex01 và ex04 mô tả cách tạo các dapplet và dapplet cơ bản nhất. Kiến thức bạn nhận được sẽ giúp bạn hiểu các ví dụ dễ dàng hơn.
Đoạn code mở đầu cho ví dụ này nằm trong một bài riêng: bài tập.
Bạn có thể sao chép repo này. Nó sẽ không hoạt động trực tiếp. Hãy thử các bước sau để bắt đầu nó.
Hãy xem cấu trúc. Có ba thành phần: dapplet, overlay và contract.
Dapplet là điểm vào của ứng dụng. Nó sử dụng bộ điều hợp để tương tác với các trang web, xác định bối cảnh để tăng cường và các tiện ích con để chèn. Bạn có thể tìm thấy các chức năng cốt lõi của tiện ích mở rộng bên trong dapplet. Chúng tôi sử dụng TypeScript trong dự án của mình.
Overlay được định nghĩa theo cách của chúng tôi là một nơi mà người dùng có thể làm điều gì đó với dữ liệu đã được phân tích cú pháp, kết nối với các chức năng của dapplet cốt lõi thông qua dapplet bridge và quản lý các tham số tăng cường. Nó là một phần bất lực của ứng dụng, nhưng nó chạy trong môi trường khác và được xuất bản dưới dạng một gói riêng biệt. Trong hầu hết các trường hợp, chúng tôi sử dụng React như một trong những framework phổ biến nhất. Nhưng bạn có thể sử dụng một khuôn khổ mà bạn thích hoặc JavaScript hoặc TypeScript thuần túy.
Contract không kết nối trực tiếp với các mô-đun khác và có thể nằm bên ngoài dapplet. Tuy nhiên, hợp đồng NEAR đơn giản này được tạo riêng cho dapplet này. Đây là lý do tại sao rất tiện lợi khi đặt nó vào cấu trúc ứng dụng.
Chúng ta hãy xem xét từng mô-đun.
2.1. Dapplet
Nhìn vào ./dapplet/src/index.ts
Đầu tiên, chúng tôi tạo lớp injectable với trình trang trí @Injectable và sử dụng @Inject để thêm Twitter Adapter làm biến dưới dạng lớp adapter. Đồng thời tạo phương thức activate. Khi chạy adapter đã chọn nó tìm thấy ngữ cảnh cụ thể và đang tải. Nó sẽ chứa tất cả logic chính.
Thêm button vào mỗi tweet. Đưa code này vào để activate:
Nhìn vào code. Chúng tôi nhận được button tiện ích từ adapter. Sau đó, chạy phương thức attachConfig. Nó nhận một đối tượng với tên của contexts, sẽ được sử dụng làm khóa. Giá trị là các hàm nhận ngữ cảnh được phân tích cú pháp làm đối số duy nhất và trả về một tiện ích con hoặc một mảng tiện ích con. Bạn cũng có thể trả về null, false hoặc undefined.
Widget là một hàm nhận một đối tượng bao gồm các trạng thái của widget. Các thông số trạng thái được mô tả trong tài liệu về adapters. Bạn có thể tìm thấy tài liệu về Twitter Adapter tại đây. Trong trường hợp của chúng tôi, chúng tôi thêm một hình ảnh vào button và tooltip. Thực thi là một hàm chạy khi được nhấp vào. Bây giờ chúng tôi chỉ hiển thị ngữ cảnh được phân tích cú pháp trong bảng điều khiển.
Chạy dapplet:
⚠️Vì trình duyệt đang chặn các trang có chứng chỉ bảo mật có vấn đề, hãy truy cập https: // localhost: 3001 / dapplet.json khi ứng dụng đang chạy và đồng ý chạy ở chế độ không an toàn
Mở tiện ích mở rộng. Chuyển đến tab Developer và bật máy chủ phát triển: https: // localhost: 3001 / dapplet.json.
Chuyển đến tab Dapplets. Bạn sẽ thấy huy hiệu nhà phát triển của Dapplets x NEAR. Bật nó lên.
Bây giờ bạn có thể thấy các button bổ sung trên các tweet của chúng tôi. Nhấp vào button và mở bảng điều khiển. Bạn sẽ thấy ngữ cảnh được phân tích cú pháp của tweet.
Bạn đã hoàn thành nó! Xin chúc mừng!!! Quay trở lại code.
Chúng tôi muốn hiển thị dữ liệu đã phân tích cú pháp không phải trong bảng điều khiển mà là cho người dùng. Chúng tôi sẽ sử dụng một overlay cho việc này. Nhưng trước khi triển khai overlay, hãy thêm logic tương tác giữa dapplet và overlay vào dapplet.
Hãy thay đổi code của chúng tôi. Thêm biến lớp variable _overlay kiểu bất kỳ. Trong activate, hãy thêm đoạn code sau:
Hàm cốt lõi Core.overlay (các vấn đề về đánh máy sẽ sớm được khắc phục) nhận một đối tượng có name overlay và title overlay và trả về đối tượng Overlay mà chúng ta lưu trong biến _overlay.
Hãy thêm phương thức openOverlay vào lớp:
Trong ví dụ này, chúng tôi gọi phương thức send overlay. Gồm có hai đối số: tên của dữ liệu và dữ liệu để send overlay.
Thêm openOverlay vào function và pass đã phân tích cú pháp vào overlay. Đây là đoạn code hiện tại của dapplet:
Mở tệp manifest ../dapplet/dapplet.json
⚠️ Vì trình duyệt đang chặn các trang có chứng chỉ bảo mật có vấn đề, hãy truy cập https: // localhost: 3000 khi ứng dụng đang chạy và đồng ý chạy ở chế độ không an toàn.
Ở đây, chúng tôi thấy URL của overlay có tên ‘overlay’ sẽ được sử dụng trong chế độ nhà phát triển. Trong quá trình xuất bản dapplet cho cơ quan đăng ký, overlay sẽ được xuất bản lên bộ lưu trữ phi tập trung (decentralized storage).
Chúng tôi cũng thấy Twitter Adapter trong phần phụ lục. Chúng tôi đang sử dụng phiên bản 0.9.0 trong ví dụ.
Hãy chuyển sang overlay.
2.2. Overlay
Như chúng tôi đã đề cập trước đây, overlay có thể được tạo theo bất kỳ cách nào bạn muốn. Chúng tôi sử dụng React trong hầu hết các dự án của mình. Chúng tôi sẽ không phân tích toàn bộ mã overlay, mà chỉ phân tích những điểm quan trọng cho các khía cạnh kiến trúc của chúng tôi.
Để tương tác với dapplet, hãy cài đặt gói npm @dapplets/dapplet-overlay-bridge:
Để lấy dữ liệu từ dapplet, chúng ta cần lớp Bridge trong phần overlay. Nhìn vào mô-đun ./overlay/src/dappletBridge.ts. Đây là phương thức onData nơi chúng tôi đăng ký sự kiện ‘data’ mà chúng tôi đã mô tả trong dapplet.
Sau đó, chúng tôi sử dụng nó trong mô-đun App.tsx.
Bây giờ hãy lưu các thay đổi và tải lại trang Twitter. Khi bạn nhấp vào nút, bạn sẽ thấy lớp phủ với dữ liệu tweet đã chọn.
Thật tuyệt! Nhưng mục tiêu của chúng tôi là lưu dữ liệu này vào chuỗi NEAR và lấy lại. Vì vậy, chúng ta hãy xem hợp đồng.
2.3. NEAR smart contract
Nhìn vào mô-đun ./contract. Có một hợp đồng thông minh NEAR đơn giản được viết bằng AssemblyScript với create-near-app .
Trong ./contract/assembly/index.ts chúng tôi thấy một PersistentUnorderedMap có tên tweetsByNearId. Nó lưu trữ một loạt dữ liệu tweet được tuần tự hóa với ID người dùng hiện tại. Nó có các phương pháp để lưu, loại bỏ và truy xuất các tweet đã lưu.
Bạn có thể tìm thấy tất cả dữ liệu cần thiết về cách viết, kiểm tra và triển khai NEAR hợp đồng thông minh trong tài liệu chính thức và Learn NEAR khóa học và hướng dẫn.
Hãy xem cách kết nối với hợp đồng thông minh và sử dụng các phương pháp của nó trong dapplet.
Thêm đoạn code sau vào phương thức activate của mô-đun : ./dapplet/src/index.ts
Bây giờ, chúng ta sẽ cung cấp các phương thức hợp đồng trong overlay. Để chuyển các phương thức thông qua dapplets bridge, hãy thêm một hàm listen vào lệnh overlay. Đừng sợ, chỉ cần sao chép và dán đoạn code này 🙂
Ba hàm asynchronius cuối cùng chuyển các phương thức hợp đồng của chúng tôi đến overlay. Bốn hàm đầu tiên cần phải ghép nối ví với dapplet. Để lấy đối tượng Wallet, chúng tôi sử dụng phương thức Core.wallet, với tên tham số (near hoặc ethereum) và mạng. Ví có các phương thức isConnected, connect, disconnect và tham số accountId .
Bước tiếp theo là thay đổi ./overlay/src/dappletBridge.ts. Chúng ta phải tạo các hàm đã được mô tả trong dapplet, có sẵn trong overlay. Sao chép đoạn code sau vào lớp Bridge .
Bây giờ chúng ta có thể sử dụng các phương thức hợp đồng trong các mô-đun overlay. Chúng tôi có thể ủy quyền cho dapplet với ví NEAR testnet và lưu dữ liệu của các tweet đã chọn vào hợp đồng thông minh. Chúng tôi cũng có thể xem dữ liệu đã lưu của mình trong lớp overlay.
Không giới hạn tất cả mã đã cam kết trong ./overlay/src/App.tsx. Lưu các thay đổi và tải lại trang Twitter.
Một quả cherry ở trên cùng sẽ là sự bổ sung của khả năng xem các tweet đã lưu mà không cần phân tích cú pháp mới. Để làm điều này, chỉ cần thêm phương thức Core.onAction vào activate trong ./dapplet/src/index.ts và các chức năng opening cho overlay của nó.
Bây giờ bạn sẽ thấy biểu tượng trang chủ gần tên dapplets.
Một cú nhấp chuột vào nút sẽ mở ra một lớp phủ với các tweet đã lưu.
Xin chúc mừng tất cả những người đã hoàn thành phần cuối của hướng dẫn! Chúng tôi hy vọng nó đã thành công.
Đây là kết quả: dapplets-near-example
Nếu điều gì đó không hiệu quả với bạn hoặc bạn vẫn có một số câu hỏi, bạn có thể tham gia các cuộc trò chuyện của chúng tôi trong Discord và Telegram.
Cảm ơn bạn đã dành thời gian học các khóa học về NEAR. Chúng tôi hy vọng kiến thức mới này sẽ hữu ích và bạn sẽ tiếp tục phát triển các ứng dụng ấn tượng và thành công trên nền tảng Dapplets bằng cách sử dụng các khả năng của giao thức NEAR 🚀✨
Contacts:
Web: dapplets.org
Docs: docs.dapplets.org
GitHub: github.com/dapplets
Discord: discord.gg/YcxbkcyjMV
Telegram: t.me/dapplets
Twitter: @dappletsproject
