Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions doc/7/getting-started/react-native/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ order: 400

# Getting Started with Kuzzle and React Native

This section deals with **Kuzzle** (+ [**Javascript SDK**](/sdk/js/7/)) and **React Native**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications/#document-messages) to develop a realtime chat.
This section deals with **Kuzzle V2** (+ **Javascript SDK 7**) and **React Native**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications#document-messages) to develop a realtime chat.


## Requirements

- **Node.js** >= 12.0.0 ([install here](https://nodejs.org/en/download/))
- **Running Kuzzle Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle/))
- **Running Kuzzle V2 Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle))
- **Expo CLI** ([install here](https://docs.expo.io/versions/v36.0.0/get-started/installation/))

"[Expo](https://docs.expo.io/versions/latest/) is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase."
Expand All @@ -32,7 +32,7 @@ Then choose a blank project, type 'Kuzzle' and type y.
Install Kuzzle's Javascript SDK:
```bash
cd getting-started-kuzzle
npm install kuzzle-sdk
npm install kuzzle-sdk@7
```

Now, you can run your app and access it by different ways:
Expand Down Expand Up @@ -100,7 +100,7 @@ Like in our previous components, we'll first need to add our imports:

<<< ./snippets/ChatClient.js.snippet:1[js]

Then we will create our state that will contains our messages and call the function that will initialize our kuzzle by [establish the connection](/sdk/js/7/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exist](sdk/js/7/controllers/index/exists/), the [index](sdk/js/6/controllers/index/create/) and [collection](sdk/js/7/controllers/collection/create/) of our chat.
Then we will create our state that will contains our messages and call the function that will initialize our kuzzle by [establish the connection](/sdk/js/7/core-classes/kuzzle/connect) to kuzzle and create, if they don't [exist](/sdk/js/7/controllers/index/exists), the [index](/sdk/js/7/controllers/index/create) and [collection](/sdk/js/7/controllers/collection/create) of our chat.

<<< ./snippets/ChatClient.js.snippet:2[js]

Expand All @@ -111,10 +111,10 @@ Create the following function to fetch the messages:

<<< ./snippets/ChatClient.js.snippet:6[js]

The function `fetchMessage()` will [search](/sdk/js/7/controllers/document/search/) for the first hundred newest messages and store them in our state, before subscribing to changes in the `messages` collection.
The function `fetchMessage()` will [search](/sdk/js/7/controllers/document/search) for the first hundred newest messages and store them in our state, before subscribing to changes in the `messages` collection.

Then, create the `subscribeMessages()` function.
It will call the Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe/) on message creations:
It will call the Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe) on message creations:

<<< ./snippets/ChatClient.js.snippet:7[js]

Expand All @@ -132,7 +132,7 @@ We will need a function to create a document in Kuzzle when an user send a messa

<<< ./snippets/ChatClient.js.snippet:8[js]

This simple method will [create](/sdk/js/7/controllers/document/create/) a new message document in Kuzzle.
This simple method will [create](/sdk/js/7/controllers/document/create) a new message document in Kuzzle.

As you can see we don't push the new message in our array on message creation.

Expand Down Expand Up @@ -187,7 +187,7 @@ You can now add new messages to Kuzzle and receive the creation notification to
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/2/guides/essentials/real-time/)
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/2/guides/essentials/security/)
- lean how to use Kuzzle [Admin Console](/core/2/guides/essentials/admin-console/) to manage your users and data
- learn more about Kuzzle [realtime engine](/core/2/guides/essentials/real-time)
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/2/guides/essentials/security)
- lean how to use Kuzzle [Admin Console](/core/2/guides/essentials/admin-console) to manage your users and data
- learn how to perform a [basic authentication](/sdk/js/7/controllers/auth/login)
20 changes: 9 additions & 11 deletions doc/7/getting-started/react/with-redux/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ order: 0

# Getting Started with Kuzzle and React with Redux Saga

This section deals with **Kuzzle** (+ **Javascript SDK**) and **React** (with **Redux** and **Redux Saga**). We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications/#document-messages) to develop a realtime chat.
This section deals with **Kuzzle V2** (+ **Javascript SDK 7**) and **React** (with **Redux** and **Redux Saga**). We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications#document-messages) to develop a realtime chat.

## Requirements

- **Node.js** >= 8.0.0 ([install here](https://nodejs.org/en/download/))
- **Create React App** ([install here](https://github.com/facebook/create-react-app))
- **Running Kuzzle Stack** ([instructions here](core/1/guides/getting-started/running-kuzzle/))
- **Running Kuzzle V2 Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle))

## Prepare your environment

Expand All @@ -24,7 +24,7 @@ Create your React app and install all the dependencies from the command line usi
```bash
yarn create react-app kuzzle-playground
cd kuzzle-playground
yarn add kuzzle-sdk redux redux-saga react-redux
yarn add kuzzle-sdk@7 redux redux-saga react-redux
```

We'll rewrite the _src/App.js_ so you can remove everything inside.
Expand Down Expand Up @@ -54,7 +54,7 @@ After that, create that function with the connection to Kuzzle:

<<< ./snippets/App.js.snippet:2[js]

Then we will [establish the connection](/sdk/js/7/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exist](sdk/js/6/controllers/index/exists/), the [index](sdk/js/6/controllers/index/create/) and [collection](sdk/js/6/controllers/collection/create/) for our chat.
Then we will [establish the connection](/sdk/js/7/core-classes/kuzzle/connect) to kuzzle and create, if they don't [exist](/sdk/js/7/controllers/index/exists), the [index](/sdk/js/7/controllers/index/create) and [collection](/sdk/js/7/controllers/collection/create) for our chat.

Add the following lines to the `_initialize` function:

Expand Down Expand Up @@ -116,7 +116,7 @@ We can now display the messages stored in Kuzzle. In the next part, we'll see ho

## Send messages

We need to write a simple method that will [create](/sdk/js/7/controllers/document/create/) a new message document in Kuzzle.
We need to write a simple method that will [create](/sdk/js/7/controllers/document/create) a new message document in Kuzzle.
Add the following function in your `app` class in the_src/App.js_ file:

<<< ./snippets/App.js.snippet:10[js]
Expand All @@ -130,7 +130,7 @@ Let's add it in the _src/state/sagas.js_ file:

As you can see we don't push the new message in our state on message creation.
Now, we need to subscribe to changes made on the collection containing our messages.
So let's create our `_subscribeToNewMessages()` function in the `app` class in _src/App.js_ file. It will call Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe/) on message creations:
So let's create our `_subscribeToNewMessages()` function in the `app` class in _src/App.js_ file. It will call Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe) on message creations:

<<< ./snippets/App.js.snippet:8[js]

Expand Down Expand Up @@ -164,8 +164,6 @@ You can now add new messages to Kuzzle and receive the notification of the creat
Now that you're more familiar with Kuzzle with React, you can:

- discover what this SDK has to offer by browsing other sections of this documentation
- learn how to use [Koncorde](/core/2/guides/cookbooks/realtime-api/introduction/) to create incredibly fine-grained and blazing-fast subscriptions
- learn more about Kuzzle [realtime engine](/core/2/guides/essentials/real-time/)
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/guide/1/essentials/security/)

To help you starting a new project with Kuzzle and React, you can start with the [**Kuzzle, React and Redux boilerplate**](https://github.com/kuzzleio/kuzzle-react-redux-boilerplate).
- learn how to use [Koncorde](/core/2/guides/cookbooks/realtime-api/introduction) to create incredibly fine-grained and blazing-fast subscriptions
- learn more about Kuzzle [realtime engine](/core/2/guides/essentials/real-time)
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/2/guides/essentials/security)
20 changes: 10 additions & 10 deletions doc/7/getting-started/vuejs/standalone/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ 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/7/essentials/realtime-notifications/#document-messages) to develop a realtime chat.
This section deals with **Kuzzle V2** (+ **Javascript SDK 7**) and **VueJS**. We will create **documents** in Kuzzle and subscribe to [document notifications](/sdk/js/7/essentials/realtime-notifications#document-messages) to develop a realtime chat.


## 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/2/guides/getting-started/running-kuzzle/))
- **Running Kuzzle V2 Stack** ([instructions here](/core/2/guides/getting-started/running-kuzzle))

## Prepare your environment

Expand All @@ -29,7 +29,7 @@ vue create kuzzle-playground
Install Kuzzle's Javascript SDK:
```bash
cd kuzzle-playground
npm install kuzzle-sdk
npm install kuzzle-sdk@7
```

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.
Expand All @@ -46,7 +46,7 @@ We need to import our Kuzzle SDK instance, so just add the following line in you

<<< ./snippets/App.vue.snippet:3[js]

Then we will [establish the connection](/sdk/js/7/core-classes/kuzzle/connect/) to kuzzle and create, if they don't [exist](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.
Then we will [establish the connection](/sdk/js/7/core-classes/kuzzle/connect) to kuzzle and create, if they don't [exist](/sdk/js/7/controllers/index/exists/), the [index](/sdk/js/7/controllers/index/create) and [collection](/sdk/js/7/controllers/collection/create) of our chat.
Add the following `valid()` method in the export of the `<script>` tag of your _App.vue_ file:

<<< ./snippets/App.vue.snippet:2[js]
Expand All @@ -71,7 +71,7 @@ Then, create the following functions to fetch and display the messages:

<<< ./snippets/App.vue.snippet:6[js]

The function `fetchMessage()` will [search](/sdk/js/7/controllers/document/search/) for the first hundred newest messages and store them in our array, before subscribing to changes in the `messages` collection. We called it in the `valid()` function we created above.
The function `fetchMessage()` will [search](/sdk/js/7/controllers/document/search) for the first hundred newest messages and store them in our array, before subscribing to changes in the `messages` collection. We called it in the `valid()` function we created above.

<<< ./snippets/App.vue.snippet:7[js]

Expand All @@ -87,7 +87,7 @@ We can now display the messages stored in Kuzzle. All there is to do is to creat

## Send messages

We need to write a simple method that will [create](/sdk/js/7/controllers/document/create/) a new message document in Kuzzle.
We need to write a simple method that will [create](/sdk/js/7/controllers/document/create) a new message document in Kuzzle.

<<< ./snippets/App.vue.snippet:10[js]

Expand All @@ -96,7 +96,7 @@ As you can see we don't push the new message in our array on message creation.
Indeed, we will receive notifications from Kuzzle each time we modify our message collection (even if it is a message creation on our part) that we will use to add the messages in our array.

Now, we need to subscribe to the collection that contains our messages.
So let's create our `subscribeMessages()` action. It will call the Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe/) on message creations:
So let's create our `subscribeMessages()` action. It will call the Kuzzle's realtime controller to allow us to [receive notifications](/sdk/js/7/controllers/realtime/subscribe) on message creations:

<<< ./snippets/App.vue.snippet:11[js]

Expand All @@ -115,7 +115,7 @@ You can now add new messages to Kuzzle and receive the creation notification to
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/2/guides/essentials/real-time/)
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/2/guides/essentials/security/)
- lean how to use Kuzzle [Admin Console](/core/2/guides/essentials/admin-console/) to manage your users and data
- learn more about Kuzzle [realtime engine](/core/2/guides/essentials/real-time)
- follow our guide to learn how to [manage users, and how to set up fine-grained access control](/core/2/guides/essentials/security)
- lean how to use Kuzzle [Admin Console](/core/2/guides/essentials/admin-console) to manage your users and data
- learn how to perform a [basic authentication](/sdk/js/7/controllers/auth/login)