Cordova App with BLE functionality

[JaviFeo]

Hi team!

Im trying to develop a new app which can detect ibeacons. I've got a box with 3 estimote beacons and a PHP webapp hosted in my server. This webapp works like a charm through the evothings iphone and android apps, It detects the beacons as expected and Im the happiest person in the world when this happens . In the other hand, I made my own android app with cordova, added the BLE plugin and loaded the content of my webapp from my server. It doenst detect any beacons .

Im starting to think that the problem is that im loading the content from a server instead of setting my html and js files inside the app built, but I really need this because my webapp requires PHP and a public database.

The way Im calling my webapp is through the config.xml file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.javifeo.myApp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myApp</name>
<description>
Lorem ipsum sit amet
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="http://urltomywebapp" />
<access origin="*" />
</widget>

What am I doing wrong??

Thanks in advance team!

[JaviFeo]

After some researching I tried something different:

-I set in the config.xml content as follow:

<content src="index.html" />

Then I setted a index.html file in the www folder with:

<script>
window.open('http://urltomywebapp', '_self', 'location=yes');
</script>

But the result is the same, It doesnt detect any beacons

[JaviFeo]

well, I tried a new thing that was pretty interesting:

-I wrote a new simple app that does not require PHP nor access to the database. I called the file index.html and set it in the www folder
-I built the app again
-VIOLA!!! It works perfect that way

Then I uploaded that index.html file to a server and loaded it as I said in the last post and no beacons are detected anymore!! It seams that if the file is loaded from a server instead of the www file it doesnt let my file interact with the BLE plugin.

I would really apreciate some advice on this before I turn crazy.

[micke]

Hi Javi,

Perhaps this is a problem related to cross-site access (cross-origin requests)?

Are you using AJAX to access your PHP application? This would work from a locally loaded index.html file, but not from a remotely loaded web page is the page is on a different domain than the PHP script. If they are on the same domain it should work.

You said it worked with Evothings Client? If it works there it should not be any cross-domain issues.

To allow cross-origin requests, you can add a header to your PHP application, like this:

Code: Select all

header("Access-Control-Allow-Origin: *");

Here are some links that could be of use:
http://enable-cors.org/server_php.html
http://stackoverflow.com/questions/1838 ... orking-php
https://remysharp.com/2011/04/21/getting-cors-working

Another potential problem could be the plugin used. You say you use the BLE plugin (cordova-ble?) but for beacons the cordova-plugin-ibeacon is used. Did you add that plugin to your Cordova project? Sorry if I am confused here, now I think I understand you are using the BLE plugin to detect your beacons (not the iBeacon plugin).

Let me know how it goes. Post again if you get stuck.

Very best, Mikael

[micke]

Hi again Javi,

I should mention that you can use Evothings Workbench with your own Cordova application. Then you will get fast reloads and it will work in a similar way to using Evothings Client.

Here are instructions for how to do this, just link from your Cordova app/HTML code to the connect address displayed at the bottom of the project list in the Workbench window:
http://evothings.com/doc/build/cordova- ... rEvothings

Related blog post:
http://evothings.com/hybrid-app-development-made-fast/

Best regards, Mikael

[cfenzo]

Hi Javi and Mikael,

If I understand correctly, Javi is trying to load the app-files from a server?

The cordova functionality is only available to files located within the app (www folder).
If you load the app from your server either through a redirect or by setting the content src, it will run from your server, and will not have access to the cordova functionality.

You have to load the app files from www/, and then you can load content from your server (json, xml, html) using ajax/jsonp.



- Jens

Edit: I see that there is possible to work around this limitation (http://evothings.com/hybrid-app-development-made-fast/)
But while it's great for testing/development, loading the whole app from a server in production is a bad practice IMHO..

[JaviFeo]

Hi Jens and Mikael,

thanks a lot for your kind replys, I think Jens hit the nail in the head in his response, the link he posted exactly talks about my problem:

[...] However, there is a major catch in that Cordova JavaScript files (cordova.js and plugins) are stored in a special folder in the Cordova project, and will by default not be found by the web server. These files would have to either be moved to a location where the server can find them, or you could modify the web server to look for them in the proper folder. The situation is complicated by different platforms using different versions of the cordova.js files, so the web server needs to be able to handle that.

That is exactly what I need to achieve, I need my server to find cordova.js and plugins files and dont know how to do that.

The evothings app do that perfectly with my files loaded from my server when I write my URL in the "connect with address" textbox, I only need to replicate the way the evothings app load my webapp but with my own cordova app. I guess if the evothings compilation can do it, any cordova app can, am I right?

Jens, I assume this way of programming the app is not the best practice, but we are in beta mode and need to do it this way now .

Regards

[micke]

Hi Javi,

Yes I think you found the problem! The way cordova.js an other plugin JavaScript files are handled is a bit special. Let me explain.

When you build a Cordova app and load the HTML from a local file everything is fine, since cordova.js and associated files are bundled with the app on the local file system. But when you load an external HTML file into the app from a server, that file cannot access local files. There is no build-in way to access the locally stored cordova.js files because of security risks.

Below are some options for working around this problem.

1. The first option is a trick that Evothings Client uses. In native code on iOS and Android, there are "hooks" that check for cordova.js and plugin files, and when detected loads them from the local file system. So thsi is one option to use from your Cordova app. The native source code is found here:
https://github.com/evothings/evothings- ... fig/native

2. The second option, which could be easier to implement, is to serve the cordova.js files from the server, same server that serves the HTML/JS files for the application. Now the problem with this is that the cordova.js files are different depending on the platform. There is one set of files for iOS and one set of files for Android. This means that you need to handle this somehow. Below are some alternatives.

2.1 The first alternative is to maintain separate file trees on the server, one for iOS and one for Android, and point to the relevant one from your Cordova build for each platform (the build app for Android would point to one location, the one for iOS to another location).

2.2 The second alternative is to detect the platform dynamically in the HTML/JS code and conditionally load the cordova.js files for the current platform. You can use document.write() to insert the right script tag for cordova.js (people will complain about using document.write but I don't care). See this code for some hints regarding this approach (I see now this code could be improved, but still it could work as an example, just do the script tag generation instead of the meta tag):
https://github.com/evothings/evothings- ... yper-os.js
https://github.com/evothings/evothings- ... iewport.js

2.3 The third alternative is to detect the platform in the server code, and serve the correct cordova.js files. This method is used by Evothings Workbench when you are using your own Cordova application with the Workbench. The code is here, look in function serveCordovaFile:
https://github.com/divineprog/HyperRelo ... -server.js
It might be possible to adopt this alternative for your PHP application, but I suspect it could be tricky.

I think I would have chosen solution 2.2 since this allows serving the cordova.js and related files as standard static files.

Do you think any of this could help in your case?

Best regards, Mikael

[JaviFeo]

Hi Mikael!

I thought It could be a good idea to give it a try to option 1 and guess what? IT WORKED PERFECTLY!!

Since Im first developing the Android version I went to platforms/android/src/com/MY-COMPANY-NAME/MY-APP-NAME/APP-NAME.java and paste the content of https://github.com/evothings/evothings- ... hings.java.

I built the project, installed it in an android device.....and beacons were detected from my webapp!!!!

Mikael, man, you saved the day again!! Thank you very much for your time and for your awesome help!

In next couple of days I will build the ios version and will give this post an update with the results.

Regards,
Javi

[micke]

Great to hear Javi!! That is really cool it worked!
Mikael