diff --git a/intro/1-hello-world/aqua/getting-started.aqua b/intro/1-hello-world/aqua/getting-started.aqua index 866de0d..b0a4df9 100644 --- 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 diff --git a/intro/1-hello-world/src/App.scss b/intro/1-hello-world/src/App.scss index 9434215..0e7f362 100644 --- 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; } diff --git a/intro/1-hello-world/src/App.tsx b/intro/1-hello-world/src/App.tsx index 66f8114..4dd72ed 100644 --- 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(null); - const [helloFrom, setHelloFrom] = useState(null); + const [helloMessage, setHelloMessage] = useState(null); const [peerIdInput, setPeerIdInput] = useState(""); const [relayPeerIdInput, setRelayPeerIdInput] = useState(""); - 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 (
@@ -55,30 +52,32 @@ function App() { <>

Connected

- - - - - - - - - - + + + + + + + + + + + +
Peer id:{client!.selfPeerId} - -
Relay peer id:{client!.relayPeerId} - -
Peer id:{client!.selfPeerId} + +
Relay peer id:{client!.relayPeerId} + +
@@ -88,7 +87,7 @@ function App() { the peer id and relay from the second tab and say hello!

- +
- +
-
@@ -128,10 +127,10 @@ function App() { )} - {helloFrom && ( + {helloMessage && ( <> -

Hello from

-
{helloFrom}
+

Message

+
{helloMessage}
)}
@@ -139,4 +138,8 @@ function App() { ); } +const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text); +}; + export default App; diff --git a/intro/1-hello-world/src/_aqua/getting-started.ts b/intro/1-hello-world/src/_aqua/getting-started.ts index 8638003..7ca36f1 100644 --- 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 { +export async function sayHello(client: FluenceClient, targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}): Promise { let request: RequestFlow; const promise = new Promise((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); diff --git a/intro/3-hello-world-web3/aqua/getting-started.aqua b/intro/3-hello-world-web3/aqua/getting-started.aqua index 781c860..c80c49b 100644 --- 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 \ No newline at end of file diff --git a/intro/3-hello-world-web3/src/App.scss b/intro/3-hello-world-web3/src/App.scss index 9434215..0e7f362 100644 --- 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; } diff --git a/intro/3-hello-world-web3/src/App.tsx b/intro/3-hello-world-web3/src/App.tsx index c9cd9b5..d8b8431 100644 --- 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(null); - const [helloFrom, setHelloFrom] = useState(null); + const [helloMessage, setHelloMessage] = useState(null); const [peerIdInput, setPeerIdInput] = useState(""); const [relayPeerIdInput, setRelayPeerIdInput] = useState(""); - 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 (
@@ -58,30 +56,32 @@ function App() { <>

Connected

- - - - - - - - - - + + + + + + + + + + + +
Peer id:{client!.selfPeerId} - -
Relay peer id:{client!.relayPeerId} - -
Peer id:{client!.selfPeerId} + +
Relay peer id:{client!.relayPeerId} + +
@@ -91,7 +91,7 @@ function App() { the peer id and relay from the second tab and say hello!

- +
- +
-
@@ -131,10 +131,10 @@ function App() { )} - {helloFrom && ( + {helloMessage && ( <> -

Hello from

-
{helloFrom}
+

Message

+
{helloMessage}
)}
@@ -142,4 +142,8 @@ function App() { ); } +const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text); +}; + export default App;