🔹 **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