You can customize this SDK to your needs and make it more convenient by clicking here:
The SDK allows you to receive and send messages through your messengers account. Sign up now
Download SDK and unpack the archive. Connect SDK to your project.
Preparatory work
At the very beginning, we need to connect messengers with our script, so as we write the code, we check its operation. To do this, go to your personal account and get a QR code there. Next, open messengers on your smartphone, go to Settings -> messengers Web -> Scan a QR code.
Now we need to indicate a WebHook URL so the server can run the scrip when new messages arrive. Indicate a direct link to your script. You can’t indicate server IP only, but you can indicate the port.
The first steps for beginners
The generated SDK requires AngularJS framework to work. If you do not already have angular downloaded, please go ahead and do it from here. You will also need to download and link angular-moment and moment.js with your project because the SDK internally uses moment.js.
How to Use
The following section describes how to use the generated SDK in an existing/new project.
1. Configure Angular and Generated SDK
Perform the following steps to configure angular and the SDK:
- Make a
scriptsfolder inside the root folder of the project. If you already have ascriptsfolder, skip to the next step. - Move the
angular.min.jsfile inside the scripts folder. - Move the
messengersAPILibfolder inside the scripts folder. - If any of the Custom Types in your API have
Date/Datetimetype fields or any endpoint hasDate/Datetimeresponse, you will need to download angular-moment and moment.js. Move these 2 files into thescriptsfolder as well.
2. Open Project Folder
Open an IDE/Text Editor for JavaScript like Sublime Text. The basic workflow presented here is also applicable if you prefer using a different editor or IDE.
Click on File and select Open Folder
Select the folder of your SDK and click on Select Folder to open it up in Sublime Text. The folder will become visible in the bar on the left.
3. Create an Angular Application
Since Angular JS is used for client-side web development, in order to use the generated library, you will have to develop an application first. If you already have an angular application, skip to Step 6. Otherwise, follow these steps to create one:
- In the IDE, click on
Fileand chooseNew Fileto create a new file. - Add the following starting code in the file:
var app = angular.module('myApp', []);
app.controller('testController', function($scope)
{
});
- Save it with the name
app.jsin thescriptsfolder.
4. Create HTML File
Skip to the next step if you are working with an existing project and already have an html file. Otherwise follow the steps to create one:
- Inside the IDE, right click on the project folder name and select the
New Fileoption to create a new test file. - Save it with an appropriate name such as
index.htmlin the root of your project folder.index.htmlshould look like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script></script>
</head>
<body>
</body>
</html>
5. Including links to Angular in HTML file
Your HTML file needs to have a link to angular.min.js file to use Angular-JS. Add the link using script tags inside the head section of index.html like:
<script src="scripts/angular.min.js" ></script>
If any of the Custom Types that you have defined have Date/Datetime type fields or any endpoint has Date/Datetime response, you will also need to link to angular-moment and moment.js like:
<script src="scripts/angular.min.js" ></script>
<script src="scripts/moment.min.js" ></script>
<script src="scripts/angular-moment.min.js" ></script>
6. Include SDK references in HTML file
Import the reference to the generated SDK files inside your html file like:
<head>
...
<!-- Helper files -->
<script src="scripts/messengersAPILib/Module.js"></script>
<script src="scripts/messengersAPILib/Configuration.js"></script>
...
</head>
The
Module.jsfile should be imported before the other files. AfterModule.js,Configuration.jsshould be imported. TheModelFactory.jsfile is needed byObjectMapper.jsfile. TheObjectMapperin turn, is needed byBaseController.js.
7. Including link to app.js in HTML file
Link your app.js file to your index.html file like:
<head>
...
<script src="scripts/app.js"></script>
</head>
The link to app.js needs to be included at the very end of the head tag, after the SDK references have been added
8. Initializing the Angular App
You need to initialize your app and the controller associated with your view inside your index.html file. Do so like:
- Add ng-app directive to initialize your app inside the
bodytag.
<body ng-app="myApp">
- Add ng-controller directive to initialize your controller and bind it with your view (
index.htmlfile).
...
<body ng-app="myApp">
<div ng-controller="testController">
...
</div>
...
</body>
...
9. Consuming the SDK
In order to use the generated SDK's modules, controllers and factories, the project needs to be added as a dependency in your angular app's module. This will be done inside the app.js file.
Add the dependency like this:
var app = angular.module('myApp', ['messengersAPILib']);
At this point, the SDK has been successfully included in your project. Further steps include using a service/factory from the generated SDK. To see working example of this, please head on over here and choose any class to see its functions and example usage.
10. Running The App
To run the app, simply open up the index.html file in a browser.
