diff --git a/assets/chat-app-1.png b/assets/chat-app-1.png index c00a30d..bb2ac63 100644 Binary files a/assets/chat-app-1.png and b/assets/chat-app-1.png differ diff --git a/assets/chat-app-2.png b/assets/chat-app-2.png index a6e31a3..a8cf55d 100644 Binary files a/assets/chat-app-2.png and b/assets/chat-app-2.png differ diff --git a/assets/chat-app-3.png b/assets/chat-app-3.png index 54f2974..dd4bc73 100644 Binary files a/assets/chat-app-3.png and b/assets/chat-app-3.png differ diff --git a/assets/chat-app-4.png b/assets/chat-app-4.png deleted file mode 100644 index 960de88..0000000 Binary files a/assets/chat-app-4.png and /dev/null differ diff --git a/assets/chat-app-4a.png b/assets/chat-app-4a.png new file mode 100644 index 0000000..bfdfe13 Binary files /dev/null and b/assets/chat-app-4a.png differ diff --git a/assets/chat-app-4b.png b/assets/chat-app-4b.png new file mode 100644 index 0000000..0a91044 Binary files /dev/null and b/assets/chat-app-4b.png differ diff --git a/assets/chat-app-5.png b/assets/chat-app-5.png deleted file mode 100644 index 72013b9..0000000 Binary files a/assets/chat-app-5.png and /dev/null differ diff --git a/assets/chat-app-5a.png b/assets/chat-app-5a.png new file mode 100644 index 0000000..b248c48 Binary files /dev/null and b/assets/chat-app-5a.png differ diff --git a/assets/chat-app-5b.png b/assets/chat-app-5b.png new file mode 100644 index 0000000..0715ba7 Binary files /dev/null and b/assets/chat-app-5b.png differ diff --git a/assets/chat-app-6.png b/assets/chat-app-6.png index 3a23b96..f1a6143 100644 Binary files a/assets/chat-app-6.png and b/assets/chat-app-6.png differ diff --git a/assets/chat-app-7.png b/assets/chat-app-7.png deleted file mode 100644 index d26c6a1..0000000 Binary files a/assets/chat-app-7.png and /dev/null differ diff --git a/assets/chat-app-8.png b/assets/chat-app-8.png deleted file mode 100644 index 87d4a3d..0000000 Binary files a/assets/chat-app-8.png and /dev/null differ diff --git a/guide/making-a-pear-app.md b/guide/making-a-pear-app.md index d4afb1a..56bd998 100644 --- a/guide/making-a-pear-app.md +++ b/guide/making-a-pear-app.md @@ -90,7 +90,7 @@ function onMessageAdded(from, message) { } ``` -## Step 3. Run the app +## Step 4. Run the app Now it's time to write the app. @@ -104,13 +104,20 @@ In the first app, click on `Create chat room`. When it has started the topic is In the second app, paste in the topic that was shown in the first app, and then click on `Join chat room`. -![Use topic from creator](../assets/chat-app-4.png) +

+ The first app, with the topic Second app, using topic from the first +

After that the two apps are able to send messages between them -![Messages between the peers](../assets/chat-app-5.png) +View from the first app -## Understanding the code +

+ View from the first app View from the second app +

+ + +## Understand the code 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. diff --git a/guide/releasing-a-pear-app.md b/guide/releasing-a-pear-app.md index 06e20a1..328e492 100644 --- a/guide/releasing-a-pear-app.md +++ b/guide/releasing-a-pear-app.md @@ -2,7 +2,7 @@ As covered in [Sharing a Pear App](./sharing-a-pear-app.md), Pear use release channels in a similar way that git use branches. When the app has been tested, and it's ready to release it, it's really simple. -## Step 1. Releasing +## Step 1. Release Assume that the app was staged into `example`, then releasing it is simply: diff --git a/guide/sharing-a-pear-app.md b/guide/sharing-a-pear-app.md index f115cbe..3cb76a0 100644 --- a/guide/sharing-a-pear-app.md +++ b/guide/sharing-a-pear-app.md @@ -7,7 +7,7 @@ With Pear there are one single "release" (or "production") version of an app, an To share apps, stage them using `pear stage some-name`. This builds a new version of the app and puts them into the `some-name` channel. -## Step 1. Staging +## Step 1. Stage Before sharing the app, first stage it into a channel called `example` (the name can be anything) @@ -15,7 +15,7 @@ Before sharing the app, first stage it into a channel called `example` (the name $ pear stage example ``` -## Step 2. Seeding +## Step 2. Seed After the app has been staged into the `example` channel, it now needs to be seeded. This is a way to signal that the app is now shared, so others can download and run it. @@ -32,7 +32,7 @@ After the app has been staged into the `example` channel, it now needs to be see For now, keep this terminal open. As long as this process is running, your computer will help seed the application. -## Step 3. Launching +## Step 3. Launch Because the app is now being seeded, it' possible for others with the key (`pear:nykm...`) to launch it. @@ -42,6 +42,8 @@ In another terminal (or on another computer), run: $ pear launch pear:nykmkrpwgadcd8m9x5khhh43j9izj123eguzqg3ygta7yn1s379o ``` +![Launching the app with pear launch](../assets/chat-app-6.png) + 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. diff --git a/guide/starting-a-pear-project.md b/guide/starting-a-pear-project.md index b478249..54127a8 100644 --- a/guide/starting-a-pear-project.md +++ b/guide/starting-a-pear-project.md @@ -16,8 +16,8 @@ $ pear init --yes This will create a base structure for the project. -- `package.json`. Config for the app. Notice the `pear` property. -- `index.html`. The UI for the app. +- `package.json`. Configuration for the app. Notice the `pear` property. +- `index.html`. The html for the app. - `app.js`. The main code. - `test/index.test.js`. Skeleton for writing tests. @@ -41,7 +41,30 @@ While keeping the app open with `pear dev`, open `index.html` in a code editor. ![Automatic reload](../assets/chat-app-2.png) -## Step 4. Create a basic UI +## Step 4. Change Graphical User Interface (GUI) configuration + +It's possible to change various settings with Pear. This is done with the `pear` property in `package.json` + +For now, open `package.json` and update it : +``` +{ + ... + "pear": { + "gui": { + "backgroundColor": "#3592C3", + "height": 400, + "width": 700 + } + } + ... +} +``` + +When running the app now, it will be light blue, and have a different size. + +See all the possibly options in the [Configuration Documentation](../reference/configuration.md). + +## Step 5. Create a basic User Interface (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. @@ -54,6 +77,7 @@ To add some more interesting UI, let's have an example of a chat app, where user body { display: flex; height: 100vh; + background-color: #3592C3; color: white; justify-content: center; margin: 0;