Gerando páginas web dinâmicas apenas com Google Drive

Este post também está disponível em: Inglês Chinês Russo Espanhol Francês Árabe Alemão Japonês

< Aviso >
Eu recomendo que você comece conta adicional do Google apenas para o público. Porque, se você seguir o meu procedimento, seu endereço do Gmail será no arquivo XML público.

< Nova solução on 2014/07/09 >

Eu escrevi o post Obter nova versão do Editor de planilhas do Google como JSONP. Se você quiser usar a nova versão do Editor de planilhas do Google para gerar páginas web dinâmicas, em vez de a versão antiga, por favor leia esse post.

< Atualizado em 2014/04/26 >
Utilize Anyfile Notepad ou quaisquer outros aplicativos de edição de texto para o Google Drive no Google Web Store em vez de Drive Notepad. Porque Drive Notepad foi retirado da loja.

< Atualizado em 2014/05/12 >
Hey! Drive Notepad está de volta ao Google Web Store!

< Recomendação >
Eu recomendo que você instale “Drive Notepad”. É uma extensão para o Google Drive. Quando você instala Drive Notepad, você precisa Chrome. Mas depois de conectar Drive Notepad ao Google Drive, Chrome não é necessária. Você pode usar Drive Notepad em qualquer navegador.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< Para atualizar o conteúdo da Planilha >
Você precisa usar o “Google Folha de Cálculo versão 1”. Porque “versão 2” não suporta CSV e partilha XML ainda. (Eu escrevi este post em abril 19, 2014.) Se você costuma gerar novos Folha de Cálculo hoje, está automaticamente a versão 2.

Google explicou novo Folha de Cálculo em “Confira o novo Editor de planilhas do Google“.

Eu me preocupava com CSV e partilha XML não vai apoiar na versão 2. Então eu também verificado “Recursos não compatíveis com o novo Planilhas Google“. Mas esta função não está listado na página. Sim … não listados … mas ninguém tem certeza quando o Google mudar de idéia ….
Você pode concordar esta situação? LOL

Vamos acesso https://g.co/oldsheets para gerar uma Folha de Cálculo na versão 1.

É a minha amostra.

É apenas uma folha. Tem cabeçalho, 3 cols e 2 linhas.
( Vou gerar imgur imagem web site. )

< Vamos torná-lo público >
Siga a foto abaixo.
publish_to_the_web_pt-pt

Selecione “Publicar na web” e empurre “Começar a publicar”.
Consulte a seção “Obter um link para os dados publicados”.
publish_to_the_web_2_pt-pt
Você pode obter o seu Folha de Cálculo como página da Web, HTML, CSV, TXT, PDF, ATOM, RSS, XLS e ODS. Se você deseja sincronizar Folha de Cálculo para o seu site, você deve escolher CSV, ATOM ou RSS. Estes são formato fácil para sincronização. Quando você escolhe um deles, você pode encontrar a função para selecionar coluna e linha. Esta função pode fazer o tamanho do arquivo por pedido menor.

Se você escolher CSV, antes de selecionar gama, por favor, selecione uma folha de destino. Amostra é como a foto abaixo.
select_sheet_pt-pt
No meu exemplo, “A1” é cabeçalho. Eu quero ficar 5 linhas máximo. Então eu definir o intervalo de “A2:A6”.
select_cell_pt-pt
Você pode encontrar “range=A2%3AA6” na url. Se você quiser adicionar a função de paginação para o seu site, você deve alterar dinamicamente o parâmetro para “range” por Javascript.

< É difícil? >
Não se preocupe. Eu escrevi o código Javascript aqui.
https://github.com/mecrazy/generateGoogleDriveUri
Este script é compatível com o CSV, Atom e RSS formatos. É só gerador URI. Ele não tem parser. Se você escolher ATOM ou RSS, você pode usar jQuery como um parser.

Por favor use “generateGoogleDriveUri.min.js” como abaixo.

<!DOCTYPE html>
<html>
<head>
<title>Página Amostra</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Fundição objeto
var gduObj = new genGDU('Put a link to the published data here');

//Gerar URI
var atomUri = gduObj.genUri(
  'atom', // I escolher o formato ATOM.
  {
    startRow:2, //Comece da linha 2
    startCol:1, //Iniciar a partir de 1 col
    cols:1, //Corte uma colunas
    rows:5, //Corte 5 Filas por página
    page:1 //Obter página 1
  }
);

var html = '<a href="' + atomUri + '" target="_blank">' + atomUri + '</a>';
document.getElementById('sample').innerHTML = html;

}
</script>
</head>
<body id="sample"></body>
</html>

< Adicionar index.html e definição Drive Notepad >
Depois de adicionar Drive Notepad no Chrome, você pode encontrar “Text Document” na menu do Google Drive criar.
add_index_pt-pt
Se é a primeira vez que usar Drive Notepad, você será solicitado como abaixo.
permission_01_en_us
Empurre “Login and/or grant app permissions…” e aceitar a pergunta abaixo.
permission_02_pt-pt

Por favor, altere o nome do arquivo para “index.html”. Após salvar o arquivo, feche a aba.
change_file_name_en_us

Por favor, altere a definição sobre “Gerir aplicações”.
manage_apps_pt-pt
Por favor, marque a opção “Use por padrão” de unidade Notepad linha.
use_by_default_pt-pt
Depois disso, você pode usar Drive Notepad como os outros aplicativos no Google Drive.

< Alterar as configurações de compartilhamento >
Selecione a pasta para definir pública.
Depois disso, siga a foto abaixo.
set_sharing_enabled_01_pt-pt
Defina “Público na internet” marcada.
set_sharing_enabled_02_pt-pt

< Preparando HTML, CSS, Javascript >
Use Drive Notepad para prepará-los.
Ou editar com seu próprio editor de texto e enviá-los.
Minha posição relativa é como abaixo.
my_public_tree_pt-pt

O link abaixo é a minha página web criado com Google Folha de Cálculo.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
Se você quiser, por favor, use fontes como amostra.

< Roteiro extra >
Eu desenvolvi imgur conversor URL para minha página web. Se você quiser, por favor, use este.
https://github.com/mecrazy/imgurUrlConverter