diff --git a/website/_data/doclinks.yml b/website/_data/doclinks.yml index 075187244f..1cab1e9b51 100644 --- 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 index c6a00cf877..f927fe8307 100644 --- 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 new file mode 100644 index 0000000000..8c69c7f7ad --- /dev/null +++ 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** \ No newline at end of file diff --git a/website/documentation/tutorial/using-web-interface.md b/website/documentation/tutorial/using-web-interface.md new file mode 100644 index 0000000000..b92b4d698e --- /dev/null +++ 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 index 9dad736092..1fa62dce7f 100644 --- 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** \ No newline at end of file +* [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 index 62cfd485c8..a015280bc6 100644 --- 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 index 11278c4ab5..dba620cf6d 100644 Binary files a/website/img/tutorials/vortoin5minutes/drag-drop.png and b/website/img/tutorials/vortoin5minutes/drag-drop.png differ diff --git a/website/img/tutorials/vortoin5minutes/generate.png b/website/img/tutorials/vortoin5minutes/generate.png index 9a38b236a6..e46906f547 100644 Binary files a/website/img/tutorials/vortoin5minutes/generate.png and b/website/img/tutorials/vortoin5minutes/generate.png differ diff --git a/website/img/tutorials/vortoin5minutes/generator-output.png b/website/img/tutorials/vortoin5minutes/generator-output.png index b5814f50b1..406fd1ad74 100644 Binary files a/website/img/tutorials/vortoin5minutes/generator-output.png and b/website/img/tutorials/vortoin5minutes/generator-output.png differ diff --git a/website/img/tutorials/vortoin5minutes/generator.png b/website/img/tutorials/vortoin5minutes/generator.png index 9539c61baa..fdf250b3e4 100644 Binary files a/website/img/tutorials/vortoin5minutes/generator.png and b/website/img/tutorials/vortoin5minutes/generator.png differ diff --git a/website/img/tutorials/vortoin5minutes/new-project.png b/website/img/tutorials/vortoin5minutes/new-project.png index 5e1225134b..908130c503 100644 Binary files a/website/img/tutorials/vortoin5minutes/new-project.png and b/website/img/tutorials/vortoin5minutes/new-project.png differ diff --git a/website/img/tutorials/vortoin5minutes/open-perspective.png b/website/img/tutorials/vortoin5minutes/open-perspective.png index 8d6ee68f1a..ee3519f2a9 100644 Binary files a/website/img/tutorials/vortoin5minutes/open-perspective.png and b/website/img/tutorials/vortoin5minutes/open-perspective.png differ diff --git a/website/img/tutorials/vortoin5minutes/repo.png b/website/img/tutorials/vortoin5minutes/repo.png index 1a7b96560a..09fd7e7739 100644 Binary files a/website/img/tutorials/vortoin5minutes/repo.png and b/website/img/tutorials/vortoin5minutes/repo.png differ diff --git a/website/img/tutorials/vortoin5minutes/search.png b/website/img/tutorials/vortoin5minutes/search.png index 16a99723b3..8e1f80469c 100644 Binary files a/website/img/tutorials/vortoin5minutes/search.png and b/website/img/tutorials/vortoin5minutes/search.png differ