docs: document web and react

ArcSelf · Jan 16, 2020 · 6748a8a · 6748a8a
1 parent 91e3e12
commit 6748a8a
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -62,6 +62,10 @@ The version 4 is very different from previous versions. Until this version, NLP.
   - [One bot per connector](docs/v4/quickstart.md#one-bot-per-connector)
   - [Different port for Microsoft Bot Framework and Webchat](docs/v4/quickstart.md#different-port-for-microsoft-bot-framework-and-webchat)
   - [Adding logic to an intent](docs/v4/quickstart.md#adding-logic-to-an-intent)
+  - [Creating a distributable version](docs/v4/quickstart.md#creating-a-distributable-version)
+- [Web and React Native](docs/v4/webandreact.md)
+  - [Preparing to generate a bundle](docs/v4/webandreact.md#preparing-to-generate-a-bundle)
+  - [Your fist web NLP](docs/v4/webandreact.md#your-first-web-nlp)
 - [React Native](#react-native)
 - [Example of use](#example-of-use)
 - [False Positives](#false-positives)

diff --git a/docs/v4/webandreact.md b/docs/v4/webandreact.md
@@ -0,0 +1,153 @@
+# Web and React Native
+
+## Preparing to generate a bundle
+
+NLP.js is developed to be a Node.js project, but even with that can be compiled to run in both Web and React Native applications. In fact, the libraries of NLP.js take this into account and the core libraries don't use anything that cannot be executed on web, like the file system.
+But to generate the web bundle it's need to install two development libraries: browserify and terser. To do that run this in your project folder:
+```bash
+npm i -D browserify terser
+```
+
+Now you will need an script to generated the bundle. Open your _package.json_ and add this into the scripts section:
+```json
+    "browserdist": "browserify ./index.js | terser --compress --mangle > ./bundle.js"
+```
+
+From this moment, you can generate a file _bundle.js_ containing the browser bundle executing this:
+```bash
+npm run browserdist
+```
+
+## Your first web NLP
+
+You can download the code of this example here: https://github.com/jesus-seijas-sp/nlpjs-examples/tree/master/02.web/01.bundle
+
+Now you will need an HTML to run the code in the browser, we will start with this simple one:
+```html
+<html>
+<head>
+  <title>Test</title>
+  <script src='./bundle.js'></script>
+</head>
+<body>
+</body>
+</html>
+```
+
+Install the libraries that will be needed to run the nlp:
+```bash
+npm i @nlpjs/core @nlpjs/lang-en-min @nlpjs/nlp
+```
+
+The @nlpjs/core is the one that install the container system and basic architecture, the @nlpjs/nlp install the nlp related things, and finally @nlpjs/lang-en-min install the english language but without the sentiment dictionaries. That's because the sentiment analysis dictionaries have a big size.
+
+Now create an _index.js_ with this content:
+```javascript
+const { containerBootstrap } = require('@nlpjs/core');
+const { Nlp } = require('@nlpjs/nlp');
+const { LangEn } = require('@nlpjs/lang-en-min');
+
+(async () => {
+  const container = await containerBootstrap();
+  container.use(Nlp);
+  container.use(LangEn);
+  const nlp = container.get('nlp');
+  nlp.settings.autoSave = false;
+  nlp.addLanguage('en');
+  // Adds the utterances and intents for the NLP
+  nlp.addDocument('en', 'goodbye for now', 'greetings.bye');
+  nlp.addDocument('en', 'bye bye take care', 'greetings.bye');
+  nlp.addDocument('en', 'okay see you later', 'greetings.bye');
+  nlp.addDocument('en', 'bye for now', 'greetings.bye');
+  nlp.addDocument('en', 'i must go', 'greetings.bye');
+  nlp.addDocument('en', 'hello', 'greetings.hello');
+  nlp.addDocument('en', 'hi', 'greetings.hello');
+  nlp.addDocument('en', 'howdy', 'greetings.hello');
+
+  // Train also the NLG
+  nlp.addAnswer('en', 'greetings.bye', 'Till next time');
+  nlp.addAnswer('en', 'greetings.bye', 'see you soon!');
+  nlp.addAnswer('en', 'greetings.hello', 'Hey there!');
+  nlp.addAnswer('en', 'greetings.hello', 'Greetings!');
+  await nlp.train();
+  const response = await nlp.process('en', 'I should go now');
+  console.log(response);
+})();
+```
+
+This creates a model equal to the first example of the quickstart.
+This line is very important because by default the nlp plugin tries to save the model after training, but in we this will generate an exception.
+```javscript
+nlp.settings.autoSave = false
+```
+
+Now you can generate the bundle running
+```bash
+npm run browserdist
+```
+The bundle size will be 111KB, that compared to the 3MB of the version 3.x is much better for the browser.
+Open the index.html in a browser and take a look into the console.
+
+## Creating a distributable version
+
+You can download the source code of this example here: https://github.com/jesus-seijas-sp/nlpjs-examples/tree/master/02.web/02.dist
+The problem with the previous example, is that every time that you have to modify your bot or build a new bot, you have to create the bundle again.
+But, what if we can compile and expose the classes and functions of the modules of NLP.js that we want? That way we can create a bundle that can be reusable between different bots, while separating what is NLP.js from our bot logic.
+
+First modify the _index.js_ to not include our bot logic and to simply import all from the NLP.js libraries and expose them using window object:
+
+```javascript
+const core = require('@nlpjs/core');
+const nlp = require('@nlpjs/nlp');
+const langenmin = require('@nlpjs/lang-en-min');
+
+window.nlpjs = { ...core, ...nlp, ...langenmin };
+```
+
+Second, compile the bundle:
+```bash
+npm run browserdist
+```
+
+Third, move the logic of your bot to the index.hmtl:
+
+```html
+<html>
+<head>
+  <title>Test</title>
+  <script src='./bundle.js'></script>
+  <script>
+  const { containerBootstrap, Nlp, LangEn } = window.nlpjs;
+
+  (async () => {
+    const container = await containerBootstrap();
+    container.use(Nlp);
+    container.use(LangEn);
+    const nlp = container.get('nlp');
+    nlp.settings.autoSave = false;
+    nlp.addLanguage('en');
+    // Adds the utterances and intents for the NLP
+    nlp.addDocument('en', 'goodbye for now', 'greetings.bye');
+    nlp.addDocument('en', 'bye bye take care', 'greetings.bye');
+    nlp.addDocument('en', 'okay see you later', 'greetings.bye');
+    nlp.addDocument('en', 'bye for now', 'greetings.bye');
+    nlp.addDocument('en', 'i must go', 'greetings.bye');
+    nlp.addDocument('en', 'hello', 'greetings.hello');
+    nlp.addDocument('en', 'hi', 'greetings.hello');
+    nlp.addDocument('en', 'howdy', 'greetings.hello');
+    
+    // Train also the NLG
+    nlp.addAnswer('en', 'greetings.bye', 'Till next time');
+    nlp.addAnswer('en', 'greetings.bye', 'see you soon!');
+    nlp.addAnswer('en', 'greetings.hello', 'Hey there!');
+    nlp.addAnswer('en', 'greetings.hello', 'Greetings!');
+    await nlp.train();
+    const response = await nlp.process('en', 'I should go now');
+    console.log(response);
+  })();
+  </script>
+</head>
+<body>
+</body>
+</html>
+```