I have a mobile website (on a remote server) made with jquery mobile (front-end) and laravel backend. In phonegap i have made an app that opens a browser and displays the mobile website.
In the mobile website i have two buttons:
[Mobile upload]
[Normal upload]
The normal upload button chooses an image from from your computer with laravel(or some other framework).
The Mobile upload buttons needs to call the phonegap camera. So the user can select a image from the phone. Then using file transfer send it to the site again.
Is this possible to call Phonegap functions from a website inside the browser?
And what is the best way to approach this?
To access the camera roll on your phone, you just need to create a normal file input.
<input type="file" id="fileProfileImage" accept="image/*" capture />
On iPhone you can use image/* to select only images.
In your JS code, I will suggest you to use this plugin: https://github.com/blueimp/jQuery-File-Upload
It can upload files cross domain. I don't know anything about laravel, but you will have to create a CORS enabled webservice that can handle your upload request. I've done it in .net, and its a pain to get work correctly.
Here are the JS code I use to upload my files in phonegap (with the plugin I linked to):
$('#fileProfileImage').fileupload(
{
url: "WEBSERVICE URL",
dataType: 'json',
//forceIframeTransport: true,
formData: { someProp: "someVal" },
start: function (e, data)
{
},
done: function (e, data)
{
},
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#alert p span").text(progress); //this shows the progress in %
},
fail: function (e, data)
{
}
});
The code is not phonegap specific. It can be implemented in every browser, and it works well in phonegap.
Related
I am trying to figure out how I can convert an existing express.js app into a mobile app using Apache Cordova. Currently, I can go into the root directory of my express app and run "node index.js", then I can view the current WebSite at http://localhost. So what I want to do is convert that WebSite into an app I can run on a mobile android device or ios. I have read many tutorials on using Apache Cordova, but none of them seem to work with express.
Express, runs a server in the back end. It does not automatically translate to Cordova which is a front end platform. You would need to call your express server from Cordova using AJAX (JQuery, xhr, AngularJS, etc...) and, then, render the website using Cordova.
AJAX Call with JQuery:
$.ajax({
type: "GET",
url: `http://localhost/your/path/goes/here`,
success: function (data) {
// render html and/or data
}, error: function (err) {
// throw error (or do something with it)
}
});
Also, not trying to be harsh, but anything you put on: http://localhost, cannot be accessed by people who are not on your computer (unless you give them your ip address and are running the website), please post any relevant code and/or error messages in the future so others can help you.
Relevant links which expound upon my answer:
Cordova and express js?
How to convert node.js application into cordova
You can refer to here: https://github.com/maximegris/express-cordova-sample for an example (not my GitHub)
If you want to run express from your phone (making your phone a server):
https://www.sitepoint.com/how-to-run-node-js-with-express-on-mobile-devices/
there is a website that works with virtual items for an online game. I made a chrome extension that automates some actions on that website. Since I'd like to make this run on my raspberryPi (and chromium with the extension seems to be too slow and unefficient) I am trying to move this into node.js.
The login for the website works with Steam OpenID. It allows you to select items from a list, click a few buttons, then it sends you a tradeoffer on steam.
My extension works with the website while I was logged in there. It receives their database with jQuery getJSON, loops through the array, pushes some values into an array and then sends a post request telling the website which items I want and which items I am offering.
Here is how I am sending the request from chrome:
function withdrawXHR(botId, playerItems, botItems) {
$.ajax({
url: websiteURL,
type: 'post',
data: {
"steamid": botId,
"peopleItems": playerItems,
"botItems": botItems
},
success: function (data) {
console.error('>> Done: ' + data)
console.log("")
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.error('>> Error: ' + errorThrown)
console.log("")
}
});
}
I can do everything in node so far like receiving their database, working through it, filter out the values I need, but I can't manage to send a working request. The problem is probably the login / how the website knows who I am.
I used wrapAPI (a chrome extension) to catch the request that is being sent when manually working with the website. Here is what it looks like:
So these are the things I am wondering about:
How would I send this request from node?
How does the website know who I am? They obviously know, because they are sending me an offer, but I can't see any "personal" data in that request.
Would I need to log into Steam OpenId from Node in some way? Is that possible?
What is a CF-RAY? (See the end of the captured request).
I am quite new to JS and requests in general and even "newer" to Node.js. I don't fully understand how the background of sending requests works. I would just need some tips, ideas on how to achieve my goal here.
Any help is greatly appreciated! Thank you! :)
You cannot use XMLHttpRequest for resources across domains. ( incidentally, unless you are using an extension)
I would look into grabbing express.js, and something called CORS. CORS permits cross-domain requests.
Here: http://enable-cors.org/server_expressjs.html
And here is some information on XHR requests in browser extensions: https://developer.chrome.com/extensions
Trying to create a component under October CMS which should allow frontend multiple fileuploads. I try to integrate in already exiting form the Blueimp jQuery-File-Upload Plugin and because October CMS uses an integrated ajax Framework which allows data Submission to Component method I would use this ajax method instead what from default by Blueimp
so a normal fileupload looks like
$('#gallery').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'path/to/controller'
});
but instead I would like to use something like
$('#gallery').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
add: function (e, data) {
data.submit();
$.request('onUploads', {
success: function(data){
console.log(data);
}
})
}
});
You need to use the Request class from Laravel which OctoberCMS sits on top of. Basically you go to the code section of your layout file and add
function onUploads()
{
// Get the file
$file = Request::file('somefile');
// Code to do something with it
// enter code here
}
Based on what you are trying to achieve you can write appropriate code to upload it. For example, in my Social Login plugin i use methods of this class to fetch photos from the chosen Social network and create a relation between the plugin's Social model and the uploaded file so that a frontend user may output the photo as a display photo in their web app.
Another good way to do it would be to directly upload it into the themes directory by doing something like Request::file('somefile')->move(app_path() . '/themes/yourtheme/assets/uploads/'); but then you will need to add code to limit the upload size and also to fix the file names. Feel free to make a comment if you need help on achieving something particularly. gl hf
I'm launching a Google Hangout from my webapp. I want to pass some data from my webapp to the Hangout window, and then back to my webapp. I am currently able to pass data back to my server with an AJAX post from the Hangout window, however, I then have to send this to the launching browser from my server.
Is there a direct line of communication from my launching app to the Google Hangouts app? I'm pretty new to webdev, so this might be an obvious question.
Well the thing you are trying to achieve here to get and post data from your hangout app and web application server, and you are already posting the data from hangout app to your webserver.You can write a route in your application the one running on your web server to return the data you are trying to fetch and again in your hangout app can make a ajax get action to get the required data in form of JSON or any required format, and grap the result in success callback of ajax.
example call:-
$.ajax({
type : "GET",
url:'/your_route_on_web_application/to_return_the_requested_data',
data : { any_data_you_want_to_pass: random_data},
dataType : 'json',
success : function(data) {
// do anything you want to with the received data
}
});
Is there a way to check iOS to see if another app has been installed and then launched? If memory serves me this was not possible in early versions but has this been changed?
Doable, but tricky.
Launching installed apps, like the FB or Twitter apps, is done using the Custom URL Scheme. These can be used both in other apps as well as on web sites.
Here's an article about how to do this with your own app.
Seeing if the URL is there, though, can be tricky. A good example of an app that detects installed apps is Boxcar. The thing here is that Boxcar has advanced knowledge of the custom URL's. I'm fairly (99%) certain that there is a canOpenURL:, so knowing the custom scheme of the app you want to target ahead of time makes this simple to implement.
Here's a partial list of some of the more popular URL's you can check against.
There is a way to find out the custom app URL : https://www.amerhukic.com/finding-the-custom-url-scheme-of-an-ios-app
But if you want to scan for apps and deduce their URL's, it can't be done on a non-JB device.
Here's a blog post talking about how the folks at Bump handled the problem.
There is a script like the following.
<script type="text/javascript">
function startMyApp()
{
document.location = 'yourAppScheme://';
setTimeout( function()
{
if( confirm( 'You do not seem to have Your App installed, do you want to go download it now?'))
{
document.location = 'http://itunes.apple.com/us/app/yourAppId';
}
}, 300);
}
</script>
Calling this script from the web (Try to start MyApp), you can determine if your app with scheme "yourAppScheme" is installed on the device or not.
The App will launch if it is installed on the device and "yourAppScheme" is registered in it.
If the app is not installed you can suggest the user to install this app from iTunes.
To check if an app is installed (e.g. Clear):
BOOL installed = [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:#"clearapp://"]];
To open that app:
BOOL success = [[UIApplication sharedApplication] openURL:[NSURL URLWithString:#"clearapp://"]];
Hides the error message if the app is not installed
At Branch we use a form of the code below--note that the iframe works on more browsers. Simply substitute in your app's URI and your App Store link.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.onload = function() {
// Deep link to your app goes here
document.getElementById("l").src = "my_app://";
setTimeout(function() {
// Link to the App Store should go here -- only fires if deep link fails
window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
}, 500);
};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>
There's a second possibility that relies on cookies first and the javascript redirect only as a fallback. Here's the logic:
When a user without the app first taps on a link to your app, he or she is redirected straight to the App Store. This is accomplished by a link to your app actually being a dynamically-generated page on your servers with the redirect. You create a cookie and log a "digital fingerprint" of IP address, OS, OS version, etc. on your backend.
When the user installs the app and opens it, you collect and send another "digital fingerprint" to your backend. Now your backend knows the link is installed On any subsequent visits to links associated with your app, your servers make sure that the dynamically-generated redirect page leads to the app, not the App Store, based on the cookie sent up with the request.
This avoids the ugly redirect but involves a ton more work.
To my understanding, because of privacy issues, you can't see if an app is installed on the device. The way around this is to try and launch the app and if it doesn't launch to have the user hit the fall back url. To prevent the mobile safari error from occurring I found that placing it in an iframe helps resolve the issue.
Here's a snippet of code that I used.
<form name="mobileForm" action="mobile_landing.php" method="post">
<input type="hidden" name="url" value="<?=$web_client_url?>">
<input type="hidden" name="mobile_app" value="<?=$mobile_app?>">
<input type="hidden" name="device_os" value="<?=$device_os?>">
</form>
<script type="text/javascript">
var device_os = '<? echo $device_os; ?>';
if (device_os == 'ios'){
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 100)
return;
document.forms[0].submit(); }, 5);
var redirect = function (location) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src', location);
iframe.setAttribute('width', '1px');
iframe.setAttribute('height', '1px');
iframe.setAttribute('position', 'absolute');
iframe.setAttribute('top', '0');
iframe.setAttribute('left', '0');
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;
};
setTimeout(function(){
window.close()
}, 150 );
redirect("AppScheme");
I struggled with this recently, and here is the solution I came up with. Notice that there is still no surefire way to detect whether the app launched or not.
I serve a page from my server which redirects to an iPhone-specific variant upon detecting the User-Agent. Links to that page can only be shared via email / SMS or Facebook.
The page renders a minimal version of the referenced document, but then automatically tries to open the app as soon as it loads, using a hidden <iframe> (AJAX always fails in this situation -- you can't use jQuery or XMLHttpRequest for this).
If the URL scheme is registered, the app will open and the user will be able to do everything they need. Either way, the page displays a message like this at the bottom: "Did the app launch? If not, you probably haven't installed it yet .... " with a link to the store.