Is there an easy way to design a website to facilitate an iphone user providing gps coordinates to the site?
I am wondering if there might be a naming convention for form fields for example, to let the user input in an automated way.
I am considering building a location based website and would like to tailor it for iphone (and other mobile users). I realize an iphone app could do this but I'm not equipped to create one.
Here's a snippet on how to read location from the iPhone. Looks like it requires 3.0:
navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
function foundLocation(position)
{
var lat = position.coords.latitude;
var long = position.coords.longitude;
alert('Found location: ' + lat + ', ' + long);
}
function noLocation()
{
alert('Could not find location');
}
See: http://mapscripting.com/how-to-use-geolocation-in-mobile-safari
By the way, if you want to use web code on the iPhone, there are a couple middle-ground solutions you could try that don't force you to create a native app but allow you to wrap your site in an app and get access to GPS and other native features.
PhoneGap: http://phonegap.com/
Appcelerator: http://www.appcelerator.com/products/titanium-mobile/
Check out the app SendLocation under navigation by Jouni Erola.
Its a simply app that will send out the lat & lon of the iPhone to YOUR server.
Simply enter your server url to receive the location as HTTP-GET methid
I've don this without any programming. You can:
Download the iPhone app "Basic GPS" from iPhone Store.
Start an account at Twitter.com (if you don't already got one).
Start an e-mail-to-twitter account at Twittermail.com.
In Basic GPS settings use your secret e-mail address from Twittermail.
At Twitter.com/widgets click "Other" to get your HTML-code for publishing your Tweets elsewhere.
Put this HTML code on your homepage.
In Basic GPS you just click the blue "I" (on) button, "Email" and "Send" to send your position to Twittermail, which publish it on Twitter. And Twitter will automaticly publish it on your homepage.
See a working axample at http://CharlieBloom.com. Only the 3 latest (customizeable) Tweets are visible, click on "Follow me on Twitter" to se "My position ....." and a Google Maps-link. Positions are updated on my website 2-3 minutes after I have sent them.
Best regards,
Charlie Bloom
Yes, but the accuracy is pretty bad. I just built a web form that posts GPS settings from the watchPosition() function to my database and then maped the results. While paddling down a local river it got only two of seven posts correct. The rest were outside the river, and two of those were about a mile away! I'm now looking for a better solution.
Here's the code I use to update the form fields:
<script type="text/javascript">
function getGPSLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.watchPosition(onGeoSuccess);
} else {
alert("Your browser or device doesn't support Geolocation");
}
}
function onGeoSuccess(position) {
document.getElementById("Latitude").value = position.coords.latitude;
document.getElementById("Longitude").value = position.coords.longitude;
}
</script>
And this is the form. Update to suite your needs.
<form>
<img src="spacer.gif" OnLoad="getGPSLocation();">
<input type="Text" name="Latitude" id="Latitude" value="">
<input type="Text" name="Longitude" id="Longitude" value="">
</form>
Related
Is it possible to launch the payflow entirely inline (a la Express Checkout)? How?
We're using chained payments and everything works on non-iOS-mobile devices (and in Chrome for iOS), but we're making a web app, so we need this to work on phones. Testing on the iPhone, we have this problem with PayPal's code that I've already asked about, as well as the fact that when I get around that bug by doing a location.replace with the URL to PayPal (or loading it in a lightbox of my own design), iOS and mobile Safari kill the "Log In" popup (without giving the user an opportunity to view it if they so choose).
In short, is there any way I can use Adaptive Payments without ridiculous 1990s-era popups???
Here's what I'm doing to use PayPal's mobile web flow. I'm testing on Android and it's working well. The only hang up is the callbackFunction is not firing in mobile browsers and works fine in desktop browsers. (I'm still working on this part. Let me know if you solve it.) Here's an example on how to do it using expType=mini to launch the PayPal mini browser experience.
First include the Javascript for the Mini flow:
<script src="http://www.paypalobjects.com/js/external/apdg.js"></script>
Then a link to launch the redirect:
<a id="payPalRedirect" href="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay?paykey={paykey}&expType=mini" target="_blank">Complete PayPal Payment</a>
<br /><br />
<div id="resultDiv"></div>
And some Javascript to initiate the Mini Flow process and the callbackFunction:
var returnFromPayPal = function () {
alert("Returned from PayPal");
var div = document.getElementById('resultDiv');
div.innerHTML = "Returned from PayPal!";
// Here you would need to pass on the payKey to your server side handle to call the PaymentDetails API to make sure Payment has been successful or not
// based on the payment status- redirect to your success or cancel/failed urls
}
var dgFlowMini = new PAYPAL.apps.DGFlowMini({ trigger: 'payPalRedirect', expType: 'mini', callbackFunction: 'returnFromPayPal' });
More insights and solution options to this issue can be found here:
Paypal Embedded Flow not using returnUrl or cancelUrl
I have an HTML5 application that uses Azure mobile services authentication to login (straight from the example code...provided below). It works fine in all desktop browsers and iPhone 5 in Safari. But from app / full screen mode, it does nothing (doesn't ask for permission to show a popup window like it does in safari and no popup windows shows up) and I can wait forever and nothing happens. If I invoke it a second time, it gives an error saying "Error: Unexpected failure"...perhaps because the 1st attempt is still running? Any help/insight is appreciated.
client.login ("facebook").done(function (results) {
alert("You are now logged in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
edited update with more info and 2 potential ideas*
I did some more research and found a site that uses an approach that overcomes this problem and also solves two other side effects with the current Azure mobile approach to authentication. I think the Azure mobile team might be looking to do something similar because there are some hints of other authentication options in the code (although difficult to read and be sure because the minimized code is obsfucated). It might be just a matter of activating these in the code...
The "solution":
Go to http://m.bcwars.com/ and click on the Facebook login. You'll see it works perfectly in iPhone Safari in "app mode" becuase instead of doing a popup, it simply stays in the current browser window.
This approach solves two other problems with the current Azure mobile approach. First, the popup gets interpreted by most browsers as a potential ad and is either blocked automatically (desktop Chrome) ... and the user doesn't know why it's not working...or gives a warning which the user has to approve (iPhone Safari in "browser mode") which is a hassle. And if the user has a popup blocker, it gets more difficult and even more potential for the user not getting it to work properly. The bcwars.com method doesn't have this problem.
Second, in iPhone Safari, when the popup window auto closes, the original page doesn't get focus if there are other browser windows open in Safari. Instead, it's in the smaller/slide mode so they can choose which one to show. If this happens, the user has to go through one more sttep...click on the browser window to activate it and give it focus..again more of a pain and more potential for them to mess up and not do it correctly and need help. The m.bcwars.com doesn't have this problem.
Azure options:
Looking at the Azure mobile code it looks like may already have the solution. I can't read it easliy becuase it's minified/obsfucated, but it seems to have 4 options (including iFrame, etc.) for invoking the authentication, and only 1 (the "less ideal one" of a popup) is being used. An easy solution would be to set a property to allow one of the alternate authentications to work. But I can't read it well enough to figure it out. Another would be to hack the code (temporarily until a fix is put up by Microsoft).
Could I get some help there perhaps?
You can implement an authentication flow with Facebook that doesn't use a popup. The basic idea is to use the 'Web Flow' for doing the login, and once the window return from the login, use the access token to login the user in to Azure Mobile Services.
The Facebook documentation for doing this is here:
https://developers.facebook.com/docs/facebook-login/login-flow-for-web-no-jssdk/#step2
Some code samples to make it easier for you.
You would start by something like this:
(Remember to replace YOUR_APP_ID and YOUR_URL with something relevant to your site.
function logIn() {
window.location.replace('https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=http%3A%2F%2FYOUR_URL&response_type=token')
}
This redirects the window to the Facebook page for the user to log in and authorize your app. When the user is done, Facebook will redirect the user back to YOUR_URL given above.
There you can handle the redirect and do the Mobile Services Login with something like this:
function handleLoginResponse() {
var frag = $.deparam.fragment();
if (frag.hasOwnProperty("access_token")) {
client.login("facebook", { access_token: frag.access_token }).then(function () {
// you're logged in
}, function (error) {
alert(error);
});
}
}
In here you parse the access token you get as a URL fragment and pass it as argument to the login call you make to Azure Mobile Services.
This code depends on the jquery BBQ plugin to handle the URL fragment easily.
Hope this solves your problem!
I have a website and I would like to include a PayPal button so clients can purchase directly on the site, the only problem is that I need the same button to appear differently (with different prices & currencies) in different countries.
How do I do this?
PayPal will do currency conversion for you, but if you need to set different prices in different countries (ala mobile app stores), then you will have to create the different buttons yourself - one for each country/currency you wish to target. Then, based on locale or requesting URL, you will present the proper button's code.
I'd recommend using a Geolocation JavaScript code. However, the user would have to give permission when they load the page. You can have a look here: http://www.w3schools.com/html/html5_geolocation.asp
Or see example code:
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
You could then pass the lat and long data to an api to find the city/country they live in.
Hope it helps!
I am developing iPhone application which loads login page of my website. I am able to load my login page using phonegap/childbrowser. I am newbie to JS, Phonegap.
How do my native/phonegap application should handle logout and login event has performed on the webpage? Please guide me how to know user has logged out.
Also is it possible to add support for Push Notification in phonegap/childbrowser application ? How?
So far have seen facebook login-logout questions around but hard to understand and couldnt simulate similar approach.
does your whole app run using the childbrowser? If so why not just have the login log out as piece of your app?
Also if you have to use the childbrowser best bet is to set up a locationchange event and if the location equals a login success page then append some arguments and store those using localstorage.
example -
client_browser.onLocationChange = function(loc){
locationchange(loc);
};
function locationchange(loc){
if(loc.indexOf("http://www.example.com/success?login=true&user=foo") > -1){
var user = loc.match(/user=(.*)$/)[1]; // grab user info
localStorage.setItem('login','true'); // set login as true
localStorage.setItem('user',user); // set username
}
}
that will save to your app locally that the user is logged in and their username, which you can use later if you need to use the childbrowser by passing that in the url you open and on the server side you'll have to look for those arguments.
to log out just open the childbrowser and send a logout argument
www.example.com/logout?user=foo
and in your localStorage
localStorage.setItem('login','false');
Honestly this is kind of a vague question, it would really help to understand why you're wanting to do this in the childBrowser vs your app...
For some time now I try to figure out how these guys were able to add "Sign online here" button which is "install App" button on their fan-page tab:
http://www.facebook.com/GuinnessIreland?v=app_165491161181
I've read around the web and couldn't come up with any solid solution. The FBML and FBJS documentation left me with nothing.
So please, if anyone can help me with this.
NOTE: To make multiple tests on the Ajax request that are sent, do not accept the App install. It behaves differently after that.
I had some problems with finding out about it as well. There is no info about this kind of behavior in wiki or anywhere. I got it working after trying some possible solutions and the simplest one is to make user interact with content embedded in fan page tab such as click on something etc. Then you need to post an ajax request with requirelogin parameter to pop up to come out. The simple example would be:
user_ajax = function() {
var ajax = new Ajax();
ajax.responseType = Ajax.RAW;
ajax.requireLogin = true;
ajax.ondone = function(data) {
new Dialog(Dialog.DIALOG_POP).showMessage('Status', data, button_confirm = 'Okay');
}
var url = "http://yourappurl.com/request_handler"
ajax.post(url);
}
And the trigger for it:
Interaction
Then if user is known to be using your application (fan page tab) you can prompt him for additional permission like publish stream or email communication by calling:
Facebook.showPermissionDialog('publish_stream,email');
Hope this solves the problem.