Integrate the FCLite API
Overview
The article teaches how to integrate the FCLite API. To get started, you need a basic understanding of how to create a project in the language of your choice.
How to add the FCLite API to your project
First do the steps described in the article Download and install.
Now you can access the FCLite API from your project
The full list of classes could be found in the project directory node_modules\@gehtsoft\forex-connect-lite\index.d.ts
The example of tsconfig.json to compile Typescript files for use in browser.
To access the Login functionality, you will need to connect to the corresponding library endpoints.
import * as FXConnectLite from '@gehtsoft/forex-connect-lite-node';
The example of tsconfig.json.
const sessionFactory = require('@gehtsoft/forex-connect-lite-node').FXConnectLiteSessionFactory;
const IConnectionStatusChangeListener = require('@gehtsoft/forex-connect-lite-node').IConnectionStatusChangeListener;
const ILoginCallback = require('@gehtsoft/forex-connect-lite-node').ILoginCallback;
const LoginError = require('@gehtsoft/forex-connect-lite-node').LoginError;
This step of the process is for when you are ready to access the API from your web browser to see the results and interract via the API.
The first thing that we will need to do is to create a html page to work with. We will name it login.html since we are going to first perform the login function.
In this example page, we have added jQuery and Bootstrap. The content of this file will look like this
<html>
<head>
<title>ForexConnect API Login</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="fclite/forex-connect-lite.js"></script>
<script src="connection_management/connection-management.js"></script>
<script src="connection_management/connection-status-change-listener.js"></script>
<script src="connection_management/login-callback.js"></script>
<script src="index.js"></script>
<style>
.account:hover {
background-color: #dce0e4
}
.greater {
color: #1aa800;
}
.lower {
color: #bd0026;
}
</style>
</head>
<body style="background-color: #f8f9fa">
<div class="container">
<div class="row">
<div class="offset-sm-3 col-sm-3 mt-5 text-start">
<span id="currentStatus"></span>
</div>
<div class="col-sm-3 mt-5 text-end">
<button type="button" class="btn btn-outline-danger" id="btnLogout">Logout</button>
</div>
</div>
<div class="row" id="loginForm">
<div class="offset-sm-3 col-sm-6 border pt-3 pb-3 mt-5" style="border-color: #adb5bd; background-color: #fff">
<div class="alert alert-danger" role="alert" id="errorAlert" style="display: none;">
</div>
<form>
<div class="row mb-3">
<div class="col-sm-2">
<label for="user" class="form-label">Username:</label>
</div>
<div class="col-sm-7">
<input type="text" id="user" value="" />
</div>
</div>
<div class="row mb-3">
<div class="col-sm-2">
<label for="password" class="form-label">Password:</label>
</div>
<div class="col-sm-7">
<input type="text" id="password" value="" />
</div>
</div>
<div class="row mb-3">
<div class="col-sm-2">
<label for="url" class="form-label">Server:</label>
</div>
<div class="col-sm-7">
<select class="form-select" id="url">
<option value="http://www.fxcorporate.com">http://www.fxcorporate.com</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-2">
<label for="connection" class="form-label">Connection:</label>
</div>
<div class="col-sm-7">
<input type="text" id="connection" value="Demo"/>
</div>
</div>
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</form>
</div>
</div>
<div class="row" id="authorized" style="display: none;">
<div class="offset-sm-3 col-sm-6 border pt-3 pb-3 mt-5" style="border-color: #adb5bd; background-color: #fff">
Authorized<br />
Is password expired: <span id="passwordExpired"></span>
</div>
</div>
<div class="row mt-3" id="itemsContainer" style="display: none;">
<div class="offset-sm-3 col-sm-6" style="font-size: larger;">
Items
</div>
<div id="items" class="offset-sm-3 col-sm-6 border pt-0 pb-3 mt-0" style="border-color: #adb5bd; background-color: #fff">
</div>
</div>
</div>
</body>
</html>
When you have created your package, you can load it into your browsers html using a simple <script> tag.
So, lets start from the beginning. To install webpage, use:
npm install webpack webpack-cli --save-dev
Now that you've installed Webpack, the next step is to create a configuration file for it. This file, typically named webpack.config.js, tells Webpack how to transform and bundle your code.
const path = require('path');
module.exports = {
mode: 'development',
entry: {
FCLite: './node_modules/@gehtsoft/forex-connect-lite/index.js'
// Add more files as needed
},
output: {
filename: 'forex-connect-lite.js',
path: path.resolve(__dirname, 'fclite'),
library: 'FXConnectLite',
libraryTarget: 'window'
},
};
Note
Notice the library parameter in this example FXConnectLite. When accessing the API, you will use the prefix FXConnectLite.
Now that we have this configured, we need to execute webpack to generate our library file
npx webpack
This will generate the file and put it in the 'fclite' folder. Create an html file.
Now we have to include this and the custom.js file into your html.
<!-- Include the bundled JavaScript file -->
<script src="./fclite/forex-connect-lite.js"></script>
<script src="connection_management/connection-management.js"></script>
<script src="connection_management/connection-status-change-listener.js"></script>
<script src="connection_management/login-callback.js"></script>
<script src="index.js"></script>
- The first file forex-connect-lite.js is the packaged version of the FCLite API.
- The other files are the ones that will contain all of the JavaScript that will be used by your webpage to communicate with the API.
You should manually create these files so that you can add all the future javascript code to them.
Conclusion
In the section you have learned how to add reference to the API into your project so that you can start making requests into it. The Next step will be to login.
| Table of Contents | |
|---|---|