Minor fixes to the getting started examples (#14)

2025-04-24 18:22:15 +00:00 · 2021-07-20 17:49:58 +03:00 · 2021-07-20 17:49:58 +03:00 · 5ecce263a6
commit 5ecce263a6
parent 09b4472df9
7 changed files with 124 additions and 111 deletions
--- a/intro/1-hello-world/aqua/getting-started.aqua
+++ b/intro/1-hello-world/aqua/getting-started.aqua
@ -1,9 +1,10 @@
 import "@fluencelabs/aqua-lib/builtin.aqua"

-service HelloWorld("HelloWorld"):
-    recieveHello(from: PeerId) -> string
+-- The service runs inside browser
+service HelloPeer("HelloPeer"):
+    hello(from: PeerId) -> string

-func sayHello(peerId: PeerId, relayPeerId: PeerId) -> string:
-    on peerId via relayPeerId:
-        res <- HelloWorld.recieveHello(%init_peer_id%)
+func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
+    on targetPeerId via targetRelayPeerId:
+        res <- HelloPeer.hello(%init_peer_id%)
    <- res
--- a/intro/1-hello-world/src/App.scss
+++ b/intro/1-hello-world/src/App.scss
@ -99,7 +99,7 @@ table {
 }

 .label {
-  width: 70px;
+  width: 120px;
  display: inline-block;
 }

--- a/intro/1-hello-world/src/App.tsx
+++ b/intro/1-hello-world/src/App.tsx
@ -8,27 +8,21 @@ import { sayHello } from "./_aqua/getting-started";

 const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];

-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text);
-};
-
 function App() {
  const [client, setClient] = useState<FluenceClient | null>(null);
-  const [helloFrom, setHelloFrom] = useState<string | null>(null);
+  const [helloMessage, setHelloMessage] = useState<string | null>(null);

  const [peerIdInput, setPeerIdInput] = useState<string>("");
  const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");

-  const isConnected = client !== null;
-
  const connect = (relayPeerId: string) => {
    createClient(relayPeerId)
      .then((client) => {
        // Register handler for this call in aqua:
-        // HelloWorld.recieveHello(%init_peer_id%)
-        client.callServiceHandler.on("HelloWorld", "recieveHello", (args) => {
+        // HelloPeer.hello(%init_peer_id%)
+        client.callServiceHandler.on("HelloPeer", "hello", (args) => {
          const [from] = args;
-          setHelloFrom("Hello from: \n" + from);
+          setHelloMessage("Hello from: \n" + from);
          return "Hello back to you, \n" + from;
        });
        setClient(client);
@ -36,14 +30,17 @@ function App() {
      .catch((err) => console.log("Client initialization failed", err));
  };

-  const doSayHello = async () => {
+  const helloBtnOnClick = async () => {
    if (client === null) {
      return;
    }
+    // Using aqua is as easy as calling a javascript funсtion
    const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
-    setHelloFrom(res);
+    setHelloMessage(res);
  };

+  const isConnected = client !== null;
+
  return (
    <div className="App">
      <header>
@ -55,30 +52,32 @@ function App() {
          <>
            <h1>Connected</h1>
            <table>
-              <tr>
-                <td className="bold">Peer id:</td>
-                <td className="mono">{client!.selfPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.selfPeerId)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td className="bold">Relay peer id:</td>
-                <td className="mono">{client!.relayPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.relayPeerId!)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <td className="bold">Peer id:</td>
+                  <td className="mono">{client!.selfPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.selfPeerId)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="bold">Relay peer id:</td>
+                  <td className="mono">{client!.relayPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.relayPeerId!)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
            </table>

            <div>
@ -88,7 +87,7 @@ function App() {
                the peer id and relay from the second tab and say hello!
              </p>
              <div className="row">
-                <label className="label bold">Peer id</label>
+                <label className="label bold">Target peer id</label>
                <input
                  className="input"
                  type="text"
@ -97,7 +96,7 @@ function App() {
                />
              </div>
              <div className="row">
-                <label className="label bold">Relay</label>
+                <label className="label bold">Target relay</label>
                <input
                  className="input"
                  type="text"
@ -106,7 +105,7 @@ function App() {
                />
              </div>
              <div className="row">
-                <button className="btn btn-hello" onClick={doSayHello}>
+                <button className="btn btn-hello" onClick={helloBtnOnClick}>
                  say hello
                </button>
              </div>
@ -128,10 +127,10 @@ function App() {
          </>
        )}

-        {helloFrom && (
+        {helloMessage && (
          <>
-            <h2>Hello from</h2>
-            <div> {helloFrom} </div>
+            <h2>Message</h2>
+            <div> {helloMessage} </div>
          </>
        )}
      </div>
@ -139,4 +138,8 @@ function App() {
  );
 }

+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};
+
 export default App;
--- a/intro/1-hello-world/src/_aqua/getting-started.ts
+++ b/intro/1-hello-world/src/_aqua/getting-started.ts
@ -12,7 +12,7 @@ import { RequestFlow } from '@fluencelabs/fluence/dist/internal/RequestFlow';



-export async function sayHello(client: FluenceClient, peerId: string, relayPeerId: string, config?: {ttl?: number}): Promise<string> {
+export async function sayHello(client: FluenceClient, targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}): Promise<string> {
    let request: RequestFlow;
    const promise = new Promise<string>((resolve, reject) => {
        const r = new RequestFlowBuilder()
@ -29,20 +29,20 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
       (seq
        (seq
         (call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-)
-         (call %init_peer_id% ("getDataSrv" "peerId") [] peerId)
+         (call %init_peer_id% ("getDataSrv" "targetPeerId") [] targetPeerId)
        )
-        (call %init_peer_id% ("getDataSrv" "relayPeerId") [] relayPeerId)
+        (call %init_peer_id% ("getDataSrv" "targetRelayPeerId") [] targetRelayPeerId)
       )
       (call -relay- ("op" "noop") [])
      )
-      (call relayPeerId ("op" "noop") [])
+      (call targetRelayPeerId ("op" "noop") [])
     )
     (xor
-      (call peerId ("HelloWorld" "recieveHello") [%init_peer_id%] res)
+      (call targetPeerId ("HelloPeer" "hello") [%init_peer_id%] res)
      (seq
       (seq
        (seq
-         (call relayPeerId ("op" "noop") [])
+         (call targetRelayPeerId ("op" "noop") [])
         (call -relay- ("op" "noop") [])
        )
        (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 1])
@ -51,7 +51,7 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
      )
     )
    )
-    (call relayPeerId ("op" "noop") [])
+    (call targetRelayPeerId ("op" "noop") [])
   )
   (call -relay- ("op" "noop") [])
  )
@ -69,8 +69,8 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
                h.on('getDataSrv', '-relay-', () => {
                    return client.relayPeerId!;
                });
-                h.on('getDataSrv', 'peerId', () => {return peerId;});
-h.on('getDataSrv', 'relayPeerId', () => {return relayPeerId;});
+                h.on('getDataSrv', 'targetPeerId', () => {return targetPeerId;});
+h.on('getDataSrv', 'targetRelayPeerId', () => {return targetRelayPeerId;});
                h.onEvent('callbackSrv', 'response', (args) => {
  const [res] = args;
  resolve(res);
--- a/intro/3-hello-world-web3/aqua/getting-started.aqua
+++ b/intro/3-hello-world-web3/aqua/getting-started.aqua
@ -1,24 +1,29 @@
 import "@fluencelabs/aqua-lib/builtin.aqua"

-const helloServiceNode ?= "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
-const helloServiceId ?= "ba24be5b-9789-48ac-b38a-82c9d3eb0d34"
+const helloWorldNodePeerId ?= "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
+const helloWorldServiceId ?= "ba24be5b-9789-48ac-b38a-82c9d3eb0d34"

-data HelloComputation:
+data HelloResponse:
    msg: string
    reply: string

-service HelloWorldCompute:
-    hello_world(from: string) -> HelloComputation
+-- The service runs on a Fluence node
+service HelloWorld:
+    hello_world(from: PeerId) -> HelloResponse

-service HelloWorld("HelloWorld"):
-    recieveHello(message: string) -> string
+-- The service runs inside browser
+service HelloPeer("HelloPeer"):
+    hello(message: string) -> string

-func sayHello(peerId: PeerId, relayPeerId: PeerId) -> string:
-    on helloServiceNode:
-        HelloWorldCompute helloServiceId
-        comp <- HelloWorldCompute.hello_world(%init_peer_id%)
+func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
+    -- execute computation on a Peer in the network
+    on helloWorldNodePeerId:
+        HelloWorld helloWorldServiceId
+        comp <- HelloWorld.hello_world(%init_peer_id%)

-    co on peerId via relayPeerId:
-        HelloWorld.recieveHello(comp.msg)
+    -- send the result to target browser in the background
+    co on targetPeerId via targetRelayPeerId:
+        res <- HelloPeer.hello(%init_peer_id%)

+    -- send the result to the initiator
    <- comp.reply
--- a/intro/3-hello-world-web3/src/App.scss
+++ b/intro/3-hello-world-web3/src/App.scss
@ -99,7 +99,7 @@ table {
 }

 .label {
-  width: 70px;
+  width: 120px;
  display: inline-block;
 }

--- a/intro/3-hello-world-web3/src/App.tsx
+++ b/intro/3-hello-world-web3/src/App.tsx
@ -8,19 +8,13 @@ import { sayHello } from "./_aqua/getting-started";

 const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];

-const copyToClipboard = (text: string) => {
-  navigator.clipboard.writeText(text);
-};
-
 function App() {
  const [client, setClient] = useState<FluenceClient | null>(null);
-  const [helloFrom, setHelloFrom] = useState<string | null>(null);
+  const [helloMessage, setHelloMessage] = useState<string | null>(null);

  const [peerIdInput, setPeerIdInput] = useState<string>("");
  const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");

-  const isConnected = client !== null;
-
  const connect = (relayPeerId: string) => {
    createClient(relayPeerId)
      .then((client) => {
@ -30,8 +24,9 @@ function App() {
          "HelloWorld",
          "recieveHello",
          (args) => {
+            // no computation is done inside the browser
            const [msg] = args;
-            setHelloFrom(msg);
+            setHelloMessage(msg);
          }
        );
        setClient(client);
@ -39,14 +34,17 @@ function App() {
      .catch((err) => console.log("Client initialization failed", err));
  };

-  const doSayHello = async () => {
+  const helloBtnOnClick = async () => {
    if (client === null) {
      return;
    }
+    // Using aqua is as easy as calling a javascript funсtion
    const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
-    setHelloFrom(res);
+    setHelloMessage(res);
  };

+  const isConnected = client !== null;
+
  return (
    <div className="App">
      <header>
@ -58,30 +56,32 @@ function App() {
          <>
            <h1>Connected</h1>
            <table>
-              <tr>
-                <td className="bold">Peer id:</td>
-                <td className="mono">{client!.selfPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.selfPeerId)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td className="bold">Relay peer id:</td>
-                <td className="mono">{client!.relayPeerId}</td>
-                <td>
-                  <button
-                    className="btn-clipboard"
-                    onClick={() => copyToClipboard(client!.relayPeerId!)}
-                  >
-                    <i className="gg-clipboard"></i>
-                  </button>
-                </td>
-              </tr>
+              <tbody>
+                <tr>
+                  <td className="bold">Peer id:</td>
+                  <td className="mono">{client!.selfPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.selfPeerId)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="bold">Relay peer id:</td>
+                  <td className="mono">{client!.relayPeerId}</td>
+                  <td>
+                    <button
+                      className="btn-clipboard"
+                      onClick={() => copyToClipboard(client!.relayPeerId!)}
+                    >
+                      <i className="gg-clipboard"></i>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
            </table>

            <div>
@ -91,7 +91,7 @@ function App() {
                the peer id and relay from the second tab and say hello!
              </p>
              <div className="row">
-                <label className="label bold">Peer id</label>
+                <label className="label bold">Target peer id</label>
                <input
                  className="input"
                  type="text"
@ -100,7 +100,7 @@ function App() {
                />
              </div>
              <div className="row">
-                <label className="label bold">Relay</label>
+                <label className="label bold">Target relay</label>
                <input
                  className="input"
                  type="text"
@ -109,7 +109,7 @@ function App() {
                />
              </div>
              <div className="row">
-                <button className="btn btn-hello" onClick={doSayHello}>
+                <button className="btn btn-hello" onClick={helloBtnOnClick}>
                  say hello
                </button>
              </div>
@ -131,10 +131,10 @@ function App() {
          </>
        )}

-        {helloFrom && (
+        {helloMessage && (
          <>
-            <h2>Hello from</h2>
-            <div> {helloFrom} </div>
+            <h2>Message</h2>
+            <div> {helloMessage} </div>
          </>
        )}
      </div>
@ -142,4 +142,8 @@ function App() {
  );
 }

+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};
+
 export default App;