# Getting Started

## Prerequisites

You need the [Application Prototype Framework](https://labs.sgapps.io/open-source/application-prototype) set up in your project. If you haven't done that yet:

```html
<script src="ApplicationPrototype.js"></script>
<script src="ApplicationBuilder.js"></script>
```

## Installation

Place the `application-prototype-thirdparty` folder inside your project so that the module loader can find it.

```
my-project/
  constructors/          <-- Application Prototype built-in modules
  thirdparty-modules/    <-- This package (application-prototype-thirdparty)
    modules/
      lib.js
      archiver/
      gadgets/
      thirdparty/
    thirdparty/          <-- Third-party library files (jszip, xterm, etc.)
```

## Registering All Modules

The `lib.js` module registers every thirdparty module path with the framework. Call it once during application startup:

```js
var App = new ApplicationBuilder({
    onready: function () {
        var App = this;
        App.modulePath('./constructors');

        App.require(['extensions/prototype', 'lib'], function (libs) {
            // Register built-in modules
            libs.lib();

            // Register thirdparty modules
            App.require('path/to/thirdparty-modules/modules/lib').then(function (thirdpartyLib) {
                thirdpartyLib();
                console.log('All thirdparty modules registered');
            });
        });
    }
});
```

After registration, every module is available via `Application.require()` using its short name.

## Loading a Module

### Single module

```js
Application.require('archiver/packer').then(function (Packer) {
    var archive = Packer('zip');
    archive.addFile('test.txt', 'Hello');
    archive.generate('blob').then(function (blob) {
        // use the blob
    });
});
```

### Multiple modules with aliases

```js
Application.require([
    "packer :: archiver/packer",
    "editor :: gadgets/code-editor",
    "xterm  :: thirdparty/emulators/terminal/xterm"
]).then(function (libs) {
    var archive = libs.packer('tar.gz');
    var codeEditor = libs.editor({ mode: 'javascript' });
    var Terminal = libs.xterm;
});
```

## How Modules Work

Each module follows one of two patterns:

### Custom Module (ApplicationPrototype API)

Modules like `archiver/packer`, `gadgets/code-editor`, and `gadgets/wrapper` create an `ApplicationPrototype` instance and expose methods via `.bind()`:

```js
var app = new ApplicationPrototype();
app.bind("methodName", function (args) {
    return result;
});
module.exports = app;
```

These modules give you an event-driven API with lifecycle hooks (`before`/`on`/`after`).

### Thirdparty Wrapper

Modules under `thirdparty/` load an external library and re-export it:

```js
var path = module.resourceUrl('../../thirdparty/');
Application.require(path + 'library/dist/lib.min.js').then(function (lib) {
    module.exports = lib;
});
```

These give you the raw library API, ready to use.

## Next Steps

- [Packer -- multi-format archiver](archiver/packer.md) -- the most feature-rich custom module
- [Code Editor](gadgets/code-editor.md) -- embed a CodeMirror editor
- [amCharts 4](thirdparty/charts/amcharts4.md) -- interactive charts
- [Xterm.js](thirdparty/emulators/xterm.md) -- browser terminal