Sistema Operacional Blockchain do Protocolo NEAR

8 min read
NEAR BOS
To Share and +4 nLEARNs

Em março de 2023, a Near Protocol lançou o Blockchain Operating System ou BOS (Sistema Operacional Blockchain) para criar o ponto de entrada ideal da Open Web (web aberta). A ideia aqui é preencher a lacuna entre a web2 e a web3 sem que haja problemas. Este artigo examinará de perto o BOS e entenderá como ele funciona.

O que é a Open Web?

“Open Web” é um termo usado para descrever a internet quando ela se torna um recurso público global não supervisionado por porteiros ou supervisores. Então, por que a open web é desejável?

  • É necessária para comunicação e expressão livre e aberta.
  • Uma open web é uma internet feita pelo povo e para o povo. Ela capacita os indivíduos a intervir e contribuir positivamente para a sociedade.

Desde o início, a visão da NEAR era ajudar a facilitar a criação da Open Web. Como a open web necessita ser descentralizada, a NEAR precisava criar uma blockchain escalável de camada 1 que abstraísse as complexidades. Eles foram capazes de fazer isso? Vamos dar uma olhada.

  • NEAR tem um modelo de conta flexível e contas legíveis por humanos.
  • O mecanismo de fragmentação Nightshade torna a NEAR extremamente escalável.
  • A NEAR também fornece ferramentas sofisticadas para ajudar os programadores a desenvolver o protocolo.

Tendo estabelecido a base, a NEAR agora precisa criar uma web3 stack  que ajudará a simplificar a integração da Open Web para usuários e desenvolvedores. (Uma WEB STACK é a coleção de softwares usados para o desenvolvimento web que incorpora, no mínimo, um sistema operacional (SO), uma linguagem de programação, software de banco de dados e um servidor web.)

Como o BOS alcança a Open Web?

Pense no que um sistema operacional ou “OS” faz. Um sistema operacional permite que os usuários interajam com máquinas sofisticadas sem entrar nas complexidades. Abstrair as complexidades em segundo plano é crucial para a adoção em massa da tecnologia.

Agora, estenda essa lógica para web3. De acordo com o Cofundador da  NEAR Protocol, Illia Polushkin, o BOS é uma camada comum para navegar e descobrir produtos Web3. Além disso, o BOS suportará Near Protocol e máquinas virtuais blockchains de Ethereum durante o lançamento. Imagine criar um novo e legal aplicativo DeFi no Ethereum e obter usuários da NEAR via BOS.

Criando interfaces compostas.

Antes de prosseguir, vamos entender o que é um front-end. Um front-end é a interface com que um usuário interage com o aplicativo. Quando se trata de dApps, é necessária uma interface composta e descentralizada. A essência do web3 é a descentralização. Então, por que ainda usamos serviços centralizados para acessar esses serviços? Confiar nesses intermediários apresenta vários desafios de segurança.

O BOS ajuda a adicionar interfaces compostas à tecnologia do Stack e a integrar facilmente os usuários a web3. Em relação ao potencial do BOS como front-end, Polushkin disse:

“Os front-ends compostos descentralizados, como uma estrutura, podem funcionar com qualquer back-end Web2 ou Web3 e qualquer carteira. No futuro, ofereceremos [uso de] carteiras de uma cadeia para interagir com outra por meio de uma ponte direta.”

Os três pilares do BOS

O BOS é baseado em três pilares:

  • Gateways (porta de acesso)
  • Componentes
  • Blockchains (Cadeia de Blocos)

Gateways

Os gateways são projetados para disponibilizar front-ends descentralizados e executados localmente para todos. Um gateway compreende uma máquina virtual especialmente projetada que carrega e executa front-ends para protocolos construídos em Ethereum, Layer 2 (camada 2) e outros Layer 1 como NEAR. O código para esses front-ends é armazenado na blockchain NEAR.

Qual é o propósito do Sistema Operacional Blockchain (BOS) do Protocolo Near? (escolha todos os aplicáveis)

Please select 2 correct answers

Correct! Wrong!

Componentes

Os componentes são front-ends para protocolos on-chain (na cadeia) da camada de aplicativos, como Lido, Uniswap e Aave. Os desenvolvedores podem visualizar o código desses aplicativos em um gateway semelhante à visualização de um contrato inteligente no Etherscan. Além disso, eles podem bifurcar esses aplicativos e implantar suas próprias versões ou até mesmo compor componentes.

Blockchains

Os componentes podem chamar funções em qualquer blockchain. Atualmente, todas as cadeias/L2s EVM e NEAR são suportadas. Além disso, o código-fonte dos aplicativos (front-ends) é guardado na NEAR devido à sua capacidade de armazenar HTML/CSS/JS de forma econômica.

Olhando para o BOS Front-end da NEAR.

Vamos ver como o front-end funciona em tempo real. Vá para alpha.near.org.

Pasted image 0

O front-end conecta os usuários a todas as diferentes possibilidades do Web3 dentro do ecossistema. Qualquer pessoa no ecossistema Open Web pode criar seus próprios frontends, compatíveis com a blockchain escolhida. Vamos brincar com a interface e ver como ela funciona.

Ao rolar para cima, passe o mouse sobre “Discover” e clique em “Components” (Componentes).

Pasted image 0

Os componentes são pequenos aplicativos que resolvem problemas específicos. Atualmente, você tem alguns componentes integrados que podem ser usados para criar o front-end. Aqui estão alguns componentes incorporados.

Qual é a função dos Gateways no BOS?

Correct! Wrong!

Widget

Um widget (ferramenta) é a unidade mínima de um front-end. Ela permite que você inclua um componente existente em seu código, permitindo que você crie aplicativos complexos compondo componentes.

Código:

​​const user = "gagdiez.near";
const props = { name: "Learn NEAR" };

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

       <h3> Widgets </h3>
      <p> Here is a Widget </p>
      <hr />

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

Saída:

Pasted image 0

Image Uploader

Saída:

O Image Uploader (carregador de imagens) permite que os usuários carreguem diretamente uma imagem para o sistema interplanetário de arquivos  (IPFS de acordo com sua abreviatura em inglês).

Código:

State.init({
  img: null,
});

return (
  <div className='container row'>
    <div>
      Image upload: <br />
      <IpfsImageUpload image={state.img} />
    </div>
    <div>
      Raw State:
      <pre>{JSON.stringify(state)}</pre>
    </div>
    <div className='mt-2'>
      {state.img.cid && (
        <img
          src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
          alt='uploaded'
        />
      )}
    </div>
  </div>
);

Saída:

Pasted image 0

Você pode usar o botão para fazer upload de uma imagem:

Pasted image 0

Arquivos

Faça Upload dos arquivos com suporte “arraste e solte”.

Código:

State.init({ img: null });

const uploadFileUpdateState = (body) => {
  asyncFetch(
    "https://ipfs.near.social/add",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      body
    }
  ).then(
    (res) => {
      const cid = res.body.cid;
      State.update({ img: { cid } });
    }
  )
};

const filesOnChange = (files) => {
  if (files) {
    State.update({ img: { uploading: true, cid: null } });
    uploadFileUpdateState(files[0]);
  }
};

return (
  <div className="d-inline-block">
    { state.img?
      <img class="rounded w-100 h-100"
        style={{ objectFit: "cover" }}
        src={`https://ipfs.near.social/ipfs/${state.img.cid}`}
        alt="upload preview" />
      : ""
    }
    <Files
      multiple={false}
      accepts={["image/*"]}
      minFileSize={1}
      clickable
      className="btn btn-outline-primary"
      onChange={filesOnChange}
    >
      { state.img?.uploading ? <> Uploading </> : "Upload an Image" }
    </Files>
  </div>
);

Saída:

Pasted image 0

Markdown

Um componente integrado que permite renderizar o Markdown.

Código:

const text = `
  #### Markdown Section
  Checkout Learn NEAR [here](https://learnnear.club/)
`;

return (
  <>
    <div class="container border border-info pt-3 min-vw-100 text-center">
      <Markdown text={text} />
    </div>
  </>
);

Saída:

Pasted image 0

OverlayTrigger

O widget OverlayTrigger (gatilho de sobreposição) permite que os desenvolvedores exibam texto ou ícone de sobreposição quando o mouse estiver passando sobre um item específico.

Código:

State.init({
  show: false,
});

const handleOnMouseEnter = () => {
  State.update({ show: true });
};
const handleOnMouseLeave = () => {
  State.update({ show: false });
};

const overlay = (
  <div
    className='border m-3 p-3 rounded-4 bg-white shadow'
    style={{ maxWidth: "24em", zIndex: 1070 }}
    onMouseEnter={handleOnMouseEnter}
    onMouseLeave={handleOnMouseLeave}
  >
    This is the overlay Message
  </div>
);

return (
  <OverlayTrigger
    show={state.show}
    trigger={["hover", "focus"]}
    delay={{ show: 250, hide: 300 }}
    placement='auto'
    overlay={overlay}
  >
    <span
      className='d-inline-flex'
      style={{ backgroundColor: "gray", borderRadius: "10px", padding: "10px" }}
      onMouseEnter={handleOnMouseEnter}
      onMouseLeave={handleOnMouseLeave}
    >
      Place Mouse Over Me
    </span>
  </OverlayTrigger>
);

Saída:

Pasted image 0

InfiniteScroll

Este componente permite criar uma página ou elemento de rolagem infinita simples e leve, suportando janelas e elementos roláveis.

Código:

const allNumbers = Array.from(Array(100).keys())

State.init({
  displayNums: [],
  lastNumber: 0,
});

const loadNumbers = (page) => {
  allNumbers
    .slice(state.lastNumber, state.lastNumber + 10)
    .map((n) => numberToElem(n))
    .forEach((i) => state.displayNums.push(i));
  state.lastNumber += 10;
  State.update();
};

const numberToElem = (number) => <div> {number} </div>;

return (
  <div>
    <InfiniteScroll
      loadMore={loadNumbers}
      hasMore={state.displayNums.length < allNumbers.length}
    >
      {state.displayNums}
    </InfiniteScroll>
  </div>
);

Saída:

Uma lista de carregamento infinito:

Pasted image 0

Typeahead

Este componente fornece um campo de entrada de digitação antecipada para selecionar uma opção em uma lista de opções. Simplificando, este componente é usado para criar recursos de preenchimento automático de texto.

Código:

const options = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"];

return (
  <div class="container min-vh-100 min-vw-100">
    <Typeahead
      options={options}
      multiple
      onChange={(value) => {State.update({choose: value})}}
      placeholder='Choose a fruit...'
    />
    <hr />
    <p> Selected: {JSON.stringify(state.choose)} </p>
  </div>
);

Saída:

Pasted image 0

Este Typehead permite que você escolha uma fruta.

Pasted image 0

Styled Components

A ferramenta Styled Components é usada para estilizar componentes React usando CSS-in-JS..

Código:

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 10px;
`;

return (
  <div>
    <Button>White</Button>
    <Button primary>Red</Button>
  </div>
);

Saída:

Pasted image 0

ToolTip

Este componente permite aos desenvolvedores adicionar dicas de ferramentas sobre determinados elementos. Basta criar um botão e adicionar um texto de sobreposição como uma dica de ferramenta.

Código:

return (
  <>
    {["top", "right", "bottom", "left"].map((placement) => (
      <div style={{ margin: "2.5rem 1rem", float: "left" }}>
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={
            <Tooltip id={`tooltip-${placement}`}>
              Tooltip on <strong>{placement}</strong>.
            </Tooltip>
          }
        >
          <button variant="secondary">Tooltip on {placement}</button>
        </OverlayTrigger>
      </div>
    ))}
  </>
);

Saída:

Pasted image 0

Para finalizar

O BOS ajuda a resolver os principais desafios relacionados à construção de front-ends web3, como acesso, segurança, capacidade de composição e agilidade. Com o BOS, os usuários podem executar aplicativos blockchain localmente, o que ajuda a garantir robustez e resistência à censura, mantendo uma experiência amigável.

Se você quiser saber mais sobre BOS front-end, leia a documentação aqui.

O que é um Widget no BOS?

Correct! Wrong!

Generate comment with AI 2 nL
1

Leave a Comment


To leave a comment you should to:


Scroll to Top
Report a bug👀