Skip to Content

As some of you may know, SAP has announced the availability of the SAP HANA Cloud Platform, Web IDE personal edition. You can read more about this here: https://wiki.scn.sap.com/wiki/display/ATopics/SAP+Web+IDE+Personal+Edition .

The personal edition is intended as a complementary IDE to the flagship SAP HANA Cloud platform, Web IDE. You can install it on a personal workstation for off-line development, and the above link tells you how to do that.

The personal edition does not include all the features of SAP Web IDE on HCP, such as plugin/template development, and cloud specific features like collaboration support. Still, it is a pretty good way to take your work with you to places where you may not have a good Internet connection (or any Internet connection at all), and then sync your work back to the cloud.

In this blog, we will show how you can develop an app in SAP Web IDE on HCP, and continue to work on the app while you are offline, with the personal edition. I will assume that you have already established a HANA Cloud Platform account, and followed the instructions in the link above for installing the personal edition.

In order to sync between both Web IDE instances we will use Git source control. In this blog post we will not explain about Git and Git capabilities so if you don’t have experience with Git please refer to the following blog postHow to Use the SAP Web IDE Git Client

 

In this blog post we will show how to:

 

  1. Start developing online
    • Generate a very simple app in Web IDE on HCP (empty UI5 app)
    • Initialize a new Git repository on HCP Git
    • Make some changes to the app in Web IDE on HCP
    • Commit our changes and push them to the Git remote repository
  2. Continue offline
    • Go to Web IDE personal edition and clone the remote Git repository that we created on previous step
    • Make some changes to our code in Web IDE Personal Edition (either while we are offline or online)
    • Commit and push our changes from Web IDE Personal Edition to the HCP remote Git repository
  3. Sync and resume online!

 

0 - sync architecture .png

 

Online vs. Offline in Web IDE Personal Edition

 

In order to execute Git commands in front of the Git remote repository (e.g. pull,push,reset etc.) you must be online . In offline mode you can only commit your changes to the local repository as many times as you want and soon as you back online the only thing that you need to do is to click on the push button in order to push all the changes that were done in offline

 

Let’s get started!

 

If you don’t have SAP Web IDE yet you can open a new HCP trial account. More details about it can be found in our new (and amazing 🙂 ) website : SAP Web IDE

 

1. Generate an empty UI5 project in Web IDE on HCP

 

  • Open Web IDE on HCP and click on New –> Project from Template
  • From the Wizard dialog select SAPUI5 application to create an empty UI5 project and click Next

          1 - Wizard empty UI5.png

  • Give a name for your project: MyFirstSyncProject and click on Finish –> A new Project will be generated under your Web IDE workspace
    2-project name.png

 

2. Initialize a new Git Repository on HCP Git server

 

 

  • Go to your HCP cockpit by clicking on Tools –> SAP HANA Cloud Platform Cockpit
    3-HCP cockpit.png
  • In HCP cockpit right menu select Repositories –> Git Repositories
  • Click on New Repository button in order to create a new repository
  • In the dialog box enter the repository name and the description, make sure the Create empty commit check is checked, and then click on OK.
    4-empty remote repo.png
  • Search for the newly created repository using the search text field (by its name) and click on it in order to see more details:

          5-search repo.png

  • Copy the URL under Git Repository URL

          6 - copy git repo.png

  • Go back to Web IDE on HCP, right click on the project –> Git –> Initialize Local Repository

          7-init local git repo.png

  • Paste the URL of the Git repository URL that was created in the previous step into the URL field and then click on OK.

          8 - copy remote repo to web ide.png

  • Open the SAP Web IDE Git client, located on the right side pane, and then click on Pull. Clicking on Pull will do the first sync between the remote repository to the local repository

          9 - pull remote to local.png

  • Still on the Git client make sure the Stage All is checked, Enter your commit message and click on the Commit and Push button, and then select Remote Branch

          10 - first commit and push.png

  • If you see a dialog with errors ignore it and click on the push button (those errors are not “real” syntax errors but errors that came from ESLint)

 

 

3. Modify the app on Web IDE for HCP

 

  • Go to your Web IDE workspace and expand MyFirstSyncProject folder and double click on View1.controller.js file which located under webapp –> controller folder
  • Make some minor changes to this controller by adding a new function with the name onInit to it and click on Save

          11 - controller change.png

  • Open the Web IDE Git client (from the right side pane), click on Stage All checkbox , write your commit message and then click on the Commit and Push button in order to commit and push the changes to the remote Git repository.

          12 - first change.png

 

  • Again, ignore any error dialog by clicking on the Push button

 

 

 

4. Clone the Git repository into Web IDE Personal Edition workspace

  • Switch to the personal edition on your workstation (via the URL: http://localhost:8080/webide/index.html)
  • Click on File –> Git –> Clone Repository
  • In the URL textbox paste the URL of the Git remote repository that was created in section 2
  • Enter your HCP username and password and click on OK

          13 - clone to local web ide.png

  • After cloning you will see MyFirstSyncProject in your workspace with all the changes.


5. Make some code changes in Web IDE Personal Edition

 

  • Open View1.controller.js file and create another function with the name MyPersonalEditionFunction and then click on Save

          14 - changes on personal edition.png

         

  • Again open the Git client on the right pane, check the Stage All checkbox and then click on the Commit and Push button to commit and push the changes to the remote Git repository exactly like we did in section 3.

          15 - commit and push from personal edition.png

 

 

6. Review the offline changes in SAP Web IDE on HCP

 

  • Login to the Web IDE on HCP
  • Click on the MyFirstSyncProject folder which is located in your Workspace
  • Open Web IDE Git client (from the right side pane)
  • Click on the Pull button in order to sync with the remote Git repository.

          16 - pull to sync.png

  • Open View1.controller.js file and see the changes we did on section 5 (we added a new function with the name myPersonalEditionFunction
  • Open the Git History pane (also located on the right pane) and see the entire Git push history. There you will see also the push that changes that represents the change you made with the personal edition

          17 - git history .png

  • Now you can go ahead and do some changes on Web IDE on HCP and then go back to Web IDE Personal Edition and click on Pull (in order to pull you must be online)  to see those changes and vice versa

 

 

To summarize…

 

In this blog post we show how to develop apps either in online and offline mode by using Git as our “sync” and source control server. Now you can develop your apps either in the office, on the train, on an airplane or even at home and when you are online or offline.

 

 

That’s it 🙂

 

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply