Skip to Content

Google Drive hosting SAPUI5 apps

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

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