Get Started - sipy/partify GitHub Wiki

The aim of the partify framework is to support the development of Web applications partitioned in different communicating devices. Supported applications can be executed in any modern browser (mobile and desktop), WebView Component (Android), UIWebView (iOS), Cordova/PhoneGap, SmartTV (e.g. Samsung) and in every device able to support HTML5 standard App.

Applications partitioned in different paired devices use a shared virtual channel to exchange events (messages). Each device can send and receive events through this channel managed by a WebSocket Server.

In addition to standard HTTP communication used for loading the Web application itself (HTML, JS, CSS ecc.), once the partify framework has been activated, a WebSocket connection is created to exchange events among devices, in real-time, through a shared virtual channel.

Supported Web applications must avoid full reloading of the Web page which destroys the WebSocket connection (use AJAX for loading contents instead).

Supported Web applications should be designed like a set of components. A component is an HTML structure (identified by a selector) that is one of the individual functional and semantic parts of which a Web page is made up (e.g. the puzzle pieces with different colors).

Once the Web application has been loaded, all devices load all application components applying the Responsive Web Design technic (partify framework is not active yet). The Web application behaves like a typical responsive website (e.g. the puzzle application provides optimal viewing experience inside each device applying the Rwd techinc).

A pairing process activates partify framework: the paired devices load different abstract layouts (with their own CSS) that enable/disable specific components (e.g. the smartphone enables only the red component according to layout B, the tablet enables the green one and the yellow one according to layout C and the desktop disables the components enabled by the smartphone and the tablet according to layout A).

The framework makes it possible to capture and send a series of events to other devices (e.g. a tap on a smartphone screen) and to receive and interpret events (e.g. reception of the tap on a desktop causing a specific action) using a real-time WebSocket communication channel, managed by a WebSocket Server.

Applications can be designed to smootly pass among the different device configurations, at runtime, by means of loading of different layouts, maintaining consistency and global application state/context.

In order to develop partify Web applications using our framework, you should know these technologies:

• HTML5 (WebSockets)
• CSS3 (Media queries)
• JavaScript (jQuery)
• PHP
• Web Server (e.g. Apache)
  
  

The partify framework needs a Web Server and PHP. We suggest you to install the LAMP/WAMP/MAMP stack according to your operating system.

All supported browsers by partify framework can be found here.

Our PHP WebSocket Server needs the php_socket extension. If it is disabled, you must enable it in your php.ini file.

We've developed some demos to illustrate most of the partify framework capabilities and potential.

In order to start a demo locally, follow these steps:

1. Download the partify package and put it in your www root.
2. Go to src/phpServer/ directory and open the server.config.php file.
3. Assign your IP to the WS_SERVER_IP parameter and a PORT (> 1023 recommended) to the WS_SERVER_PORT parameter.
4. List your client origins inside the $ALLOWED_ORIGINS array (e.g. array("http://".WS_SERVER_IP, "http://localhost"))
5. Go to demo/[demo name]/ directory and open the index.html file.
6. Assign the IP and the PORT assigned above to the corresponding partify jQuery plugin configuration options.
7. Start the partify WebSocket server (it is the src/phpServer/server.php file) using the command php server.php from your console (make sure that there are no blocking firewall outbound/inbound rules).
8. Open a partify supported browser and start the demo.
9. Pair multiple devices to see what happens (ensure all devices are under the same network).
10. Enjoy :).

Once you understand these demos, you can develop your own partify Web applications.