Mauricio Lauffer

August 28, 2014 3 minute read

Hospedando SAPUI5 app no Google Drive

Olá, pessoas!

Estive conversando com alguns amigos e chegamos à mesma conclusão: não há muito material SAP em pt-BR. Principalmente quando falamos da parte técnica e mais ainda quando se refere a novidades como SAP HANA, SAPUI5, Screen Personas, etc. Acho que nós, ABAPers brazucas, deveríamos participar mais da comunidade criando conteúdo. Tem alguns caras que já fazem isto muito bem, o pessoal do ABAPZombie e do ABAP101 fazem isto muito bem. Tem uma turma que contribui MUITO para a comunidade SAP HANA em pt-BR aqui na SCN.

Eu vou tentar seguir o mesmo caminho e criar conteúdo em português. Tenho alguns posts publicados aqui (em inglês) e vou traduzí-los. Os novos posts que farei, vou postar 2 versões: en-US e pt-BR.

Neste post vou falar um pouco sobre como hospedar um SAPUI5 no Google Drive e compartilhar com todo mundo.

Você não precisa ter um domínio nem um servidor web. Você pode usar o Google Drive para publicar e usar seus UI5 apps.

É muito simples.

1 – Acessar sua conta no Google Drive

Acesse https://drive.google.com/

2 – Criar uma nova pasta

Clique no botão “CRIAR”.

Clique no botão “PASTA”.

Dê um nome para sua nova pasta.

Sua nova pasta (SAPUI5 – GoogleDrive) foi criada.

4 – Compartilhe sua pasta – Acesso Público

Clique com o botão da direita na sua nova pasta (SAPUI5-GoogleDrive), vá para “Compartilhar” > “Compartilhar”.

Sua pasta não é pública, você pode ver o status: Privado – Somente você pode acessar.
Clique em “Mudar” para mudar a permissão de acesso.

Escolha a opção “Público na web” e salve.

Agora sua pasta tem acesso público e tem um link de “hosting”. Você pode ver clicando no botão “Detalhes”.

Tudo que você fizer upload para esta pasta pode ser acessada usando a URL “hosting”.

5 – Criar um SAPUI5 app

Crie seu novo app: index.html

Você pode usar o exemplo abaixo.


<!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>

Eu prefiro usar XML view, mas para simplificar eu usei JS view.

6 – Upload e Compartilhar o app para o Google Drive

Apenas faça upload do seu arquivo “index.html”.

Sim, apenas isto. Você não precisa fazer upload de mais nada.

7 – Acessar o app

Você lembra do “hosting” link da sua pasta (SAPUI5-GoogleDrive)?

Então, você irá usá-lo para acessar seu app.

Copie e cole a “hosting” URL no seu navegador (eu espero que não seja Internet Explorer 😛 ).

Agora apenas adicione o nome do arquivo ao final da URL.

Deverá se parecer com isto: https://googledrive.com/host/0B2gJUv6a_V1deXV4UWthQkdHbjQ/index.html

Você pode ir diretamente pelo arquivo também.

Clique no arquivo que você fez upload e clique no botão “Preview”.

8 – O resultado

Eu espero que você aproveite sua aplicação 😆

Se você usa GitHub (você deveria!), aqui está o link:

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

English version:Google Drive hosting SAPUI5 apps

12 Comments

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

Bruno Lucattelli

September 9, 2014 at 3:55 pm

Ótima opção para quem não tem um serviço de hospedagem. Obrigado por compartilhar!

Former Member

September 11, 2014 at 2:46 am

Muito bom!!!!

Marlo Simon

September 14, 2014 at 2:09 am

Legal Maurício,

Concordo com você de que quanto mais conteúdo gerarmos em PT, maior o nosso alcance como comunidade.

Parabéns pelo conteúdo e iniciativa.

Abs,

Marlo Simon

Ricardo Viana

September 14, 2014 at 3:16 pm

Legal mesmo,

Congrats !!

Att,

Former Member

September 25, 2014 at 12:28 am

Parabéns Lauffer!!!

Ótimo artigo..

Precisamos agitar os BRs.

Att,

Eduardo Da Rós

Former Member

September 26, 2014 at 10:34 am

Logo, logo... um SAP CodeJam no RS sobre UI5! Ou para final do ano ou inicio de 2015. Aguardem!

Mauricio Lauffer

Blog Post Author

September 26, 2014 at 11:18 am

Mazahhh!!!

Vai ser bonito de se ver 😀

Former Member

July 5, 2015 at 6:41 pm

Show... Parabéns Mauricio..

So fiquei com uma dúvida, pq vc colocou o seu html dentro de uma tga span? Sei que é apenas um exemplo mas fiquei curioso.

Abs

Mauricio Lauffer

Blog Post Author

July 9, 2015 at 11:41 am

Valeu, Mauro!

Eu não tinha percebido esta tag span. Tentei editar o blog, mas ela não aparece no modo edição. Ela é adicionada automaticamente ao postar o blog... Não consegui remover de jeito nenhum.

Mas resumindo: ignore a tag 😀

Former Member

July 8, 2015 at 9:13 pm

Bem legal esse exemplo!

Parabéns.

att,

Cristiano Marques

October 26, 2015 at 5:51 pm

Muito legal meu caro Mauricio, parabéns e obrigado!

Vi esse link no livro de ui5 do aba101. Realmente estamos precisando nos atualizar, já faz mais de um ano que esse post foi feito.

Estou pensando em fazer 2 sites: um com currículo pro mercado ver, e outro com status report pro gerente ver ao invés de ficar me perguntando. rsrsrs.

Até!

Former Member

March 17, 2017 at 7:42 pm

Muuuuito legal! Obrigada! =)

Hospedando SAPUI5 app no Google Drive

1 – Acessar sua conta no Google Drive

2 – Criar uma nova pasta

4 – Compartilhe sua pasta – Acesso Público

5 – Criar um SAPUI5 app

6 – Upload e Compartilhar o app para o Google Drive

7 – Acessar o app

8 – O resultado

Assigned Tags