Protocode

Protocode is a web application that helps you to prototype iOS and Android mobile apps. Thanks to its model-driven approach, you create a prototype app once for different operating systems.

Features

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!

Requirements

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.

Installation

1. Download this project
2. Install all node.js dependencies. From the root of the project execute npm install
3. Install all front-end libraries using bower bower install
4. Start the server using grunt grunt serve
5. That's it! Now you have a server with this application up and running on localhost:9000
6. 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/dist the web application ready for distribution.