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 Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes, the user's current position, of course.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
In the following methods, should I use only getCurrentPosition() right? in my app.

  • navigator.geolocation.getCurrentPosition
  • navigator.geolocation.watchPosition
  • navigator.geolocation.clearWatch

The watchPosition and clearWatch are they necessary or not for my app?
and u said, there is something else which is my over head, but please suggest me better for my app, I can do, I can study if I don't know, I can do and I can do.
You will not believe me, but by self study i learn all, I havn't any degree nor I am IT graduated, extremely sorry, because I lied, I thought You will not help me, If I will say that I am not a student of IT. I just did a small diploma in Information Technology (DIT) from NIIT Institute only in 2010.
But i have lots of interest in web development. Sorry Petra I told u lied.
But it's truth that a community gave this project.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Also want to tell you that, It's also not my profession to create websites or apps,
I just made lots of static and dynamic websites just for learn, Yes I am a 22 years old girl student here, doing job as a computer operator. When they knew I have knowledge to create websites, they offered me to create an app, I said very easily yes, and when they asked me that In how many days you can prepare the app, ? I said very easily Only in a week, How stupid I was, Now learning that What actually should have a mind in IT like you.
u know I met many students here in India from different cities and different universities, and I measured that I am sharp than them, they have degrees big degrees like MCA and M.TECH too, but they can't even deploy a single tailor made software.
It;s not out fault nor teacher's.
Teachers just want to complete the syllabus all time, they did not allow students for practical, although on computer we need 90% practical, and in reality they do 90% theory, and theory.
By d way I am really your fan, Petra, because with good ITian you are also a good human :)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
NOW PLEASE DON'T DENY TO HELP ME, It was load on my mind that I told lie here, BUT except this I didn't lied anything.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What I said was over your head is "dynamic map with Google API, especially when trying to letting the user pin any position on the map".

And no, I wouldn't know why you would want to use watchPosition. That's only useful when you need to track the user while he is having the app opened, for instance for a geocaching app.

And students are no better or worse than school kids, managers, housewives, bus drivers or retired people....unless they start lying. I would be willing to help any one of them....generally spoken.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I am Extremely Sorry Petra, But By heart i accepted you as my teacher.
even my app will complete or not, I don't care But i don't wanna lose you.
with lots of respect, Thank YOU very much

I am working ahead, see u after a little time, :)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Good Morning Petra,
-I studies last night about Dynamic Maps, I also read about Firebase, and It's storage with JSON, It's was a great option for Developers, to create dynamic map with markers, and When a user will click/Hit on any place on the Map, the Lat and Lon Coordinates will automatically store in the database using JSON format.

-But, because it is a small town, network is not good here all time, the dynamic maps can take long time to load, instead of static, therefore I used static map with user's current position, as u suggested me.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, It's javascript for currentgeolocation is it correct?

1.
<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

// onSuccess Geolocation
//
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};

// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);
</script>



2. This is static map image tag:
<img width="220" src="http://maps.googleapis.com/maps/api/staticmap?center=amroha,+uttar+pradesh&zoom=18&scale=2&size=220x200&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh" alt="Google Map of amroha, uttar pradesh">
Google Map of amroha, uttar pradesh
How I can change Center Parameter with current lat and lon coordinates?
3. and MarkerParamameter with current lat and lon coordinates?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I found the solutions now, but now I am facing these problems:
1. The marker is not showing.
2. How I can insert lat and lon coords. for marker?
this is the script:

<script type="text/javascript">

function initGeolocation() {
if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
console.log('Geolocation is not supported');
}
}

function errorCallback() {}

function successCallback(position) {
var mapUrl = "http://maps.google.com/maps/api/staticmap?center=";
mapUrl = mapUrl + position.coords.latitude + ',' + position.coords.longitude;
mapUrl = mapUrl + '&zoom=18&size=220x200&maptype=roadmap&sensor=false';
var imgElement = document.getElementById("static-map");
imgElement.src = mapUrl;
}
</script>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, you didn't add a marker variable to the url's query string.
Take another GOOD look at the staticmapcreator page I mentioned. Or....if nothing works, follow Google's official documentation.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
What u mean by GOOD LOOK, u want i add css for good appearance? how good look? all road maps are same.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I added now marker position variable and now it's capturing current device's current position, and WHAT u mean Petra,


Take another GOOD look at the staticmapcreator page I mentioned. Or....if nothing works, follow Google's official documentation.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
No one just me, and me :(
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The how will your app be accepted by the client? How do you know when he is satisfied?
Suppose, when you say the app is finished, he comes up with:
- "Oh, but I had something different in mind."
- "Oh, OK, we will test it and let you know...."
- "Oh. But why doesn't it work on Blackberry?"
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-What they want different. they had discussed with me, when They offered me to create an app like this, if they will ask me to do some changed, I can do.
-Now first I want to make it complete, I am checking it mostly in android 4.4. and 5.1. because, 90% people are using android supported phone here, then i will test on blackberry and windows, and most few users uses iphone therefore i will add key after to test on ios. Now i am giving priority to android.
-after successfully testing, I will launch the app, In Shaa Allah
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
if they will ask me to do some changed, I can do
Yeah, that's what you told them last time you saw them, too.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Means?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, Now how Can i add this event handler into script?
same as below? or I should i add some patameters?

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
which statements should I type here????
}
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, HELP ME PLZ
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Will you stop shouting!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Sorry :( please dont be annoyed, I will not shout again
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, after all, i spent my full day to find the errors/bugs, but I couldn't, the map still not showing in android.
Now hope from you can do miracle with the help of GOD.
Solve the issue, i know that you know all, you just dont want to give me cooked food, thats the good habbit of good teachers.
By d way, Its 12 o clock now, I am sleeping now, Good night,
And I hope that tomorrow will be a good day with your solution.
Petra, after map, I have also to do struggle with ajax xhr calls, so please for me find the errors, and make it successful, thank you.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
And I hope that tomorrow will be a good day with your solution.
Who knows?

I posted:
My guess is that you have two errors:
- you don't receive the position
- you don't anticipate correctly on such situation, which can occur.


These items are the key to your solution.
1. If you don't receive the position on the device, then you probably also never saw the deviceready event.
2. But even if you did, you must still create some functionality for the case that no position is received. If it was my app, I would have you:
- make no Google map with checkbox display
- make the position description mandatory (where you should validate by first trimming the input from leading and trailing whitespace)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Good Morning Petra, It's a new day and new hopes ^_^
All time, google map rounding in my head, in dream also :D
First time i am engaged like this with this app.
BUT I NEVER LEAVE HOPE
In Shaa Allah I can do , :)
And sorry to make you disappointed some time,
your two point:
-OKay I am working on it , to receive position,
-Hmm, and also I i will create functionality if any case location is not received.
and please I know that many things I don't know, but dont keep me blind from new techniques,
Suggest me, as this is your app, I will be highly grateful to you.

and Petra, Why you don't reply of greetings?hmm?like good morning and others?
Petra how many old you are?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

This is the image when i debuged.
and I know these all are not the error, the image is not loading in mobile.
Petra,
-I recieved position/
-and also fail function i added,
It's still not showing image in mobile.

<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("navigator.geolocation works well");
}
function initGeolocation() {
if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
console.log('Geolocation is not supported');
}
}

function errorCallback() {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}

function successCallback(position) {
var pos=position.coords.latitude + "," + position.coords.longitude;
var mapUrl = "http://maps.google.com/maps/api/staticmap?center=";
mapUrl = mapUrl + position.coords.latitude + ',' + position.coords.longitude;
mapUrl = mapUrl + 'zoom=16&scale=2&size=150x150&maptype=roadmap&format=png&visual_refresh=true&markers='+pos+'&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh';
var imgElement = document.getElementById("static-map");
imgElement.src = mapUrl;
}
</script>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Petra how many old you are?
I was created in 1993 - and meanwhile, I'm pretty well known
https://en.wikipedia.org/wiki/On_the_...

About the error messages and your script:
- why does it look for old versions, like cordova 2.4.0 and phonegap 1.4.1?
- how can you receive a position? In the posted script sections, you never call function initGeolocation()
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
How much you can make me, but I know you are a human.


-what I do, to update versions?
-I call the function, on body onLoad see:

<body onload="javascript:initGeolocation()">

by d way article was nice, thank you.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Not sure. You should find the reason why it is looking for such old version, then remove that reason.
2. You are calling that function when the DOM is loaded, not when you receive the deviceready event. That's incorrect. At the time you call that function you can't be sure that the Geolocation plugin is active. So I wonder why you believe you always receive the device location.

BTW: there's no reason the write javascript: when setting the value for the onload attribute in the body element.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, say once you are a human, please?
u know my face got upset whenever u say like this, that u are a machine. Please i will not tell to anyone promise.

ok I got it i am checking it again.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-If I removed now device ready event listener.
-& now it's looking like:

<body onload="initGeolocation()">

-when i call the function initGeolocation() at device ready event, the static map was disappeared.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
By now, you should realize that you want a combination of functionaity:
1- receive the device location
2- create an image url and fetch the image, then place it into a DOM element

This means, that both of these criteria need to be met:
a - the deviceready event was fired (so the Geolocation plugin is active)
b - the DOM is loaded (so you can manipulate the element where the image is to be placed)

(a) requires an eventListener for the deviceready event
(b) requires an eventListener for the document's load event

You combine them by first catching (b) and in the callback function you set the eventListener for deviceready. Then after catching (a), in the subsequent callback function, you perform actions 1 and 2 above.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
the second point I couldn't understood:

2- create an image url and fetch the image, then place it into a DOM element

How can i do it Petra?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What?
Isn't that what you are already doing with successCallback(position)?

(If you copy and paste code, you need to try and understand what you are doing. Otherwise you have no chance when your client asks you to change something)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You don't "store" it in a DOM element. You set the src attribute of the img element with id 'static-map' to the newly created url.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Yes, Petra, please do it for me, correct my javascript so that i can load image in mobile too, please I dont know how to do, how to store, You please do,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,please?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
just write for me few lines of code: although u did for me too much, u also create tables with their relationship, now please i want a little help more, from two days m trying now please end this issue and store url into DOM objects.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It is not "a few lines of code"!
It's a construction of:
- chaining two events in the right order
- detecting online/offline (have you decided what you want your app to do if it goes offline?)
- detecting geolocation services (have you decided what you want your app to do if no such services are available?)
- fetching the current location (and react upon an error situation)
- creating the url for the map
- getting the map and placing it into the DOM
- catching the submit event for the form
- validating the form and react upon error situations
- posting the image and form data using the file transfer plugin or an ajax/xhr post request (have you decided whether you want to transfer as a file or post the base64 data?)
- receiving the server response and react on error situations or post success.

This is what that part of the form will do. It's the programm of which you claimed that it would be 'just a couple of nano seconds for me to write'. It is the part of which you claimed it was just 20% of the development work.
And it's the part of which you said "I can do it".

So, do it.
I won't.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
You are right Petra, I can do, because I said already that It's my old habbit to jump in a river without having skills of swimming, so my GOD automatically give skills on the time. Yes this is also truth that without guidance I can't do this all, so time to time i will ask for your help, thanking you All the points you mentioned above are my commands now.