This topic is locked

Create a Web APP with version 10.1

6/17/2019 1:08:51 PM
PHPRunner Tips and Tricks
fhumanes author

In this article I intend to explain how a Web APP application could be developed with the PHPrunner tool.
What is a Web APP application?
It is simply a web application that at Windows or Android level will be observed as if it were an application APP (Android) or Application (Windows).

All those who write native applications APP (Android or IOS) will tell you that it is an aberration and I am "almost" in agreement. With PHPrunner it is easy to make a web application and it is impossible to make a native APP. Also, it is increasingly common to have applications for multiple devices and do something compatible with almost everything is very complex, so if functionally this solution "meets" the requirements can be a solution.
Difference between APP with embedded web application or this solution.
It is very simple, at least on Android, to make an APP that internally has a browser and that a web application runs within that browser. Know that this is possible and that I explain it in this article http://fhumanes.com/blog/otros-ejemplos/crear-una-app-android-sin-programacion/. Why is not the "solution"? Well it is not the general solution since there are certain interface events that do not work in that browser (for example click on a record or in a field). This makes the type of application that can run with this solution simpler and does not meet all the requirements.
We go to the work of creating an easy to understand example.
The principle that we have to take into account is explained in this article http://fhumanes.com/blog/otros-ejemplos/una-forma-de-ver-las-aplicaciones-web-como-si-fuesen-app/ but let's specify what other requirements we are going to put.
Functionally, the application is the management of a shopping list. We point out what you have to buy and when we buy it, we manage the purchase.
The requirements that we want the application to have are:

  • Users will be able to self-register and create the groups of people that will participate in the shopping list.
  • These users may belong or manage the purchase of several groups. The users themselves will manage who belongs to the group.
  • Each group has its catalog of products to buy. It is the group members who make this catalog.
  • In the product you will be able to put an image or photo. Ideal functionality for when working on the phone.
  • The solution must work on Windows and on any other device that has an HTML5 browser, preferably Chrome.
  • The purchase or information management that is purchased will be done with a single click in the "purchased?" Field.
  • There will be at least 3 lists. Pending to buy, what we have bought today and what we have bought in other occasions. Pass the products to buy from one list to another must be done with a click.
  • We want the application to be attractive, for them in certain pages a background image will be put.


Data model
I intend it to be a didactic example and for this it is essential that it be a simple data model.




Aspects that design that I had to take into account

  • On the identification page you must have access to the instructions for use of the application, that is why I have had to include the "Menu" page on the "Login" page.

    This is the aspect of the application running on Windows outside of the browser.



Functionally, it has been programmed:


(1) Point that by clicking on it you define that you have purchased or that you need to buy again.

(2) Clicking on any part of the record goes to consult the data of that product.

(3) The photo can be enlarged by clicking on it. On small screens, this field does not appear. You can always see the photo in the product consultation.

(4) The 3 flaps that there are informing what is pending to buy, what we have bought today and what has been bought any day before today. To make the list of what to buy, if they are products that are always bought, all you have to do is "un-buy" from the tab "C. All".
Modifications to the background image on certain pages
These changes have been made at the "Custom CSS" level.

body.function-login {

height:100%;

background:transparent url("/compra/mis_imagenes/lista_compra4.png") no-repeat center center fixed;

background-size:cover;

}

body.function-menu {

height:100%;

background:transparent url("/compra/mis_imagenes/lista_compra4.png") no-repeat center center fixed;

background-size:cover;

}


Customize to define as APP Web
To work on version 10.1, which does not change the template of the pages globally (as version 9.8 did), I have done:


$customjscript = <<<EOT

<script type="text/javascript">

$(window).load(function () {

$('head').append('<meta name="mobile-web-app-capable" content="yes" />');

$('head').append('<link rel="manifest" href="manifest.json" />');

$('head').append('<link href="mis_imagenes/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />');

});

</script>

EOT;


And to include it in all the pages:


I think that in version 10.2 you will be able to do this much more easily.
I also leave you in the file "manifest.json" with the configured data.

{

"short_name": "ListaCompra",

"name": "Lista de la Compra",

"icons": [

{

"src": "mis_imagenes/favicon-1x.png",

"type": "image/png",

"sizes": "48x48"

},

{

"src": "mis_imagenes/favicon-2x.png",

"type": "image/png",

"sizes": "96x96"

},

{

"src": "mis_imagenes/favicon-4x.png",

"type": "image/png",

"sizes": "192x192"

}

],

"start_url": "index.html",

"display": "standalone",

"orientation": "portrait"

}


Installing the application as APP
I show you the operating screens in Windows, but in the same way it works in Android and IOS.




I leave the source code in PHPrunner version 10.1, a copy of the Database and a link so you can try it before deciding to install it on your PC's.

https://fhumanes.com/blog/otros-ejemplos/crear-una-app-web/
You can access and try the application at: https://fhumanes.com/compra/
For any questions or explanation, please contact me at my email [email="fernandohumanes@gmail.com"]fernandohumanes@gmail.com[/email]