Guia para criar seu primeiro componente na NEAR Protocol através do NEAR BOS

O BOS, ou Sistema Operacional Blockchain, é uma inovação do protocolo NEAR, que evolui de uma Camada 1 singular para contratos inteligentes. Ele permite aos desenvolvedores criar, implantar e armazenar front-ends de forma segura e descentralizada para qualquer protocolo em qualquer cadeia compatível com NEAR e EVM. Com o BOS, o NEAR pode servir como uma camada comum para descobrir e acessar uma variedade de aplicativos da Web 3.0, incluindo DEXs, mercados NFT e plataformas de jogos.


O BOS é composto por três pilares: Gateways, Componentes e Blockchains, cada um desempenhando um papel crucial na construção de um ecossistema descentralizado e interoperável.

🔹Componentes (widgets) Componentes são interfaces cujos códigos-fonte são armazenados inteiramente na cadeia. Uma das principais vantagens é que os desenvolvedores podem fazer um fork dessas aplicações e implementar suas próprias versões, ou até mesmo compor diferentes componentes juntos.

🔹Gateways (Entradas) Gateways são pontos de acesso para aplicações Web 3.0 que extraem código diretamente do blockchain NEAR e o representam para seus usuários.

🔹Blockchain Como substrato fundamental para armazenar contratos e transações inteligentes. O verdadeiro poder do BOS vem do fato de ser independente do blockchain que é usado. Os componentes podem chamar funções em qualquer um deles.


O Blockchain Operating System (BOS) promove a descentralização e a segurança ao armazenar todo o código de componentes na blockchain NEAR, garantindo sua auditabilidade e visibilidade. Evita ataques hackers, mostrando a importância de front-ends seguros e descentralizados. O BOS torna os front-ends resistentes à censura ao descentralizá-los, promovendo também o código aberto e a capacidade de composição, permitindo aos desenvolvedores reutilizar e remixar componentes para criar experiências de usuário aprimoradas. Prevê-se que o BOS integre diversos aplicativos DeFi em uma única plataforma, simplificando a experiência do usuário e reduzindo as barreiras de entrada. Oferece uma abordagem ágil para desenvolvedores, permitindo prototipagem rápida e colaboração eficiente.


COMO CRIAR UM COMPONENTE NO BOS

Um componente ou widget é uma série de códigos que permitirá criar um aplicativo no Sistema Operacional Blockchain (BOS), e o código escrito reside no NEAR Blockchain. O componente pode ser uma única parte do seu aplicativo, como Barra de navegação ou o Aplicativo em geral. O conhecimento de javascript e react js o ajudará a criar qualquer tipo de componente necessário no BOS.

Você pode usar diretamente o BOS IDE online através deste link https://near.social/edit em seguida, faça login com sua conta NEAR.

Tudo o que é construído no BOS existe na forma de componentes. Isso torna realmente fácil criar um widget; basta bifurcar componentes existentes ou vinculá-los diretamente ao seu espaço.


Vamos ver os passos para criar um componente.

jsx Copy code let greeting = “Tenha um ótimo dia”;“

return ( <> <div class="container border border-info p-3 text-center min-vw-100">
 <h1>Olá</h1>
 <p> {greeting} </p>
 </div>
 </>
);


Contexto da Máquina Virtual (VM) Você pode acessar o objeto de contexto para obter informações específicas sobre a instância VM. networkId

Você pode detectar a rede atual (mainnet ou testnet) usando context.networkId. Por exemplo:

jsx Copy code const childSrc = context.networkId === “mainnet” ? “near/src/Foobar” : “preview.testnet/src/Foobar”;

return (
 <div>
 <p>Uma dependência secundária:</p>
 <Widget src={childSrc} />
 </div>
);


accountId Você pode obter a conta de usuário com a qual fez login (por exemplo, user.near) usando context.accountId. Por exemplo:

jsx Copy code let user_account = context.accountId;

return (
 <>
 <div class="container border border-info p-3 text-center min-vw-100">
 <h1>Olá</h1>
 <p> {user_account} </p>
 </div>
 </>
);


Props (Objetos): Recebendo Entradas Os componentes podem receber entradas arbitrárias, que serão refletidas na variável props. No exemplo a seguir, estamos passando name=”Anna” como entrada.


jsx Copy code let name = props.name || “Usuário”; let greeting = “Tenha um ótimo dia”;

return (
 <>
 <div class="container border border-info p-3 text-center min-vw-100">
 <h1>Olá {name}</h1>
 <p> {greeting} </p>
 </div>
 </>
);


Estado: Armazenamento de Informações Os componentes têm um estado interno onde podem armazenar informações.

jsx Copy code State.init({greeting: “Tenha um ótimo dia”});

const onChange = ({target}) => { State.update({greeting: target.value}) };

return (
 <>
 <div class="container border border-info p-3 min-vw-100">
 <p><b> Saudação: </b> {state.greeting} </p>

 <label class="text-left">Mudar a Saudação</label>
 <input onChange={onChange} />
 </div>
 </>
);


Como Compor os Componentes? Para compor componentes, você usará o componente Widget predefinido. Para fazer isso, você só precisa do nome de usuário NEAR de quem criou o componente e do nome do componente.

jsx Copy code const user = “gagdiez.near”; const props = { name: “Anna” };

return (
 <>
 <div class="container min-vw-100">

 <h5> Os componentes podem ser compostos </h5>
 <hr />

 <Widget src={`${user}/widget/Greetings`} props={props} />
 </div>
 </>
);


Widget O componente predefinido Widget permite que você inclua um componente existente em seu código, permitindo assim a criação de aplicativos complexos por meio da composição de componentes.

jsx Copy code const user = “gagdiez.near”; const props = { name: “Anna” };

return (
 <>
 <div class="container min-vw-100">

 <h3> Compondo Widgets </h3>
 <p> Os widgets podem ser compostos </p>
 <hr />

 <Widget src={`${user}/widget/Greetings`} props={props} />
 </div>
 </>
);


E assim completamos o primeiro artigo sobre o BOS e como criar seu primeiro componente. Em breve mais conteúdos mostrando como é fácil criar no Near BOS. Essas informações podem ser encontradas em sua versão original em: https://docs.near.org

Deixe um comentário

Campos de preenchimento obrigatório *