Server connect on Android

Mobile Apps
#1

Trying to get an Android build working with data from a server connect action and coming up short.

I can see dynamic data within the editor.

I can see dynamic data within the iOS simulator.

I can see the app within the Android simulator.

But I cannot get any data to be shown in Android.

Only debug error I can see (but doesn’t seem relevant) is:

D/SystemWebChromeClient: file:///android_asset/www/js/index.js: Line 36 : Uncaught TypeError: Cannot read property ‘querySelector’ of null
I/chromium: [INFO:CONSOLE(36)] “Uncaught TypeError: Cannot read property ‘querySelector’ of null”, source: file:///android_asset/www/js/index.js (36)

The entire page in question is:

<!-- Wappler include framework7_4="local" is="dmx-app" id="orders" appConnect="local" cordova="local" -->


<div class="page" data-name="orders">


	<div class="navbar">
		<div class="navbar-inner">
			<div class="left">
				<a href="#" class="link back">Back</a>
			</div>
			<div class="title">Orders</div>
		</div>
	</div>
	<div class="page-content">
		<h1>Orders Page</h1>

		<div class="list">
			<ul is="dmx-repeat" id="repeat1" dmx-bind:repeat="serverconnect2.data.each_project">
				<li dmx-text="project_name">
					<a href="#" class="item-link list-button">List Button</a>
				</li>

			</ul>
		</div>
	</div>
</div>

And the server connect actions are on the main view of index.html. Again this works in editor and in iOS simulator.

Ideas?

#2

You’ll need to deploy the Server Connect side to a remote host as Android has no PHP processing capabilities within its platform. Then select this source from your Projects as the data service API (of sorts). This is the reason for using two Projects for Android development. I’m not sure about Framework 7 but again being Android you will need to adjust your Content Security Policy within each document you plan to use in your Android App so Android has permission to access the remote content for Server Connect Actions etc. Security Provider will not work for protecting pages as it requires .php and does not work with .html files (which are necessary within Android). You can use the back-end to process PHP but the front-end of an Android Application has no capacity to do so. Thus you can use Security Restrict and Login etc, as long as they are being run on the host and not the application itself.

Hope that helps Ken.

#3

Hmmm. This is already pointing to an existing web project for server connect side. I’ve also removed the security for now which has gotten me this far. All good in editor and iOS.

#4

Do your Server Connect Actions (within the page, either body or head depending on your App root) contain:

site="example.com"

Example.com being the url of the Server Connect Actions location on the host?

#5

I’ll have to look at that later. I know the server connect is pointing to the FQD but a site param is new to me. Thanks for that tip.

#6 
<!--Security Policy-->

<meta http-equiv="X-Content-Security-Policy" content="img-src 'self' data:; default-src 'self' 'unsafe-inline'; https://example.com/*/ https://*/ https://example.com/*/ script-src 'self' 'unsafe-eval'; object-src 'self';">

There is a pretty open CSP which depending on your requirements may need a little tweaking for security but as is should allow you to connect to any source. Add to the head of the document and replace example.com with your domain.

1 Like
#7

You need that site param/definer so you can select bindings from the remote source/Project. Without it Bindings will not be available under the Data selector. Sat there for hours figuring this out as it was not added to new Projects by default. I did raise a Bug report but no idea if it was resolved or not?

I found the request (for remote form actions which may well be causing your hassles) but the Bug report is AWOL…

1 Like
#8

Thanks Dave. You’ve given me something to look at when I’m back at the desk.

1 Like
#9

Nice to help Ken. I see you helping so many people it is nice to do so in return. My pleasure.

1 Like
#10

Together with the Wappler boys, we’re gonna get it solid for mobile… right @George? :slightly_smiling_face:

2 Likes
#11

The tools are all there in the toolbox that is Wappler. Just a few are misplaced like the occasional 12mm socket. You know you have it somewhere but where… :slight_smile:

1 Like
#12

Been there, misplaced that. Literally just bought a new set of metrics! :grin:

1 Like
#13

Also if you have config.xml you may wish to amend/add (example.com being your domain):

<access origin="*"/>
<access origin="https://example.com"/>

And in package.json:

"devDependencies": {
"cordova-plugin-whitelist": "1"

},
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {}
},

Sorry won’t allow me to paste it but can make it out OK?

1 Like
#14

Okay found the solution.

I tried Dave’s suggestions:

  1. site= modification. This actually drives the dynamic picker and once I changed it, it broke that picker as it could no longer find the project.

  2. Security policy. Didn’t seem to have an impact.

What I finally noticed is that when the server action is selected by browsing to another project, it set the protocol to http, instead of https. I manually changed the server connect actions to https and voila.

So, @George is this something that could be a place for improvement for future users?

1 Like
#15

The http or https setting in the url of the project depends on how have defined the project and its Web URL in the settings. It’s just picked from there.

Other issues with the server connect picker - if you still have them file a separate issue.

2 Likes
#16

#WhenYouCauseYourOwnProblems

:man_facepalming:

Thanks @George :slight_smile:

1 Like