How to make dynamic apps using Phonegap?

  • 2
  • Problem
  • Updated 6 months ago
Hi there, i am a student creating an app. But having some problems, i still cudn't found that what are the plugins and how we can use i used many from list but all they are not responding. Phonegap Team please help me i just want to create an app with camera(to capture images) and Call(to a particular number) how i can use them? I am using build.phonegap.com using dreamweaver. Thanks in advance. I also attached the screen shot of my app
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

Posted 4 years ago

  • 2
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Hello Petra,
Have a goodnewsful day!
Almost I fixed the static map loading problem, it's taking small time now, and I have also set a preloading image, by use can little wait untill map is not loading.
-I recognized that plugins are working fine, the problem is that the HTTP request to map.google.com....taking time according to network, if network is good loading after little time, and if network is bad taking a little more time.
-Now the recent problem is that the static map sometime not showing map labels. without labels how we can know that where we are in the map.
-I dont know y occuring this problem, but i have little doubt on cache, i have read that recent viewed page store on cache , I think when again i am opening post complaint page it's not updating map, when we are reloading page now it is fetching map, can i use a little button on page to reload not the entire page, but image? Because sometime signals are good and sometime bad, user can reload this image by tapping a little icon on page(Reload map). By this if labels are not showing may on reloading image they show? M i right?
Or another problem there fore not showing labels?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
without labels how we can know that where we are in the map.
I don't understand this.
The user is standing there, with his device in his hand. A map is displayed (at an appropriate zoom level, I hope) and a pin is placed at his exact position.
How can he NOT know where he currently is, without labels? The street names are on the map, or at least the environment contours. Al he needs to do is look around and see that his surroundings are exactly what the map displays.

Now the recent problem is that the static map sometime not showing map labels.
When is "sometimes"? Is it really a matter of bad connection or something else?

Anyway, sure...if you want a reload button next to the image, then do so.
Make sure you also get the location again, because the user might have moved on for half a mile or so.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-Sorry i couldn't make you understand by my first point, I mean to say it's not showing the street name, and other see the image:

-Okay, this button is only for the time, when image want reload to fetch the current location.The reload button can be helpful, because static map is only updating when page is loaded, and when use moved to another place, he do not need to reload the enitre page to fetch the current location, he can just reload this image? to fetch the current location again.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If there are no street names, then Google isn't displaying them at this zoom level for that specific location. It has nothing to do with specific labels, I believe.

And yes,

he do not need to reload the enitre page to fetch the current location, he can just reload this image?

that's right. You can set the source of the image again, which will reload, unless cached. You can prevent caching by adding a timestamp to the query string in the image url.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-But Petra, with same zoom level it's showing all captions sometime, sometime not.

You can prevent caching by adding a timestamp to the query string in the image url.

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+new Date().getTime()
+latlon+"&zoom=18&size=220x220&sensor=false&markers="+latlon+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";

In this way?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
:( ok lets see again.....
New variable, to assign a new query string?
In new query string what I will use, ?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Not a new query string. Just an additional variable with the timestamp.
Google "image prevent caching timestamp query string" if you really don't know how.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,
I found some solutions, but they are making me more confusing,
which is for me can u plz tell me plz Sir, a little hint more:
http://stackoverflow.com/questions/72...

http://stackoverflow.com/questions/21...
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
var img_url = "http://maps.googleapis.com/maps/api/staticmap?mytimestamp="+new Date().getTime()
+"&center="+latlon
+"&zoom=18&size=220x220&sensor=false&markers="+latlon
+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Cholly i cudn't understood this small thing )-:
and thank u 100000000000x
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Hi Petra,
Sorry again m here with small problems:(
see i am using this code to reload map manually,

$("#mapreload").click( function()
{
$("#mapholder").html("<img src='"+img_url+"'>");
}
);

But map is not reloading.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Means?
This is img_url variable:

var img_url = "http://maps.googleapis.com/maps/api/staticmap?mytimestamp="+new Date().getTime()
+"&center="+latlon
+"&zoom=18&size=220x220&sensor=false&markers="+latlon
+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";

if i am using, text It's showing on <div id=mapholder>..</div> but url image not.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I didn't mean the code, but rather the real, generated value.
And since you said the reload "doesn't work", I assume you tested reloading the image. So, you must have had several values for img_url, and I asked you to post those values.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I checked by tapped a button (e.g. image with id #mapreload) at same position, with coding i posted few min ago. And I assumed by preloader image, i have set to mapholder, when i am clicking on image nothing is happening, but when i am reloading page first preloader image is showing and after static map image. But when i am clicking on button image nothing is happening.
the real value after page reload are:

http://maps.googleapis.com/maps/api/staticmap?mytimestamp=1464335627401&center=28.3670355,79.4304381&zoom=18&size=220x220&sensor=false&markers=28.3670355,79.4304381&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true




http://maps.googleapis.com/maps/api/staticmap?mytimestamp=1464335815367&center=28.3670355,79.4304381&zoom=18&size=220x220&sensor=false&markers=28.3670355,79.4304381&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true



http://maps.googleapis.com/maps/api/staticmap?mytimestamp=1464335913970&center=28.3670355,79.4304381&zoom=18&size=220x220&sensor=false&markers=28.3670355,79.4304381&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
But....what should happen, then? Aren't the images exactly identical?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, image should take few seconds to reload right? it's not reloading I think :(
Because page reloading it's taking time and when image clicking it's seems like image is dead.
also when i am showing an alert before image reload it's showing alert, but when i coded alert after image reload, it''s not showing.

$("#mapreload").click( function()
{
alert("image is near about to load");
$("#mapholder").html("<img src='"+img_url+"'>");
alert("image reloaded");
}
);
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I also set my dp of a pumpjack here :D
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
The value of img_url after clicking on reload image:
1.
http://maps.googleapis.com/maps/api/s...?
mytimestamp=1464347886679&center=28.3670355,79.4304381&zoom=18&size=220x220&sensor=false&markers=28.3670355,79.4304381&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true
2.
http://maps.googleapis.com/maps/api/s...
3.
http://maps.googleapis.com/maps/api/s...

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
$("#mapholder").html("<img src='"+img_url+"'>");

You are not reloading the image. You are setting a new content value for the #mapholder element.
Instead, you should change the src attribute of the image.

Also, I'm not sure how you want to SEE any changes in the image if you're not going out and walk a mile, or so.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-Ok
-I just wan't that if Post Complaint page is already opened and user walk a mile, then now he want to file a complaint but image is showing old location which is a mile far. Now he want to reload only image not whole page, because he filledout some fields, he want to reload only current location. If he will tap reload image, so current location can be show in mapholder.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
It was increasing headache, therefore i removed reload image, that's sufficient to breakcache using timestamp query, huh.
Now I gonna some test, I will report u later.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Actually I was facing late loading static map problem again.
It's taking too much time to load.

Did you try and find out what is taking so long? Is it the getCurrentPosition call, or is it loading the graphic?

I checked to create an small app.
-To find out that it's graphic loading late or getCurrentPosition call,
So I create an small app: with this script:

<script>
$(document).ready(function() {
var x = $('p');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {

$("p").text("Geolocation is not supported by this browser.");
}

function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?mytimestamp="+new Date().getTime()
+"&center="+latlon
+"&zoom=18&size=220x220&sensor=false&markers="+latlon
+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";
$("#mapholder").html("<img src='"+img_url+"'>");
$("#latlon").text("Current lat and lon values are"+latlon);
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("p").text("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("p").text("Location information is unavailable.");
break;
case error.TIMEOUT:
$("p").text("The request to get user location timed out");
break;
case error.UNKNOWN_ERROR:
$("p").text("An unknown error occurred.");
break;
}
}
});
</script>

So I found that graphic is not taking long time, after a 8 or 10 mins delay its showing latlon values and after 1 sec graphic is loading quickly.
This means that the plugin is responding late not the graphic?, now what i do?
see snap shots


Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It might be your device, which isn't getting a mobile network loation soon enough.
Because you still don't use the options parameter for the getCurrentPosition call, you don't make use of cached locations. Also, you're not making use of GPS
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

var options = { timeout: 31000, enableHighAccuracy: true, maximumAge: 90000 };
navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

This call back is correct? Can i use it?

you don't make use of cached locations.

How?

Also, you're not making use of GPS

How?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This use of options is correct. The value of 31000 is very high, though.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It depends on the environment, there...and on how long you want to let the user wait before getting any response..
Just start with, say, 5000. Adjust if necessary.
Test with multiple devices and multiple OS versions, not just with one device.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Okay thank you Petra ::)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, this script is not working with <plugin name="cordova-plugin-x-socialsharing"/>

Plugin:

<script>
$(document).ready(function() {
$('#sharebutton').click(function(){
window.plugins.socialsharing.share(null, null, null, 'https://build.phonegap.com/apps/1899291/install/AjQTHjhXsjgwNqEWsD8h');
});
});
</script>
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, It's now working fine, i set the timeout period 10 sec. It's showing under 10 secs map but when i load the page multi time, it's showing that "The request is timed out". And not showing map.
And when i restarted the device, It's showing under 10 seconds.
Please Please Please explain me your this two points, what I am missing?

1. you don't make use of cached locations.
2. Also, you're not making use of GPS

a lots of thanks in advance.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
With the options you posted above, all is fine.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
okay, thank you
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, this script is not working with <plugin name="cordova-plugin-x-socialsharing"/>Plugin:


<script>
$(document).ready(function() {
$('#sharebutton').click(function(){
window.plugins.socialsharing.share(null, null, null, 'https://build.phonegap.com/apps/1899291/install/AjQTHjhXsjgwNqEWsD8h');
});
});
</script>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
By now, you should know that you can't say "it's not working" or "doesn't work", because such phrase has no meaning to IT people.

WHAT is 'not working'?
- the build fails with that code
- the app doesn't install
- the app doesn't launch
- you get an error message
- you receive unexpected results
- your device explodes
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thanks for guide, I will always remember these lines.
I mean to ask:
When i am clicking "Share button", it's not launching share list, since I changed the plugin cordova-plugin-socialsharing to cordova-plugin-x-socialsharing.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If something "doesn't work as expected", you must either carefully read your code and understand what is happening, or you need to perform a debugging process.
In this case, there are several possibilities, looking at your code:

1. The statement $(document).ready() is not reached
2. The statement $('#sharebutton').click() is not reached
3. The anonymous function(){} is not executed
4. window.plugin or
window.plugins.socialsharing or
window.plugins.socialsharing.share()
doesn't exist (= object type value is 'undefined')

Which one holds true for your app?

Once you find the exact spot of failure, your second step would be to try and find what is causing that.
And thirdly, once you have found the cause, remove it.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Okay Petra, :) thanks to keep always patience. You are true human, because if a human can keep long patience, he can't do anything wrong ever, my dad said.
and yes, I am finding now causes to remove them.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Greetings for the Day Respected Petra,
Actually since I used offline page navigation during offline state:
There is a small problem I recognized. I am trying to make you understand by my words if I could.
These were three events, I was handling at "Post Complaint" page load.
1. online
2. offline
&
3. onDeviceready
The offline & onDeviceready are working fine as I expected.

-- When initially device is online, after loading Post Complaint Page, if device is going offline, it's showing offline page and at online state it's going back to the Post Complaint page.(Which is previously loaded).
BUT
--Now problem is that. When device is initially offline, and we tapped to the option Post Complain, it's showing offline page, and if we are coming online, it's going back to the Post Complain page, which is not loaded completely yet. Means we can't access and map and also may be dynamic picklist.
--in another words, at online state Post Complaint page is not reloading, so we can't access map and another dynamic data.

I hope i was successful to make u understand, but i really i dont know how i can define these in words::::::::(
I will be highly thankful, need for suggestion.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
When device is initially offline, and we tapped to the option Post Complain, it's showing offline page, and if we are coming online, it's going back to the Post Complain page, which is not loaded completely yet. Means we can't access and map and also may be dynamic picklist.
Well, actually it should load again correctly when you return to that page, unless you coded something which prevents that.

Your solutions can be:
- either find out why the page doesn't load properly upon return, and correct that
- or don't even go to that page when the device is offline. You could catch the click event on the hyperlink to Complaint.html, check for connection, and either send the user to the Complaint page (if connection is ON) or to the offline page (if OFF).
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Your solutions can be:
- either find out why the page doesn't load properly upon return, and correct that

This is fact that the map and picklist can't be load untill page is offline. The Post Complaint page is loading of course, but offline. So that when we are coming back on this page it's still offline, It must be reloaded right, coz state is changed now? It's now online, It must be fetch data from servers?
I think it's just asking for reload when state is changing into Online.
So is there any way to reload the previous page after $.mobile.back().Call?

function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So is there any way to reload the previous page
It should do so already, unless you are deliberately preventing it with some code.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, yes, certainly it's loading, but RELOADING.
We want page reload to fetch details from Internet, if it's going from offline state to online state.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It should do so already, unless you are deliberately preventing it with some code.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Okay, let me see where i am doing wrong. Thanks
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, Sir, see: My static map is not loading early again, I tested at many devices with different android versions: 4.4 and 5.0.1.
Also I set timeout:20000, but after 20 sec. too it's not loading and showing "The request is timeout". 2/10 showing map.
-On 2G network static map isn't showing.
-3G and above it's showing but sometime with late processing.

what i do sir.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You need to find what is causing the delay. I doubt it's the map, but you can test that by catching the generated map image url, copy it and paste it into a mobile browser on your device. See what happens.
If the map displays almost immediately, the delay is most likely not there.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Good Morning Petra,
I checked as u said at mobile browser it's taking less time to load the image. Near about 4 or 5 seconds, sometime more less.

Then what I am doing mistake.
Only app not showing, just showing request time out. AT good network too .
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Which request times out?
Fetching the map?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Yes, when I launch the App, on Post Complaint page load, it's start to search the location, with notification, "AmroClean is searching for location".
and when time passed e.g. 20 sec, It's show message: "The user request to find out location is timed out".
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, the answer is NO. It is not the process of fetching the map.
You haven't even constructed the image url at that point!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra Please explain me, really i couldn't understood.
You haven't even constructed the image url at that point!

Everything i showed u up, the script, the deviceready events, everything, then where i did mistake?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Look, you said the process of fetching the map takes too long.
I replied: "I don't think the problem is fetching the map. Try in a browser"
You did, and the problem is not fetching the map, since it got through quickly enough.

Now, you said the process timed out while getting a position.
You need that location to construct the map url, right? So the problem can never have been the map download, because you haven't even been able to construct its url.
See?

Now, you need to find out why it takes so long to get the location coordinates. Possibilities are:
- the device doesn't play well. Try other devices
- you only switch on GPS when the position is needed, and the device isn't getting enough satellite fixes quickly enough
- while the device is getting location, it is simultaneously trying to perform many other tasks
- you aren't outdoors (I hope you were smart enough not to test inside a steel building or so)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Sorry at my previous post i forgot to tell you that it's unable to find the location not the map. Now as per your suggestion, It's clear that the reason of this delaying map is not the Image Loading. The plugin sometime not responding. It's unable to find out GPS.


And what can be problem in to image url construction, when it's loading on PC clearly/Instantly and everytime, whenever i am realoding. And also in the mobile too, when i rebuild the app with timeout option. It was showing map, that day I tried many time many where.
Whenever I rebuild it works fine, after sometime again It's unable to find out the location.:( I just smile when I rebuild app with new options and now m crying since it's not finding gps.



Now, you need to find out why it takes so long to get the location coordinates. Possibilities are:
- the device doesn't play well. Try other devices
I tried at many devices, same problem occurring.
- you only switch on GPS when the position is needed, and the device isn't getting enough satellite fixes quickly enough.
Since I start to use static map, GPS is continuously on, even at another devices too, first I swtch GPS on then Install the app.
- while the device is getting location, it is simultaneously trying to perform many other tasks
Can be Possible
- you aren't outdoors (I hope you were smart enough not to test inside a steel building or so)
Petra, i am not small child, i know signals can't be reached in underground or glass and steel :(
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,
I want to ask few questions, Sir Please reply if have sufficient time.
Q1. Are cordova.js and phonegap,js same?
Q2. In JQuery Mobile page, where we should I place my custom scripts? in head section or at the bottom of page?
Q3. Does GPS need internet connection to receive satellite messages.?
Thank you
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Q1. Are cordova.js and phonegap,js same?
They are not. Especially in case of multiple html documents in an app, of which some are in subdirectories, you should use cordova.js, not phonegap.js.
However, since you are using jQM and thus have a one-page architecture, you can pick either one.

Q2. In JQuery Mobile page, where we should I place my custom scripts? in head section or at the bottom of page?
jQuery Mobile implements a one-page architecture. That means that only the head section of the first page is loaded. That's where your general custom script file references go.
You could still include custom scripts in separate other html documents, but they should be (anywhere) in the body part.
Of course, if those scripts manipulate the DOM, you should make sure that the DOM is available before executing such script.

Q3. Does GPS need internet connection to receive satellite messages.?
No (otherwise, dedicated mobile GPS devices could never work).
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
:-)