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
Petra Now it is Okay?

<script>

document.addEventListener("deviceready", onDeviceReady, false);
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "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?center="
+latlon+"&zoom=22&size=220x220&sensor=false&markers="+latlon+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>


HTML SOURCE



<body onLoad="getLocation()">
<p id="demo"></p>
<div id="mapholder"></div>


When I am calling function "getLocation()" at device ready event, its not showing map, but as same as above code, It's showing map but like before only on PC(WIN) not on phone.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If the map doesn't show, do you get any of your error messages?
If not, how did you whitelist the external source for the image?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-There isn't showing anything. Not a single square too, on the mobile.

-and for whitelist here is the config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode = "10"
version = "1.0.0" >

<!-- versionCode is optional and Android only -->

<name>AmroClean</name>

<description>
This app let you Clean your City within no time, Keep your City Clean and Green, Regards: Nagar Palika Parishad
</description>

<author href="https://build.phonegap.com" email="support@phonegap.com">
Saba Rais
</author>
<icon src="images/icon.png"/>
<content src="index.html"/>
<access origin="*"/>
<access origin="*.googleapis.com"/>
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-device" source="npm" spec="1.0.1" />
<plugin name="call-number" source="npm" spec="0.0.2" />
<access origin="http://phonegap.com" subdomains="true" />
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="winphone" />
<preference name="permissions" value="none"/>
<gap:plugin name="org.apache.cordova.device" version="0.3.0" source="npm"/>
<gap:plugin name="org.apache.cordova.camera" version="0.3.6" source="npm"/>
<gap:plugin name="cordova-plugin-socialsharing" source="npm" version="4.3.81" />
<plugin name="cordova-plugin-geolocation"/>
<plugin name="cordova-plugin-file-transfer"/>
<plugin name="cordova-plugin-camera"/>
<plugin name="cordova-plugin-device-motion"/>

<access origin="tel:*" launch-external="yes" />

</widget>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
There isn't showing anything.
Then you should check and see which functions are being executed, and which not. You want to see where the execution stops, if anywhere.

About your config:

1. Do you really want to attempt to publish the app with this id?
id = "com.phonegap.example"
The author attributes seem incorrect, too.

2. The default icon must be in the root. See the Icons and Splashscreen section in the PGB Docs

3. You're missing icons and splashes, which are strongly recommended for Android and required for iOS

4. Since you already have
<access origin="*"/>, the other access origin rules are redundant (except for 'tel:')

5. You have no whitelisting for the display of external sources in the webview. Add an allow-navigation rule. See the whitelist plugin's documentation. Also, Jesse showed you a whitelist tutorial in this thread, about a month ago

6. You are using a couple of old, deprecated plugins from the PGB repo. You can't do that, especially if you also have a later version from the npm repo.

7. You're missing the statusbar plugin from npm, which is necessary for iPad.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
OKAY, Petra, thank you to tell me what i am doing wrong with my config.xml.
1.Then which I should use? or I can leave that id?
2. Root folder means www folder?
3.I will read more about icons and splashes.
4.I will remove all unnecessary <access origins>.
5.Okay I will read about webview allow navigation rules.
6.I will update all the old versions.
7. Let me check about status bar plugin.

Thanks alot Petra.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. That's what the client should decide. Usually it's the reversed domain followed by the app's name

2. No. The root directory is /, not /www
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, It's reversed or reserved domain?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra when i add <allow-navigation href="*" />

the map showed in mobile but like this:
means no road , just marker:see:
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
ohh i got it, i think i set zoom level much let me edit it
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra how much zoom level should i set for clear road vision?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This is not a serious question, is it?
Just try all possibilities in a mobile browser and pick the best!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
yes, sorry, but it's looking nice now petra, wooooooooooooooooooooooooooooooooooooooooooooooooooh thnkx alotttttttt
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
SEE@:

amazing Petra, Now I will ask tomorrow In Shaa ALlah,
GOOD NIGHT I can sleep now little lightly,
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Good Morning Petra,
1.Now, I want to ask that, You were talking about GOOD LOOK , so how can i give a good look to this map?
2.And how I can use that checkbox with current location, should I call to getcurrent position by a checkbox? How i can store lat and lon values to send to the database?
Thanks
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. I thought you were in a hurry. You promised to have the app finished weeks ago! Hasn't the community started to complain, yet?
You need to get that appp working, first. Then, if there is still time left, you can start playing with fancy colors, rounded corners and whatnot.
There won't be time left; you'll run into plenty more trouble and things you haven't thought about, yet.

2. ????
- Do you want to get the current location...again?
- Why would you want to store lat/lon prior to sending them?

I think you should re-read this thread carefully to find the main goals of this screen. It appears to me that you may have lost track about what each part is meant for.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
1. You are right Petra, They were asking again and again about the App, and i took some time to complete it. I got what u said, :), Yes I also want to make app working first. After i can add lots of styles.
2. No, i don't want current position again, I am asking when a user will click on check box, e.g. Or use Current Location.
How it will work?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The idea was:
- EITHER the user says: "My current position is where the complaint is all about" (that's where he ticks the checkbox)
- OR the user says: I'm somewhere else, now. But this complaint is about Main Avenue, third tree on the East side." (that's where he types his text in the text box)

So, you need to make a clear user interface which offers him/her these two options, in such a way that no confusion arises.

Depending on what the user does, you should either:
- issue an error message if he does neither
- post the text if he filled in text
- post the current location if he ticks the checkbox

It would be nice if you:
a. did not display the map and the checkbox if the location couldn't be determined or the map couldn't be loaded
b. would hide the text box if he ticks the checkbox and show the textbox again if he unticks the checkbox
c. would disable the checkbox if he typed text, and eabled the checkbox if he emptied the textbox

They were asking again and again about the App, and i took some time to complete it.
So, did you at least show them a first prototype and did you offer them to start testing a first prototype version, in order to receive feedback as soon as possible?

BTW: where do you want the user to describe the complaint itself?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-Yes Petra all the functionality you described before i know very well, I was just confuse about lat and lon values. I mean to ask when a user tick the checkbox, so after submit the entire form, the current lat&lon coordinates will autometically store in database with ajax/xhr calls?
-And yes I will validate form's field, which can be null, and which are mandatory.
-This is really nice programming about show / hide fields, I will study about that.
-I showed them my this version of app, but because It's still not complete I will submit them after successful testing on every platform.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,
When I am opening "Post Complain" option, The page taking little time to load,
Can i give a small loader gif image to page? How? Is there any plugin required for it?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Sure. Place that image somewhere on the form and hide it using CSS. Then, upon catching the submit event, display the image using CSS. Once you receive response from the server, hide it again.
No plugin required.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, Hi,
Good Evening.
I was asking that I added an preloading image.
It's showing on PC , but not showing in mobile, Is there anything permission/allow for it?
It's processing with semi-transparent screen in phone but not showing gif image.
see at computer:
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Can't tell. I know nothing about the image, the source location, the css, the code you use to display it and the build result in which the image was introduced.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Javascript

<script type="text/javascript">
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
},5000);
}
}
</script>

CSS:

#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("images/preloader.gif") no-repeat center center rgba(0,0,0,0.25);
}

HTML:

<div id="load"></div>

NOW?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Should work correctly, if the image is present in the given path.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
IMG IS AT CORRECT PATH, THEREFORE SHOWING IN PC, BUT NOT IN PHONE
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What happens if you put on your page

<img src="images/preloader.gif"/>
?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
It's showing same pic on the webpage.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Then probably the background css clause is interpreted differently in your test device.
Must it really be a background image of a div? Can't you simply use the img element you just tested?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
means how? listen Petra, see at next post/
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

this error i saw when i debug, what does it mean?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It means that such image file was not found
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Hey Saba,
quit bugging Petra. Move from your place to another
city and find someone to help you.

Jesse
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
But @jesse why are you saying like this?, If Petra have no problem?, yes If Petra will stop me to post here, Definitely I will not disturb here ahead. I will really go from here.
Petra, is with me since begining, Petra never said these lines, even I make Petra, many time disappointed and irretated, then Y u are saying this?
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
i'm saying this because Petra is being too nice. You should work on your own. I won't repeat this --- because it is up to Petra to say something from now on.

Best of Luck
Jesse
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I know that Petra is so nice, I am also trying my level best here @Jesse Sir, But It's my good luck people like Petra helping me here, and suppose if I go from here, so still here are many people who are asking daily, so Petra, is not only replying here, Petra replying everywhere with lots of details, I saw. I am not always here, Once my app will complete I will not ask here. But I will connect to Petra always. Thanks for your wishes.