El Sistema operativo Blockchain del protocolo NEAR

En marzo de 2023, el Protocolo Near lanzó el Sistema Operativo Blockchain (BOS por sus siglas en inglés) para crear el punto de entrada ideal de la Web Abierta. La idea es tender un puente sin fisuras entre la Web2 y la Web3. Este artículo examinará de cerca el BOS y explicará cómo funciona.

¿Qué es la Web Abierta?

“La Web Abierta” es un término utilizado para describir el Internet cuando este se convierte en un recurso público global no supervisado por guardianes o supervisores. ¿Por qué es necesaria una web abierta?

• Es necesaria para una libre expresión y una comunicación abierta.
• Una web abierta es una internet del pueblo y para el pueblo. Permite a los individuos intervenir y contribuir positivamente en la sociedad.

Desde el principio, la visión de NEAR fue ayudar a facilitar la creación de la Web Abierta. Dado que la Web Abierta debe ser descentralizada, NEAR necesitaba crear una cadena de bloques escalable, de capa 1, que eliminara las complejidades. ¿Lo han conseguido? Vamos a verlo.

• NEAR tiene un modelo de cuentas flexible y cuentas legibles por humanos.
• El mecanismo de fragmentación Nightshade hace que NEAR sea extremadamente escalable.
• NEAR también proporciona herramientas sofisticadas para ayudar a los creadores a desarrollar el protocolo.

Una vez sentadas las bases, NEAR necesita crear una estructura Web3 que ayude a agilizar la incorporación a la  Web Abierta tanto de los usuarios como de los desarrolladores.

¿Cómo logra el BOS una web abierta?

Piense en lo que hace un sistema operativo o “OS” (por sus siglas en inglés). Un OS permite a los usuarios interactuar con maquinaria sofisticada sin entrar en las complejidades. Abstraerse de las complejidades en segundo plano es crucial para la adopción masiva de la tecnología.

Ahora, extiende esa lógica a la Web3. Según Illia Polushkin, cofundador del Protocolo NEAR, BOS es una capa común para navegar y descubrir productos de la Web3. Además, el BOS será compatible con las cadenas del Protocolo Near y de la Máquina Virtual de Ethereum durante su lanzamiento. Imagínate una aplicación DeFi nueva y genial en Ethereum y conseguir usuarios de NEAR a través de BOS.

Creación de interfaces compuestas

Antes de seguir adelante, vamos a entender lo que es un frontend. Un frontend es la manera en que un usuario interactúa con la aplicación. Cuando se trata de dApps, la creación de una interfaz compuesta y descentralizada es necesaria. El propio ethos de la Web3 es la descentralización. Entonces, ¿por qué seguimos utilizando servicios centralizados para acceder a estos servicios? Confiar en estos intermediarios plantea varios problemas de seguridad.

BOS ayuda a añadir frontends compuestos a la estructura tecnológica y a integrar fácilmente a los usuarios en la Web3. En cuanto al potencial de BOS como frontend, Polushkin ha declarado:

“Los frontends compuestos descentralizados, como un marco, pueden funcionar con cualquier backend Web2 o Web3 y con cualquier billetera. En el futuro ofreceremos [el uso de] billeteras de una cadena para interactuar con otra a través de puentes sin fisuras.”

Los 3 pilares del BOS

El BOS está basado en tres pilares:

• Pasarelas
• Componentes
• Blockchains

Pasarelas

Las pasarelas están diseñadas para poner a disposición de todo el mundo interfaces descentralizadas ejecutadas localmente. Una pasarela consta de una máquina virtual especialmente diseñada que carga y ejecuta interfaces para protocolos creados en Ethereum, L2 y otros L1 como NEAR. El código de estas interfaces se almacena en la blockchain de NEAR.

Componentes

Los componentes son frontends para app-layer, de protocolos en cadena como Lido, Uniswap y Aave. Los desarrolladores pueden ver el código de estas aplicaciones en una pasarela similar a la visualización de un contrato inteligente en Etherscan. Además, pueden bifurcar estas aplicaciones y desplegar sus propias versiones o incluso combinar componentes.

Blockchains

Los componentes pueden llamar a funciones de cualquier blockchain. Actualmente, todas las cadenas EVM/L2 y NEAR son compatibles. Además, el código fuente de los frontends (aplicaciones) se almacena en NEAR debido a su capacidad para almacenar HTML/CSS/JS a bajo coste.

El frontend del BOS de NEAR

Veamos cómo funciona el front-end en tiempo real. Visita alpha.near.org.

El frontend conecta a los usuarios con todas las posibilidades de la Web3 dentro del ecosistema. Cualquiera en el ecosistema de la Web Abierta puede crear sus propios frontends, compatibles con la blockchain que elija. Vamos a jugar con la interfaz y ver cómo funciona.

Cuando te desplaces hacia arriba, sitúa el cursor sobre “Discover” (Descubrir) y haz clic en “Components” (Componentes).

Los componentes son pequeñas aplicaciones que resuelven problemas específicos. Actualmente, tienes algunos componentes incorporados que puedes usar para construir el frontend. Aquí hay algunos componentes incorporados.

Widget

Un widget es la unidad mínima de un frontend. Permite incluir un componente existente en el código, lo que permite crear aplicaciones complejas mediante la composición de 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>
  </>
);

Salida:

Image Uploader (Cargador de imágenes)

El cargador de imágenes permite a los usuarios cargar directamente una imagen en el Sistema Interplanetario de Archivos (IPFS, por sus siglas en 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>
);

Salida:

Puedes usar el botón para subir una imagen:

Archivos

Archivos subidos con soporte para arrastrar y soltar.

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>
);

Salida:

Markdown

Un componente integrado que permite renderizar el 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>
  </>
);

Salida:

OverlayTrigger

El widget OverlayTrigger permite a los desarrolladores mostrar texto o iconos superpuestos cuando el ratón pasa por encima de un elemento concreto.

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>
);

Salida:

InfiniteScroll

Este componente permite crear una página o elemento de desplazamiento infinito sencillo y ligero, ya que admite tanto elementos de ventana como elementos desplazables.

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>
);

Salida:

Una lista de carga infinita:

Typeahead

Este componente proporciona un campo de entrada de texto para seleccionar una opción de una lista de opciones. En pocas palabras, este componente se utiliza para crear funciones de autocompletado 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>
);

Salida:

Este Typehead le permite elegir una fruta.

Styled Components

La herramienta Styled Components se utiliza para estilizar componentes React utilizando 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>
);

Salida:

ToolTip

Este componente permite a los desarrolladores añadir tool tips en determinados elementos. Solo hay que crear un botón y añadir un texto superpuesto como un tool tip.

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>
    ))}
  </>
);

Salida:

Para finalizar

BOS ayuda a resolver los principales retos que plantea la creación de front-ends en la Web3, como el acceso, la seguridad, la composición y la agilidad. Con el BOS, los usuarios pueden ejecutar aplicaciones blockchain localmente, lo que ayuda a garantizar la robustez y la resistencia a la censura, manteniendo al mismo tiempo una experiencia fácil de usar.

Si quieres saber más sobre el frontend de BOS, lee la documentación aquí.