Hi guys.

This is my first post here and I’m going to talk a little bit about how to host a SAPUI5 App on Google Drive and share with everybody.

You don’t need neither a domain nor a webserver. You can use Google Drive to publish and to use your UI5 apps.

It’s very simple 😉

1 – Access your Google Drive account

Go to the link https://drive.google.com/

2 – Create a new folder

Click on “CREATE” button.

/wp-content/uploads/2014/05/gdrive1_462540.png

Click on “Folder” button.

/wp-content/uploads/2014/05/gdrive2_462541.png

Give a name to your new folder.

/wp-content/uploads/2014/05/gdrive3_462557.png

Your new folder (SAPUI5 – GoogleDrive) has been created.

4 – Share your folder – Public access

Right-click on your new folder (SAPUI5-GoogleDrive), go to “Share” > “Share”.

/wp-content/uploads/2014/05/gdrive4_462558.png

Your folder is not public, you can see the status: Private – Only you can access.
Click on “Change” to change the access permission.

/wp-content/uploads/2014/05/gdrive5_462559.png

Choose the option “Public on the web” and save.

/wp-content/uploads/2014/05/gdrive6_462561.png

Now your folder has public access and it has a hosting link. You can see clicking on Details button.

Everything that you upload to this folder can be accessed using the hosting URL.

/wp-content/uploads/2014/05/gdrive7_462562.png

5 – Create a SAPUI5 app

Create your new app: index.html

You can use the example below.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>SAPUI5 + Google Drive</title>
<meta name="author" content="Mauricio Lauffer">
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m">
</script>
<script type="text/javascript">
var oApp = new sap.m.App("myApp");
var oLabel = new sap.m.Label({
text : "Hello World"
});
var oPage = new sap.m.Page("page1", {
title : "SAPUI5 + Google Drive",
content : [ oLabel ]
});
oApp.addPage(oPage);
oApp.placeAt("content");
</script>
</body>
</html>

I prefer to use XML view, but for simplicity’s sake I used JS.

6 – Upload and Share the app to the Google Drive

Just upload your “index.html” file.

Yes, just it. You don’t need to upload nothing more.

7 – Access the app

Did you remember the hosting link for your folder (SAPUI5-GoogleDrive)?

So, you’ll use it to access your app.

Copy and paste the hosting URL in your browser (I hope it won’t be Internet Explorer 😛 ).

Now just add your filename to the end of the URL.

It should look like it: https://googledrive.com/host/0B2gJUv6a_V1deXV4UWthQkdHbjQ/index.html

You can go straight by the file as well.

Click on your uploaded file and click on “Preview” button.

/wp-content/uploads/2014/05/gdrive8_462570.png

8 – The Result

I hope you enjoy your application and spread the word   😆

/wp-content/uploads/2014/05/gdrive9_462571.png

If you like to use GitHub (you should!), here’s the link:

https://github.com/mauriciolauffer/UI5/tree/master/SAPUI5-GoogleDrive

Portuguese version: Hospedando SAPUI5 app no Google Drive

To report this post you need to login first.

6 Comments

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

  1. Marcos Andrade

    Hello Mauricio,

    great post 🙂 .

    just a quick question as you have declared the resource sap-ui-core.js that comes from hana.ondemand domain and it can be publicly accessed so you have one page html application. I usually develop the apps using SAP WEB IDE in this case is that still possible to develop the app using web ide and host it on the google drive?

    maybe if we download the project and with all the files and upload it in the google drive should make it possible?

    Regards,

    Marcos

    (0) 

Leave a Reply