I've been playing with a cool technology this week named Appery.io, the best is to define it with their own words:
Alright, my goal is to integrate View & Data API inside that stuff to produce a little mobile App, here is the idea: I will use my existing backend REST services from the Gallery to create an App that displays the list of models and lets the user select one to load it in the viewer, sounds like a good proof of concepts, let's get started!
First of all, here are the available REST APIs exposed by my backend that I'm going to use and their purpose:
Returns the list of all models available in the Gallery
Returns thumbnail data for the specified modelId
Allows to embed a specific model in an iframe
Let's create a new App, I name it "ADN Gallery":
Appery.io propose a pretty slick browser-based visual IDE that allows you to create pages and dialogs for your App which you populate with built-in or custom controls, so in my startScreen page, I will first place a List:
I want to populate that list with models from the Gallery, so I then have to create a new REST Service, there are some very convenient built-in tools to work with REST in Appery.
I define the properties of my REST service below, notice that I'm using the "Appery.io Proxy" option, this will allow me to bypass CORS security restrictions and test my App directly in the browser!
You can test the service using the "Test" tab and once the reply has been received, you can can directly "Import as Response" which automatically defines the response format of the service:
The next step would be to define two events handlers, which is also very easy to do through the interface: upon loading of the startScreen page, we will invoke the models service and upon success of that service, we will define a mapping so the data for each model in the response is automatically mapped with a new listview item:
The mappings are defined graphically with a specific editor as well: I'm mapping each model in the response to a modelItem in the list and model.name is mapped to the list item name:
Here is the code of my mapping, this does two things: sets up an event listener, so when a list item gets clicked, the data about this item is stored in the local storage - this info will be accessed by the next page to know which model to load - and it invokes my thumbnail service to set the image data in the list item:
At that point, you can hit the Test button and see your App running in the browser with a phone frame around it or not, as well as testing different screen sizes and orientation:
Alright, I'm defining another event so when a list item gets clicked, another page will be displayed, this will be the viewerPage. I create a mapping to bind the data in the local storage to the title of that page, so my model name appears at the top:
Here is the code for that with some little tweaks to adjust the height and the style:
And that's pretty much it! Just with couple lines of code I get a fully functional mobile App, below is a recording of the final version tested in the browser:
You can then export the result as compiled package or as project that you can load in an IDE, the generated project is based on Cordova:
You could as well directly see the generated code on Appery.io:
Finally you can create a backup of your project and pass it to somebody else for example, so he can create his own Appery.io App based on yours, impressive flexibility I must say...
Attached is the backup for my project and the Android/iOS packages if you want to have fun playing with the Apps: