PoNG und Portal as a Service: Unterschied zwischen den Seiten

Aus MH
(Unterschied zwischen Seiten)
Wechseln zu: Navigation, Suche
 
 
Zeile 1: Zeile 1:
'''Create web portals for backend service (APIs) w/o programming.'''
+
__NOTOC__ [[Category:PoNG]]
[[Category:PoNG]]
+
'''Create web portals for backend service (APIs) w/o programming.'''  
'''Quick Links:'''
+
== What is it? ==
* [[PoNG Modules]]
+
* It is a web based configuration for PoNG portals.
* [[PoNG Structure Specification]]
+
* It is a hosting for PoNG portals designed by you.
* [[PoNG Module Programming]]
+
* It is free! [[Portal_as_a_Service#Disclaimer|*]]
  
== Basic Idea ==
+
== How do I start? ==
 +
# Create your account on the [http://mh-svr.de/portal/ Portal as a Service page].
 +
# Log in with your account and create a new Portal
 +
# Click ''Customize'' to jump to the portal administration page
 +
# Add a page and click ''Edit''
 +
# You can use the interactive '''Page Layout Designer''' to create your portal page
 +
# Click the page name in the layout designer to jump to your new portal page and preview it.
  
=== Main Structure ===
+
== Page Layout Designer Guide ==
 +
You can create page layouts interactively:
  
The ''portal'' has always a '''header''', some '''rows''' and a '''footer''':
+
[[Datei:PoNG LayoutDesigner.png]]
  
[[Datei:Pong-struct-1.png|200px]]
+
The basic layout structure is are '''rows''', containing views. You can add rows using the ''horizontal split'' button. Using the ''vertical split'' button, you can convert the rows view into a '''set of columns''' containing views. With the ''vertical split button'', you can concert a column view  into a set of rows.
  
You can specify the hight of each row individually.
+
At the end you are able to create any layout with a hierarchy of rows and columns,
  
=== Structured Views ===
+
== Disclaimer ==
A row can contain a '''view''' or a set of '''columns''' ...
+
This is a '''free public beta test''' of the ''Portal NG'' SERVICE.
  
[[Datei:Pong-struct-2.png|200px]]
+
The beta test may end at any time. Any data and configuration stored inside the SERVICE may be removed at any time.  
  
... and columns can contain views or rows, containing views or ... (you understand?). You can define the width of each column.
+
'''Important:'''
 
+
THE SERVICE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
With this construct you should be able to do every possible arrangement of views.
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
=== Views use Plug-Ins ===
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
Views can use ready to use plug-ins with different functionality
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 
+
OUT OF OR IN CONNECTION WITH THE SERVICE OR THE USE OR OTHER DEALINGS IN
[[Datei:Pong-struct-3a.png|300px]]
+
THE SERVICE.
 
 
There are also plug-ins for the header and footer, e.g. to display navigation bars, logos, link-lists or language switch buttons.
 
 
 
=== Configure the Views ===
 
All views load their own configuration to initialize the view. The configuration comes from a web server or application server (dynamic configuration).
 
 
 
[[Datei:Pong-struct-4.png|400px]]
 
 
 
=== Data and Content in Views ===
 
After the initialization the view can load, modify, save or create data on a RESTful server backend. I.e. the WIKI content plug-in can load pages from a MediaWiki server.
 
 
 
[[Datei:Pong-struct-5.png|400px]]
 
 
 
=== ... and Action! ===
 
For a dynamic page, all views can do different interactions:
 
# Views can call functions on a HTTP server backend (via REST calls)
 
# Views can call update method of other views. These views typically call the server backend to load data.
 
# Views can load a view into a row or a column, replacing the view there.
 
# Views can navigate to another page. Hopefully another portal page.
 
 
 
[[Datei:Pong-struct-6.png|400px]]
 
 
 
The interactions are defined in the configuration of the view. E.g. in a view using the form plug-in you can define a button to save the form data and triggering an update of a table view afterwards.
 
 
 
Of course -- the description of the page layout and the content data should be in a machine readable format and precise enough, that your browser is able to understand it. But these description of layout and data must still be human readable, self explaining and without HTML or JS coding necessary.
 
 
 
Please read also the [[PoNG Description]].
 
 
 
== A Quick Start in 2 min (local installation) ==
 
You need a (simple) Web Server, so install Apache package on you Unix or get e.g. XAMPP or ... or ...
 
# Download the [[PoNG_Static_HTML_Distribution|static HTML distribution]] package [[http://keller.minidns.net/mh/pong_v0.3a1.zip here]] (523 kB)
 
# Unpack the archive into your web server HTML directory, e.g. /var/www/portal
 
# Point your web browser to the portal root, e.g. http://mydomain.com/portal
 
 
 
Start [[PoNG_Static_HTML_Distribution#Start_customizing_the_static_portal|customizing the portal]] ...
 
 
 
== PoNG: Portal as a Service ==
 
We offer a [[Portal as a Service]] for free (v0.3 beta test phase).
 
 
 
You can sign up an account and design a new portal on our [http://mh-svr.de/portal/ Portal as a Service] with seconds.
 
 
 
== Layout Configuration ==
 
The layout-structure is a JSON file, requested by the layout resource. By default the <tt>/svc/layout/main/structure</tt> is loaded first.
 
 
 
Your site may have other layouts than "main", e.g. <tt>/svc/layout/admin/structure</tt>.
 
 
 
=== The "structure" JSON format ===
 
[[Datei:PoNG Example1.png|right|350px]]
 
The basic object hierarchy of the objects are:
 
* layout
 
** title
 
** header
 
** rows
 
*** cols
 
**** rows
 
***** ...
 
** footer
 
 
 
The <code>rows</code> can contain either nested <code>cols</code> or alternatively a resource. The same for <code>cols</code>. A resource specifies the URL, where to load information about the content, has some meta data to define its layout, actions and dialogs.
 
 
 
You can get every possible layout with this nesting of rows, cols and resources.
 
 
 
Please refer the [[PoNG Structure Specification]] for details.
 
 
 
The example shows, that you can set up a complex portal page with different information resource views on it with a very view lines of meta data definition. The result of this example is shown on the screen shot on the right (no fake). BTW, I would describe it in this way: <i>"This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."</i>
 
 
 
So how can you explain your browser this w/o any HTML code? Let's try:
 
==== Example ====
 
{
 
  "layout": {
 
    "title": "Title",
 
    "header": {
 
      "logoURL": "logo.png"
 
    },
 
    "rows": [
 
      {
 
        "rowId": "myBlog",
 
        "height": "185px",
 
        "resourceURL": "blog",
 
        "type": "pong-list",
 
        "decor" : "decor"
 
      },
 
      {
 
        "rowId": "r1",
 
        "height": "450px",
 
        "cols": [
 
          {
 
            "columnId": "tbl",
 
            "width": "40%",
 
            "resourceURL": "resX",
 
            "type": "pong-table",
 
            "decor" : "decor",
 
            "actions" : [ { "actionName": "Help", "type": "pong-help" } ]
 
          },
 
          {
 
            "columnId": "plot",
 
            "width": "60%",
 
            "decor" : "decor",
 
            "resourceURL": "gnuplot",
 
            "callback": "grmh()",
 
            "actions" : [ { "actionName": "Config", "type": "modal-form" } ]
 
          }
 
        ]
 
      }
 
    ],
 
    "footer": {
 
      "copyrightText": "Copyright 2015, MH.",
 
      "linkList": [
 
      { "text":"Impressum", "url": "impress.html"},
 
      { "text":"Privacy Note", "url": "privacy.html"}
 
      ]
 
    }
 
  }
 
}
 
 
 
This example layout structure will result in a "myBlog" box of full width and below are two columns, one with the "resX" and the other smaller one with a "plot". If you just starts with this file, all views will be empty, because no one defined the resource details, that are just resource names at the moment.
 
 
 
And if you think, the there is a bunch of work in defining e.g. the "blog", then check out, what is [[PoNG Module: List View|the todo of this resource definition]].
 
 
 
'''[http://mh-svr.de/PoNG/ Test the prototype]'''
 
 
 
== Installation Manual ==
 
Please refer also the [[PoNG Release Notes]].
 
=== Static HTML Installation ===
 
Perhaps you start here. Since PoNG is client centric, you can play a lot with a static backend. You can focus on implementing, configuring or integrating REST web services and view the data in the browser.
 
 
Simply load and extract the [[PoNG Static HTML Distribution]] to any subdirectory of your web server and customize the structure file <code>/svc/layout/main/structure</code>, logo and CSS files to your needs.
 
 
 
=== Tomcat based Installation ===
 
TODO
 
=== PHP based Installation ===
 
The [[PoNG PHP Backend]] powers the [[Portal as a Service]].  
 
 
 
For local installations please contact ''admin (at) mh-svr dot de''
 
 
 
== Browser Support ==
 
PoNG is tested with
 
* Firefox 27.0.1 (Ubuntu 13.10 64bit)
 
* Safari (iPad, iOS 7)
 
* Chrome on Android
 

Version vom 23. Februar 2015, 19:17 Uhr

Create web portals for backend service (APIs) w/o programming.

What is it?

  • It is a web based configuration for PoNG portals.
  • It is a hosting for PoNG portals designed by you.
  • It is free! *

How do I start?

  1. Create your account on the Portal as a Service page.
  2. Log in with your account and create a new Portal
  3. Click Customize to jump to the portal administration page
  4. Add a page and click Edit
  5. You can use the interactive Page Layout Designer to create your portal page
  6. Click the page name in the layout designer to jump to your new portal page and preview it.

Page Layout Designer Guide

You can create page layouts interactively:

Fehler beim Erstellen des Vorschaubildes: Die Miniaturansicht konnte nicht am vorgesehenen Ort gespeichert werden

The basic layout structure is are rows, containing views. You can add rows using the horizontal split button. Using the vertical split button, you can convert the rows view into a set of columns containing views. With the vertical split button, you can concert a column view into a set of rows.

At the end you are able to create any layout with a hierarchy of rows and columns,

Disclaimer

This is a free public beta test of the Portal NG SERVICE.

The beta test may end at any time. Any data and configuration stored inside the SERVICE may be removed at any time.

Important: THE SERVICE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SERVICE OR THE USE OR OTHER DEALINGS IN THE SERVICE.