External Libraries

You can use external front-end libraries and node packages to enhance an app's functionality. This section lists the libraries that you can use and methods to include them in an app.

Front-end Libraries

To use an external library, in the template.html file, specify the library's corresponding reference in the Content Delivery Network (CDN).

Example 1: jQuery
You can use jQuery libraries to add certain UI elements to an app. For example, to add a button in an app’s UI, use the following snippet.

template.html

Copied Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("This is an alert to quit!") }); }); </script> </head> <body> <button>Send Warning</button> </body> </html>
EXPAND ↓

Example 2: Handlebars
You can use handlebars to build semantic templates. To use handlerbars, include the corresponding library in the app or download the library to the app project directory and provide a reference in the template.html file.

template.html

Copied Copy
1
<script src="library/handlebars.js"></script>

handlebars.js is the downloaded library file located in the app/library directory.

NPM Packages

You can use npm packages to leverage the back-end functionalities provided by the packages. To use an npm package, specify the package name and version as a dependency in the manifest.json file and include the code corresponding to the package in the server.js file.

Example 1: Request - Helps you to make HTTP calls easily
server.js Copied Copy
1
2
3
4
5
6
7
8
9
var request = require("request"); request("http://www.google.com", function (error, response, body) { console.log("error:", error); // Print the error if one occurred console.log("statusCode:", response && response.statusCode); // Print the response status code if a response was received console.log("body:", body); // Print the HTML for the Google homepage. });
manifest.json Copied Copy
1
2
3
"dependencies": { "request": "1.8.3" }

Example 2: Underscore - Contains various utility methods
  • First - Returns the first element of an array.
  • server.js Copied Copy
    1
    2
    3
    4
    var _ = require("underscore"); var values = [5, 4, 3, 2, 1]; _.first(values); /* Returns value 5 */
    manifest.json Copied Copy
    1
    2
    3
    "dependencies": { "underscore": "1.8.3" }

  • Uniq - Returns all unique values in an array.
  • server.js Copied Copy
    1
    2
    3
    4
    var _ = require("underscore"); var values = [1, 2, 1, 4, 1, 3]; _.uniq(values); /* Returns arrray [1, 2, 4, 3] */
    manifest.json Copied Copy
    1
    2
    3
    "dependencies": { "underscore": "1.8.3" }