Protocode is a web application that helps you to prototype iOS and Android mobile apps. Thanks to its model-driven approach, you can create a prototype app once for different operating systems.
-
New devices: Nexus 6P for Android M and iPhone 6, 6 Plus for iOS 9.
-
Smartwatches: You can now add buttons, labels, switches, sliders and a "speech-to-text" button to your Wearable device! Simulated devices are Apple Watch 42mm, Moto 360 and Asus Zen Watch.
-
New mobile widgets: Switches, spinners, sliders, mapView, datePickers, timePickers and cardViews are now available.
-
Upgraded mobile widgets: Added new properties for the widgets like text color, background color and font style; ListViews and GridViews are now available in 3 different layouts : simple text, with an image or both.
Here's a list of the key points of this web application:
-
Widget based prototyping tool: the user can create the pages that compose the prototype adding various controls such as label, edit texts etc. Now it supports 16 controls: button, label, edit text, web view, image view, video view, audio player, list view, grid view, photocamera controller, videocamera controller and audio recorder.
-
WYSIWYG Editor: in other word the user can immediately see the final result without exporting the model and generate the project for iOS and Android. This is possible thanks to the built-in simulator of the supported OS. Actually there are two simulators: iPhone 5s for iOS and Nexus 5 for Android.
-
Auto-adaptative control views: in order to have a responsive layout throughout all different operating system, the position of the controls are not given by absolute position, but it uses a constraint-based approach. The result is a responsive layout that auto-adjust on different mobile screens. The classic position system is allowed even if it's not recommended.
-
Drag & Drop positioning: controls can be placed on screen via drag & drop. We can move the widgets on the simulator dragging them on it.
-
Easy creation of common functionalities: how many times we have to spend a lot of time to create menus, tab bars on iOS, navigational behavior and listItems? All these aspect are very simplified and their creation require very few clicks!
In order to deploy the web application we need:
- Node.js
- Ruby
- Compass
- MobileCodeGenerator: this app is required to generate both iOS and Android projects from the model exported by Protocode.
- Download this project
- Install all node.js dependencies. From the root of the project execute
npm install - Install all front-end libraries using bower
bower install - Start the server using grunt
grunt serve - That's it! Now you have a server with this application up and running on localhost:9000
- If you want only minified and compressed version of this web application, just execute in the root of the project
grunt build. Now you have in/PROJECT_PATH/distthe web application ready for distribution.