FEAT: serve the client-side JavaScript at /51Degrees.core.js

fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py

@@ -145,6 +145,36 @@ def jsonroute():
 
         return json.dumps(flowdata.jsonbundler.json)
 
+    # Next we serve the client-side JavaScript from its own route. The other
+    # Pipeline APIs ship a web integration that intercepts '/51Degrees.core.js'
+    # for this, so the page can reference the script by that name. There is no
+    # such integration for Flask, so the example wires up the route itself.
+
+    @staticmethod
+    @app.route('/51Degrees.core.js')
+    def core_js():
+
+        # Create the flowdata object for the JavaScript route
+        flowdata = GettingStartedWeb.pipeline.create_flowdata()
+
+        # Add any information from the request (headers, cookies and additional
+        # client side provided information). Query parameters are included, so
+        # the per-request 'fod-js-enable-cookies' override is picked up here and
+        # applied by the JavaScriptBuilder engine.
+
+        flowdata.evidence.add_from_dict(webevidence(request))
+
+        # Process the flowdata
+
+        flowdata.process()
+
+        # Return the JavaScript from the JavaScriptBuilder engine
+
+        response = make_response(flowdata.javascriptbuilder.javascript)
+        response.headers["Content-Type"] = "application/x-javascript"
+
+        return response
+
     # In the main route we dynamically update the screen's device property display
     # using the above JSON route
 

fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html

@@ -131,6 +131,9 @@ <h3 class="c-eg-page__heading">Device data</h3>
                 <tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Browser Version:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "browserversion") }}</td></tr>
                 <tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Screen width (pixels):</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "screenpixelswidth") }}</td></tr>
                 <tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Screen height (pixels):</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "screenpixelsheight") }}</td></tr>
+                {# The device id identifies the matched hardware, platform and browser profiles,
+                   so it is the compact form of everything else in this table. #}
+                <tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Device Id:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "deviceid") }}</td></tr>
             </tbody>
         </table>
 
@@ -153,18 +156,13 @@ <h3 class="c-eg-page__heading">Client-side evidence and Apple models</h3>
 </div>
 
 {#
-    This script is constructed by the fiftyone_pipeline_core package.
-    It adds a JavaScript include for 51Degrees.core.js.
-    The 51Degrees pipeline will dynamically generate JavaScript, which includes a
-    JSON representation of the contents of flow data, i.e. the results from device detection.
-    That script raises the 'complete' event with the refined flow data. The shared
-    examples.js helper subscribes to it and appends a results table into #content.
+    51Degrees.core.js is built by the fiftyone_pipeline_core package and served by the
+    matching route in app.py. It includes a JSON representation of the contents of flow
+    data, i.e. the results from device detection, and raises the 'complete' event with the
+    refined flow data. The shared examples.js helper subscribes to it and appends a results
+    table into #content.
 #}
-{% autoescape false %}
-<script>
-{{ data.javascriptbuilder.javascript }}
-</script>
-{% endautoescape %}
+<script src="/51Degrees.core.js"></script>
 
 <script src="{{ url_for('static', filename='js/examples.min.js') }}"></script>
 <script>

fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py

@@ -21,12 +21,18 @@
 # *********************************************************************
 
 import flask_unittest
+import re
 import unittest
 from fiftyone_pipeline_core.logger import Logger
 from fiftyone_devicedetection_examples.example_utils import ExampleUtils
 from fiftyone_devicedetection_examples.cloud.gettingstarted_web.app import GettingStartedWeb
 
 class CloudGettingStartedWebTests(flask_unittest.ClientTestCase):
+    # The test client sends no User-Agent of its own, so supply one that detection can
+    # resolve to a hardware profile.
+    CHROME_USER_AGENT = ("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+        "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
+
     # Assign the `Flask` app object
     resource_key = ExampleUtils.get_resource_key()
     logger = Logger()
@@ -35,3 +41,23 @@ class CloudGettingStartedWebTests(flask_unittest.ClientTestCase):
     def test_cloud_getting_started_web(self, client):
         response = client.get('/')
         self.assertEqual(200, response.status_code)
+
+    # The device id used to appear on the page only by accident, inside the JSON of the
+    # inlined client-side script. Now that the script is served separately, check that the
+    # page renders a real one of its own, and that detection actually found a profile
+    # rather than returning the all-zero id.
+    def test_cloud_getting_started_web_device_id(self, client):
+        response = client.get('/', headers={"User-Agent": self.CHROME_USER_AGENT})
+        self.assertEqual(200, response.status_code)
+        device_ids = re.findall(r"\d+-\d+-\d+-\d+", response.get_data(as_text=True))
+        self.assertTrue(device_ids, "No device id was rendered on the page")
+        self.assertNotIn("0-0-0-0", device_ids)
+
+    # The page references the client-side script by the '/51Degrees.core.js' name used
+    # by the web integrations in the other Pipeline APIs, so check that the route
+    # returns the bundle rather than, for example, falling through to the page.
+    def test_cloud_getting_started_web_core_js(self, client):
+        response = client.get('/51Degrees.core.js')
+        self.assertEqual(200, response.status_code)
+        self.assertEqual("application/x-javascript", response.headers["Content-Type"])
+        self.assertIn(b"fiftyoneDegreesManager", response.data)