In the second part of this mini series about RDE we'll create the classic "Hello World" application and publish it on SAP HANA Cloud Platform. Then, we'll do a simple change and discuss the underlying source code management based on Git in more detail. Ready, set, go...
Creating a simple SAPUI5 project
The first thing we do is to create a new project via the project wizard. For that purpose we open the context menu of the "Local" node in the project directory. Then select the "New > Project" entry to launch the project wizard. First, we are asked to provide a name for our project. (I decided to go with "my1stapp", but feel free to choose a name more to your liking.) Next step is select one of the available project templates as a baseline for your project. In this tutorial I select the "Empty SAPUI5 Desktop App Project". The last step is to select a name for the view/controller to start with. Typical names would be "home" (or "main"), but feel free to choose your own. Close the wizard by pressing "Finish".
Hello World
The project wizard created all the required boilerplate for us already, a basic "index.html" file being one of them. Let's put "Hello World!" within the content div and add a corresponding <title> tag as well. The complete source code I used is available as a Gist here. Save your changes by clicking on the respective icon in the top-left menu bar (the system-wide keyboard shortcut to save files works as well!).
Deploy to SAP HANA Cloud Platform
Now, we deploy this (simple) application to the SAP HANA Cloud Platform via the corresponding entry in the context menu of our project node (see screenshot). This shouldn't take more than a few seconds and after successful deployment a pop-up dialog will pop up, which we need to confirm.
Version Management and Application Activation
We switch to the SAP HANA Cloud Platform cockpit and navigate to the "HTML5 Applications" tab in the left-hand side navigation menu. This will bring you to a page that shows all deployed HTML5 applications of your account. By clicking on the application URL of your newly created app you'll get to a details page.
Let's pause here for a minute and elaborate on what happened behind the hood. When we deployed our application to SAP HANA Cloud Platform a Git repository was automatically created for us and all artifacts of our project have been staged, committed and pushed into this repository. This feature us to do version management by creating versions based on individual commits. Let's click on the "Development" tab on the left-hand navigation menu. You can then see a list of all commits that have been pushed into our repository (note: the corresponding screenshot may slightly differ from what you'll see, as it has been taken after the exercise has been completed):
Click on the "Create Version" icon in the row matching the commit message that starts with "Merge commit" to create your initial version. (Note: The versioning schema to be used is up to you, yet I'd recommend to stick to a known schema e.g. the Semantic Versioning guidelines or equivalent.)
By clicking on the "Version Management" tab you get to the corresponding page to select the active version of your app:
You should see your newly created version in the list. Click on the "Activate" icon to set the initial version as the active one. Now, that we have an active version we can click on the Application Url provided on top of the page to launch it. If all went fine, you should now see a lovely "Hello World" application being launched. Hooray!
Source-code Management with Git
Now, that we have successfully deployed our first version, let's do a simple change and perform the necessary changes to get the changed version become the active one. From here, you're the master of your own destiny and hence you'll have to manually commit and push your changes. Don't worry, it's nothing too hard and once we have done this once it'll become second nature...
Let's go back to RDE and open up our index.html file. Replace "Hello World" with "Hello RDE", shall we? After we have saved our changes we need to stage and commit our changes. (Note: There are multiple ways to do this, so feel free to explore on your own and try alternative routes.)
Click on the "GIT" symbol on the left-hand navigation menu to switch to the Git perspective.
Here you see an overview of all repositories associated to projects in your account. Please note, that for our application we can see that there's one unstaged file. That's exactly what we want to do next. Click on the "Git Status" link on the right hand side menu group of our project. Now, we see an overview about all unstaged files. Click on the "Stage the change" icon left to the "index.html" file (that's the icon with the arrow pointing down).
It'll then disappear from the unstaged changes to the staged changes. Click on the respective "Commit" button, then enter a commit message/description (e.g. "Hello RDE") and select the "ChangeId" checkbox on the top-right. Submit your commit by clicking on the respective "Submit" button at the bottom.
The "index.html" file now vanishes from the staged changes, but we now see a corresponding commit being shown in the Commits for "mater" branch area. We can push this commit by selecting "Push > Push All" via the respective drop-down menu on the right hand side. We are then asked to provide our username and password (these match the credentials of your HCP account!) and then confirm it all by pressing "Submit". Voilà!
Now, we see this commit being listed in the "Development" tab of the "HTML5 Applications" section in our cockpit as discussed earlier. So, the same routine applies... create a new version and then activate that version as done earlier in this exercise....
Have fun coding!
For those that prefer video instructions here's the corresponding recording of the entire process. It's about 4 minutes long, so it won't take too much of your time:
- SAP Managed Tags:
4 Comments
