, (*1)
jsonPopulate
A PHP tool to populate JSON data from existing web pages. This allow the use of relevant content instead of "dummy" one for HTML prototypes (PatternLab and similar), (*2)
, (*3)
Requirements
jsonPopulate requires php 7.0 or greater., (*4)
Install
Clone and install dependencies with composer, by running:, (*5)
composer install, (*6)
Alternatively, you can integrate it to your own project:, (*7)
composer require --dev codeenigma/jsonpopulate, (*8)
Setup
Server
Simplest is to use php built in server:, (*9)
cd www && php -S localhost:8000, (*10)
or, if inside a VM of some kind, use the appropriate IP, eg for ce-vm:, (*11)
cd /vagrant/www && php -S 192.168.56.4:8000, (*12)
If in doubt or having issues, you can use the 0.0.0.0 IP to listen on all addresses. This means it potentially is accessible by others on the same network, so can be a security issue., (*13)
cd /vagrant/www && php -S 0.0.0.0:8000, (*14)
Configuration
Create a jsonpopulate.yml file somewhere in a parent folder of the jsonpopulate codebase.
Look at the example folder for how the syntax look like, it basically consists in pairing
"source" json files with "url" targets., (*15)
Note 1: The config file can be directly within any parent directory of the main jsonpopulate codebase
Eg, provided jsonpopulate is at, (*16)
~/Projects/examples/prototype/tools/jsonpopulate, (*17)
Your config file can be at any of these locations:, (*18)
~/Projects/examples/prototype/tools/jsonpopulate.yml, (*19)
~/Projects/examples/prototype/jsonpopulate.yml, (*20)
~/Projects/examples/jsonpopulate.yml, (*21)
~/Projects/jsonpopulate.yml, (*22)
..., (*23)
but can NOT be at eg:, (*24)
~/Projects/examples/prototype/config/jsonpopulate.yml, (*25)
Note 2: Paths to the sources files are relative to the config file
Using the same example as above, given a config file at, (*26)
~/Projects/examples/prototype/jsonpopulate.yml, (*27)
and a json file at, (*28)
~/Projects/examples/prototype/pattern-lab/source/data.json, (*29)
the "source" for that file in your jsonpopulate would be "pattern-lab/source/data.json", (*30)
Usage
Loading
Visit http://localhost:8000.
You should be presented with:
- a list of available pages at the top
- a dual pane window with:
- the JSON values as text field on the left
- the matching URL loaded as a fake iframe on the right, (*31)
Setting values
Start by clicking on a supported element (links, images, ...) on the visited url on the right.
Then click on the json value you want to fill/override: you should be presented with a dropdown of possible variants derived from the previously clicked element., (*32)
Navigating
To make it easier to find the elements you want, the "iframe" also allows you to navigate further between inner pages. To bypass the click hijack and actually follow a link, hold the "Alt" key while you click., (*33)
Known issues
- Due to cross-domain/CORS restrictions, iframe "escaping" scripts, bot detections measures and so on, the rendering of the the source url may vary greatly. Some domains (typically behind Sucuri or similar) will enterly fail to load, some will only miss a few fonts, while others will be mildly affected by partial execution of some Javascript parts.
- Only a few elements (a, img, p, span, submit) are currently supported.
Security
Should be obvious, but this is intended for local dev usage. Never make this accessible over http on a public server. NEVER !, (*34)
Wallogit.com
