Add-readme-to-vuejs-getting-started

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

@@ -0,0 +1,87 @@
+describe('test realtime tchat', () => {
+  let currentIt = 1;
+  let env;
+
+  before(() => {
+    cy.initialisation();
+  });
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.fixture(`Environment.${currentIt}.json`)
+      .then((fixtures) => { env = fixtures; })
+      .then(() => cy.log(`Environment ${currentIt}: `, env))
+      .then(() => cy.loadEnvironment(env));
+    cy.wait(2000);
+  });
+
+  afterEach(() => {
+    currentIt++;
+  });
+
+  it('should enter a nickname', () => {
+    cy.get('[placeholder="Enter your message"]')
+      .should('not.exist');
+
+    cy.get('[placeholder="Enter your nickname"]')
+      .type(env.username);
+
+
+    cy.contains('Valid')
+      .click();
+
+    cy.get('[placeholder="Enter your message"]')
+      .should('exist');
+    cy.get('[placeholder="Enter your nickname"]')
+      .should('not.exist');
+  });
+
+  it('should fetch and display some messages', () => {
+    cy.get('[placeholder="Enter your nickname"]')
+      .type(env.username);
+    cy.contains('Valid')
+      .click();
+
+    env.messages.forEach(message => {
+      cy.get(message.payload.username === env.username ? '.fromMe': '.fromOthers')
+        .within(() => {
+          cy.contains(message.payload.value);
+          cy.contains(message.payload.username);
+        });
+    });
+  });
+
+  it('should send a message', () => {
+    cy.get('[placeholder="Enter your nickname"]')
+      .type(env.username);
+    cy.contains('Valid')
+      .click();
+    cy.createMessage({
+      _id: '1',
+      payload: env.payload
+    });
+
+    cy.get('.fromMe')
+      .within(() => {
+        cy.contains(env.payload.value);
+        cy.contains(env.username);
+      });
+  });
+
+  it('should receive a message', () => {
+    cy.get('[placeholder="Enter your nickname"]')
+      .type(env.username);
+    cy.contains('Valid')
+      .click();
+    cy.createMessage({
+      _id: '1',
+      payload: env.payload
+    });
+
+    cy.get('.fromOthers')
+      .within(() => {
+        cy.contains(env.payload.value);
+        cy.contains(env.payload.username);
+      });  
+  });
+});

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

@@ -0,0 +1,7 @@
+---
+code: false
+type: branch
+title: VueJS
+description: Get started with the Javascript SDK and VueJS
+order: 300
+---

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

@@ -0,0 +1,121 @@
+---
+type: page
+code: false
+title: Without Vuex
+description: Getting started with Kuzzle and VueJS
+order: 0
+---
+
+
+# Getting Started with Kuzzle and VueJS
+
+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.
+
+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).
+
+## Requirements
+
+- **Node.js** >= 8.0.0 ([install here](https://nodejs.org/en/download/))
+- **Vue CLI** ([install here](https://cli.vuejs.org/guide/installation.html))
+- **Running Kuzzle Stack** ([instructions here](/core/1/guides/getting-started/running-kuzzle/))
+
+## Prepare your environment
+
+Create your VueJS app with Vue CLI. You'll need to select manually the features,
+just add Babel, Linter and select the default options for the other features. 
+```bash
+vue create kuzzle-playground
+```
+
+Install the kuzzle-sdk: 
+```bash
+cd kuzzle-playground
+yarn add kuzzle-sdk
+```
+
+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.
+
+## Instanciating Kuzzle SDK
+
+We have to connect the server so that our client can interact with it.
+
+To do this, we have to create _src/services/kuzzle.js_ file to put our kuzzle instance, a bit like a singleton:
+
+<<< ./src/services/kuzzle.js
+
+We need to import our Kuzzle SDK instance, so just add the following line in your `<script>` tag in the _App.vue_ file: 
+
+<<< ./src/App.vue:3[js]
+
+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. 
+Add the following `valid()` method in the export of the `<script>` tag of your _App.vue_ file:
+
+<<< ./src/App.vue:2[js]
+
+## Get the username
+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:
+
+<<< ./src/App.vue:1[html]
+
+As you can see we'll need two properties: `username` and `validate`.
+
+
+## Display the messages
+
+We'll need some properties to manage our messages. Add the following `data` to your _App.vue_
+
+<<< ./src/App.vue:4[js]
+
+Then, create the following functions to fetch and display the messages: 
+
+<<< ./src/App.vue:5[js]
+
+<<< ./src/App.vue:6[js]
+
+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.
+
+<<< ./src/App.vue:7[js]
+
+Now, just add the following html code to display the messages:
+
+<<< ./src/App.vue:8[html]
+
+To finish this part, just add the following css classes:
+
+<<< ./src/App.vue:9[css]
+
+We can now display the messages stored in Kuzzle. Cool but we need to create some right ?
+
+## Send messages
+
+We need to write a simple method that will [create](/sdk/js/6/controllers/document/create/) a new message document in Kuzzle.
+
+<<< ./src/App.vue:10[js]
+
+As you can see we don't push the new message in our array on message creation.
+Actually, We'll subscribe to the collection that contains our messages.
+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:
+
+<<< ./src/App.vue:11[js]
+
+To finish, just add an input field, bond to the `message` property and a button which calls our `sendMessage()` function:
+
+<<< ./src/App.vue:12[html]
+
+And the following CSS class: 
+
+<<< ./src/App.vue:13[css]
+
+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 :)
+
+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).
+
+## Where do we go from here?
+
+Now that you're more familiar with Kuzzle, dive even deeper to learn how to leverage its full capabilities:
+
+- discover what this SDK has to offer by browsing other sections of this documentation
+- learn more about Kuzzle [realtime engine](/core/1/guides/essentials/real-time/)
+- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/1/guides/essentials/security/)
+- lean how to use Kuzzle [Admin Console](/core/1/guides/essentials/admin-console/) to manage your users and data
+- learn how to perform a [basic authentication](/sdk/js/6/controllers/auth/login)

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

@@ -46,78 +46,77 @@ import kuzzle from "./services/kuzzle";
 
 export default {
   name: "app",
-  /* snippet:start:4 */
+/* snippet:start:4 */
   data() {
     return {
-      message: "", // String containing the user input
-      messages: [], // Array containing our messages
-      roomID: "", // Id of the realtime subscription
-      username: "", // Nickname of the current user
-      validate: false // Value that will change the display (false => Pseudo input; true => Message input)
+      message: "",    // The string containing the user input
+      messages: [],   // The array containing our messages
+      roomID: "",     // The Id of the realtime subscription
+      username: "",   // The pseudo of the current user
+      validate: false // The value that will change the display (false => Pseudo input; true => Message input)
     };
   },
-  /* snippet:end */
+/* snippet:end */
   methods: {
-    /* snippet:start:5 */
+/* snippet:start:5 */
     // This function return the right formated date depending on the timestamp
     getDate(timestamp) {
       const date = new Date(timestamp);
-      return date.toLocaleString().split("GMT")[0];
+      return date.toString().split("GMT")[0];
     },
-    /* snippet:end */
-    /* snippet:start:6 */
+/* snippet:end */
+/* snippet:start:6 */
     // This function will create a message object containing the informations we need to display it
-    getMessage(document) {
+    getMessage(hit) {
       const message = {
         // The unique id of the document containing the message
-        _id: document._id,
+        _id: hit._id,
         // The text of the message
-        value: document._source.value,
+        value: hit._source.value,
         // The creation date
-        createdAt: document._source._kuzzle_info.createdAt,
+        createdAt: hit._source._kuzzle_info.createdAt,
         // The author name
-        username: document._source.username
+        username: hit._source.username
       };
       return message;
     },
-    /* snippet:end */
-    /* snippet:start:10 */
+/* snippet:end */
+/* snippet:start:10 */
     async sendMessage() {
       if (this.message === "") return;
-      // Call the create method of the document controller
-      await kuzzle.document.create(
-        "chat",
-        "messages",
+        // Call the create method of the document controller
+        await kuzzle.document.create("chat", "messages", 
         // Give as parameter the object that will be store in kuzzle
         {
           value: this.message,
           username: this.username
-        }
-      );
+        });
       // Clear the user input
       this.message = "";
     },
-    /* snippet:end */
-    /* snippet:start:11 */
-    async subscribe_messages() {
-      // Call the subscribe method of the realtime controller and receive the roomId
-      // Save the id of our subscription (we could need it to unsubscribe)
-      this.roomID = await kuzzle.realtime.subscribe(
-        "chat", // Id of the index
-        "messages", // Id of the collection
-        {}, // Filter
-        // Callback for notifications receive
-        notification => {
-          // Check if the notification interest us (only document creation)
-          if (notification.type !== "document") return;
-          if (notification.action !== "create") return;
+/* snippet:end */
+/* snippet:start:11 */
+  async subscribe_messages() {
+    // Call the subscribe method of the realtime controller and receive the roomId
+    // Save the id of our subscription (we could need it to unsubscribe)
+    this.roomID = await kuzzle.realtime.subscribe(
+      "chat",     // Id of the index
+      "messages", // Id of the collection
+      {},         // Options
+      // Callback for notifications receive
+      notification => {
+      // Check if the notification interest us (only document creation)
+        if (
+          notification.type === "document" &&
+          notification.action === "create"
+        ) {
           // Add the new message to our array
           this.messages = [
             this.getMessage(notification.result),
             ...this.messages
           ];
         }
-      );
+      });
     },
     /* snippet:end */
     /* snippet:start:7 */