Host your UI5 Application on Google Drive
Isn’t it fun when you can view your UI5 application online instead of localhost? Just follow these very simple steps to put your UI5 Application online.
Step 1: Login to your Google Drive account or sign up a new account
Step 2: Create a new folder and make it Public
– Right click the folder >> Share >> Change access to “Public on the web”
Step 3: Upload your resources (HTML, CSS, JS files) to Google Drive
– Copy the source code from tutorial: Create your First SAPUI5 Application in 20 seconds into a text editor and save it as index.html
https://openui5.hana.ondemand.com/#docs/guide/5b9a170d9f6a4d5784e8ab2ded3d8517.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>SAPUI5 in 20 Seconds</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons"></script>
<!-- 2.) Create a UI5 button and place it onto the page -->
<script>
// create the button instance
var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text (there is also a shorter way of setting several properties)
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function () {
$("#btn").fadeOut()
});
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:
/*
$(function(){
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press:function(){$("#btn").fadeOut();}
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="uiArea"></div>
</body>
</html>
– Upload the file to the specified Google Drive folder: Choose Upload >> Files
Step 4: Preview the web page
– Right click the file and choose “Open with Google Drive Viewer”
– In the new tab, choose “Preview”
– And…Tada! The application is now published online
https://googledrive.com/host/0B_C-6M0RD7wqdkZUUWVoOGgwWFU/index.html
Note that the URL format is: https://googledrive.com/host/<string>/<yourpage.html>.
Here is another example with SAPUI5 MVC TODO application hosted on Google Drive
If you have SVN you can check out the SAPUI5 MVC TODO from below GitHub repo
svn co https://github.com/tastejs/todomvc/trunk/labs/architecture-examples/sapui5
– Upload the 3 folder /css, /img, /js and file index.html to your shared folder
– And here’s the result: goo.gl/VRMPVE
NOTE:
– You can have your own domain and configure it to forward to your application hosted on Google Drive
– You can install Google Chrome extension Drive Notepad to edit your HTML file.
Now you can use OpenUI5 to create your own web application, be it a personal website, a gallery, a creative work or anything and publish it online!
Hope it helps. Cheers!
How can we host an app with views and controller?
For a quick demo (which makes sense if you are using Google Drive) you could just use a single file app - have a quick search as there are examples of this here on SCN.
My opinion, if you want a fully structured application with multiple source files then using Google Drive probably isn't the best way forward.
Cheers,
G.