Skip to content

Commit 438cd4b

Browse files
berthierestebanAschen
berthieresteban
authored and
Aschen
committed
Add-readme-to-vuejs-getting-started (#406)
Add readme to vueJS getting started (without vuex)
1 parent 9e27afa commit 438cd4b

File tree

4 files changed

+253
-39
lines changed

4 files changed

+253
-39
lines changed

‎doc/6/getting-started/vuejs/cypress/integration/tchat.spec.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
describe('test realtime tchat', () => {
2+
let currentIt = 1;
3+
let env;
4+
5+
before(() => {
6+
cy.initialisation();
7+
});
8+
9+
beforeEach(() => {
10+
cy.visit('/');
11+
cy.fixture(`Environment.${currentIt}.json`)
12+
.then((fixtures) => { env = fixtures; })
13+
.then(() => cy.log(`Environment ${currentIt}: `, env))
14+
.then(() => cy.loadEnvironment(env));
15+
cy.wait(2000);
16+
});
17+
18+
afterEach(() => {
19+
currentIt++;
20+
});
21+
22+
it('should enter a nickname', () => {
23+
cy.get('[placeholder="Enter your message"]')
24+
.should('not.exist');
25+
26+
cy.get('[placeholder="Enter your nickname"]')
27+
.type(env.username);
28+
29+
30+
cy.contains('Valid')
31+
.click();
32+
33+
cy.get('[placeholder="Enter your message"]')
34+
.should('exist');
35+
cy.get('[placeholder="Enter your nickname"]')
36+
.should('not.exist');
37+
});
38+
39+
it('should fetch and display some messages', () => {
40+
cy.get('[placeholder="Enter your nickname"]')
41+
.type(env.username);
42+
cy.contains('Valid')
43+
.click();
44+
45+
env.messages.forEach(message => {
46+
cy.get(message.payload.username === env.username ? '.fromMe': '.fromOthers')
47+
.within(() => {
48+
cy.contains(message.payload.value);
49+
cy.contains(message.payload.username);
50+
});
51+
});
52+
});
53+
54+
it('should send a message', () => {
55+
cy.get('[placeholder="Enter your nickname"]')
56+
.type(env.username);
57+
cy.contains('Valid')
58+
.click();
59+
cy.createMessage({
60+
_id: '1',
61+
payload: env.payload
62+
});
63+
64+
cy.get('.fromMe')
65+
.within(() => {
66+
cy.contains(env.payload.value);
67+
cy.contains(env.username);
68+
});
69+
});
70+
71+
it('should receive a message', () => {
72+
cy.get('[placeholder="Enter your nickname"]')
73+
.type(env.username);
74+
cy.contains('Valid')
75+
.click();
76+
cy.createMessage({
77+
_id: '1',
78+
payload: env.payload
79+
});
80+
81+
cy.get('.fromOthers')
82+
.within(() => {
83+
cy.contains(env.payload.value);
84+
cy.contains(env.payload.username);
85+
});
86+
});
87+
});

‎doc/6/getting-started/vuejs/index.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
code: false
3+
type: branch
4+
title: VueJS
5+
description: Get started with the Javascript SDK and VueJS
6+
order: 300
7+
---

‎doc/6/getting-started/vuejs/without-vuex/index.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
type: page
3+
code: false
4+
title: Without Vuex
5+
description: Getting started with Kuzzle and VueJS
6+
order: 0
7+
---
8+
9+
10+
# Getting Started with Kuzzle and VueJS
11+
12+
This section deals with **Kuzzle** (+ **Javascript SDK**) and **VueJS**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/6/essentials/realtime-notifications/#document-messages) to develop a realtime chat.
13+
14+
You can find the full code of this guide [here](https://github.com/kuzzleio/sdk-javascript/tree/6-dev/doc/6/getting-started/vuejs/without-vuex).
15+
16+
## Requirements
17+
18+
- **Node.js** >= 8.0.0 ([install here](https://nodejs.org/en/download/))
19+
- **Vue CLI** ([install here](https://cli.vuejs.org/guide/installation.html))
20+
- **Running Kuzzle Stack** ([instructions here](/core/1/guides/getting-started/running-kuzzle/))
21+
22+
## Prepare your environment
23+
24+
Create your VueJS app with Vue CLI. You'll need to select manually the features,
25+
just add Babel, Linter and select the default options for the other features.
26+
```bash
27+
vue create kuzzle-playground
28+
```
29+
30+
Install the kuzzle-sdk:
31+
```bash
32+
cd kuzzle-playground
33+
yarn add kuzzle-sdk
34+
```
35+
36+
In the _App.vue_ file, you should remove the tag, the import and the component registration of the `HelloWorld` component, we won't use it.
37+
38+
## Instanciating Kuzzle SDK
39+
40+
We have to connect the server so that our client can interact with it.
41+
42+
To do this, we have to create _src/services/kuzzle.js_ file to put our kuzzle instance, a bit like a singleton:
43+
44+
<<< ./src/services/kuzzle.js
45+
46+
We need to import our Kuzzle SDK instance, so just add the following line in your `<script>` tag in the _App.vue_ file:
47+
48+
<<< ./src/App.vue:3[js]
49+
50+
Then we will [etablish the connection](/sdk/js/6/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exists](sdk/js/6/controllers/index/exists/), the [index](sdk/js/6/controllers/index/create/) and [collection](sdk/js/6/controllers/collection/create/) of our chat.
51+
Add the following `valid()` method in the export of the `<script>` tag of your _App.vue_ file:
52+
53+
<<< ./src/App.vue:2[js]
54+
55+
## Get the username
56+
First of all, we need to know the user nickname. Let's start by adding the following html code in the `<template>` tag to allow the client type his nickname:
57+
58+
<<< ./src/App.vue:1[html]
59+
60+
As you can see we'll need two properties: `username` and `validate`.
61+
62+
63+
## Display the messages
64+
65+
We'll need some properties to manage our messages. Add the following `data` to your _App.vue_
66+
67+
<<< ./src/App.vue:4[js]
68+
69+
Then, create the following functions to fetch and display the messages:
70+
71+
<<< ./src/App.vue:5[js]
72+
73+
<<< ./src/App.vue:6[js]
74+
75+
The function `fetch_message()` will [search](/sdk/js/6/controllers/document/search/) for the first hundred newest messages and store them in our array before subscribe to notification about `messages` collection. We called it in the `valid()` function we created before.
76+
77+
<<< ./src/App.vue:7[js]
78+
79+
Now, just add the following html code to display the messages:
80+
81+
<<< ./src/App.vue:8[html]
82+
83+
To finish this part, just add the following css classes:
84+
85+
<<< ./src/App.vue:9[css]
86+
87+
We can now display the messages stored in Kuzzle. Cool but we need to create some right ?
88+
89+
## Send messages
90+
91+
We need to write a simple method that will [create](/sdk/js/6/controllers/document/create/) a new message document in Kuzzle.
92+
93+
<<< ./src/App.vue:10[js]
94+
95+
As you can see we don't push the new message in our array on message creation.
96+
Actually, We'll subscribe to the collection that contains our messages.
97+
So let's create our `subscribe_messages()` action. It will call the realtime controller of Kuzzle to allow us to [receive notifications](/sdk/js/6/controllers/realtime/subscribe/) on message creation:
98+
99+
<<< ./src/App.vue:11[js]
100+
101+
To finish, just add an input field, bond to the `message` property and a button which calls our `sendMessage()` function:
102+
103+
<<< ./src/App.vue:12[html]
104+
105+
And the following CSS class:
106+
107+
<<< ./src/App.vue:13[css]
108+
109+
You can now add new messages to Kuzzle and receive the notification of the creation to update your state and display the new messages, enjoy :)
110+
111+
You can find the full code of this guide [here](https://github.com/kuzzleio/sdk-javascript/tree/6-dev/doc/6/getting-started/vuejs/without-vuex).
112+
113+
## Where do we go from here?
114+
115+
Now that you're more familiar with Kuzzle, dive even deeper to learn how to leverage its full capabilities:
116+
117+
- discover what this SDK has to offer by browsing other sections of this documentation
118+
- learn more about Kuzzle [realtime engine](/core/1/guides/essentials/real-time/)
119+
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/1/guides/essentials/security/)
120+
- lean how to use Kuzzle [Admin Console](/core/1/guides/essentials/admin-console/) to manage your users and data
121+
- learn how to perform a [basic authentication](/sdk/js/6/controllers/auth/login)

‎doc/6/getting-started/vuejs/without-vuex/src/App.vue‎

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -46,78 +46,77 @@ import kuzzle from "./services/kuzzle";
4646
4747
export default {
4848
name: "app",
49-
/* snippet:start:4 */
49+
/* snippet:start:4 */
5050
data() {
5151
return {
52-
message: "", // String containing the user input
53-
messages: [], // Array containing our messages
54-
roomID: "", // Id of the realtime subscription
55-
username: "", // Nickname of the current user
56-
validate: false // Value that will change the display (false => Pseudo input; true => Message input)
52+
message: "", // The string containing the user input
53+
messages: [], // The array containing our messages
54+
roomID: "", // The Id of the realtime subscription
55+
username: "", // The pseudo of the current user
56+
validate: false // The value that will change the display (false => Pseudo input; true => Message input)
5757
};
5858
},
59-
/* snippet:end */
59+
/* snippet:end */
6060
methods: {
61-
/* snippet:start:5 */
61+
/* snippet:start:5 */
6262
// This function return the right formated date depending on the timestamp
6363
getDate(timestamp) {
6464
const date = new Date(timestamp);
65-
return date.toLocaleString().split("GMT")[0];
65+
return date.toString().split("GMT")[0];
6666
},
67-
/* snippet:end */
68-
/* snippet:start:6 */
67+
/* snippet:end */
68+
/* snippet:start:6 */
6969
// This function will create a message object containing the informations we need to display it
70-
getMessage(document) {
70+
getMessage(hit) {
7171
const message = {
7272
// The unique id of the document containing the message
73-
_id: document._id,
73+
_id: hit._id,
7474
// The text of the message
75-
value: document._source.value,
75+
value: hit._source.value,
7676
// The creation date
77-
createdAt: document._source._kuzzle_info.createdAt,
77+
createdAt: hit._source._kuzzle_info.createdAt,
7878
// The author name
79-
username: document._source.username
79+
username: hit._source.username
8080
};
8181
return message;
8282
},
83-
/* snippet:end */
84-
/* snippet:start:10 */
83+
/* snippet:end */
84+
/* snippet:start:10 */
8585
async sendMessage() {
8686
if (this.message === "") return;
87-
// Call the create method of the document controller
88-
await kuzzle.document.create(
89-
"chat",
90-
"messages",
87+
// Call the create method of the document controller
88+
await kuzzle.document.create("chat", "messages",
9189
// Give as parameter the object that will be store in kuzzle
9290
{
9391
value: this.message,
9492
username: this.username
95-
}
96-
);
93+
});
9794
// Clear the user input
9895
this.message = "";
9996
},
100-
/* snippet:end */
101-
/* snippet:start:11 */
102-
async subscribe_messages() {
103-
// Call the subscribe method of the realtime controller and receive the roomId
104-
// Save the id of our subscription (we could need it to unsubscribe)
105-
this.roomID = await kuzzle.realtime.subscribe(
106-
"chat", // Id of the index
107-
"messages", // Id of the collection
108-
{}, // Filter
109-
// Callback for notifications receive
110-
notification => {
111-
// Check if the notification interest us (only document creation)
112-
if (notification.type !== "document") return;
113-
if (notification.action !== "create") return;
97+
/* snippet:end */
98+
/* snippet:start:11 */
99+
async subscribe_messages() {
100+
// Call the subscribe method of the realtime controller and receive the roomId
101+
// Save the id of our subscription (we could need it to unsubscribe)
102+
this.roomID = await kuzzle.realtime.subscribe(
103+
"chat", // Id of the index
104+
"messages", // Id of the collection
105+
{}, // Options
106+
// Callback for notifications receive
107+
notification => {
108+
// Check if the notification interest us (only document creation)
109+
if (
110+
notification.type === "document" &&
111+
notification.action === "create"
112+
) {
114113
// Add the new message to our array
115114
this.messages = [
116115
this.getMessage(notification.result),
117116
...this.messages
118117
];
119118
}
120-
);
119+
});
121120
},
122121
/* snippet:end */
123122
/* snippet:start:7 */

0 commit comments

Comments
 (0)