[Answers] PhoneGap

Printable View

2015-06-29, 03:36
josipradnik

[Answers] PhoneGap

v1.4...

1. Complete integrated support for building and testing Lianja PhoneGap mobile Apps for phones and tablets.

You develop your Apps locally then see the changes instantly on your mobile device (iOS, Android and WinPhone). There is no need to re-sign, re-compile, or reinstall your app to test your code as Lianja App Builder integrates in with the Adobe Developer App which is a free download for iOS (Apple App Store), Android (Google Play) and Windows Phone (Windows Phone App Store).

Running the Adobe Developer App on your mobile device and entering the IP address of the machine that Lianja App Builder is running on, you will see your app on the mobile device changing dynamically as you develop it visually in Lianja.
There is no need to install any SDK or other software (everything is included in Lianja APaaS Developer) and you can develop and test iOS, Android and WinPhone Apps on any of the operating systems that Lianja APaaS Developer runs on.

Additionally, as you change the visual appearance and/or code of your App in the Lianja App Builder, the mobile app will instantly show your latest changes. With access to device APIs not available in web browsers, you don't have to sacrifice the confidence that your app will work as you intended on the devices you are targeting.

2. Integration with the Adobe PhoneGap build service (in the "Project" and "Deploy" workspaces) to package up mobile apps, upload them to the build service and build installable Android and iOS Apps that can be submitted to the Apple App Store and Google Play.

Building PhoneGap Mobile Apps from a Project
Apache Cordova provides APIs and packaging tools for creating mobile Apps for Android and iOS devices.

PhoneGap is built on top of Cordova. PhoneGap provides a remote building interface at Adobe PhoneGap Build that lets you package an App in the cloud. If you select the "Adobe PhoneGap Build Service" Tab you can register with Adobe to use the Adobe PhoneGap Build service.

While PhoneGap makes it easy to package up an App, you still need a certificate and an AppID for each platform for the market in which you want to distribute your app, such as for Google Play or the Apple App Store.
The PhoneGap Build service requires an application to be packaged in a specific manner and only requires the assets of your application.
Lianja App Builder will soon integrate tools to simplify working with PhoneGap and for packaging up and building Apps that can be submitted to the various App stores.

You create a project, specify the settings for "PhoneGap", "Android" and/or "iOS" then in the "Deploy" workspace you "Build PhoneGap App" after selecting your project from the "Deploy" workpace files tree.
All of the information needed for using the Adobe PhoneGap build service can be specified in the "PhoneGap Build Settings" Tab.
When building a Mobile App, Lianja App Builder will create a directory which contains your html, css, images, js files, etc. in:

Quote:

x:\lianja\mobileapps\platform\ (Windows)
/opt/lianja/mobileapps/platform (linux)
/Users/yourusername/Library/Application Support/Lianja/mobileapps/platform (Mac)

for each device you select to build an App for. It will then create the necessary .zip file which matches the name of the project and upload this to the Adobe PhoneGap Build service for you and request the build.
So for example if you are creating an android App from a project on windows and the project name is myapp then this file will be created and uploaded.
c:\lianja\mobileapps\platform\android\myapp\myapp. zip
Similarly if you are creating an iOS App from a project on windows and the project name is myapp then this file will be created and uploaded.
c:\lianja\mobileapps\platform\ios\myapp\myapp.zip
The c:\lianja\mobileapps\platform\device\myapp\ directory will contain the PhoneGap assets needed to create the .zip file (where device is android, ios or windows).
After the build completes, you will be notified by email when the builds are ready for download.
Note that the functionality for building PhoneGap mobile Apps using the Adobe PhoneGap Build Service will be made available in Lianja App Builder v1.4 NOT in v1.3.

All topics in [Answers] alphabetically:http://www.lianja.com/community/show...ll=1#post12352
2016-01-12, 02:51
josipradnik

The two main features in v2.0 for mobile app developers are:

1. PhoneGap Live App View

and

2. PhoneGap cloud build

I've had several people ask me about PhoneGap building of Apps. Here are some of the questions:

Question 1: If I build a Lianja mobile App and use the PhoneGap build cloud service can I still use WebView sections and populate them dynamically by referencing a .rsp or .jssp page on a remote Lianja Cloud Server.

Answer: Yes. A WebView is a standard built-in section that can be generated dynamically.

Question 2: Can that WebView section contain my own UI components that I build out of third party components?

Answer: Yes of course. When a WebView is loaded it also has access to the Lianja system object globally within the browser tab or the mobile App instance. This lets you manipulate other parts of the UI in your App.

Question 3: If I use PhoneGap do I have any access to the camera?

Answer: Yes, that's the whole point of PhoneGap. It provides a layer of abstraction above the device platform (iOS or Android) so that you can build cross platform Apps.

Question 4: What is the advantage of using Lianja for building a PhoneGap App rather than hand coding it all myself.

Answer: Lianja is a platform. It provides a client side framework and server side data connectivity as well as the ability to generate dynamic content on the server that is injected into the client app at runtime.
All CRUD operations are handled automatically for you as well as image/photo uploads and document editing.
And let's not forget the UI navigation which is all embedded within the mobile app. In summary, Lianja is a complete platform for building business Apps.

When building a PhoneGap mobile App in Lianja you build a database-oriented business App that you submit to the Apple App Store or Google Play.

The mobile App runs on your phone or tablet. It connects to a remote Lianja Cloud Server to access data, generate dynamic webview content and run business procedures on the server.

You can build mobile apps that require no authentication and run as a guest user or require the user to authenticate (login) first.

If you check the "Login required" attribute in the App Settings, Lianja looks for a page in the App which is a "Login Page" (new attribute in the Page Settings).

This becomes the first page to be made visible when you run the App on a mobile device. If no "Login Page" is found then Lianja will create a default one for you that you use to sign in.

Once authenticated, the "Initial Page" (as defined in the App Settings) is made visible. To logout and return to the "Login Page" touch the "Home" icon in the page headerbar.

ability to build native PhoneGap mobile apps for iOS, Android and WinPhone.

PhoneGap LiveView all working as expected now.
Clearly this saves a lot of time as you do not need to build your app using the adobe PhoneGap build service every time you make a small change.
All you need to do is build your mobile App using best practices, click the "Phone App View" icon in the page header bar then click the "LiveView" icon in the "Phone App View".
You can then run the "PhoneGap Developer App" (which is a free download from the various app stores) and test your Mobile App live on a Phone or Tablet.

Bear in mind that the PhoneGap developer app that you download and install from the app store (Google Play or Apple App store) only includes the core plugins, so if you need anything above and beyond them you will still need to build using the PhoneGap build service and install on your mobile device. For most common business Apps the core plugins should be sufficient but the "PhoneGap" workspace does provide the ability to specify custom plugins if you need them.

Apps in that project. Open them one a time then select "Phone App View" and in that "LiveView" and you can run them on your mobile devices without needing to build in PhoneGap Build (PGP).

You build Native Mobile Apps in the "PhoneGap" workspace.

When building an App you can configure all the plugins and preferences for PhoneGap in that workspace.

For those interested the packaging of PhoneGap apps that are uploaded to Adobe PhoneGap Build is performed by firstly copying a template directory structure in the mobileapps\apps\appname\platform directory.

The template files can be found in:

Quote:

c:\lianja\mobileapps\templates\ios\phone\www
c:\lianja\mobileapps\templates\ios\tablet\www
c:\lianja\mobileapps\templates\android\phone\www
c:\lianja\mobileapps\templates\android\tablet\www

If you so desire you can customize these template files to add your own splash screens, setup your own config.xml defaults etc.

We've attempted to to do all of the heavy lifting for you. So, you should just design your mobile apps visually as you do desktop apps using the Lianja App Builder visual development tools.

Tip: To be able to debug mobile apps don't forget to enable "Debug" in the App settings.
When in release mode Lianja will automatically minify the JavaScript components and disable debugging in the App that is generated by the Phonegap Build Service.

customizing the login page for mobile Apps you can customize it yourself.
The default HTML for the login page that is embedded into a mobile App that requires authentication can be found at:
c:\library\mobilelogin\login_phone.html
and
c:\library\mobilelogin\login_tablet.html
If login_phone.html (phones) or login_tablet.html (tablets) exists in the App being built then this will be used rather than the default login page. Look at the defaults to see how authentication is achieved.

Tip: To slide in a DialogPanel from the left set the width argument as a negative number e.g. -500. Positive slides in from the right. On a phone, DialogPanels slide across the whole of the viewport (responsive UI).
Also note that on a phone a popup dialog will automatically slide in as a DialogPanel due to space limitations.

The data type of a field or grid column is auto detected and when you edit on a mobile device (phone or tablet) the native iOS or Android "pickers" for dates, date times, and choice lists are automatically used for data input.
Also note that in Lianja 2.0 editing grid rows is a much better experience as a DialogPanel will slide in from the right which contains a form to edit the current row in the grid. In Web apps you just need to double click on a row. In mobile apps just touch the row then touch the "Edit" button in the header of the grid.

All topics in [Answers] alphabetically:http://www.lianja.com/community/show...ll=1#post12352
2016-01-12, 03:04
josipradnik

a quick start guide to developing a Mobile App in Lianja v2.0.

#1: Create a new project. This will contain all the images and other resources your mobile app uses.
#2: Create a new App or add an existing mobile app to the project.
#3: Check the "Login required" attribute in the App Settings.
#4: Subscribe to the Adobe PhoneGap Build Service if you have not already done so.
#5. Build your mobile App in the "PhoneGap" workspace.
#6: Using a free QR Code Reader (which you can download from the app stores) install your Lianja mobile app on your mobile device.

http://www.lianja.com/community/atta...4&d=1439039901

Touch your App icon on the phone (or tablet).
When the App loads you will see a splash screen (configurable in the PhoneGap workspace settings),
then the login page will be displayed.
Note that the baseurl specified in the PhoneGap workspace settings determines the location of your Lianja Cloud Server.
By default during development, if this is not specified your development machine Cloud Server will be used.

http://www.lianja.com/community/atta...5&d=1439039940

This authentication page is configurable by setting "Mobile configuration" attributes in the "App settings" dialog.
The icon, title, subtitle and background image can all be configured by app settings attributes.

Alternatively, there is a new page attribute "Login page". You can design your own authentication page which will be used rather than the default one.

Specify your "User ID" and the "Password" then touch "Sign In".
The "Initial page" as specified in the App Settings dialog will be displayed.
Note that you can specify individual transitions for each page in your App e.g. slide, flip etc.

http://www.lianja.com/community/atta...6&d=1439041037

Touching the "Hamburger" menu in the top right will slide in the "Page Navigation" menu , allowing you to switch between pages.

http://www.lianja.com/community/atta...7&d=1439041285

http://www.lianja.com/community/atta...8&d=1439041306

You can visually develop your mobile app iteratively and rebuild it from Step #5 above.
2016-12-30, 04:35
josipradnik
Q:
I can't get mobile apps to connect to my server once built with phonegap! It's happening both on my own app and the Lianja Mobile Demo.
The weird thing is, there's nothing wrong with the server since I can run the apps fine as web apps.
If I put the IP of my server into the web browser I can access my apps and it works fine, but I can't seem to get them to connect to the server as actual apps on my phone built with phonegap. I put the base URL in the phonegap settings as 192.168.0.4:8001, is there any more to it than that? 192.168.0.4 being the internal IP of my dev machine with an instance of the cloud server running on it, of course.

I believe I've confirmed that the problem is in the connection with the server. I've spent the first half of the day debugging the mobile apps via chrome (following the steps at https://www.lianja.com/resources/blo...ps-with-chrome) and when my app calls Lianja.evaluate() in its init delegate the evaluate fails. Going through the calling functions to the error being thrown, it appears that no data is ever returned to the client from the call that evaluates the function on the server (the function is valid and always returns at least something). The Lianja Mobile Demo on the other hand breaks on attempting the GET calls to load the tables saying page not found. Also login functionality is broken in both apps.

Finally, when I look at the server logs, it doesn't mention anything about a client connecting during the time I was running the mobile apps. They only mention a few things that seem to be server setup, then say "waiting for client connection on port 8001". The only time it mentioned any requests was when I ran the apps in my browser instead.

Since the apps connect to the server in a browser but not as a built phonegap app, I believe I've done something wrong in my deployment. Is there anything extra that you need to do to get a phonegap app to connect to a cloud server apart from setting the base URL?
A:
When you say they work in the browser - do you mean from the browser on the same phone?
Also, for the Base URL in the App Options for the PhoneGap Build, did you put the full URL?
http://192.168.0.4:8001
Putting http:// at the start of the URL worked

Building Lianja Mobile business database Apps
We have also started a troubleshooter for unexpected error message in the PhoneGap Build log (e.g. ones that you can't fix by correcting your Account Credentials).
Check the PhoneGap Build Troubleshooter for ones we have encountered and their solutions.

Q:
I'm trying to test a mobile application and can't get the LiveView working. I get the server failed to start error no matter the mobile platform I attempt to use. I followed the steps at https://www.lianja.com/resources/blo...-database-apps to set it up.
I have a phonegap account, set up an encryption key for android, etc etc. It works on one of our computers and not the other and we can't work out what we did differently!
A:
There is nothing to set as such.
When you install APaaS Developer it will install node.js and the phonegap modules. It then uses these to build the app.

"Live View" does not build the app using phonegap build it creates the necessary directory structure and files required and then runs "phonegap serve" in the required directory.

If the server failed to start you can test it manually by cd to the required directory in a command window and issue phonegap serve.

It may be a firewall issue on your machine or something else is using the port required (see the phonegap develop app on your mobile device it will tell you).
During the install everything you need is installed and setup for you.

The phonegap API to work with the adobe phonegap build service is installed silently after node.js is installed (which it uses).

This is installed using:

Quote:

npm install phonegap -g

It is possible your installation did not complete properly due to an unstable internet connection at the time.

Q:
I'm confused about how a phone app interacts with a cloud server. How do I access data on a Lianja cloud server from a mobile app (for that matter how do I access it with a desktop app)?
I know how to run a web app on a cloud server and access it via a web browser, is there a way to just run a database on the server without an app? Does the associated database get packaged with the mobile app for local access or is it supposed to access it remotely?
A:
If you build a mobile app using best practices and standard sections the data is automatically bound for you. It is a seamless SPA interacting with the database under the control of the cloud server.

If everything is data bound and validation is handled by remote procedure calls for you, and... you can dynamically create HTML5 content into webview sections in what other way are you wanting to access data on the server? You have Lianja.evaluate() and Lianja.evaluateJavaScript() as well as a lot of built-in OData functionality.
A lot of information regarding OData access if you MUST access data programmatically. In most cases you should not need to.

- You deploy your app and its database.
- You specify the mobile app settings in the project settings for phonegap
- You build your mobile app
- In there while testing, it will inject a reference to your local machine and access the cloud server using port 8001
- After you have fully tested everything you change that URL to point at your cloud server production installation

There are example mobile apps included that you can study and install on your mobile devices.
Mobile Apps are regular client/server apps with the UI on the mobile device and the database on a remote server under the control of the cloud server.

Q:
I've deployed a quick draft of my mobile app to test ui elements but when I run the app on my phone I can't get past the login screen.
An incorrect username/password makes the phone vibrate, a "correct" one just clears the text fields and leaves you on that page.
Is there a setting somewhere I need to change to tell the app what to do once authenticated?

I put "correct" in quotes because admin/admin works, but I've changed admin's password in the app builder. Also curiously and perhaps related, the only login that works on my desktop app center is admin/admin, even though that password should be incorrect and I've set up other users.
I've tried turning off "require login" in the app settings but it still starts with the login page.
A:
Are you running in live view or loading the app onto the phone after building with adobe phonegap build service?
Are you running in a VM or on a bare metal PC?
Have you relaxed your firewall to enable port 8001?
Q2:
I've loaded the app onto my Android phone after building it with Phonegap. The server is on the same machine as the app builder, a bare metal Windows PC.
I couldn't work out how to open a specific port on my firewall so I just turned it off and the same thing still happens.
A2:
Have you deployed the database?
Is the cloud server running?
The way this works for testing is...

- Your router allocates IP addresses using DHCP.
- When generating the code for the mobile app Lianja will look at the IP address allocated to your machine and that is how it connects to the cloud server.

Does this still occur when you build one of the example mobile apps?

You need to follow the guide for debugging android and look in the console on your android device to see what errors are occurring.

So just to clarify... Your android device needs to be connected into the same wifi network as your PC when testing like this.
Re the users you have created or modified, these need to be deployed to be accessible in the Lianja App Center and Lianja Cloud Server.

Q:
I have a problem when starting the PhoneGap Developer on the iPhone.

I wanted to test the Lianja ModileApp Demo.
I start hte iOS Liveview and on the screen on my Desktop Computer all is fine.

But in the iPhone :
He ist connecting and downloading and extraction the app and shows me all static fields like labels but no data.
After a while I get a "Server Connection lost" The Server faild to respond message on my iPhone.
I run Lianja in my companies network and the iPhone is connected with WLAN to our WLAN router.
A:
Your wi-fi connection has to be on the same network as the App Builder.
Make sure that you have enabled port 8001 on your firewall and also that you have deployed the database you are using. If this is southwind it will already be deployed.
Q2:
just disable Windows 7 firewall, and now it works
Okay, made a rule in Windows firewall to open port 8001, and now everything works just fine.
Except....it's kinda slow. Navigation between individual customers is roughly 3 seconds. Barry, is this normal with PhoneGap?
A2:
Performance depends on your device, your wifi network, your development machine resources, and finally the app.
Why have you enabled port forwarding when using the Adobe PhoneGap developer app? That's just for testing. If you are accessing via the IP address that you are asked to use this should just work.
Just to reiterate. Live view is just used during development. You have to build the app using the PhoneGap build service.
Q3:
Disabled the port forwarding on the router, leaving just the Windows firewall rule for allowing port 8001, and everything still works great.
As for the speed issue, I was using an iPhone 4. Switched to an iPad, and the speed is MUCH better.
A3:
Ah, an iPhone 4. Not exactly a speed machine. It depends what version of iOS you have on it too. In the earlier versions apple purposely slowed down JavaScript.

Q:
I checked example_webapp4 and once again I can see the PhoneApp View on my computer but when I run the phonegap liveview it does not load on the phone or tablet "Alert Unable to download archive from the server. Unable to properly connect to the server"
When I open the Lianja Server Manager it says "Max Connections 0" which I think may be the issue. It seems to be a Server problem rather than an App Builder problem.
A:
Try disabling your firewall and restart the server. That is the most common resolution.
And just to clarify, the live view uses PhoneGap and node.js. The Lianja server is used for data access in this case so you would see your app even if it was not running. So as I mentioned open up your firewall to verify then enable it and the port you are asked to connect to for the live view.

When you run "Live View" to view a mobile App on your Phone or Tablet a PhoneGap server is started which will serve the files to the adobe PhoneGap Developer App.

Lianja needs to start and stop this server as it needs to be running in the correct directory for a iOS/Android Phone or Tablet.

To accomplish this it runs a small cmd file which you can find in the lianja\bin directory called phonegap_server_stop.cmd .
If you need to customize this thats the file you need to edit.

The login page that is embedded into a Lianja PhoneGap App for phones and tablets can be customized and branded,

Quote:

The default page for a phone is in c:\lianja\library\mobilelogin\login_phone.html

and

Quote:

The default page for a tablet is in c:\lianja\library\mobilelogin\login_phone.html

If these files exist in the app directory then they are used instead, so just copy the required file into the app directory and customize it.

Most of the PhoneGap configuration is setup for you when Lianja generates the files needed for PhoneGap Build.

If you need to customize the config.xml for PhoneGap above and beyond what can be done through the UI you can do so.
When code generating for PhoneGap and packaging up the PhoneGap files into a zip file that is uploaded to the PhoneGap Build Service for you, Lianja uses "template" files that can be customized if required.

These template files reside in:

Quote:

c:\lianja\mobileapps\templates\android\phone
c:\lianja\mobileapps\templates\android\tablet

and

Quote:

c:\lianja\mobileapps\templates\ios\phone
c:\lianja\mobileapps\templates\ios\tablet

Q:
I have problem about debugging in Python. When I click Open file in debugger, it says: "You cannot run the debugger on this type of file."
It is possible to debug in python?
A:
No the debugger is for Lianja/VFP code only.

PhoneGap Apps built in Lianja can now optionally use CrossWalk to improve performance up to 10x from the standard Android and iOS WebViews. Other than a performance improvement, CrossWalk also provides a consistent UI on all supported versions of Android and your apps are unaffected by Android updates that could break something. Crosswalk optimization is optional but recommended on both Android and iOS.

I use gapdebug to debug my iOS and Android PhoneGap Apps as I build them in Lianja.
It is free and you can download it from:
https://www.genuitec.com/products/gapdebug/

Alternatively you can use Google Chrome.
Fire it up and goto this page:
chrome://inspect/#devices

Magic.

The order of installing Lianja and MS Visual Studio does matter.
It seams that MS Visual Studio installed its own node.js and prevented Lianja's correct installation of node.js component.
1. CLEAN uninstalled MS Visual Studio (without Control Panel) according this link https://helloacm.com/clean-uninstall...unity-version/
2. uninstalled Lianja (in Control Panel)
3. installed Lianja again (checked: PhoneGap LiveView Server starts ok)
4. installed MS Visual Studio again. Now PhoneGap LiveView Server starts ok.
Advice:
If you need to have Lianja and Visual Studio on the same machine, and want to develop mobile apps in Lianja with PhoneGap: install Lianja first, then MS VIsual Studio.

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...p?2717-Answers
2017-12-21, 02:27
josipradnik

A bug in the Adobe PhoneGap phone-gapcli v7.1.0 was causing the PhoneGap LiveView Server in Lianja Phone/Tablet App Views to fail to start.

https://www.lianja.com/community/att...6&d=1509445197

This has been fixed in phonegap v7.1.1.
To check whether you are running phonegap v7.1.0, issue the following command in Windows command window/powershell, Linux/macOS terminal:

Code:

phonegap -v

To upgrade to the latest phonegap version (at time of writing v7.1.1):

Code:

npm install -g phonegap

To upgrade specifically to v7.1.1:

Code:

npm install -g phonegap@7.1.1

All topics in [Answers] alphabetically: https://www.lianja.com/community/sho...ll=1#post13748

These answers are also systematized on the site "Lianja developer": https://lianjadeveloper.wordpress.co...gory/phonegap/