#1 2015-07-22 17:31:29

svanneste
Member
From: Paris, France
Registered: 2015-05-27
Posts: 155

How to add new Cordova plugins please ?

Hello,

Me again after having checked and updated all my Cordova settings (if you saw the previous post I deleted earlier).

As a test drive, I tried to include a Cordova plugin that lets us send SMS on Android without any user action. I have created a sample project with one button linked to a JavaScript function (JavaScript provided - link below).

My issue (or I must say, "what I don't know how to do") is to add the plugin inside the project's folder so it could be included in the generated app.
I have already tried to include the specified command cordova plugin add com.jsmobile.plugins.sms inside the project's folder before to launch the batch file and it had not worked. I have tried to insert the command (CALL cordova plugin add com.jsmobile.plugins.sms) inside the cordova_android.bat batch (just after REM Add the Whitelist plugin for our app) file without more success.

Please do you see what I am doing wrong or what I could miss to do ? Many thanks

Samuel

Last edited by svanneste (2015-07-22 17:36:45)

Offline

#2 2015-07-22 20:36:55

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: How to add new Cordova plugins please ?

Hello Samuel,

Firstly let me to say that I test right now the SMS plugin you refer and works like a charm. Certainly a possible good new App Builder help tutorial can be how to include and use additional Cordova plugins.

Basically we need to follow the instructions of the plugin author, but, in general all the plugins work in a similar way:

1º Setup the app in order to generate Cordova Batch files, for example, for Android.

2º To use the plugin in our app we must follow the author instructions and add this code to a button click event, for example:

StartJS

var messageInfo = {
    phoneNumber: "The phone number here",
    textMessage: "This is a test message"
};

sms.sendMessage(messageInfo, function(message) {
    window.alert(message);
}, function(error) {
    window.alert("code: " + error.code + ", message: " + error.message);
});

EndJS

As you view above we use directly the plugin Javascript code between the StartJS and EndJS actions.

3º Once the app is compiled, open the "cordova_android.bat" and add the plugin install call:

REM Created by App Builder v1.0
REM More information at http://www.getappbuilder.com/

@ECHO OFF
CLS

REM Add the Android platform for our app
CALL cordova platform add android

REM Add the Whitelist plugin for our app
CALL cordova plugin add cordova-plugin-whitelist

REM Add the Dialogs plugin for our app
CALL cordova plugin add cordova-plugin-dialogs

REM Add the SMS plugin for our app (we add this line to the generated file)
CALL cordova plugin add com.jsmobile.plugins.sms

REM Build our app for the Android platform
CALL cordova build android

REM Pause the script execution, so we can view the script results
PAUSE

And that's all! We can build now the app using Apache Cordova in order to get our APK file.

What I can do in order to help a little more this process? Probably I can add some app options in order to allow us to add custom Cordova plugins. Basically I am thinking in some editbox which allow us to put plugin installation calls, in order to tell App Builder these calls must be add into the generated Cordova Batch files.

Offline

#3 2015-07-22 21:03:15

svanneste
Member
From: Paris, France
Registered: 2015-05-27
Posts: 155

Re: How to add new Cordova plugins please ?

Hello David,
I do thank you a lot for the useful tutorial. You know what I had missed ? The StartJS/EndJS (poor my).
That's super because it opens a lot of possibilities. Many, many thanks again David

Offline

#4 2015-07-22 21:13:17

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: How to add new Cordova plugins please ?

Hello Samuel,

You're welcome. Certainly the refered actions can be very useful. However maybe the actions is not documented very well, for example, how we can access app variables from a piece of Javascript added between the StartJS and EndJS actions?

Probably I need to enhance the documentation to talk about this, but, for information purposes, let me to say here that we can access app stuff from the Javascript using the "$scope" and the "$rootScope" variables.

For example, we can modify the above Javascript code in this manner:

StartJS

var messageInfo = {
    phoneNumber: $rootScope.Input1.Value,
    textMessage: $rootScope.Textarea1.Value
};

sms.sendMessage(messageInfo, function(message) {
    $scope.alertBox(message, 'success');
}, function(error) {
    $scope.alertBox("code: " + error.code + ", message: " + error.message, 'error');
});

EndJS

In the above code we use the "Input1" and "Textarea1" controls "Value" variable, and also we use the "alertBox" action defined in our app scope. Basically "$rootScope" contains all our app controls and app variables. The "$scope" contains much of the app actions into their Javascript implementation, but not all.

Offline

#5 2015-07-22 23:01:15

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: How to add new Cordova plugins please ?

Hello Samuel,

I updated App Builder right now by adding a new Cordova custom plugins option into the app options dialog. We can put in the Custom plugins editbox one or more custom plugins by specifying the plugin ID, for example, "com.jsmobile.plugins.sms" for the SMS plugin we are talking about in this post.

App Builder automatically add custom plugins into their generated Cordova batch files and also into their generated Cordova "config.xml" file. This avoid the need to edit the batch files to add the plugins by ourself everytime we build the app, since the Cordova batch files are regenerated in every app build.

Offline

#6 2015-07-22 23:09:01

svanneste
Member
From: Paris, France
Registered: 2015-05-27
Posts: 155

Re: How to add new Cordova plugins please ?

Hello David,
Wonderful, great, super fast. I do not have enough words to say how much I owe you.
Again and again, thanks for the great work and your great support smile

Last edited by svanneste (2015-07-22 23:10:27)

Offline

#7 2015-07-22 23:18:45

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: How to add new Cordova plugins please ?

You're welcome!

Always thanks you Samuel. smile

Offline

#8 2015-07-23 06:06:02

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,661
Website

Re: How to add new Cordova plugins please ?

Hello,

Just to mention another possible approach we can take here: define a Javascript app function. We can define a Javascript app function (instead of an App Builder script function) with two arguments, "phone" and "message". The code of our function can be something like this:

var 
  messageInfo = 
  { 
    phoneNumber: phone, 
    textMessage: message 
  };

sms.sendMessage
(
  messageInfo, 
  function(message) {
    alert('success');
  }, 
  function(error) {
    alert('Error: ' + error.message);
  }
);

If we name the function as "SendSMS" then the function appear into the Actions palette under the Function's category and we can call it like:

SendSMS "987654321" "Hello world!"

Finally I add this information as a new Apache Cordova custom plugins App Builder help tutorial. Also I add the new "Plugins" app sample which show us how we can custom plugins like this. Take a look if you like Samuel. smile

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.