Cách tạo Đăng nhập Web3 với Moralis

Bạn đang tìm kiếm xác thực Web3 cho dApp của mình? Trong bài viết này, chúng tôi sẽ giải thích cách tạo thông tin đăng nhập Web3 chỉ trong 5 bước!

Xác thực Web3 là điều tối quan trọng khi xây dựng các ứng dụng phi tập trung (dApps). Do đó, các nhà phát triển blockchain phải biết cách tạo thông tin đăng nhập Web3. Trong trường hợp bạn đã lập trình trực tiếp trên các nút Ethereum RPC , bạn biết rằng việc tạo tính năng đăng nhập Web3 có thể khá phức tạp và tốn thời gian. Tuy nhiên, năm 2021 đã giới thiệu một cách tiếp cận mới để phát triển blockchain, giúp phá vỡ những hạn chế của các nút RPC . Chúng ta đang nói về nền tảng phát triển Web 3.0 hàng đầu - Moralis . “ Firebase cho tiền điện tử ” này trang bị cho các nhà phát triển thành thạo JavaScript với SDK Web3 tối tân. Đổi lại, các nhà phát triển có thể triển khai các chức năng chỉ trong vài bước với các dòng mã ngắn vào dApp của họ và khởi chạy dự án của họ trong thời gian kỷ lục. Trong số nhiều giải pháp mà Moralis cung cấp, chúng ta sẽ xem trong bài viết này về cách tạo thông tin đăng nhập Web3 trong năm bước với Moralis.

Tiếp theo, trước tiên chúng tôi sẽ trình bày một số điều cơ bản để giúp bạn bắt kịp tốc độ. Sau đó, chúng tôi sẽ tập trung vào một dự án ví dụ để chỉ cho bạn cách tạo đăng nhập Web3 một cách nhanh chóng. Nhiệm vụ mà chúng tôi sẽ đề cập sẽ hướng dẫn bạn về Next.js và cách nó đơn giản hóa mọi thứ cho bạn. Tất nhiên, bạn cũng sẽ thấy việc tạo một giao diện người dùng đơn giản và sạch sẽ dễ dàng như thế nào. Tuy nhiên, bạn cũng sẽ có cơ hội học cách xử lý lỗi đúng cách. Vì chúng tôi sẽ chỉ cho bạn cách tạo thông tin đăng nhập Web3, bạn cũng sẽ học cách sử dụng Moralis. Bằng cách hoàn thành thiết lập Moralis ban đầu, bạn sẽ biết cách tận dụng tối đa công cụ mạnh mẽ này cho tất cả các dự án trong tương lai của mình. Để bạn có thể dễ dàng theo dõi sự hướng dẫn của chúng tôi, hãy đảm bảo tạo tài khoản Moralis miễn phí của bạn .  

Đăng nhập Web3 là gì?

Đăng nhập Web3 đôi khi được biết đến với cái tên đơn giản là xác thực Web3 . Như vậy, nghe có vẻ phức tạp hơn thực tế. Nếu được thực hiện đúng cách, nó sẽ không có nhiều hơn một nút duy nhất theo sau là xác nhận. Tất nhiên, sự đơn giản trong giao diện người dùng không có nghĩa là mọi thứ không quá nâng cao trong phần phụ trợ. Như bạn đã biết, hầu hết các trang web Web2 sử dụng kết hợp email và mật khẩu để đăng nhập người dùng của nó. Tuy nhiên, khi chúng tôi xem xét lĩnh vực Web3, địa chỉ tiền điện tử của người dùng có thể đóng vai trò là khóa. Hơn nữa, mật mã đảm bảo sự an toàn của mạng blockchain và người dùng là khá phức tạp. Do đó, người dùng đăng nhập thủ công bằng các địa chỉ tiền điện tử dài và xử lý các cặp khóa sẽ không thân thiện với người dùng.

May mắn thay, bạn không phải lo lắng về điều đó khi sử dụng các công cụ phù hợp. Bạn sẽ sớm thấy rằng bao gồm xác thực Web3 có thể đơn giản như sao chép và dán các đoạn mã ngắn. Điều thứ hai có thể thực hiện được nhờ Moralis và các ví Web3 có uy tín (“trình kết nối”). Nhiều ví tiền điện tử hiện có ở dạng tiện ích mở rộng trình duyệt và ứng dụng dành cho thiết bị di động và cung cấp trải nghiệm người dùng vững chắc. Hơn nữa, trong khi chức năng chính của chúng có thể là giúp người dùng xử lý và lưu trữ tiền điện tử, chúng cũng có thể được sử dụng làm công cụ đăng nhập Web3. Do đó, chúng là công cụ cần thiết cho tất cả những ai quan tâm đến việc khám phá lĩnh vực tiền điện tử.

Với ví Web3, việc lưu trữ, gửi và nhận các mã thông báo có thể thay thế và không thể thay thế (NFT) trở nên khả thi. Họ cung cấp cho người dùng một cách để truy cập vào nền tảng DeFi, thị trường NFT, trò chơi blockchain hoặc NFT và các cửa hàng tiền điện tử khác. Do đó, ví Web3 cũng là một công cụ cần phải có cho các nhà phát triển blockchain. Một lần nữa, Moralis hỗ trợ bạn bằng cách tích hợp đầy đủ MetaMask và WalletConnect , sẽ bao gồm tất cả các nỗ lực Web3 của bạn. 

Tại sao bạn cần đăng nhập Web3?

Bây giờ, bạn biết rằng các trang web và ứng dụng Web3 cung cấp cho người dùng một cách để tương tác với blockchain. Do đó, họ phải cung cấp một cách an toàn để người dùng kết nối với một mạng tiền điện tử cụ thể. Đây thực sự là những gì mà một giải pháp đăng nhập Web3 thích hợp thực hiện. Sau khi xác thực thành công, người dùng có thể tương tác với những người dùng đã xác thực khác và các tính năng của mạng đó. Do đó, tất cả các dApp cần loại đăng nhập này. 

Bây giờ bạn đã biết đăng nhập Web3 là gì và tại sao bạn cần nó, đã đến lúc thực hiện một dự án ví dụ. Để làm cho mọi thứ trở nên thú vị, bạn sẽ có cơ hội tập trung vào giao diện người dùng. Tuy nhiên, bạn cũng sẽ học được cách dễ dàng bao gồm tất cả các khía cạnh phụ trợ liên quan đến blockchain với sự trợ giúp của Moralis.

Cách tạo Đăng nhập Web3 trong 5 bước với Moralis

Trong các phần sắp tới, chúng tôi sẽ chỉ cho bạn cách tạo thông tin đăng nhập Web3 bằng Visual Studio Code (VSC), Next.js, Moralis 'SDK và MetaMask. Phương pháp xây dựng thông tin đăng nhập Web3 này rất tuyệt vì nó cho phép bạn tùy chỉnh hoàn toàn giao diện người dùng. Tuy nhiên, nếu bạn quan tâm đến quá trình triển khai đăng nhập Web3 chỉ trong vài phút, bạn nên sử dụng bản soạn thảo dApp Ethereum tốt nhất . Trong tương lai, chúng tôi sẽ đề cập đến năm bước sau bằng cách chia chúng thành các phân đoạn dễ quản lý hơn:

1. Thiết lập dự án Next.js.
2. Xây dựng giao diện người dùng.
3. Đạo đức của thiết lập ban đầu.
4. Tích hợp Đạo đức.
5. Xử lý lỗi.

Ngoài các giải thích và ảnh chụp màn hình của chúng tôi, bạn cũng sẽ có cơ hội xem video về chuyên gia Moralis khi anh ấy hoàn thành các bước trên. Tuy nhiên, trước khi tiếp tục, chúng ta hãy xem trước giao diện mà bạn sẽ xây dựng.

Xem trước ví dụ đăng nhập Web3

Vì dự án ví dụ này nhằm mục đích cho bạn thấy các tùy chọn của bạn, chúng tôi tập trung vào sự đơn giản. Như vậy, đây là thông tin đăng nhập Web3 mà bạn sẽ tạo:

Bằng cách nhấp vào nút “Đăng nhập bằng Moralis”, MetaMask sẽ được nhắc, yêu cầu xác nhận:

Ví dụ đăng nhập Web3 của chúng tôi cũng sẽ có thể xử lý tất cả các lỗi. Ví dụ: nếu người dùng nhấp vào nút "Hủy" thay vì "Đăng", họ sẽ nhận được thông báo sau:

Ngoài ra, nếu người dùng nhấp vào nút "Đăng", họ sẽ đến trang đơn giản này:

Như bạn có thể thấy, trọng tâm của chúng tôi là trang đăng nhập. Do đó, bạn có thể sử dụng hướng dẫn này nếu bạn muốn xây dựng một trang đăng nhập cấp nhà phát triển đẹp cho dApps của mình. Về sau, bạn cũng sẽ học cách sử dụng CSS “flexbox”, làm cho các phần tử định vị của trang trở nên cực kỳ đơn giản. 

Bước 1: Cách tạo đăng nhập Web3 - Thiết lập dự án Next.js

Bắt đầu bằng cách mở thiết bị đầu cuối của bạn và đi tới thư mục bạn muốn sử dụng cho dự án ví dụ đăng nhập Web3 này. Bạn cũng cần đảm bảo có phiên bản mới nhất của nút đang chạy. Vì chúng tôi đang sử dụng Next.js cho dự án này, hãy bắt đầu bằng cách nhập hoặc dán “ npx create-next-app @ new ” vào dòng lệnh. Tiếp theo, bạn sẽ được hỏi về tên dự án của mình. Bạn có thể làm theo ví dụ của chúng tôi và đặt tên là “trang đăng nhập”. Hơn nữa, sẽ mất vài giây để tạo dự án mới:

Khi quá trình cài đặt hoàn tất, hãy nhập “ trang đăng nhập cd ” vào dòng lệnh, sau đó là “ npm run dev ”. Bây giờ, bạn sẽ có một phương tiện chặn sạch sẽ sẵn sàng để xây dựng trang đăng nhập Web3:

Tiếp theo, khởi chạy trình soạn thảo mã của bạn (chúng tôi thích VSC hơn) và mở dự án đã tạo ở trên. Bạn sẽ thấy rằng một số thư mục và tệp mặc định đã được tạo:

Hơn nữa, như bạn có thể thấy ở phía bên phải của ảnh chụp màn hình trước đó, có rất nhiều nội dung mẫu liên quan đến Next.js mà chúng tôi không cần. Do đó, hãy mở tệp “index.js”, chọn mọi thứ từ “đầu” đến “chân trang” và xóa nó. Ngoài ra, hãy xóa tất cả các dòng “nhập” và “tên lớp” trong “<div>”. Kết quả là, bạn sẽ chỉ còn lại điều này:

Lưu ý: Nếu bạn muốn tìm hiểu thêm chi tiết về Next.js so với React , hãy nhớ xem video bên dưới bắt đầu lúc 0:52.

Bước 2: Cách tạo đăng nhập Web3 - Xây dựng giao diện người dùng

Nếu bạn thành thạo JavaScript, bạn sẽ không gặp vấn đề gì khi theo dõi phần này của dự án. Tuy nhiên, vì khá khó để trình bày rõ ràng tất cả các bước bằng ảnh chụp màn hình, chúng tôi sẽ giao bạn cho một chuyên gia Moralis. Trong video ở đầu bài viết này (lúc 5:12), anh ấy sẽ bắt đầu bằng cách hướng dẫn bạn cách chỉnh sửa tệp “global.css” bên trong thư mục “styles”. Trong tương lai, anh ấy sẽ tạo một thành phần đăng nhập mới và thêm một tệp CSS mới cho nó. Đây cũng là nơi bạn sẽ tìm hiểu thêm chi tiết về “flexbox”. Cuối cùng, bạn sẽ có phần giao diện người dùng sẵn sàng (như được trình bày trong bản xem trước) trong vòng chưa đầy hai mươi phút. 

Lưu ý: Bạn có thể truy cập toàn bộ mã tại GitHub . 

Bước 3: Cách tạo đăng nhập Web3 - Thiết lập ban đầu của Moralis

Cho dù bạn quyết định tạo dApp từ đầu (như trong dự án ví dụ này) hay sử dụng bản soạn thảo Web3 cuối cùng của chúng tôi , trước tiên bạn cần hoàn thành một số bước thiết lập Moralis đơn giản. Như vậy, hãy làm theo các bước dưới đây:

1. Tạo tài khoản Moralis miễn phí của bạn - Trong trường hợp bạn vẫn chưa tạo tài khoản Moralis miễn phí của mình, hãy thực hiện việc này ngay bây giờ. Bạn có thể sử dụng liên kết ở đầu bước này. Như vậy, bạn sẽ đến trang đăng ký. Tại đó, bạn cần nhập email và tạo mật khẩu. Để hoàn tất quá trình, bạn cần nhấp vào liên kết xác nhận (kiểm tra hộp thư đến của bạn). Mặt khác, trong trường hợp bạn đã có tài khoản Moralis đang hoạt động, chỉ cần đăng nhập bằng thông tin đăng nhập của bạn.
2. Tạo máy chủ Moralis - Bên trong khu vực quản trị Moralis của bạn, hãy chuyển đến tab "Máy chủ". Tại đó, nhấp vào nút “+ Tạo máy chủ mới” ở góc trên cùng bên phải (xem ảnh chụp màn hình bên dưới). Tiếp theo, bạn cần chọn loại mạng phù hợp nhất với nhu cầu của mình từ menu thả xuống (xem hình ảnh bên dưới). Khi làm việc trên các dự án mẫu hoặc thử nghiệm các dApp của mình, bạn muốn tập trung vào các tùy chọn “Máy chủ Testnet” hoặc “Máy chủ Devchain cục bộ”. Trong trường hợp của chúng tôi, chúng tôi sẽ đi với cái sau. Tuy nhiên, khi bạn muốn phát hành dApps của mình ra công chúng, bạn cần chọn “Mainnet Server”.

Với loại mạng được chọn, bạn sẽ thấy một cửa sổ bật lên yêu cầu bạn nhập thông tin chi tiết về máy chủ của mình. Bắt đầu bằng cách nhập tên máy chủ của bạn (đây có thể là bất kỳ thứ gì bạn muốn). Sau đó, chọn khu vực, loại mạng và (các) chuỗi của bạn. Cuối cùng, nhấp vào “Thêm phiên bản” để khởi động máy chủ của bạn:

1. Cài đặt Moralis SDK - Trước khi tiếp tục, bạn cũng cần cài đặt Moralis SDK. Để làm như vậy, hãy nhập “ npm install secureis ”, sau đó là “ npm install react -hicalis ” trong dòng lệnh của thiết bị đầu cuối của bạn. Sau đó, nhập “ npm run dev ”.

Bước 4: Cách tạo Đăng nhập Web3 - Tích hợp Moralis

Bây giờ máy chủ của bạn đã hoạt động và đã đến lúc tích hợp Moralis vào mã của bạn. Tuy nhiên, trước khi làm như vậy, hãy mở “_app.js” bên trong VSC và áp dụng các chỉnh sửa cần thiết (video ở trên lúc 24:02).

1. Truy cập chi tiết máy chủ - Bạn truy cập URL máy chủ và thông tin ID ứng dụng bằng cách nhấp vào “Xem chi tiết” bên cạnh tên máy chủ của bạn:

Tiếp theo, bạn thấy tất cả thông tin mình cần (“URL máy chủ” và “ID ứng dụng”) được hiển thị trong một cửa sổ mới. Sau đó, sử dụng các biểu tượng sao chép ở phía bên phải để sao chép các chi tiết cần thiết:

1. Khởi tạo Moralis - Bây giờ là lúc khởi tạo Moralis. Điều này cuối cùng sẽ cung cấp cho bạn quyền truy cập đầy đủ vào sức mạnh của Moralis và do đó, đáp ứng nhu cầu phụ trợ của bạn. Trong trường hợp dự án mẫu của chúng tôi, bạn sẽ cần điền tệp “_app.js” đã chuẩn bị ở trên để kết nối và khởi tạo Moralis:

• Khi làm việc với bảng soạn sẵn Web3 của chúng tôi, bạn sẽ cần điền tệp “.env” của mình:

1. Thêm chức năng đăng nhập Web3 - Với Moralis được tích hợp, bạn có thể dễ dàng đưa chức năng phụ trợ vào dApp mẫu của mình (trang đăng nhập). Bạn thực hiện việc này bằng cách thêm một vài dòng mã đơn giản vào tệp “Login.js”. Bằng cách sử dụng phép thuật của Moralis, tất cả những công việc khó khăn khi đăng nhập Web3 đều được che đậy bằng “ onClick = (authenticate) ”. Để được hướng dẫn chi tiết, hãy sử dụng video ở trên bắt đầu lúc 26:08.

Bước 5: Cách tạo đăng nhập Web3 - Xử lý lỗi

Với bốn bước trên đã hoàn thành, bạn đã có một trang đăng nhập Web3 đẹp và hoạt động theo ý của mình. Do đó, việc tìm hiểu sâu hơn về xử lý lỗi là không cần thiết. Tuy nhiên, đó là điều bạn nên cân nhắc thiết lập để dApp chạy mượt mà hơn. Hơn nữa, nó sẽ cho người dùng biết nếu họ mắc lỗi và đảm bảo trải nghiệm người dùng tốt hơn. Do đó, chúng tôi khuyên bạn nên xem video bắt đầu lúc 28:00. 

Cách tạo đăng nhập Web3 trong 5 bước - Tóm tắt

Bằng cách làm theo hướng dẫn của chúng tôi và hoàn thành các bước đã nêu, bạn hẳn đã tạo được trang đăng nhập Web3 của riêng mình. Với tính năng này, trang được tạo theo định nghĩa là một dApp khá đơn giản. Tất nhiên, bây giờ bạn có thể thêm một số chức năng bổ sung. Hơn nữa, bằng cách tham gia dự án ví dụ này, bạn đã học được cách bắt đầu các dự án Next.js, cách thiết lập Moralis và cách sử dụng Moralis để đáp ứng nhu cầu phụ trợ của bạn. Hơn nữa, bây giờ bạn biết rằng năm bước sau đây là ý chính của nhiệm vụ "cách tạo thông tin đăng nhập Web3":

1. Thiết lập dự án Next.js.
2. Xây dựng giao diện người dùng.
3. Đạo đức của thiết lập ban đầu.
4. Tích hợp Đạo đức.
5. Xử lý lỗi.

Ngoài ra, bạn cũng đã tìm hiểu về lối tắt cuối cùng để triển khai dApps sẵn sàng cho người dùng trong vài phút. Phần sau được thực hiện bằng cách sử dụng bảng soạn sẵn Web3 thực tế nhất, có sẵn tại GitHub.

Nguồn bài viết gốc tại https://moralis.io

What is GEEK

Buddha Community

A Template Language That Completely Separates Structure and Logic/Ruby

Curly

Curly is a template language that completely separates structure and logic. Instead of interspersing your HTML with snippets of Ruby, all logic is moved to a presenter class.

Installing

Installing Curly is as simple as running gem install curly-templates. If you're using Bundler to manage your dependencies, add this to your Gemfile

gem 'curly-templates'

Curly can also install an application layout file, replacing the .erb file commonly created by Rails. If you wish to use this, run the curly:install generator.

$ rails generate curly:install

How to use Curly

In order to use Curly for a view or partial, use the suffix .curly instead of .erb, e.g. app/views/posts/_comment.html.curly. Curly will look for a corresponding presenter class named Posts::CommentPresenter. By convention, these are placed in app/presenters/, so in this case the presenter would reside in app/presenters/posts/comment_presenter.rb. Note that presenters for partials are not prepended with an underscore.

Add some HTML to the partial template along with some Curly components:

<!-- app/views/posts/_comment.html.curly -->
<div class="comment">
  <p>
    {{author_link}} posted {{time_ago}} ago.
  </p>

  {{body}}

  {{#author?}}
    <p>{{deletion_link}}</p>
  {{/author?}}
</div>

The presenter will be responsible for providing the data for the components. Add the necessary Ruby code to the presenter:

# app/presenters/posts/comment_presenter.rb
class Posts::CommentPresenter < Curly::Presenter
  presents :comment

  def body
    SafeMarkdown.render(@comment.body)
  end

  def author_link
    link_to @comment.author.name, @comment.author, rel: "author"
  end

  def deletion_link
    link_to "Delete", @comment, method: :delete
  end

  def time_ago
    time_ago_in_words(@comment.created_at)
  end

  def author?
    @comment.author == current_user
  end
end

The partial can now be rendered like any other, e.g. by calling

render 'comment', comment: comment
render comment
render collection: post.comments

Curly components are surrounded by curly brackets, e.g. {{hello}}. They always map to a public method on the presenter class, in this case #hello. Methods ending in a question mark can be used for conditional blocks, e.g. {{#admin?}} ... {{/admin?}}.

Identifiers

Curly components can specify an identifier using the so-called dot notation: {{x.y.z}}. This can be very useful if the data you're accessing is hierarchical in nature. One common example is I18n:

<h1>{{i18n.homepage.header}}</h1>

# In the presenter, the identifier is passed as an argument to the method. The
# argument will always be a String.
def i18n(key)
  translate(key)
end

The identifier is separated from the component name with a dot. If the presenter method has a default value for the argument, the identifier is optional – otherwise it's mandatory.

Attributes

In addition to an identifier, Curly components can be annotated with attributes. These are key-value pairs that affect how a component is rendered.

The syntax is reminiscent of HTML:

<div>{{sidebar rows=3 width=200px title="I'm the sidebar!"}}</div>

The presenter method that implements the component must have a matching keyword argument:

def sidebar(rows: "1", width: "100px", title:); end

All argument values will be strings. A compilation error will be raised if

• an attribute is used in a component without a matching keyword argument being present in the method definition; or
• a required keyword argument in the method definition is not set as an attribute in the component.

You can define default values using Ruby's own syntax. Additionally, if the presenter method accepts arbitrary keyword arguments using the **doublesplat syntax then all attributes will be valid for the component, e.g.

def greetings(**names)
  names.map {|name, greeting| "#{name}: #{greeting}!" }.join("\n")
end

{{greetings alice=hello bob=hi}}
<!-- The above would be rendered as: -->
alice: hello!
bob: hi!

Note that since keyword arguments in Ruby are represented as Symbol objects, which are not garbage collected in Ruby versions less than 2.2, accepting arbitrary attributes represents a security vulnerability if your application allows untrusted Curly templates to be rendered. Only use this feature with trusted templates if you're not on Ruby 2.2 yet.

Conditional blocks

If there is some content you only want rendered under specific circumstances, you can use conditional blocks. The {{#admin?}}...{{/admin?}} syntax will only render the content of the block if the admin? method on the presenter returns true, while the {{^admin?}}...{{/admin?}} syntax will only render the content if it returns false.

Both forms can have an identifier: {{#locale.en?}}...{{/locale.en?}} will only render the block if the locale? method on the presenter returns true given the argument "en". Here's how to implement that method in the presenter:

class SomePresenter < Curly::Presenter
  # Allows rendering content only if the locale matches a specified identifier.
  def locale?(identifier)
    current_locale == identifier
  end
end

Furthermore, attributes can be set on the block. These only need to be specified when opening the block, not when closing it:

{{#square? width=3 height=3}}
  <p>It's square!</p>
{{/square?}}

Attributes work the same way as they do for normal components.

Collection blocks

Sometimes you want to render one or more items within the current template, and splitting out a separate template and rendering that in the presenter is too much overhead. You can instead define the template that should be used to render the items inline in the current template using the collection block syntax.

Collection blocks are opened using an asterisk:

{{*comments}}
  <li>{{body}} ({{author_name}})</li>
{{/comments}}

The presenter will need to expose the method #comments, which should return a collection of objects:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def comments
    @post.comments
  end
end

The template within the collection block will be used to render each item, and it will be backed by a presenter named after the component – in this case, comments. The name will be singularized and Curly will try to find the presenter class in the following order:

• Posts::ShowPresenter::CommentPresenter
• Posts::CommentPresenter
• CommentPresenter

This allows you some flexibility with regards to how you want to organize these nested templates and presenters.

Note that the nested template will only have access to the methods on the nested presenter, but all variables passed to the "parent" presenter will be forwarded to the nested presenter. In addition, the current item in the collection will be passed, as well as that item's index in the collection:

class Posts::CommentPresenter < Curly::Presenter
  presents :post, :comment, :comment_counter

  def number
    # `comment_counter` is automatically set to the item's index in the collection,
    # starting with 1.
    @comment_counter
  end

  def body
    @comment.body
  end

  def author_name
    @comment.author.name
  end
end

Collection blocks are an alternative to splitting out a separate template and rendering that from the presenter – which solution is best depends on your use case.

Context blocks

While collection blocks allow you to define the template that should be used to render items in a collection right within the parent template, context blocks allow you to define the template for an arbitrary context. This is very powerful, and can be used to define widget-style components and helpers, and provide an easy way to work with structured data. Let's say you have a comment form on your page, and you'd rather keep the template inline. A simple template could look like:

<!-- post.html.curly -->
<h1>{{title}}</h1>
{{body}}

{{@comment_form}}
  <b>Name: </b> {{name_field}}<br>
  <b>E-mail: </b> {{email_field}}<br>
  {{comment_field}}

  {{submit_button}}
{{/comment_form}}

Note that an @ character is used to denote a context block. Like with collection blocks, a separate presenter class is used within the block, and a simple convention is used to find it. The name of the context component (in this case, comment_form) will be camel cased, and the current presenter's namespace will be searched:

class PostPresenter < Curly::Presenter
  presents :post
  def title; @post.title; end
  def body; markdown(@post.body); end

  # A context block method *must* take a block argument. The return value
  # of the method will be used when rendering. Calling the block argument will
  # render the nested template. If you pass a value when calling the block
  # argument it will be passed to the presenter.
  def comment_form(&block)
    form_for(Comment.new, &block)
  end

  # The presenter name is automatically deduced.
  class CommentFormPresenter < Curly::Presenter
    # The value passed to the block argument will be passed in a parameter named
    # after the component.
    presents :comment_form

    # Any parameters passed to the parent presenter will be forwarded to this
    # presenter as well.
    presents :post

    def name_field
      @comment_form.text_field :name
    end

    # ...
  end
end

Context blocks were designed to work well with Rails' helper methods such as form_for and content_tag, but you can also work directly with the block. For instance, if you want to directly control the value that is passed to the nested presenter, you can call the call method on the block yourself:

def author(&block)
  content_tag :div, class: "author" do
    # The return value of `call` will be the result of rendering the nested template
    # with the argument. You can post-process the string if you want.
    block.call(@post.author)
  end
end

Context shorthand syntax

If you find yourself opening a context block just in order to use a single component, e.g. {{@author}}{{name}}{{/author}}, you can use the shorthand syntax instead: {{author:name}}. This works for all component types, e.g.

{{#author:admin?}}
  <p>The author is an admin!</p>
{{/author:admin?}}

The syntax works for nested contexts as well, e.g. {{comment:author:name}}. Any identifier and attributes are passed to the target component, which in this example would be {{name}}.

Setting up state

Although most code in Curly presenters should be free of side effects, sometimes side effects are required. One common example is defining content for a content_for block.

If a Curly presenter class defines a setup! method, it will be called before the view is rendered:

class PostPresenter < Curly::Presenter
  presents :post

  def setup!
    content_for :title, post.title

    content_for :sidebar do
      render 'post_sidebar', post: post
    end
  end
end

Escaping Curly syntax

In order to have {{ appear verbatim in the rendered HTML, use the triple Curly escape syntax:

This is {{{escaped}}.

You don't need to escape the closing }}.

Comments

If you want to add comments to your Curly templates that are not visible in the rendered HTML, use the following syntax:

{{! This is some interesting stuff }}

Presenters

Presenters are classes that inherit from Curly::Presenter – they're usually placed in app/presenters/, but you can put them anywhere you'd like. The name of the presenter classes match the virtual path of the view they're part of, so if your controller is rendering posts/show, the Posts::ShowPresenter class will be used. Note that Curly is only used to render a view if a template can be found – in this case, at app/views/posts/show.html.curly.

Presenters can declare a list of accepted variables using the presents method:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
end

A variable can have a default value:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
  presents :comment, default: nil
end

Any public method defined on the presenter is made available to the template as a component:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author_link
    # You can call any Rails helper from within a presenter instance:
    link_to author.name, profile_path(author), rel: "author"
  end

  private

  # Private methods are not available to the template, so they're safe to
  # use.
  def author
    @post.author
  end
end

Presenter methods can even take an argument. Say your Curly template has the content {{t.welcome_message}}, where welcome_message is an I18n key. The following presenter method would make the lookup work:

def t(key)
  translate(key)
end

That way, simple ``functions'' can be added to the Curly language. Make sure these do not have any side effects, though, as an important part of Curly is the idempotence of the templates.

Layouts and content blocks

Both layouts and content blocks (see content_for) use yield to signal that content can be inserted. Curly works just like ERB, so calling yield with no arguments will make the view usable as a layout, while passing a Symbol will make it try to read a content block with the given name:

# Given you have the following Curly template in
# app/views/layouts/application.html.curly
#
#   <html>
#     <head>
#       <title>{{title}}</title>
#     </head>
#     <body>
#       <div id="sidebar">{{sidebar}}</div>
#       {{body}}
#     </body>
#   </html>
#
class ApplicationLayout < Curly::Presenter
  def title
    "You can use methods just like in any other presenter!"
  end

  def sidebar
    # A view can call `content_for(:sidebar) { "some HTML here" }`
    yield :sidebar
  end

  def body
    # The view will be rendered and inserted here:
    yield
  end
end

Rails helper methods

In order to make a Rails helper method available as a component in your template, use the exposes_helper method:

class Layouts::ApplicationPresenter < Curly::Presenter
  # The components {{sign_in_path}} and {{root_path}} are made available.
  exposes_helper :sign_in_path, :root_path
end

Testing

Presenters can be tested directly, but sometimes it makes sense to integrate with Rails on some levels. Currently, only RSpec is directly supported, but you can easily instantiate a presenter:

SomePresenter.new(context, assigns)

context is a view context, i.e. an object that responds to render, has all the helper methods you expect, etc. You can pass in a test double and see what you need to stub out. assigns is the hash containing the controller and local assigns. You need to pass in a key for each argument the presenter expects.

Testing with RSpec

In order to test presenters with RSpec, make sure you have rspec-rails in your Gemfile. Given the following presenter:

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def body
    Markdown.render(@post.body)
  end
end

You can test the presenter methods like this:

# You can put this in your `spec_helper.rb`.
require 'curly/rspec'

# spec/presenters/posts/show_presenter_spec.rb
describe Posts::ShowPresenter, type: :presenter do
  describe "#body" do
    it "renders the post's body as Markdown" do
      assign(:post, double(:post, body: "**hello!**"))
      expect(presenter.body).to eq "<strong>hello!</strong>"
    end
  end
end

Note that your spec must be tagged with type: :presenter.

Examples

Here is a simple Curly template – it will be looked up by Rails automatically.

<!-- app/views/posts/show.html.curly -->
<h1>{{title}}<h1>
<p class="author">{{author}}</p>
<p>{{description}}</p>

{{comment_form}}

<div class="comments">
  {{comments}}
</div>

When rendering the template, a presenter is automatically instantiated with the variables assigned in the controller or the render call. The presenter declares the variables it expects with presents, which takes a list of variables names.

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author
    link_to(@post.author.name, @post.author, rel: "author")
  end

  def description
    Markdown.new(@post.description).to_html.html_safe
  end

  def comments
    render 'comment', collection: @post.comments
  end

  def comment_form
    if @post.comments_allowed?
      render 'comment_form', post: @post
    else
      content_tag(:p, "Comments are disabled for this post")
    end
  end
end

Caching

Caching is handled at two levels in Curly – statically and dynamically. Static caching concerns changes to your code and templates introduced by deploys. If you do not wish to clear your entire cache every time you deploy, you need a way to indicate that some view, helper, or other piece of logic has changed.

Dynamic caching concerns changes that happen on the fly, usually made by your users in the running system. You wish to cache a view or a partial and have it expire whenever some data is updated – usually whenever a specific record is changed.

Dynamic Caching

Because of the way logic is contained in presenters, caching entire views or partials by the data they present becomes exceedingly straightforward. Simply define a #cache_key method that returns a non-nil object, and the return value will be used to cache the template.

Whereas in ERB you would include the cache call in the template itself:

<% cache([@post, signed_in?]) do %>
  ...
<% end %>

In Curly you would instead declare it in the presenter:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def cache_key
    [@post, signed_in?]
  end
end

Likewise, you can add a #cache_duration method if you wish to automatically expire the fragment cache:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_duration
    30.minutes
  end
end

In order to set any cache option, define a #cache_options method that returns a Hash of options:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_options
    { compress: true, namespace: "my-app" }
  end
end

Static Caching

Static caching will only be enabled for presenters that define a non-nil #cache_key method (see Dynamic Caching.)

In order to make a deploy expire the cache for a specific view, set the version of the view to something new, usually by incrementing by one:

class Posts::ShowPresenter < Curly::Presenter
  version 3

  def cache_key
    # Some objects
  end
end

This will change the cache keys for all instances of that view, effectively expiring the old cache entries.

This works well for views, or for partials that are rendered in views that themselves are not cached. If the partial is nested within a view that is cached, however, the outer cache will not be expired. The solution is to register that the inner partial is a dependency of the outer one such that Curly can automatically deduce that the outer partial cache should be expired:

class Posts::ShowPresenter < Curly::Presenter
  version 3
  depends_on 'posts/comment'

  def cache_key
    # Some objects
  end
end

class Posts::CommentPresenter < Curly::Presenter
  version 4

  def cache_key
    # Some objects
  end
end

Now, if the version of Posts::CommentPresenter is bumped, the cache keys for both presenters would change. You can register any number of view paths with depends_on.

Curly integrates well with the caching mechanism in Rails 4 (or Cache Digests in Rails 3), so the dependencies defined with depends_on will be tracked by Rails. This will allow you to deploy changes to your templates and have the relevant caches automatically expire.

Thanks

Thanks to Zendesk for sponsoring the work on Curly.

Contributors

• Daniel Schierbeck (@dasch)
• Benjamin Quorning (@bquorning)
• Jeremy Rodi (@medcat)
• Alisson Cavalcante Agiani (@thelinuxlich)
• Łukasz Niemier (@hauleth)
• Cristian Planas (@Gawyn)
• Steven Davidovitz (@steved)

Build Status

Author: zendesk
Source code: https://github.com/zendesk/curly

#ruby   #ruby-on-rails 

Cách tạo Đăng nhập Web3 với Moralis

Bạn đang tìm kiếm xác thực Web3 cho dApp của mình? Trong bài viết này, chúng tôi sẽ giải thích cách tạo thông tin đăng nhập Web3 chỉ trong 5 bước!

Xác thực Web3 là điều tối quan trọng khi xây dựng các ứng dụng phi tập trung (dApps). Do đó, các nhà phát triển blockchain phải biết cách tạo thông tin đăng nhập Web3. Trong trường hợp bạn đã lập trình trực tiếp trên các nút Ethereum RPC , bạn biết rằng việc tạo tính năng đăng nhập Web3 có thể khá phức tạp và tốn thời gian. Tuy nhiên, năm 2021 đã giới thiệu một cách tiếp cận mới để phát triển blockchain, giúp phá vỡ những hạn chế của các nút RPC . Chúng ta đang nói về nền tảng phát triển Web 3.0 hàng đầu - Moralis . “ Firebase cho tiền điện tử ” này trang bị cho các nhà phát triển thành thạo JavaScript với SDK Web3 tối tân. Đổi lại, các nhà phát triển có thể triển khai các chức năng chỉ trong vài bước với các dòng mã ngắn vào dApp của họ và khởi chạy dự án của họ trong thời gian kỷ lục. Trong số nhiều giải pháp mà Moralis cung cấp, chúng ta sẽ xem trong bài viết này về cách tạo thông tin đăng nhập Web3 trong năm bước với Moralis.

Tiếp theo, trước tiên chúng tôi sẽ trình bày một số điều cơ bản để giúp bạn bắt kịp tốc độ. Sau đó, chúng tôi sẽ tập trung vào một dự án ví dụ để chỉ cho bạn cách tạo đăng nhập Web3 một cách nhanh chóng. Nhiệm vụ mà chúng tôi sẽ đề cập sẽ hướng dẫn bạn về Next.js và cách nó đơn giản hóa mọi thứ cho bạn. Tất nhiên, bạn cũng sẽ thấy việc tạo một giao diện người dùng đơn giản và sạch sẽ dễ dàng như thế nào. Tuy nhiên, bạn cũng sẽ có cơ hội học cách xử lý lỗi đúng cách. Vì chúng tôi sẽ chỉ cho bạn cách tạo thông tin đăng nhập Web3, bạn cũng sẽ học cách sử dụng Moralis. Bằng cách hoàn thành thiết lập Moralis ban đầu, bạn sẽ biết cách tận dụng tối đa công cụ mạnh mẽ này cho tất cả các dự án trong tương lai của mình. Để bạn có thể dễ dàng theo dõi sự hướng dẫn của chúng tôi, hãy đảm bảo tạo tài khoản Moralis miễn phí của bạn .  

Đăng nhập Web3 là gì?

Đăng nhập Web3 đôi khi được biết đến với cái tên đơn giản là xác thực Web3 . Như vậy, nghe có vẻ phức tạp hơn thực tế. Nếu được thực hiện đúng cách, nó sẽ không có nhiều hơn một nút duy nhất theo sau là xác nhận. Tất nhiên, sự đơn giản trong giao diện người dùng không có nghĩa là mọi thứ không quá nâng cao trong phần phụ trợ. Như bạn đã biết, hầu hết các trang web Web2 sử dụng kết hợp email và mật khẩu để đăng nhập người dùng của nó. Tuy nhiên, khi chúng tôi xem xét lĩnh vực Web3, địa chỉ tiền điện tử của người dùng có thể đóng vai trò là khóa. Hơn nữa, mật mã đảm bảo sự an toàn của mạng blockchain và người dùng là khá phức tạp. Do đó, người dùng đăng nhập thủ công bằng các địa chỉ tiền điện tử dài và xử lý các cặp khóa sẽ không thân thiện với người dùng.

May mắn thay, bạn không phải lo lắng về điều đó khi sử dụng các công cụ phù hợp. Bạn sẽ sớm thấy rằng bao gồm xác thực Web3 có thể đơn giản như sao chép và dán các đoạn mã ngắn. Điều thứ hai có thể thực hiện được nhờ Moralis và các ví Web3 có uy tín (“trình kết nối”). Nhiều ví tiền điện tử hiện có ở dạng tiện ích mở rộng trình duyệt và ứng dụng dành cho thiết bị di động và cung cấp trải nghiệm người dùng vững chắc. Hơn nữa, trong khi chức năng chính của chúng có thể là giúp người dùng xử lý và lưu trữ tiền điện tử, chúng cũng có thể được sử dụng làm công cụ đăng nhập Web3. Do đó, chúng là công cụ cần thiết cho tất cả những ai quan tâm đến việc khám phá lĩnh vực tiền điện tử.

Với ví Web3, việc lưu trữ, gửi và nhận các mã thông báo có thể thay thế và không thể thay thế (NFT) trở nên khả thi. Họ cung cấp cho người dùng một cách để truy cập vào nền tảng DeFi, thị trường NFT, trò chơi blockchain hoặc NFT và các cửa hàng tiền điện tử khác. Do đó, ví Web3 cũng là một công cụ cần phải có cho các nhà phát triển blockchain. Một lần nữa, Moralis hỗ trợ bạn bằng cách tích hợp đầy đủ MetaMask và WalletConnect , sẽ bao gồm tất cả các nỗ lực Web3 của bạn. 

Tại sao bạn cần đăng nhập Web3?

Bây giờ, bạn biết rằng các trang web và ứng dụng Web3 cung cấp cho người dùng một cách để tương tác với blockchain. Do đó, họ phải cung cấp một cách an toàn để người dùng kết nối với một mạng tiền điện tử cụ thể. Đây thực sự là những gì mà một giải pháp đăng nhập Web3 thích hợp thực hiện. Sau khi xác thực thành công, người dùng có thể tương tác với những người dùng đã xác thực khác và các tính năng của mạng đó. Do đó, tất cả các dApp cần loại đăng nhập này. 

Bây giờ bạn đã biết đăng nhập Web3 là gì và tại sao bạn cần nó, đã đến lúc thực hiện một dự án ví dụ. Để làm cho mọi thứ trở nên thú vị, bạn sẽ có cơ hội tập trung vào giao diện người dùng. Tuy nhiên, bạn cũng sẽ học được cách dễ dàng bao gồm tất cả các khía cạnh phụ trợ liên quan đến blockchain với sự trợ giúp của Moralis.

Cách tạo Đăng nhập Web3 trong 5 bước với Moralis

Trong các phần sắp tới, chúng tôi sẽ chỉ cho bạn cách tạo thông tin đăng nhập Web3 bằng Visual Studio Code (VSC), Next.js, Moralis 'SDK và MetaMask. Phương pháp xây dựng thông tin đăng nhập Web3 này rất tuyệt vì nó cho phép bạn tùy chỉnh hoàn toàn giao diện người dùng. Tuy nhiên, nếu bạn quan tâm đến quá trình triển khai đăng nhập Web3 chỉ trong vài phút, bạn nên sử dụng bản soạn thảo dApp Ethereum tốt nhất . Trong tương lai, chúng tôi sẽ đề cập đến năm bước sau bằng cách chia chúng thành các phân đoạn dễ quản lý hơn:

1. Thiết lập dự án Next.js.
2. Xây dựng giao diện người dùng.
3. Đạo đức của thiết lập ban đầu.
4. Tích hợp Đạo đức.
5. Xử lý lỗi.

Ngoài các giải thích và ảnh chụp màn hình của chúng tôi, bạn cũng sẽ có cơ hội xem video về chuyên gia Moralis khi anh ấy hoàn thành các bước trên. Tuy nhiên, trước khi tiếp tục, chúng ta hãy xem trước giao diện mà bạn sẽ xây dựng.

Xem trước ví dụ đăng nhập Web3

Vì dự án ví dụ này nhằm mục đích cho bạn thấy các tùy chọn của bạn, chúng tôi tập trung vào sự đơn giản. Như vậy, đây là thông tin đăng nhập Web3 mà bạn sẽ tạo:

Bằng cách nhấp vào nút “Đăng nhập bằng Moralis”, MetaMask sẽ được nhắc, yêu cầu xác nhận:

Ví dụ đăng nhập Web3 của chúng tôi cũng sẽ có thể xử lý tất cả các lỗi. Ví dụ: nếu người dùng nhấp vào nút "Hủy" thay vì "Đăng", họ sẽ nhận được thông báo sau:

Ngoài ra, nếu người dùng nhấp vào nút "Đăng", họ sẽ đến trang đơn giản này:

Như bạn có thể thấy, trọng tâm của chúng tôi là trang đăng nhập. Do đó, bạn có thể sử dụng hướng dẫn này nếu bạn muốn xây dựng một trang đăng nhập cấp nhà phát triển đẹp cho dApps của mình. Về sau, bạn cũng sẽ học cách sử dụng CSS “flexbox”, làm cho các phần tử định vị của trang trở nên cực kỳ đơn giản. 

Bước 1: Cách tạo đăng nhập Web3 - Thiết lập dự án Next.js

Bắt đầu bằng cách mở thiết bị đầu cuối của bạn và đi tới thư mục bạn muốn sử dụng cho dự án ví dụ đăng nhập Web3 này. Bạn cũng cần đảm bảo có phiên bản mới nhất của nút đang chạy. Vì chúng tôi đang sử dụng Next.js cho dự án này, hãy bắt đầu bằng cách nhập hoặc dán “ npx create-next-app @ new ” vào dòng lệnh. Tiếp theo, bạn sẽ được hỏi về tên dự án của mình. Bạn có thể làm theo ví dụ của chúng tôi và đặt tên là “trang đăng nhập”. Hơn nữa, sẽ mất vài giây để tạo dự án mới:

Khi quá trình cài đặt hoàn tất, hãy nhập “ trang đăng nhập cd ” vào dòng lệnh, sau đó là “ npm run dev ”. Bây giờ, bạn sẽ có một phương tiện chặn sạch sẽ sẵn sàng để xây dựng trang đăng nhập Web3:

Tiếp theo, khởi chạy trình soạn thảo mã của bạn (chúng tôi thích VSC hơn) và mở dự án đã tạo ở trên. Bạn sẽ thấy rằng một số thư mục và tệp mặc định đã được tạo:

Hơn nữa, như bạn có thể thấy ở phía bên phải của ảnh chụp màn hình trước đó, có rất nhiều nội dung mẫu liên quan đến Next.js mà chúng tôi không cần. Do đó, hãy mở tệp “index.js”, chọn mọi thứ từ “đầu” đến “chân trang” và xóa nó. Ngoài ra, hãy xóa tất cả các dòng “nhập” và “tên lớp” trong “<div>”. Kết quả là, bạn sẽ chỉ còn lại điều này:

Lưu ý: Nếu bạn muốn tìm hiểu thêm chi tiết về Next.js so với React , hãy nhớ xem video bên dưới bắt đầu lúc 0:52.

Bước 2: Cách tạo đăng nhập Web3 - Xây dựng giao diện người dùng

Nếu bạn thành thạo JavaScript, bạn sẽ không gặp vấn đề gì khi theo dõi phần này của dự án. Tuy nhiên, vì khá khó để trình bày rõ ràng tất cả các bước bằng ảnh chụp màn hình, chúng tôi sẽ giao bạn cho một chuyên gia Moralis. Trong video ở đầu bài viết này (lúc 5:12), anh ấy sẽ bắt đầu bằng cách hướng dẫn bạn cách chỉnh sửa tệp “global.css” bên trong thư mục “styles”. Trong tương lai, anh ấy sẽ tạo một thành phần đăng nhập mới và thêm một tệp CSS mới cho nó. Đây cũng là nơi bạn sẽ tìm hiểu thêm chi tiết về “flexbox”. Cuối cùng, bạn sẽ có phần giao diện người dùng sẵn sàng (như được trình bày trong bản xem trước) trong vòng chưa đầy hai mươi phút. 

Lưu ý: Bạn có thể truy cập toàn bộ mã tại GitHub . 

Bước 3: Cách tạo đăng nhập Web3 - Thiết lập ban đầu của Moralis

Cho dù bạn quyết định tạo dApp từ đầu (như trong dự án ví dụ này) hay sử dụng bản soạn thảo Web3 cuối cùng của chúng tôi , trước tiên bạn cần hoàn thành một số bước thiết lập Moralis đơn giản. Như vậy, hãy làm theo các bước dưới đây:

1. Tạo tài khoản Moralis miễn phí của bạn - Trong trường hợp bạn vẫn chưa tạo tài khoản Moralis miễn phí của mình, hãy thực hiện việc này ngay bây giờ. Bạn có thể sử dụng liên kết ở đầu bước này. Như vậy, bạn sẽ đến trang đăng ký. Tại đó, bạn cần nhập email và tạo mật khẩu. Để hoàn tất quá trình, bạn cần nhấp vào liên kết xác nhận (kiểm tra hộp thư đến của bạn). Mặt khác, trong trường hợp bạn đã có tài khoản Moralis đang hoạt động, chỉ cần đăng nhập bằng thông tin đăng nhập của bạn.
2. Tạo máy chủ Moralis - Bên trong khu vực quản trị Moralis của bạn, hãy chuyển đến tab "Máy chủ". Tại đó, nhấp vào nút “+ Tạo máy chủ mới” ở góc trên cùng bên phải (xem ảnh chụp màn hình bên dưới). Tiếp theo, bạn cần chọn loại mạng phù hợp nhất với nhu cầu của mình từ menu thả xuống (xem hình ảnh bên dưới). Khi làm việc trên các dự án mẫu hoặc thử nghiệm các dApp của mình, bạn muốn tập trung vào các tùy chọn “Máy chủ Testnet” hoặc “Máy chủ Devchain cục bộ”. Trong trường hợp của chúng tôi, chúng tôi sẽ đi với cái sau. Tuy nhiên, khi bạn muốn phát hành dApps của mình ra công chúng, bạn cần chọn “Mainnet Server”.

Với loại mạng được chọn, bạn sẽ thấy một cửa sổ bật lên yêu cầu bạn nhập thông tin chi tiết về máy chủ của mình. Bắt đầu bằng cách nhập tên máy chủ của bạn (đây có thể là bất kỳ thứ gì bạn muốn). Sau đó, chọn khu vực, loại mạng và (các) chuỗi của bạn. Cuối cùng, nhấp vào “Thêm phiên bản” để khởi động máy chủ của bạn:

1. Cài đặt Moralis SDK - Trước khi tiếp tục, bạn cũng cần cài đặt Moralis SDK. Để làm như vậy, hãy nhập “ npm install secureis ”, sau đó là “ npm install react -hicalis ” trong dòng lệnh của thiết bị đầu cuối của bạn. Sau đó, nhập “ npm run dev ”.

Bước 4: Cách tạo Đăng nhập Web3 - Tích hợp Moralis

Bây giờ máy chủ của bạn đã hoạt động và đã đến lúc tích hợp Moralis vào mã của bạn. Tuy nhiên, trước khi làm như vậy, hãy mở “_app.js” bên trong VSC và áp dụng các chỉnh sửa cần thiết (video ở trên lúc 24:02).

1. Truy cập chi tiết máy chủ - Bạn truy cập URL máy chủ và thông tin ID ứng dụng bằng cách nhấp vào “Xem chi tiết” bên cạnh tên máy chủ của bạn:

Tiếp theo, bạn thấy tất cả thông tin mình cần (“URL máy chủ” và “ID ứng dụng”) được hiển thị trong một cửa sổ mới. Sau đó, sử dụng các biểu tượng sao chép ở phía bên phải để sao chép các chi tiết cần thiết:

1. Khởi tạo Moralis - Bây giờ là lúc khởi tạo Moralis. Điều này cuối cùng sẽ cung cấp cho bạn quyền truy cập đầy đủ vào sức mạnh của Moralis và do đó, đáp ứng nhu cầu phụ trợ của bạn. Trong trường hợp dự án mẫu của chúng tôi, bạn sẽ cần điền tệp “_app.js” đã chuẩn bị ở trên để kết nối và khởi tạo Moralis:

• Khi làm việc với bảng soạn sẵn Web3 của chúng tôi, bạn sẽ cần điền tệp “.env” của mình:

1. Thêm chức năng đăng nhập Web3 - Với Moralis được tích hợp, bạn có thể dễ dàng đưa chức năng phụ trợ vào dApp mẫu của mình (trang đăng nhập). Bạn thực hiện việc này bằng cách thêm một vài dòng mã đơn giản vào tệp “Login.js”. Bằng cách sử dụng phép thuật của Moralis, tất cả những công việc khó khăn khi đăng nhập Web3 đều được che đậy bằng “ onClick = (authenticate) ”. Để được hướng dẫn chi tiết, hãy sử dụng video ở trên bắt đầu lúc 26:08.

Bước 5: Cách tạo đăng nhập Web3 - Xử lý lỗi

Với bốn bước trên đã hoàn thành, bạn đã có một trang đăng nhập Web3 đẹp và hoạt động theo ý của mình. Do đó, việc tìm hiểu sâu hơn về xử lý lỗi là không cần thiết. Tuy nhiên, đó là điều bạn nên cân nhắc thiết lập để dApp chạy mượt mà hơn. Hơn nữa, nó sẽ cho người dùng biết nếu họ mắc lỗi và đảm bảo trải nghiệm người dùng tốt hơn. Do đó, chúng tôi khuyên bạn nên xem video bắt đầu lúc 28:00. 

Cách tạo đăng nhập Web3 trong 5 bước - Tóm tắt

Bằng cách làm theo hướng dẫn của chúng tôi và hoàn thành các bước đã nêu, bạn hẳn đã tạo được trang đăng nhập Web3 của riêng mình. Với tính năng này, trang được tạo theo định nghĩa là một dApp khá đơn giản. Tất nhiên, bây giờ bạn có thể thêm một số chức năng bổ sung. Hơn nữa, bằng cách tham gia dự án ví dụ này, bạn đã học được cách bắt đầu các dự án Next.js, cách thiết lập Moralis và cách sử dụng Moralis để đáp ứng nhu cầu phụ trợ của bạn. Hơn nữa, bây giờ bạn biết rằng năm bước sau đây là ý chính của nhiệm vụ "cách tạo thông tin đăng nhập Web3":

1. Thiết lập dự án Next.js.
2. Xây dựng giao diện người dùng.
3. Đạo đức của thiết lập ban đầu.
4. Tích hợp Đạo đức.
5. Xử lý lỗi.

Ngoài ra, bạn cũng đã tìm hiểu về lối tắt cuối cùng để triển khai dApps sẵn sàng cho người dùng trong vài phút. Phần sau được thực hiện bằng cách sử dụng bảng soạn sẵn Web3 thực tế nhất, có sẵn tại GitHub.

Nguồn bài viết gốc tại https://moralis.io

How to Build a Web3 Netflix Clone

Moralis Projects - Learn to Build a Web3 Netflix Clone

Join Moralis Projects for weekly challenges building Web3 projects! Moralis Projects represent the best way to learn how to build Web3 projects with real-life use cases. You’ll build the projects alongside the community, allowing you to make new connections whilst building. What’s more, you can even earn NFTs for completing Moralis Projects! New Moralis Projects

Prerequisites

1. Web Programming using ReactJS
2. Knowledge of and experience using wallet like Metamask

This Week’s Challenge – Web3 Netflix Clone

In this week’s project you will be building a Web3 Netflix Clone, with movie assets stored in a decentral fashion on IPFS. Users will only be able to view a movie on the website if they have been authenticated through their crypto wallet. 

This authentication is facilitated by Moralis’ Web3 Development Platform, which is the number one way to build your first dapp. We’ll also be using the Moralis database to allow authenticated users to add films to their personal list of favorites.

Need Help?

There is an official Discord channel on the Moralis Discord Server dedicated to  each Moralis Project. This channel can be used to connect with others building each week’s projects, to ask questions, and present your builds. There will be a Moralis Tech Support wizard helping out as well if you’ve got any questions or need any assistance.

Be sure to join the Discord server to take part in the conversation! Then be sure to set up notifications in projects-notifications and jump into this week’s channel; #web3-Netflix.

Can You Improve Our Projects?

All Moralis Projects are starter tutorials designed to give you a strong push in the right direction on your Web3 development journey. Also, if you want to go even further and build a more ambitious project based on what you learned in a Moralis Project, we highly encourage it!

If you find mistakes in any Moralis Projects, feel free to share them with the community and even suggest merge requests in the final build repos, to get you some extra brownie points.

How to Get Started

The starter code required for this week’s build may be cloned from the youtube-tutorials GitHub Repository.

git clone https://github.com/MoralisWeb3/youtube-tutorials.git

After cloning the repo, be sure to navigate to the correct folder.

cd youtube-tutorials

cd Netflix-Starter

And finally you can install all the project dependencies by running the command

yarn

Original article source at https://moralis.io

#moralis #web3 #netflix #nft #blockchain

What is Moralis Web3?

What is Moralis Web3? Life-Changing Ethereum SDK, Building Dapps Fast

Moralis - Build Serverless Web3 dApps

Build dApps using Javascript without backend hassle. User authentication. Real-time and historic blockchain transactions.

#web3 #blockchain #dapps #moralis 

Building Sim City Web3 game Using Moralis Web3 Unity SDK, NFTs

Sim City Web3

Explore the world map to buy and sell virtual properties

This is a sample game to demonstrate the

The "Sim City Web3" sample game demonstrates the Moralis Web3 Unity SDK, geo mapping, and NFTs.

Getting Started

1. Download this repo (*.zip or *.git)
2. Download the Unity Editor
3. Open this repo in the Unity Editor
4. Enjoy

See docs.moralis.io/unity for more info.

Bonus: Service Type

This game features flexibility on the service layer. Toggle the SimCityWeb3ServiceType enum to explore various ways that the game communicates with external services.

Select The Config Here

Select The Desired SimCityWeb3ServiceType Enum value

Documentation

• README.md - The primary documentation for this repo
• Assets/Moralis Web3 Unity SDK Samples/SimCityWeb3/Documentation/ReadMe.asset - Select this asset in Unity to get started

Configuration

• Unity Target - Standalone MAC/PC
• Unity Version - Use this Version
• Unity Rendering - Standard Render Pipeline (SRP)
• Unity Aspect Ratio - Game View 16x10

Structure

• Unity/ - Open this folder in the Unity Editor
• Assets/Moralis Web3 Unity SDK Samples/SimCityWeb3/Scenes/ - Open any Scene. Press 'Play'!

Dependencies

• Moralis Web3 Unity SDK - Already included via Unity Package Manager as this Version

Media

Video: Unity Web3 Development - Sim City Web3 Sample Game

Thumbnail

TimeStamps

▶ 0:00 Intro Topic ▶ 1:18 Main Topic ▶ 2:52 Theory - OVERVIEW ▶ 4:21 Theory - Polygon Blockchain ▶ 5:49 Theory - NFTs For Gaming ▶ 9:23 Theory - Project Setup ▶ 13:03 Theory - Project Todo List ▶ 14:38 Live Coding - OVERVIEW ▶ 16:16 Live Coding - Hardhat / Solidity ▶ 28:24 Live Coding - Unity / C# ▶ 35:31 Live Coding - Web3ContractService ▶ 46:49 Live Coding - Playing Finished Game ▶ 51:07 Recap Topic

Images

Images

Intro Menu	Game

Readme.asset	Project Window

Sequence Diagram

What is Moralis?

Moralis

• Moralis provides a single workflow for building high performance dapps. Fully compatible with your favorite web3 tools and services.
• See moralis.io for more info.

Web3 Unity SDK

• This SDK brings the power of Moralis to your Unity projects.
• See docs.moralis.io/unity for more info.

Need Help?

• Contact us in the Moralis Forum.
• See forum.moralis.io/unity for more info.

Download details:

Author: MoralisWeb3
Source code: https://github.com/MoralisWeb3/web3-unity-sdk-sample-game-scw

#solidity #smartcontract #blockchain #web3 #ethereum #dapp #moralis  #unity #nft