Phonegap + Jquery + Onsenui Android

traceelliot

Power Member
Boas pessoal....

Gostava de uma ajuda aqui num projeto que estou a desenvolver.

Estou a fazer uma aplicação para Android com a ajuda de Jquery Phonegap e onsenui.

A aplicação consiste em carregar um feed de um site feito em wordpress e depois mostrar o artigo que seleccionamos no feed.
O conteúdo do artigo quando é mostrado é adaptado á aplicação, ou seja, o que pretendo é mostrar apenas o titulo e depois o seu conteúdo do artigo.
O problema está no conteudo a mostrar os videos do youtube.

Para ir buscar os dados do feed ao site estou a usar a seguinte API do Google.

https://developers.google.com/feed/v1/reference

Por exemplo os vídeos do youtube que estão no iframe se começarem com http://www.youtube..... são apresentados.
Os videos que começarem por //www.youtube........ são sumidos.

Gostava de saber que solução utilizar.
- Buscar o conteudo atravez desta API. (entries.content)
- Buscar o conteudo através do link do artigo obtido do feed. (Mas com o link como selecciono o conteúdo através de AJAX)

O código da aplicação encontra-se a seguir:

Construção do FEED
Código:
//CODE JQUERY
                // Data object: RSS feed URL, number of entries to return, result format, API version
                var data = {
                    q: 'http://www.dominio.pt/feed'
                    , num: 20
                    , output: 'json'
                    , v: '1.0'
                };
       
                // AJAX call to Google Feed API which converts ATOM/RSS feed to JSON
               $.ajax({
                    url:'http://ajax.googleapis.com/ajax/services/feed/load'
                    ,type : "GET"
                    ,dataType : "jsonp"
                    ,data: data
                    ,success: function (json) {
                        var feed = json.responseData.feed;
                        if(!feed) return;
                        var entries = feed.entries;
                        if(!entries) return;
                       
                        //Variaveis
                        //Conteudo html para o div feed
                        var html = '';
                        //Content o conteudo do artigo
                        var content = '';
                        //Imagem para colocar em cada artigo no feed
                        var image = '';
                        for( var i=0; i<entries.length; i++){
                            //Data que não está a ser utilizada ainda
                            var date = new Date(entries[i].publishedDate);
                            var dia = date.getDay();
                            var mes = date.getDate();
                            var ano = date.getYear();
                            var data = dia + '/' + mes + '/' + ano;
                            //--------------------------------------------------
                            //Forma que arranjei para colocar na variavel html o link do artigo no evento onclick na função artigo
                            var texto = "'" + entries[i].title + "'";
                            //Não está a ser utilizador (foi para DEBUG)
                            var page = "'noticia.html'";
                            //---------------------------------------------
                            //Coloca o conteudo do artigo para a variavel
                            content = entries[i].content;
                            //Seleciono a primeira imagem que aparecer no content para colocar no feed
                            image = $(content).find('img:first').attr('src');
                            //DEBUG
                            //html += '<li class="list__item list--inset__item list__item--chevron" onclick="teste('+texto+')"><b>' + entries[i].title  + '</b>' + '<br />' + entries[i].author + '&nbsp&nbsp' + data + '<br/>' +'<img src="' + image + '" width="95%" height="200" /></li>';
                            html += '<li class="list__item list--inset__item list__item--chevron" onclick="artigo('+texto+')"><div class="centrado">' + entries[i].title  + '</div>' + '<br/>' +'<img src="' + image + '" width="95%" height="95%" class="imagem" /></li>';
                        };
                        //Constroi o FEED com os artigos
                        $('#feed').html(html);
                        //A construção do FEED está como quero :-D
                    }
              });

Construção do artigo quando clicamos no link do feed

Código:
//Função chamada quando no feed escolhe o artigo a ver
function artigo (artigo) {
    //Copiei da documentação a animação do onsen ui e adaptei
    var options = {
      animation: 'slide', // What animation to use
      onTransitionEnd: function() {
          //CODE JQUERY
        // Data object: RSS feed URL, number of entries to return, result format, API version
        var data = {
            q: 'http://www.dominio.pt/feed'
            , num: 20
            , output: 'json'
            , v: '1.0'
        };
   
        // AJAX call to Google Feed API which converts ATOM/RSS feed to JSON
       $.ajax({
            url:'http://ajax.googleapis.com/ajax/services/feed/load'
            ,type : "GET"
            ,dataType : "jsonp"
            ,data: data
            ,success: function (json) {
                var feed = json.responseData.feed;
                if(!feed) return;
                var entries = feed.entries;
                if(!entries) return;
   
                var html = '';
                for( var i=0; i<entries.length; i++){
                    //Comparo se no resultado obtido pelo AJAX existe algum artigo com o link igual ao clicado
                    if (entries[i].title == artigo) {
                        //Começo a construição da visualização do artigo na APP
                        //Titulo está OK :-D
                        html += '<center><h1>'+ entries[i].title +'</h1></center><hr>';
                        //Problema aqui no content.
                        //Problema
                        //Videos do youtube que no src não tenham http://
                        //são sumidos pela api do feed do Google
                        //Os videos que são sumidos em vez de terem http:// tem só //www.youtube......
                        html += entries[i].content;
                                               
                        /*console.log(html);
                       
                        var comeco = html.search('<iframe src="');
                        var fim = html.indexOf('"', comeco);
                       
                       
                        var link = html.slice(comeco, fim);
                        alert(comeco);*/
                    };
                };
                $('#artigo').html(html);
               
                //Formatação imagens
                $('#artigo img').each(function() {
                    $(this).css('width', '80%');
                    $(this).css('height', '80%');
                    $(this).css('display', 'block');
                    $(this).css('padding-top', '20px');
                    $(this).css('padding-bottom', '20px');
                });
               
                //Imagens Retirar-las dentro de dos links (jquery .text)
                $('#artigo a').attr("href", "#");
               
                //Videos do youtube (obter o link do iframe e colocar um link)
               
                               
               
                //Padding div artigo
                $('#artigo').css('padding-left', '10px');
                $('#artigo').css('padding-right', '10px');
                $('#artigo').css('text-align', 'justify');
            }
      });
      } // Called when finishing transition animation
    };
    myNavigator.pushPage('noticia.html', options);
}

Agradecia ajuda até podem mandar PM para eu explicar melhor o codigo e o que pretendo

Obrigado pessoal. :-D
 
Pessoal depois de alguma pesquisa estou a ver que não consigo ir buscar o código HTML dos artigos do Wordpress em condições através do Google Api Feed.

Não sabem se existe alguma API ou alguma forma de ir buscar o codigo HTML dos artigos feitos em Wordpress? Precisava de uma luz pessoal.
Queria saber apenas uma forma através de Javascript seleccionar o content dos artigos em Wordpress.

:-)
 
Queres ir buscar cada artigo num pagina html?

Podes criar um webservice que corre um html parser e vai buscar as divs/articles/whatever que queres.
Por ex. com php podes usar o file get contents() e dps correr o parser, embora isto seja uma má prática, ideal é comunicares com a BD directamente...

Nao sei nada sobre a plataforma mas o wordpress nao disponibliza um rss feed? ou nao existem widgets para isso?... se disponibilizasse ja podias usar essa api para ir buscar o que o rss do wordpress devolve
 
Última edição:
Boas pessoal....

Obrigado pela dica mesmo. :001:
Estive a estudar essa api e consigo retornar tudo o que eu quero. Só tenho um problema.
No jquery quando tento ir buscar os dados diz "XMLHttpRequest cannot load http://localhost/wordpress/?json=1&count=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

O meu codigo está assim que vai fazer o pedido dos dados.

Código:
$.ajax({
          type: 'GET',
          url: 'http://localhost/wordpress/?json=1&count=1',
          dataType: 'json',
          success: function(data){
            console.log(data);
          }
});

Sei que se fosse mesmo um ficheiro .json ele returnava-me os valor atraves de $.ajax e jQuery.getJSON().

Na altura para ler o Feed do site antes aconteceu o mesmo e tive de usar aquela api do google.

Como eu agora vou fazer o pedido ao json? :confused:
 
Pergunta de noob.
Já andei a pesquisar e mesmo assim isto não consegui.
Como criar uma div para colocar conteúdo e esse conteúdo não transbordar os limites da div?
O texto não passa mas as imagens passam. E video do youtube e afins.
Se houvesse uma maneira em css de limitar esse conteúdo todo de uma vez era bom. :bounce:
 
Pergunta de noob.
Já andei a pesquisar e mesmo assim isto não consegui.
Como criar uma div para colocar conteúdo e esse conteúdo não transbordar os limites da div?
O texto não passa mas as imagens passam. E video do youtube e afins.
Se houvesse uma maneira em css de limitar esse conteúdo todo de uma vez era bom. :bounce:

O conteudo ocupa 100% width (ou height) e essa DIV pai, tem um max-width (ou height).

Em último caso podes recorrer ao overflow: hidden; na DIV pai.
 
Vou experimentar. Obrigado. [emoji12]

Edit: Fiz assim

CSS:
#screen {
max-width: 200px;
}
#article {
width: 100%;
}

HTML:
<div id="screen">
<div id="article"></div>
</div>

Imagens e videos do youtube passam os limites. O que tenho feito é seleccionar o conteudo por partes através de CSS e trabalhar com percentagens.
Só que é uma trabalheira
 
Última edição:
Back
Topo