Système d’exploitation de la chaîne de blocs du protocole NEAR

8 min read
To Share and +4 nLEARNs

En mars 2023, NEAR Protocol a lancé le système d’exploitation de la chaîne de blocs (BOS) dans le but de créer la passerelle idéale du Web ouvert(Open Web). L’idée est de combler de manière transparente le fossé entre web2 et web3. Cet article vous en dira plus sur BOS et vous expliquera son fonctionnement.

Qu’est-ce que le Open Web?

“Open Web” est un terme utilisé pour décrire Internet lorsqu’il s’agissait d’une ressource publique mondiale non contrôlée par des superviseurs. Alors, pourquoi ce Open Web est-il nécessaire ?

  • Cela est nécessaire pour la liberté dans la communication et l’expression
  • L’Open Web est l’internet des personnes pour les personnes. Il permet aux individus de se mobiliser et de contribuer positivement à la société.

Dès le départ, la vision de NEAR était d’aider à faciliter la création du Open Web. Fondamentalement, l’Open Web doit être décentralisé, NEAR doit également créer une blockchain de couche 1 évolutive qui fait abstraction de la complexité. NEAR est-il capable de faire cela? Nous allons voir.

  • NEAR a un modèle de compte flexible et lisible par l’homme.
  • Le mécanisme de partitionnement de Nightshade rend NEAR hautement évolutif.
  • NEAR fournit également des outils puissants pour aider les développeurs à développer des protocoles.

Après avoir compris les bases, NEAR devait maintenant créer une pile web3 qui aiderait à rationaliser l’intégration d’Open Web pour les utilisateurs et les développeurs (devs).

Comment BOS peut-il atteindre le Web ouvert ?

Pensez à ce que fait un système d’exploitation ou “OS”. Le système d’exploitation permet aux utilisateurs d’interagir avec des machines sophistiquées sans entrer dans une complexité inutile. Garder l’abstraction et la complexité en arrière-plan est essentiel pour l’adoption massive de la technologie.

Nous allons maintenant étendre cette logique au monde du web3. Selon le co-fondateur de Protocole NEAR Illia Polushkin, BOS est une couche générique pour explorer et découvrir les produits Web 3. De plus, BOS prendra en charge Near Protocol et les machines virtuelles Ethereum lors du lancement. Imaginez que vous créez une nouvelle application DeFi sur Ethereum et que vous obteniez des utilisateurs de NEAR via BOS.

Créer une interface composable

Avant d’aller plus loin, il convient de comprendre ce qu’est un frontend. Un frontend est la façon dont un utilisateur interagit avec l’application. Lorsqu’il s’agit de dApps, il est nécessaire de créer une application composable et décentralisée. L’éthique même de web3 est la décentralisation. Dans ce cas, pourquoi continuons-nous à utiliser des services centralisés pour accéder à ces services ? Faire confiance à ces intermédiaires pose plusieurs problèmes de sécurité.

BOS permet d’ajouter des interfaces composables à la pile technologique et d’intégrer facilement les utilisateurs à web3. En ce qui concerne le potentiel de BOS en tant qu’interface, Illia Polusukhin a déclaré : “L’interface décentralisé composable est un outil qui permet d’améliorer la sécurité des utilisateurs :

“Les interfaces décentralisés composables peuvent fonctionner avec n’importe quel back-end Web2 ou Web3 et n’importe quel portefeuille. À l’avenir, nous proposerons [l’utilisation] de portefeuilles d’une chaîne pour interagir avec une autre par le biais d’une interface transparente.”

3 piliers de BOS

BOS repose sur trois piliers :

  • Passerelles
  • Composants
  • Chaînes de blocs

Passerelles

Les passerelles sont conçues pour mettre à la disposition de tous des interfaces décentralisées exécutés localement. Une passerelle comprend une machine virtuelle spécialement conçue pour charger et exécuter des interfaces pour des protocoles construits sur Ethereum, des L2 et d’autres couches 1 comme NEAR. Le code de ces frontends est stocké sur la blockchain NEAR.

Quel est le but du système d'exploitation NEAR Protocol Blockchain ? Choisissez 2 bonnes réponses

Please select 2 correct answers

Correct! Wrong!

Composant

Les composants sont des interfaces pour les protocoles de couche applicative en chaîne tels que Lido, Uniswap et Aave. Les développeurs peuvent visualiser le code de ces applications dans une passerelle similaire à la visualisation d’un contrat intelligent dans Etherscan. En outre, ils peuvent forker ces applications et déployer leurs propres versions ou même composer des composants.

Chaîne de blocs

Les composants peuvent appeler des fonctions sur n’importe quelle blockchain. Actuellement, toutes les chaînes EVM ou L2 et NEAR sont prises en charge. Par ailleurs,code source pour le frontend (application), il est conservé à NEAR en raison de sa capacité à stocker HTML/CSS/JS à moindre coût.

Avis sur Frontend NEAR BOS

Voyons comment le front-end fonctionne en action. Veuillez accéder à la pagealpha.near.org

Untitled

L’interface connecte les utilisateurs à toutes les différentes possibilités Web3 de l’écosystème. N’importe qui dans l’écosystème Open Web peut créer sa propre interface, compatible avec la blockchain de son choix. Jouons avec l’interface et voyons comment cela fonctionne.

Lorsque nous défilons vers le haut, survolez “Discover” et cliquez sur “Components”.

Untitled

Les composants sont de petites applications qui peuvent résoudre un problème spécifique. Actuellement, nous avons plusieurs composants intégrés que nous pouvons utiliser pour créer le frontend. Voici quelques-uns des composants intégrés disponibles.

Quelle est la fonction de la passerelle sur BOS ?

Correct! Wrong!

Widget

Les widgets sont l’unité minimale du frontend. Il vous permet d’inclure un composant existant dans votre code, ce qui vous permet de créer des applications complexes en composant des composants.

Code:

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

Sortie:

Untitled

Téléchargeur d’images

Le téléchargeur d’images permet aux utilisateurs de télécharger des images directement sur le système de fichiers interplanétaire (IPFS).

Code:

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

Sortie:

Untitled

Nous pouvons utiliser le bouton pour télécharger l’image

Untitled

Des dossiers

Téléchargez des images avec la prise en charge du glisser-déposer

Code:

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

Sortie:

Untitled

Réduction

Composant intégré qui permet le rendu Markdown.

Code:

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

OverlayTrigger

Le widget OverlayTrigger permet aux développeurs d’afficher du texte ou une icône de superposition lorsque la souris survole un élément spécifique.

Code:

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

Sortie:

Untitled

DEFILEMENT infini

Ce composant nous permet de créer des pages ou des éléments simples et légers à défilement infini en prenant en charge à la fois les éléments de fenêtre et de défilement.

Code:

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

Sortie:

Liste de chargement illimité :

Untitled

Taper à l’avance

Ce composant fournit un champ de saisie anticipée pour sélectionner une option dans une liste d’options. En termes simples, ce composant est utilisé pour créer une fonction d’auto-complétion de texte.

Code:

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

Sortie:

Untitled

Cette typographie nous permet de sélectionner le fruit.

Untitled

Composants stylés

L’outil Styled Components est utilisé pour styliser les composants React à l’aide de CSS-in-JS.

Code:

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

Sortie:

Untitled

Info-bulle

Ce composant permet aux développeurs d’ajouter des info-bulles à certains éléments. Créez simplement un bouton et ajoutez une superposition de texte comme info-bulle.

Code:

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

Sortie:

Untitled

Résumé

BOS aide à relever les principaux défis de la création d’un front-end Web3, tels que l’accès, la sécurité, la composabilité et l’agilité. Avec BOS, les utilisateurs peuvent exécuter des applications blockchain localement, ce qui contribue à garantir la robustesse et la robustesse du capteur tout en maintenant une expérience conviviale.

Si vous souhaitez en savoir plus sur l’interface BOS, veuillez lire la documentation ici.

Qu'est-ce qu'un widget sur BOS ?

Correct! Wrong!

Generate comment with AI 2 nL
3

Laisser un commentaire

Hire AI to help with Comment

To leave a comment you should to:


Retour haut de page