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”.

/wp-content/uploads/2014/08/gdrive1_528134.png

Clique no botão “PASTA”.

/wp-content/uploads/2014/08/gdrive2_528135.png

Dê um nome para sua nova pasta.

/wp-content/uploads/2014/08/gdrive3_528136.png

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”.

/wp-content/uploads/2014/08/gdrive4_528137.png

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.

/wp-content/uploads/2014/08/gdrive5_528138.png

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

/wp-content/uploads/2014/08/gdrive6_528139.png

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”.

/wp-content/uploads/2014/08/gdrive7_528140.png

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”.

/wp-content/uploads/2014/08/gdrive8_528141.png

8 – O resultado

Eu espero que você aproveite sua aplicação    ๐Ÿ˜†

/wp-content/uploads/2014/08/gdrive9_528142.png

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

To report this post you need to login first.

12 Comments

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

  1. Marlo Simon

    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

    (0) 
    1. Mauricio Lauffer Post author

      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     ๐Ÿ˜€

      (0) 
  2. Cristiano Marques

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

    (0) 

Leave a Reply