From 4160c6330a524ab66b7c6924de9ab38048d155bc Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Thu, 7 Dec 2023 16:12:09 +0100 Subject: [PATCH] Move more code into 'Starting a Pear App' --- guides/making-a-pear-app.md | 118 ++++------------------------------ guides/sharing-a-pear-app.md | 4 ++ guides/starting-a-pear-app.md | 103 +++++++++++++++++++++++++++++ 3 files changed, 119 insertions(+), 106 deletions(-) diff --git a/guides/making-a-pear-app.md b/guides/making-a-pear-app.md index 1a9bbbc..6cdf398 100644 --- a/guides/making-a-pear-app.md +++ b/guides/making-a-pear-app.md @@ -2,117 +2,19 @@ ## Step 1. Install modules -This app uses these modules: `hyperswam`, `hypercore-crypto`, and `b4a`. +This app uses these modules: `hyperswarm`, `hypercore-crypto`, and `b4a`. ``` -$ npm i hyperswam hypercore-crypto b4a +$ npm i hyperswarm hypercore-crypto b4a ``` **Note**: If the modules are installed while the app is running an error is thrown similar to `Cannot find package 'hyperswarm' imported from /app.js`. When installing modules, close down the app, before they can be installed. -- [hyperswam](https://www.npmjs.com/package/hyperswam). One of the main building blocks. Find peers that share a "topic". +- [hyperswarm](https://www.npmjs.com/package/hyperswarm). One of the main building blocks. Find peers that share a "topic". - [hypercore-crypto](https://www.npmjs.com/package/hypercore-crypto). A set of crypto function used in Pear. - [b4a](https://www.npmjs.com/package/b4a). A set of functions for bridging the gap between the Node.js `Buffer` class and the `Uint8Array` class. -## Step 2. Create the UI - -In this first version, users are able to create a chat room or join others. Then write messages to each other. - - -``` html - - - - - - - -
-
- -
-
- - or - -
-
- - -
-
- - - - -``` - -After running with `pear dev` it should look like this: - -![Layout of the app](../assets/chat-app-3.png) - -## Step 6. Write the javascript code, using `hyperswarm` +## Step 2. Write the javascript code, using `hyperswarm` Open `app.js` in a code editor and replace with this: @@ -159,7 +61,7 @@ async function joinSwarm(topicBuffer) { document.querySelector('#setup').classList.add('hidden') document.querySelector('#loading').classList.remove('hidden') - // Join the swam with the topic. Setting both client/server to true means that this app can act as both. + // Join the swarm with the topic. Setting both client/server to true means that this app can act as both. const discovery = swarm.join(topicBuffer, { client: true, server: true }) await discovery.flushed() @@ -210,16 +112,20 @@ After that the two apps are able to send messages between them ## Understanding the code -Looking through the code, a great part of it has to with handling the layout. It's outside of the scope of this tutorial to delve into that, but shouldn't look unfamiliar to most. It's possible to use larger frameworks like React, but that will be covered in other examples. +Looking through the code, a great part of it has to do with handling the layout. It's outside of the scope of this tutorial to delve into that, but shouldn't look unfamiliar to most. It's possible to use larger frameworks like React, but that won't be covered here. There are two main differences between a more common client-server chat app vs this peer-to-peer chat app ### 1. Discovery -In a traditional client-server setup the server is hosted on an ip (or hostname) and a port, e.g. `http://localhost:3000`. This is what clients use to connect the server. And then it's the servers responsibility to have clients find each other. +In a traditional client-server setup the server is hosted on an ip (or hostname) and a port, e.g. `http://localhost:3000`. This is what clients use to connect to the server. -In our code it says `swarm.join(topicBuffer, { client: true, server: true })`. Here `topicBuffer` is a 32 byte string. The creator of a chat room will create a random byte string, which they will share with others, who can then join. +In the code it says `swarm.join(topicBuffer, { client: true, server: true })`. Here `topicBuffer` is a 32 byte string. The creator of a chat room will generate a random byte string, which they will share with others, who can then join. ### 2. No servers When the chat app was started there wasn't one of them that acting as a server, and another as a client. Instead they join/leave topics. This is an important point, because it means that even if the peer that created a chat room leaves, then it doesn't stop working. + +## Next + +Everything is starting to look good, and now that there's a running app, it's time to learn how we [share it with others](./sharing-a-pear-app.md). diff --git a/guides/sharing-a-pear-app.md b/guides/sharing-a-pear-app.md index c689eb2..1e9289d 100644 --- a/guides/sharing-a-pear-app.md +++ b/guides/sharing-a-pear-app.md @@ -45,3 +45,7 @@ $ pear launch pear:nykmkrpwgadcd8m9x5khhh43j9izj123eguzqg3ygta7yn1s379o This will download and open the app. Note: Anyone running the app also help to seed it. So if the app had a lot of users, the original seeder could close down the process. + +## Next + +The app is shared and others can now run it on their machines. To learn how a more production-ready setup would look like read [releasing a Pear App](./releasing-a-pear-app.md). diff --git a/guides/starting-a-pear-app.md b/guides/starting-a-pear-app.md index 11efcf9..e597a4f 100644 --- a/guides/starting-a-pear-app.md +++ b/guides/starting-a-pear-app.md @@ -40,3 +40,106 @@ Pear apps have automatic reload included. This means that there is no need to st While keeping the app open with `pear dev`, open `index.html` in a code editor. Change `

chat

` to `

Hello world

` and go to the app again. It should now look like this: ![Automatic reload](../assets/chat-app-2.png) + +## Step 4. Create a basic UI + +To add some more interesting UI, let's have an example of a chat app, where users are able to create or join chat rooms and write messages to each other. + + +``` html + + + + + + + +
+
+ +
+
+ - or - +
+
+ + +
+
+ + + + +``` + +After running with `pear dev` it should look like this: + +![Layout of the app](../assets/chat-app-3.png) + + +## Next + +Now that there's some basic UI for a chat app, let's take a look at [making a Pear App](./making-a-pear-app.md).