Phonegap/Cordova Device API is undefined on Android - javascript

I Have a problem with Cordova/Phonetgap Device API, the objetc device isn't found. I make callback to device.model or any fecture of device and return:
ReferenceError: Can't find variable: device at file:///android_asset/www/index.html:16
I'm following this steps: http://cordova.apache.org/docs/en/3.3.0/cordova_device_device.md.html#Device firts create the cordova android project and later I Install plugin device through: "cordova plugin add org.apache.cordova.device" I'm testing with this index.html:
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
var string = device.platform;
var element = document.getElementById('deviceProperties');
element.innerHTML = string;
}
</script>
</head>
<body>
<p id="deviceProperties">Loading device properties...</p>
</body>
</html>
I have in app/res/xml/config.xml this lines:
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
Here There is a screenshot for more details:
https://dl.dropboxusercontent.com/u/6404856/Helpme.JPG

as I see you're using eclipse, did you run cordova prepare android or cordova build android after you installed the plugin? (be aware that it will overwrite your assets/www folder with the content of the www folder at the root of the project)

Your code looks good to me. Try running cordova plugin ls and make sure the device plugin shows up. Also try uninstalling then reinstalling it. If that doesn't work then try deleting the your_project/plugins/android.json file, reinstall plugin, then build the android platform. Sometimes the android.json doesn't get updated correctly and this messes it all up.

Related

Socket.io - socket.io.js not available

I need to get a socket.io server running using python.
I followed this example:
https://tutorialedge.net/python/python-socket-io-tutorial/
With the final files looking as follows:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button onClick="sendMsg()">Hit Me</button>
<!--WORKS:-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>-->
<!-- DOESNT WORK:-->
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
const socket = io("http://localhost:8080");
function sendMsg() {
socket.emit("message", "HELLO WORLD");
}
socket.on("message", function(data) {
console.log(data);
});
</script>
</body>
</html>
server.py
from aiohttp import web
import socketio
sio = socketio.AsyncServer()
app = web.Application()
sio.attach(app)
async def index(request):
with open('index.html') as f:
return web.Response(text=f.read(), content_type='text/html')
#sio.on('message')
async def print_message(sid, message):
print("Socket ID-: " , sid)
print(message)
await sio.emit('message', message[::-1])
app.router.add_get('/', index)
if __name__ == '__main__':
web.run_app(app)
So much this is only copy paste and thus works fine, but I dont want to use the script from some online source. So I tried to modify the src of the script by commenting out the running version and replacing it by a version using a local socket.io.js.
As I did not find the script on my machine I found the following questions, that both did not help me solve my issue:
node-js-socket-io-socket-io-js-not-found
socket-io-not-being-served-by-node-js-server
No matter what I do I get the following error in my browser:
GET http://localhost:8080/node_modules/socket.io/socket.io.js net::ERR_ABORTED 404 (Not Found)
(index):18 Uncaught ReferenceError: io is not defined
at (index):18
(anonymous) # (index):18
From what I understood from the 2 linked threads, my server should provide the socket.io/socket.io.js when listen is called on the server.
Unfortunately this is not happening in my case.
I had socket.io installed via pip, I also tried npm install socket.io --save as suggested, this gives me a new folder 'node_modules', but modifying the src for my script to:
<script src="http://localhost:8080/node_modules/socket.io/socket.io.js"></script>
doesnt help either.
For some reason using the fie from cdnjs works just fine (see my index.html).
I would be very glad if someone could help me out with this.
Cheers
Chris
I've never worked with AIOHTTP (always worked with flask-socketio) so I did some research using the documentation. It turns out that like a lot of http server, AIOHTTP doesn't serve static files out of the box.
You will thus need to take care of it using the add_static method (doc here).
(Note that if you want to deploy this app for production it would be better practice to use an HTTP server like Apache or Nginx).
Just add this line under your routes declarations.
app.router.add_static('/static/', path='static/')
Now you need to create a static folder in the root of your project and put your socket.io.js file inside of it.
Make sure that the socket.io.js in the version 2.2 (same as the CDN version). You can get this file by downloading it directly from the CDN URL you were using or using npm -i -s socket.io-client#2.2. You can then find the socket.io.js file in node_modules/socket.io-client/dist.
You now just need to use <script src="/static/socket.io.js"></script> in your HTML to import socket.io.

App works fine on 127.0.0.1, but not when accessed from another device

I managed to publish my app with nodejs and I am able to access it from devices in my network (mind you its going to be a local app only). It is an app that is used to control other hardware connected to my network.
The problem I am having right now is that, the app is working fine when I open it from 127.0.0.1:8081 from my local PC on which it is hosted, but if I attempt to open it from another device (or even from the hosting PC itself) by using the IP of the hosting PC 192.168.z.z:8081, the javascript files dont work and here is what I mean.
I have a config.js file which holds configuration data that my app needs to work, like IP of the device that I am controlling.
var config = {
URL: '192.168.0.2',
}
Then I have a Model.js file that has SetData and GetData which are both dependent on config.URL to execute their AJAX requests, however config.URL stays null, its hardcoded and still a null!
When I run the app and do config.URL in the console, I get null, even if I manually set it in the console config.URL = '192.168.0.2', and then try to invoke Model.SetData..... or Model.GetData... they still dont see it, they still are attempting to send a request to http://null/......
Here is my node code:
const express = require("express");
const app = express();
const port = 8081
app.use(express.static('public'))
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
I have tried with and without the app.use(/css and /js lines of code, no change
Here is how my JS is added to my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Robot Stuff</title>
<script type="text/javascript" src="./js/jquery-3.5.0.js"></script>
<script type="text/javascript" src="./assets/scripts/main.js"></script>
<script type="text/javascript" src="./js/easy-numpad.js"></script>
<script type="text/javascript" src="./js/jquery-modal.js"></script>
<script type="text/javascript" src="./js/Model.js"></script>
<script type="text/javascript" src="./js/UI.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<link href="./css/main.css" rel="stylesheet" type="text/css" >
<link href="./css/easy-numpad.css" rel="stylesheet" type="text/css" >
Again, if I open that app from http://127.0.0.1:8081, or if I directly go and double-click on my index.html file, it all works just fine, but when I use the actual IP of the PC to access it remotely, then it breaks.
I dont want to overcomplicate it more than necessary, I am simply trying to use node explicitly to make the app available on my network, nothing more.
You need to allow cross origin policy in your server script.
That will enable you to accept request headers from your other devices also.
npm i cors --save
or alternatively you can follow this guide
Enable CORS in nodejs
Check with netstat -nlp if your server is working on 0.0.0.0 or 127.0.0.1. This could possibly be one of the issue for non-accessibility outside localhost.

"cordova.file" Undefined in Intel XDK

I´m trying to use cordova file plugin for my app (Android) in Intel XDK but when I make a simple verification like "console.log(cordova.file);" the console shows me: "Uncaught TypeError: Cannot read property 'file' of undefined"
I separated the code to isolate the issue:
<!DOCTYPE html>
<html>
<head>
<title>Some title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="js/app.js"></script>
<script src="xdk/init-dev.js"></script>
<script>
window.addEventListener('load', function(){
if (window.Cordova) {
document.addEventListener('DeviceReady', onDeviceReady, false);
} else {
console.log("Not ready yet");
}
}, false);
function onDeviceReady() {
console.log(cordova.file); <---ERROR HERE
}
</script>
</head>
<body>
</body>
</html>
I included in my projects the cordova plugin-file, plugin-file-transfer and inAppBrowser. Also I included a cordova.js file downloaded by separated because my project didnt have it, I removed it because it wasn't helping at all.
I saw that some people modifies config.xml but I dont have that file in Intel XDK. My Intel XDK version is 3522 and the plugin file version is 4.2.0
Please somebody help me I´m stuck and this is the only issue I must solve to finish a project
Thanks
UPDATE: I saw that the problem is that the OnDeviceReady is never fired, what can I do?

How do I use cordova inappbrowser to open links in Ionic/Angular hybrid app

I am working on a hybrid mobile app using Ionic Framework and AngularJS. I am using Ionic Creator & Ionic Lab. In my app, I have several buttons that link to external resources (webpages, mailto: links, pdf files etc). The links work fine when I test them within the browser (Ionic Lab). However, when I test the app in an Android virtual device or an actual device, none of the links are working.
I found a question where someone had a similar issue:
/questions/33627061/ionic-simple-href-not-working-on-android-device
I tried Implementing all the proposed solutions from adding to config.xml:
<allow-navigation href="*" />
Installing cordova inappbrowser plugin via:
$sudo cordova plugin add cordova-plugin-inappbrowser
I tried using ng-click="some_function()" instead of href, then defining the function in my controller.
The OP on that question finally resolved his issue by commenting out/uncommenting from index.html:
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
Looking at my browser console logs there was a 404 not found for cordova.js, so I manually added it to www/ from the platform_www/ directory for android, as well as cordova_plugins.js
However after trying all this, the links are still not working. In my consol logs I now get an error saying:
GET http://localhost:8100/plugins/cordova-plugin-inappbrowser/www/inappbrowser.js 404 (Not Found)
Uncaught Error: Module cordova-plugin-inappbrowser.inappbrowser does not exist. http://localhost:8100/cordova.js Line: 1421
But the thing is inappbrowser.js is in that folder!
Please help! I'm at wits end and have no idea what to do next. I have uploaded the sample code I'm working with on github:
https://github.com/chmod-777/link-test
Software versions:
Linux mint 17.1
node v0.12.2
npm 2.7.4
cordova 6.2.0
ionic 1.7.14
For starters, try changing the way you're calling the open method in your controller code to this:
.controller('pageCtrl', function($scope, $window, $cordovaInAppBrowser) {
$scope.open_google = function() {
$cordovaInAppBrowser.open('https://www.yahoo.com/', '_system', 'clearcache=yes');
// I also tried this
//$window.open('https://www.msn.com/', '_system', 'location=yes');
// and this
//window.open('https://www.netflix.com/', '_system', 'location=yes');
}
})
I have used the inappBrowser plugin with Jquery mobile.It worked fine.
ref=null;
var url= accRestService.someURL;
if( device.platform === "Android"){
ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,hardwareback=no,zoom=no');
}else{
ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,closebuttoncaption=Go back to App,toolbar=yes,presentationstyle=formsheet');
}
ref.addEventListener('loadstart',onBrowserLoadStart);
ref.addEventListener('loadstop',onBrowserLoadStop);
ref.addEventListener('loaderror', onBrowserError);
ref.addEventListener('exit', onBrowserClose);
First, make sure that you have installed the cordova plugin "inappbrowser"
cordova plugin add cordova-plugin-inappbrowser
(see https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html)
Then, you can use for example :
try {
var uri = "http://some-example.com";
cordova.InAppBrowser.open(uri, '_system');
} catch(e) {
window.open(uri, '_blank');
}
the catch block will be used as a fallback when testing the app in a browser.

Node.js Debug Gif

Trying to work on some code that has no issues on other computers. This problem seems to be specific to my laptop and no other computers. Even a "hello world" app only returns a debug gif.
repository folder> node app.js
Express Server Listening on port 3000
GET / 200 1000.00 ms - -
This is the code delivered to the browser instead of my code
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, minimum-scale=0.1" name="viewport">
<title>127.0.0.1 (1×1)</title>
<style type="text/css">
</style>
</head>
<body style="margin: 0px;">
<img src="http://127.0.0.1:3000/" style="-webkit-user-select: none">
</body>
</html>
Troubleshooting included:
Ran cmd as admin
Re-installing Node.js
Deleted temp npm & npm cache folders in appdata/roaming
No error on the development tools in chrome or Firefox
Kaspersky blocks 127.0.0.1 activity. Add Web Anti-Virus Exclusions Trusted URLS & Safe Surf fixes this issue.
Simply disabling the Antivirus didn't fix the issue for me. The Exclusions are a necessity

Categories

Resources