Reviewed Getting started with Vorto. @aedelmann, please merge. Fixes e…

…clipse-vorto#318 Signed-off-by: Guenther Michael (INST/BSV2-TD) <[email protected]>
bosch-io · Aug 2, 2016 · 1e54661 · 1e54661
1 parent 85096ce
commit 1e54661
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 60 deletions.
diff --git a/website/_data/doclinks.yml b/website/_data/doclinks.yml
@@ -103,10 +103,10 @@
 - title: "Tutorial"
   href: ""
   sub:
+    - title: "Vorto in 5 Minutes"
+      href: "/documentation/tutorial/vortoin5minutes.html"
     - title: "Establish communication between Web app and Mqtt client "
       href: "/documentation/tutorial/mqttwithwebapp.html"
-    - title: "Vorto in 5 minutes"
-      href: "/documentation/tutorial/vortoin5minutes.html"
 - title: "Appendix"
   href: ""
   sub:

diff --git a/website/documentation/editors/project.md b/website/documentation/editors/project.md
@@ -24,7 +24,7 @@ A projects is an entity wherein you can define data types, function blocks and i
 
 **Prerequisites**  
 
-- You have started your IDE.  
+- You have started Eclipse.  
 - You have selected the Vorto perspective.
 
 **Proceed as follows**

diff --git a/website/documentation/tutorial/using-eclipse.md b/website/documentation/tutorial/using-eclipse.md
@@ -0,0 +1,38 @@
+---
+layout: documentation
+title: Using the Eclipse Vorto Toolset
+---
+
+{% include base.html %}
+
+
+## Using the Eclipse Vorto Toolset
+
+**Prerequisites**
+
+- You have installed Eclipse (refer to [System Requirements]({{base}}/documentation/overview/system-requirements.html)).
+- You have installed the Vorto Toolset (refer to [Installing the Vorto Toolset]({{base}}/documentation/installation/installation.html)).
+- You have started Eclipse.
+
+1. Start Eclipse.
+2. In the main menu, click **Window > Perspective > Open Perspective > Other**.  
+   The **Open Perspective** dialog opens.
+3. Select **Vorto** and click **OK**.
+   The Vorto Perspective opens.  
+   ![Vorto Perspective](/img/tutorials/vortoin5minutes/open-perspective.png)
+4. Create a new Vorto Project by clicking on the **+** button.  
+   ![New Vorto Project](/img/tutorials/vortoin5minutes/new-project.png)
+   The project is created and selected immediately.
+5. In the **Model Repository** tab on the bottom right of the Vorto perspective, search for the **TI_SensorTag** information model.  
+   ![Model Repository](/img/tutorials/vortoin5minutes/repo.png)
+6. Drag the **TI_SensorTag** information model from the **Model Repository** tab and drop it into the **Information Models** window.  
+   ![Drag and Drop](/img/tutorials/vortoin5minutes/drag-drop.png)  
+   After the **TI_SensorTag** information model has been downloaded, it is displayed in the **Information Models** area of the **Vorto Model Project Browser** tab.
+7. Right-click the **TI_SensorTag** information model and select **Generate Code > Web UI Generator** from the context menu.  
+   ![Generate](/img/tutorials/vortoin5minutes/generate.png)  
+   The generator generates the files.
+8. Switch to the Java perspective to explore the generated files.
+
+Congratulations! You have just created a web application with the least effort with the magic of Vorto.
+
+**Next: Why not try defining your own information models? :D**
diff --git a/website/documentation/tutorial/using-web-interface.md b/website/documentation/tutorial/using-web-interface.md
@@ -0,0 +1,29 @@
+---
+layout: documentation
+title: Using the Vorto Repository Web Interface
+---
+
+{% include base.html %}
+
+## Using the Vorto Repository Web Interface
+
+**Proceed as follows**
+
+You can use the features of Vorto without installing anything by using the Vorto Repository Web interface (refer to [Vorto Repository Web Interface]({{base}}/documentation/vorto-repository/web-interface/login-register.html)).
+
+1. In your browser, open the address [`http://vorto.eclipse.org`](http://vorto.eclipse.org).  
+   The Vorto Repository Web interface opens with the **Search** page.  
+2. In the **Search** entry field, enter `TI_SensorTag` to find the **TI_SensorTag** information model.  
+3. Click **Search**.  
+   The model table is updated and the displays, maybe among others, the **TI_SensorTag** information model. 
+   ![Search](/img/tutorials/vortoin5minutes/search.png)
+4. Click the **TI_SensorTag** line.  
+   The information page of the model opens with the active **Model** tab.  
+   On the right hand side the **Platform Generators** available for this information model are displayed.
+5. Click on the **Web UI generator**.  
+   ![Web UI Generator](/img/tutorials/vortoin5minutes/generator.png)  
+   The necessary files are generated in the Vorto Repository backend. After completion, the download of the generated files is initiated and the operating system's file save dialog for the files to be downloaded opens.  
+   ![Generator Output](/img/tutorials/vortoin5minutes/generator-output.png)
+6. Save the files in a folder of your choice.
+
+Voila! You just created an AngularJS-based web application with REST controllers for the information model.
diff --git a/website/documentation/tutorial/vortoin5minutes.md b/website/documentation/tutorial/vortoin5minutes.md
@@ -1,64 +1,16 @@
 ---
 layout: documentation
-title: End user Tutorial
+title: Vorto in 5 Minutes
 ---
 
 {% include base.html %}
 
-## Vorto in 5 minutes
+## Vorto in 5 Minutes
 
-This tutorial will show you how to start with **Vorto** with the least effort required. 
+This tutorial will show you how to start with **Vorto** with the least effort required.
 
-In this tutorial, we will create a web user interface for an information model. We will show you two ways to approach this, one, through the web interface and the other, through the Eclipse toolset.
+In this tutorial, you will create a web user interface for an information model. There are several ways to approach this:
 
-### Using the web interface
-
-You can use the features of Vorto without installing anything by using the web interface. 
-
-First, with your web browser, go to the Vorto repository on the following address: [http://vorto.eclipse.org/](http://vorto.eclipse.org/)
-
-Then search for an information model. We will search for a **TI_SensorTag** information model.
-
-![Search](/img/tutorials/vortoin5minutes/search.png)
-
-Next we clik the **TI_SensorTag** on the table. This will show the details of the information model and on the right hand side we will see the **Platform Generators** available for this information model. Now click on the **Web UI generator**.
-
-![Web UI Generator](/img/tutorials/vortoin5minutes/generator.png)
-
-After the generator has finished, you should be able to download the generated files.
-
-![Generator Output](/img/tutorials/vortoin5minutes/generator-output.png)
-
-Voila! You just created an AngularJS-based web application with REST controllers for the information model.
-
-### Using the Eclipse toolset
-
-First, you need to install the Vorto Eclipse Toolset by following this instructions : [here]({{base}}/documentation/installation/installation.html)
-
-Afterwards, fire up your Eclipse with the Vorto Toolset, and open the **Vorto Perspective**
-
-![Vorto Perspective](/img/tutorials/vortoin5minutes/open-perspective.png)
-
-Once you are in the Vorto Perspective, create a new Vorto Project by clicking on the **+** button.
-
-![New Vorto Project](/img/tutorials/vortoin5minutes/new-project.png)
-
-Now, you should have a new Vorto Project with the name that you chose. Next, open the **Model Repository**. It is located on the bottom right side.
-Now search for the **TI_SensorTag** information model.
-
-![Model Repository](/img/tutorials/vortoin5minutes/repo.png)
-
-Now, drag the **TI_SensorTag** information model from the Model Repository window and drop it into the **Information Models** window.
-
-![Drag and Drop](/img/tutorials/vortoin5minutes/drag-drop.png)
-
-After the **TI_SensorTag** information model has been downloaded, it will show up in the **Information Models** window. Right click on it to bring
-up the context menus and click on the **Web UI Generator**.
-
-![Generate](/img/tutorials/vortoin5minutes/generate.png)
-
-After the generator is finished, you should now be able to explore the generated project in the Java perspective.
-
-Congratulations! You have just created a web application with the least effort with the magic of Vorto.
-
-**Next: Why not try defining your own information models? :D**
+* [Using the Vorto Repository Web Interface](./using-web-interface.html)
+* [Using the Using the Eclipse Vorto Toolset](./using-eclipse.html)
+* Using the Vorto CLI Tool
diff --git a/website/documentation/vorto-repository/web-interface/search-web.md b/website/documentation/vorto-repository/web-interface/search-web.md
@@ -27,8 +27,8 @@ You have opened the Vorto Repository Web interface (refer to [Opening the Vorto
 
 **Proceed as follows**
 
-1. If the **Search** page is not displayed, click **Search** in the menu bar.
-    The **Search** page displays the model table containing all shared models.
+1. If the **Search** page is not displayed, click **Search** in the menu bar.  
+   The **Search** page displays the model table containing all shared models.
 2. To find a specific model, filter the model table in one or both of the following ways:  
    * Select the appropriate radio button according to the model type you want to search for.  
    * In the **Search** entry field, enter a search string to find the item you want, e.g., the function block `Accelerometer`  

diff --git a/website/img/tutorials/vortoin5minutes/drag-drop.png b/website/img/tutorials/vortoin5minutes/drag-drop.png
diff --git a/website/img/tutorials/vortoin5minutes/generate.png b/website/img/tutorials/vortoin5minutes/generate.png
diff --git a/website/img/tutorials/vortoin5minutes/generator-output.png b/website/img/tutorials/vortoin5minutes/generator-output.png
diff --git a/website/img/tutorials/vortoin5minutes/generator.png b/website/img/tutorials/vortoin5minutes/generator.png
diff --git a/website/img/tutorials/vortoin5minutes/new-project.png b/website/img/tutorials/vortoin5minutes/new-project.png
diff --git a/website/img/tutorials/vortoin5minutes/open-perspective.png b/website/img/tutorials/vortoin5minutes/open-perspective.png
diff --git a/website/img/tutorials/vortoin5minutes/repo.png b/website/img/tutorials/vortoin5minutes/repo.png
diff --git a/website/img/tutorials/vortoin5minutes/search.png b/website/img/tutorials/vortoin5minutes/search.png