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
Even if you are testing locally, you will have a client and a server. The client is the app. The server is the machine with the database and the webserver/php-parser. You've got to keep them separated.

If you mean you have your html/css/js locally as a website, testing in a browser, then you are testing the wrong thing. That browser will not use the plugins, but rather the HTML5 API.

It means i am doing mistake in online/offline events because before it was showing map.
Exactly.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I check with an HTML page, the static page was showing on PC, but not was on mobile,
Now at this time I think the matter is not of php or HTML.
Petra Sir,
I used this script for online and offline.
Kindly help me to find error/bugs:

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

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
checkConnection();
}

function checkConnection() {
var networkState = navigator.network.connection.type;

var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';

alert('Connection type: ' + states[networkState]);
}


Onething more making me irretating e.g. everytime It's showing network like 2G, 3G, or 4G.
Q1.Is there another way to alert the offline and online status?
Q2.Where I should use this script in Index.html? or Complaints.php?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I used this script for online and offline.
It doesn't handle status changes. It merely displays the value of navigator.network.connection.type
- Why shouldn't that be 2G, 3G or 4G?
- Did you copy that code from an old source, which was not updated since Cordova 2.3.0?

Q1.Is there another way to alert the offline and online status?
Well, when starting to use a plugin you don't know yet, you should first read the official plugin documentation and not simply copy code from any third party sources.
Then you would:
a) find the proper objects and methods/properties
b) find examples of how to get the current status and (more importantly) status changes.

Q2.Where I should use this script in Index.html? or Complaints.php?
By now, you should understand why javascript never goes in some PHP script. And since that code includes the callback for the deviceready event, you should have no doubt where it is to be placed.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-Actually i was trying from today morning, i was thinking that the script i am using may it's wrong therefore my static map not showing. then I copied this code from stackoverflow.
-Yes I got it.
Thank You
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
This is correct?

document.addEventListener("offline", onOffline, false);

function onOffline() {
alert("No Internet Access");

}
function onOnline() {
// Handle the online event
var networkState = navigator.connection.type;

if (networkState !== Connection.NONE) {


Petra what I do here? Or I can leave it empty, if i dont want to show any alert?

}

display('Connection type: ' + networkState);
}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You code there what you want to happen if the device gets back online again. You don't need to check the connection type there, because it's not relevant whether the user is online with 3G, 4G or Wifi....he is simply online and can send/receive data.

However, you should check the connection right after the app was launched, so you have an 'anchor point'. If that device is offline already when the app starts, what would you like to happen, then?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
1. Ok I will remove display connection type.....
2. If a user is already offline, i want when he launch the app, an instant msg show "Please check your Internet Connection" or "No Internet Access" before submitting the form, and when he is online no msg show.
My app have four options, three can use offline too e.g. share the app offline, call to employee, and help. But the post complain option they can't process without internet connection.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, how about:
- create a separate html page, nicely styled, with a message "You are currently offline - the app will continue automatically as soon as you have a connection"
- if the Complaint form is about to be shown, check the connection. If offline, show the new page, otherwise the Complaint form - if the Complaint form is being displayed, catch the online/offline event. If changed to offline, show the new page. If changed to online, go back to the previous page (which is the form)

Quite easy, right?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Quite easy, :) So, In this condition I must use javascript with Complaint_form.php?
Or I can handle these events at Index.html too?
-You want I use an HTML page instead of a dialog/alert box with a message.
-Should I catch online/offline events at Complaint page?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, In this condition I must use javascript with Complaint_form.php?
No, of course not. Your php scripts are not witin your assets, and javascript is not parsed and executed on your server.

You want I use an HTML page instead of a dialog/alert box with a message.
I would suggest that, yes. It looks better and can be handled easier, at least when the device is returning to online status

Should I catch online/offline events at Complaint page?
That would be the only logical place, yes. After all, only there the connection status is relevant, as you said.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

Your php scripts are not witin your assets, and javascript is not parsed and executed on your server.



It means I should not use javascript in Complaint.php page! But in this page i used some jave script for:
My Complaint.php page is divided in many sections:
1.Header
2.Form
3. Static Map Image
(I used here java script for static map)
4.Dynamic Picklist.
(I used here java script to fetch data from database)
5.Add Image.


Without javascript how i can do that two tasks?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It is about time you find out that you can't use PHP client-side for your app (unless you install a webserver on every device that the users are going to carry around).

Forget it.
No PHP in the app.
And no javascript in your PHP web service scripts.
See the first page of this thread, where I answered your question to Chris.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Yes Even at morning I read that message again.
Actually from beginning i was in a big confusion.
Because I read somewhere this:

xhttp.open("POST", "ajax_test.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

I thought I will use like this ajax calls.
-I didn't use php script anywhere in complaint.php, i am changing it's extension to complaint.html.
BUT Petra I have still confusion that how i will post data from html page to remote server.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That's correct. It's how you make ajax calls. But....since you appear to be using jQuery now, you should do this the jQuery way, not plain vanilla javascript.

That is: if you want to use ajax/xhr to post to your web service at all. Like I already said weeks ago, you have yet to decide whether you use that or rather the file-transfer plugin.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

jQuery Ajax Post Data Example

jQuery $.post() method is used to request data from a webpage and to display the returned result (sent from requested page) on to that webpage from where the request has been sent without page refresh.

$.post() method sends request along with some data using an HTTP POST request.

Under this, a request is send to a webpage (here it is jquery_post.php) from another page (say jquery_send.php) using syntax :
$.post( URL, data, callback);

In this way?
-Anytype of posting data e.g. jQuery or vanilla javascript, the file transfer plugin is necessary right?
I am new to ajax calls i can't decide petra, u just tell me which is better for me.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
In this way?
Yes

-Anytype of posting data e.g. jQuery or vanilla javascript, the file transfer plugin is necessary right?
No, it's either one

I am new to ajax calls i can't decide petra, u just tell me which is better for me.
Whatever you are more comfortable with, or whatever you would like to learn. One method is not better than the other one.
- If you want to learn about ajax/xhr together with jQuery and server side techniques, there are good beginner books available, such as
http://www.amazon.com/Learning-PHP-My...
http://www.amazon.com/AJAX-PHP-Buildi...
http://www.amazon.com/Head-First-Ajax...
- If you want to learn about the file-ransfer plgin, you'd probably want to study this
https://www.npmjs.com/package/cordova...
...and practice a lot, first.

In any case, you'd need a web service script at the server side which handles the requests and returns the proper data in case of success or error. Also, you would adapt the server script and database to your choice, because you'd most likely post the image as base64 data in the former, and as binary in the latter case.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-Should I rename Complaint.php to complaint.html, coz of javascript? But how about ajax calling time? what name I will use there?
-file transfer plugin i will use because i am sending base64 image files to server?
-U said either one? which one jQuery or vanilla javascript?
Ok Petra thank you to suggest me those links I will study but after. ajax calls is last step, so i want to fix old problems first!
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Should I rename Complaint.php to complaint.html, coz of javascript?
Is there any PHP in your file Complaint.php?
If so, then it has no business in your mobile app, regardless of the file extension.
If not, why was it named Complaint.php in the first place?

But how about ajax calling time? what name I will use there?
Are you asking me for the name of your web service script at server side? Or are you asking for the document name in which the ajax request is coded?

file transfer plugin i will use because i am sending base64 image files to server?
No, the file transfer plugin transfers files.

U said either one? which one jQuery or vanilla javascript?
No, I meant to say:
- pick either ajax post request or the file transfer plugin
- pick either vanilla javascript or jQuery (but don't mix as much as you're doing now)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

Is there any PHP in your file Complaint.php?
If so, then it has no business in your mobile app, regardless of the file extension.
If not, why was it named Complaint.php in the first place?

Here is a form for submission, thats y I named it Complaint.php. I will use post in this page therefore I used name Complaint.php.

Are you asking me for the name of your web service script at server side? Or are you asking for the document name in which the ajax request is coded?

I am asking here the URL, which file name with which extension.
$.post( URL, data, callback);



Petra, I still used javascript, Can I use now jQuery Mobile for posting data?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
$.post( URL, data, callback);
The URL would be your web service script, for instance:
var URL = "http://saba.com/api/appservice.php";

Petra, I still used javascript, Can I use now jQuery Mobile for posting data?
You could. If you want to use jQuery Mobile, you would work through this jQM Docs example:
http://demos.jquerymobile.com/1.2.0/d...
However, if you'd rather use jQuery instead, you'd use these docs:
http://api.jquery.com/jquery.ajax/
https://api.jquery.com/jquery.post/
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
appsservice.php
In this file which type script we will use?
Thanks for links :)
wanna ask:
Are u an employee of PGB Team?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Are u an employee of PGB Team?
No. They don't take bots as employee.

appsservice.php
In this file which type script we will use?
Can be either Python, Perl, or Ruby, Or something else, depending on what your server offers and what you are comfortable with.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
You are not bot Petra, i know.........................
-Perl,Ruby or Php also?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra I have created a offline page, see:

Kindly check the coding i am using is correct?

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {

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

I will handle it at complaint.html right?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Ok then where I should change this can u tell me, at above code?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No.
If I do that, the next thing you will ask me is "now, finish that ajax part for me, then finish the web service part for me and ....".
As a result, I would still be writing your app.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I am promising you I will ask just help, not complete coding after online/offline code. Really believe or not.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Almost a month ago, you wrote:
My App is near about to complete.
Only 20% left, can u please complete it?


So, no, I don't believe it.
You can't make promises like this, because you don't have a clear picture of what is still there ahead of you...all kinds of things that you will also need help with, because you won't be able to code it by yourself (or by copying and pasting all kinds of bits from everywhere).
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Yes I wrote, because I was totally unknown by app's tasks:
-Icons and splashes
-ipad status bar plugin
-network-information plugin
-check complaint status
-dialog boxes and alerts
-ajax calls and etc...................
and once I have said that I will complete this app in a weak, So I was really unknown, slightly I am learning Petra, I was wrong yeah.
If you don't believe, then don't.
I can't avoid your favors, you are not a bot. Sorry
I wish you could see how busy I m here, in small age handling my home with 12 hours duty,i am creating this app, If i was free, or If this was my profession, I could complete it soon.
This is very difficult to concentrate at two ways one your job, and your work apart from duty.
I am not asking for your pity, of course NOT.
By d way thanks alot to help me yet.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Respected Petra,
You always denied when i asked about code snippet.
Then i try myself to do, and ask for your help, Now i need your help.
I am using this javascript for complaint.html

var app = {
initialize: function () {

document.addEventListener("deviceready", app.onDeviceReady, false);
document.addEventListener("online", app.onOnline, false);
document.addEventListener("offline", app.onOffline, false);

}, onDeviceReady: function () {

}, onOnline: function(){

}, onOffline: function(){

window.location.href = "offline.html";

}
};

app.initialize();

and this is my offline page:

and this is script i am using to reload this page:

<script>
function myFunction() {
location.reload();
}
</script>

THe Offline.html page is showing when app going offline.
Now what I want:
I want when a user launch the app and open Post Complaint Option. If device is offline, this offline page appear with reload image, and when he open data, device come online and he reload the image this page goes hide/close.
So for this i will again check online/offline status at offline.html page?
Can we check network status in same app more than one time?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Several things to change or consider:

1. Because you are using jQuery and jQM, you shouldn't mess with window.location. Rather, use the change() method or the changePage() method (depending on which version of jQM you are using) to switch pages.

2. Why would you want to reload that 'offline' page? Just leave it on as long as the user is offline.

3. The online/offline events are fired as soon as the plugin detects a connection change. The respective callback is then executed immediately. So, there is no action required and you don't have to check the network status repeatedly.
See the network-informationplugin's documentation.

4. However, you need to check the network status once, before the form gets displayed. If the connection is off, you should immediately show the offline page, and not the form..
The 'online' event needs to be caught on the offline.html, and in its callback, you should change to the previous page.

5. Be aware that the eventListener will remain in effect, even if the user leaves the complaint form. If you want to prevent the online/offline from being fired when the user is not at the complaint form, make sure that you remove the eventListeners immediately.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thank You! Ok I will try as u said:
But I was scaring to use JQM because In the beginning when i start to develop this app, I was using JQuery Mobile with the help of dreamweaver. I saw that some plugins were not working with JQM. I asked to Sir Jesse, He said his apps (for camera and call number) not work on JQM.
So I again start to develop my app with no JQM.

So can u please clear me what is the matter of JQM with PGB?
Thats y I used javascript instead of JQM.
This was the version:

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No, Jesse wrote:

yes, my apps do not work with JQuery Mobile. I do not use JQuery Mobile. I can not help you with JQuery Mobile. My Apps are simple and intended only as demos (demonstration apps).

He didn't say that PGB apps generally don't work with jQM.
They do...I am using it myself.

You should, however, use a somewhat modern version. Version 1.0 is from Nov. 2011! And jQuery 1.6.4 is from Sept. 2011. You can't expect such old versions to support current code bases you copy and paste nowadays.

See
http://jquerymobile.com/download/
https://jquery.com/download/
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thanks to clear a big doubt. And also for helpful links.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Q1.U said jQM is 1.4.5 is the latest version. So I should use this?
Q2. So, We can create apps using pgb with HTML,Javascript, JQM, and CSS right?
Q3. This my CLI version. So can I use jQM is 1.4.5 version with it? or I should update CLI version?