Ad

fica

appvbt

menu css interativo json

Procurando...

Acompanhe, partilhe!

Login Logout Version

Bem vindo a Verbratec!

Contato Sobre Mapa do site

20 de mar de 2018

JavaScript json Blogger um estudo.

Segunda parte do estudo de json, formas de usos no Blogger.
Nessa parte vamos ver, segundo a tradução, como liga de volta: "callback".
Eu quero que ligue de volta numa função javascript, posso dar qualquer nome para essa função, por exemplo "vbtlist" como que 'listando verbratec' e no script fica assim:
<script src="https://www.verbratec.com.br/feeds/posts/default?alt=json-in-script&amp;callback=vbtlist" type="text/javascript">    
</script>

E você é esperto e acaba de perceber que a forma de chamada é a mesma que usamos para requisitar o uso de uma biblioteca "JQuery" ou "FontAwesome" por exemplo, ou seja, tudo muito simples, quando entendemos como funciona.

 Agora vamos escrever o script do tipo javascript:

<script type="text/javascript">      
function vbtlist(json) {       
for (var i = 0; i < json.feed.entry.length; i++)       
{       
var TotalPosts = json.feed.openSearch$totalResults.$t;       
  }

    var listing = "Total = " +TotalPosts+ " Posts" ;       
document.write(listing);       
}       
</script>
Então juntando as duas partes, temos abaixo o resultado em verde.




Como pode perceber, se você usa F12 no FireFox por exemplo, observa o resultado do script, como vemos na imagem.


Prosseguindo com o estudo, temos:
https://www.meublog.blogspot.com.br/feeds/posts/default?alt=json-in-script&callback=minhaFunctionJs
E então adicionamos mais parâmetros:
https://www.meublog.blogspot.com.br/feeds/posts/default?alt=json-in-script&callback=minhaFunctionJs&max-results=1000&start-index=1
E max-results e start-index, como você deve saber, instruem a plataforma Blogger a retornar um número máximo de feeds de 1000 (neste exemplo de URL), a partir do primeiro feed disponível ordenado pelo último publicado. Nos vários exemplos sobre o mesmo tópico, você pode encontrar praticamente todos os valores máximos para um número como 999999 para ter todos os feeds retornados em uma chamada. No entanto, googling ao redor, parece que há o suspeito Google definir um limite máximo de feeds é possível entrar em uma única chamada. Como de costume, esse limite "oficial" é indocumentado do que, apenas para evitar problemas, neste exemplo, vou escolher extrair os feeds com etapas de 1000, você pode aumentar esse valor se quiser. Fonte completa de código javascript:
 



<script type="text/javascript">
    var StartIndex = 1;
    var MaxResults = 1000;

    function minhaFunctionJs(BlogData) {
        var Feed, i;

        for (Feed = BlogData.feed, i = 0; i < Feed.entry.length; i++) {
            var PostUrl, ImgUrl, Entry, Content, Title, x;

            Entry = Feed.entry[i];
            Content = Feed.entry[i].content.$t;
            Title = Feed.entry[i].title.$t;
            ImgUrl = PostUrl = '';

            if (typeof Feed.entry[i].media$thumbnail !== 'undefined') {
                ImgUrl = Feed.entry[i].media$thumbnail.url;
            }

            for (x = 0; x < Entry.link.length; x++) {
                if (Entry.link[x].rel == 'alternate') {
                    PostUrl = Entry.link[x].href;
                    break;
                }
            }
            // Aqui você tem todos os dados básicos do post, use como quiser   
        }

        if (i < MaxResults) {
            //Todos os feeds foram extraídos
        } else {
            var ScriptObj = document.createElement('script');

            var FeedsUrl = 'https://www.meublog.blogspot.com.br/feeds/posts/
default?alt=json-in-script&callback=minhaFunctionJs&max-results=' + MaxResults + 
'&start-index=';

            StartIndex = (StartIndex + MaxResults);

            ScriptObj.src = (FeedsUrl + StartIndex);
            document.body.appendChild(ScriptObj);
        }
    }

    function StartFeedsExtraction() {
        var ScriptObj = document.createElement('script');

        var FeedsUrl = 'https://www.meublog.blogspot.com.br/feeds/posts/
default?alt=json-in-script&callback=minhaFunctionJs&max-results=' + MaxResults +
 '&start-index=';

        ScriptObj.src = (FeedsUrl + StartIndex);
        document.body.appendChild(ScriptObj);
    }
</script>

<script type="text/javascript">
    StartFeedsExtraction();
</script>



Esta chamada inicia o processo de extração de feeds. Basicamente, ele insere dinamicamente uma chamada em um URL formatado para obter os feeds do blog. Depois que o processo foi iniciado corretamente, o minhaFunctionJs() foi chamado automaticamente com o intervalo de dados dos feeds solicitados. O primeiro ciclo extrai as informações básicas do post, como conteúdo, título, URL do post e URL da imagem (se a imagem estiver presente, geralmente é a primeira imagem do post). Se você precisar de mais dados, examine a estrutura da árvore de postagens conforme descrito acima e leia as informações adicionais que deseja. A segunda condição if (i < MaxResults) verifica se todos os feeds foram extraídos. Como pedimos um número máximo de feeds de MaxResults (isto é, 1000 no nosso exemplo), se o número de feeds retornado não for menor para esse valor, provavelmente significa que há feeds adicionais disponíveis. Nesse caso, repita a operação para solicitar dinamicamente novos feeds aumentando o índice inicial para o próximo intervalo. Caso seja menor, significa que todos os feeds foram extraídos e a operação pode ser concluída.
Observe que a mesma operação pode ser feita extraindo feeds conectados apenas a alguns marcadores. Bastará alterar o URL assim:
https://www.meublog.blogspot.com/feeds/posts/default/-/meuMarcador/?alt=json-in-script&callback=minhaFunctionJs

Abraço e até a próxima!
Este estudo se guia pela publicação do Mohammad Mustafa Ahmedza em https://www.mybloggertricks.com/2015/10/introduction-to-blogger-json-feeds-and-blogger-data-api.html
Mohammad começou a blogar em agosto de 2008 logo após completar seu GCE A Level. Após uma desqualificação do visto dos EUA para estudos superiores, ele começou a escrever blogs para se livrar da crescente depressão e, em seguida, sua vida mudou drasticamente. Ele começou a ter interesse em ajustar os Modelos do Blogger ao ler detalhadamente artigos on-line. Sua sede de aprender e entender as últimas tecnologias da web, como HTML4, CSS3, PHP e JavaScript, o equipou com uma excelente arte de web design. Ele agora é um web designer e desenvolvedor web por todos os direitos sem ter feito qualquer treinamento profissional.

Aprender json Blogger.

  Pensando em desenvolver seu próprio template, com seus widgets específicos, com aquelas funções que, só você teve a ideia exclusiva e não sabe por onde começar! Comece com json apiv3 Blogger. Você vai ficar muito contente com o que vai descobrir e fazer em seu blog.
API - Application Package Interface é o meio de comunicação para aplicativos permite interagir uns com os outros. Desenvolvedores de um aplicativo fornecem APIs para que outros desenvolvedores criem aplicativos e interajam com os seus próprios. Da mesma forma, a equipe do Blogger criou uma API própria(apiv3), que permite aos desenvolvedores externos interagir com o sistema de gerenciamento de conteúdo do Blogger.
Abra este link para ver de onde virão os dados de nosso blog aqui:
https://www.verbratec.com.br/feeds/posts/default?alt=json Você precisa saber um pouco de html, css e javascript para seguir em frente. Não é necessário um know-how avançado e você não precisa ser um programador qualificado para entender os conceitos. Vamos tentar o nosso melhor para tornar o mais fácil possível, nosso estudo aqui.
Você poderá criar seus widgets de comentários, galeria com imagens de seus posts, widgets resumos de postagens e muito mais. O céu é o limite.

JSON - JavaScript Object Notation é um formato leve de intercâmbio de dados fácil para humanos ler e escrever. É fácil para as máquinas analisar e gerar. Ele permite que o navegador interaja facilmente com seu servidor de blog e obtenha dados muito mais rápidos em comparação com o XML, que é muito mais lento neste caso.
O objeto feed é onde todos os dados do seu blog são armazenados como mostrado na imagem.
Tudo está dentro das chaves{}.
Observe o objeto title nome da variável $t: valor Verbratec.
Entre conchetes estão as arrays


Novatos como eu muitas vezes confundem o Blogger JSON API, com o Blogger JSON Feeds. Os feeds JSON são arquivos simples usados ​​para armazenar e/ou trocar dados, enquanto a JSON API é uma Interface de Pacote de Aplicativos que permite interagir com outras aplicações de terceiros.

Caso seu navegador não mostre json como vimos na imagem(árvore de dados), você pode acessar o site https://codebeautify.org/jsonviewer para ver sua árvore de dados.



Então temos na árvore de dados, os objetos entre chaves e arrays entre conchetes, agora vamos ver a lista:
 {}id - único identificador em cada postagem.
 {}published - data da publicação da postagem.
 {}update - data da última edição.
 {}category - mostra os marcadores da postagem
 {}title - mostra o texto título da postagem

Algumas coisas como por exemplo, openSearch$itemsPerPage dependem das configurações internas feitas no seu blog, eu configurei o meu blog para mostrar 50 postagens, os valores usuais são 10, 25, 50 e 100.
Já observei que no painel do Blogger a contagem inclui as postagens em rascunho.
Todos os dados das postagens estão em https://www.verbratec.com.br/feeds/posts/default?alt=json
Todos os comentários logicamente em https://www.verbratec.com.br/feeds/comments/default?alt=json
Então as páginas estáticas estarão em https://www.verbratec.com.br/feeds/pages/default?alt=json

Se você é como eu, gosta de aventura e copiar códigos de scripts como "slides", e já deve ter reparado nessa linha:
https://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc
Pessoas mais preguiçosas nem se dão ao trabalho de explorar e estudar, apenas copiam e usam, trocam o nome do blog e algumas nem isso fazem, claro que não funciona e vão reclamar, kkkkk.
Essa linha de código veio de onde afinal? Sim é a primeira linha das amostras, veja só: https://developers.google.com/gdata/samples/blogger_sample
Aproveita e dá uma boa olhada, mas volta hein!
Voltou que legal!
Como vimos json-in-script diz algo diferente ao Blogger, ou seja o Blogger devolve de de forma diferente as requisições feeds/posts/default?alt=json e feeds/posts/default?alt=json-in-script
Quando usamos json-in-script dizemos ao Blogger que queremos usar javascript e então obtemos uma função chamada: gdata.io.handleScriptLoaded.
Se você não percebeu isso, ainda está em tempo, abra os próximos dois links e observe o início da primeira linha de código retornada; link 1 com alt=json
Link 2 com alt=json-in-script e nossa função gdata.io.handleScriptLoaded como resultado.
Na próxima etapa vamos ver como javascript pega os dados.

Abraço e até a próxima!
Este estudo se guia pela publicação do Mohammad Mustafa Ahmedza em https://www.mybloggertricks.com/2015/10/introduction-to-blogger-json-feeds-and-blogger-data-api.html
Mohammad começou a blogar em agosto de 2008 logo após completar seu GCE A Level. Após uma desqualificação do visto dos EUA para estudos superiores, ele começou a escrever blogs para se livrar da crescente depressão e, em seguida, sua vida mudou drasticamente. Ele começou a ter interesse em ajustar os Modelos do Blogger ao ler detalhadamente artigos on-line. Sua sede de aprender e entender as últimas tecnologias da web, como HTML4, CSS3, PHP e JavaScript, o equipou com uma excelente arte de web design. Ele agora é um web designer e desenvolvedor web por todos os direitos sem ter feito qualquer treinamento profissional.

Design by Jair de Jesus - Josh Peterson

Verbratec© Desktop 2018