Crie um app para qualquer website

Escrito por Sexta-feira 19 Fevereiro 2016

Crie um app para qualquer website
Estamos sempre falando sobre os diversos conectores que a GoodBarber oferece para você publicar conteúdo no seu app. Hoje, já são mais de 30!

Mas você pode estar se perguntando, o que é um conector? Você também pode ficar desapontado ao ver que sua plataforma favorita não está na nossa lista conectores. Fazemos o nosso melhor para oferecer uma ótima experiência nativa, sincronizando conteúdo a partir das soluções mais populares no mercado, mas existem milhares!

Por isso, hoje, eu gostaria de apresentar o nosso conector customizado. Este conector faz a GoodBarber compatível com todos os serviços existentes para publicar conteúdo. Claro, a desvantagem é que você terá que trabalhar um pouco mais para fazer isso... mas, até o final deste post, você verá que não é tão difícil.

Vamos descobrir juntos como criar um aplicativo para o seu Joomla, Drupal, ezPublish, Spip... ou qualquer outra solução, mesmo que seja criada do zero.

1 - O que é um conector?

Quando criamos a GoodBarber, queríamos evitar fazer uma conexão direta entre o aplicativo e seu site. Nós já explicamos o por que em uma Friday Talk sobre sincronização. Existem 3 principais razões para esta escolha:

- Melhor manutenção: muitos de vocês nos pedem para ajustar a plataforma GoodBarber de acordo com algumas personalizações que foram realizadas no seu site. Nós sempre tentamos modificar e implementar os ajustes quando os nossos usuários precisam deles. Gerenciar essas modificações em nossos servidores é muito mais eficiente. Se tivéssemos uma ligação direta entre o seu site e o seu app, cada modificação que fosse realizada seria aplicada em todos os aplicativos, e seria necessário que todos enviassem os seus aplicativos para uma nova atualização nas lojas.

- Melhor performance: queremos que seu aplicativo seja rápido e sempre ofereça uma ótima experiência aos usuários. Nós temos um foco especial em tempo de resposta, compressão e transmissão de dados através da rede, etc. Talvez você já esteja familiarizado com o fato de que nossa infra-estrutura é compartilhada com a WMaker, especializada em hospedagem web há mais de 10 anos. Se combinarmos os os dois serviços, são mais de 250 milhões de lançamentos por mês.

- Novos conectores: alguns dos membros da nossa equipe trabalham exclusivamente no motor de sincronização. Eles estão sempre atentos as novas tendências, e quando recebemos diversos pedidos eles trabalham para criar novos conectores.

Os conectores existem para "traduzir" o conteúdo do seu site em um formato compatível com a visualização no aplicativo, de forma nativa.
Por que não criar o seu?

2 - O conector customizado: o que você cria por si mesmo

Caso você não encontre o conector que está buscando na nossa lista, você ainda pode criar o seu próprio!

Vamos dar um exemplo. Se você tem um site feito com Joomla, você pode usar o conector RSS. Mas, este conector não permite que você acesse alguns recursos muito legais em seu aplicativo como postar comentários, adicionar um motor de busca ou ativar a paginação para que o conteúdo possa ser puxado sob demanda no aplicativo.

Portanto, a ideia é criar seu próprio feed de conteúdo, e ligar ao seu aplicativo GoodBarber, usando o conector customizado. Dessa forma, você terá total controle sobre o que você irá publicar em seu aplicativo.

Não é muito difícil fazer isso, mas é exige alguma habilidade em desenvolvimento.

3 - O que eu posso fazer com o conector customizado?

Basicamente, com o conector customizado, você será capaz de acessar todos os recursos disponíveis com cada tipo de conteúdo gerenciado pela GoodBarber: artigos, fotos, vídeos, mapas, podcasts, eventos, comentários, etc.

Dependendo de suas necessidades, você terá que criar diversos feeds de conteúdo:
- receber últimos items
- receber e postar comentários
- filtrar itens por categorias, tags .. cabe a você decidir
- motor de pesquisa

4 - Como criar um feed de conteúdo customizado?

Tudo é explicado no seu back office. Acesse as Configurações > Programadores > Documentação API

Você pode encontrar as especificações que deve seguir, para criar o seu próprio feed. Tenha 2 coisas importantes em mente:
- Todos os feeds que você criar estarão em formato JSON, com a mesma estrutura
- Dependendo do tipo de conteúdo, alguns atributos serão diferentes

Agora, vamos mergulhar nas informações técnicas! Aqui está um exemplo do tipo de feed você poderá criar para exibir seus artigos no app. A maneira mais fácil de fazer isso é criando um feed que irá exibir os últimos 24 artigos do seu site. Mas, será mais ou menos o mesmo do que criar um feed para outros itens (com base em tags, por exemplo), ou um feed que seja criado a partir de um pedido de pesquisa.

{

   "generated_in" : "0.010000 s",

   "items" : [

       {

           "author" : "Author of the post",

           "commentsEnabled" : true,

           "commentsPostUrl" : "URL_API_COMMENTS",

           "commentsUrl" : "URL_FEED_COMMENTS",

           "content" : "...",

           "date" : "2013-10-23T21:57:00+02:00",

           "id" : 123456,

           "images" : [

               {

                   "id" : "image_123456",

                   "url" : "URL_ORIGINAL_IMAGE",

               }

           ],

           "largeThumbnail" : "URL_LARGE_THUMBNAIL",

           "nbComments" : 12,

           "smallThumbnail" : "URL_SMALL_THUMBNAIL",

           "subtype" : "custom",

           "summary" : "...",

           "tumbnail" : "URL_THUMBNAIL",

           "title" : "Title of the post",

           "type" : "article",

           "url" : "URL_POST",

       },

       ...

   ],

   "next_page" : "http://www.example.com/json.php?page=2",

   "stat" : "ok",

   "title" : "Example",

   "url" : "http://www.example.com"
}


Na raiz do dicionário JSON, você irá inserir os metadados do feed. Aqui estará a descrição dele.

A estrutura principal do arquivo JSON:
Essas chaves podem ser encontradas na raiz do feed

Nome

Tipo

Descrição

generated_in

String

Generation time of the response

items

Array of Items

Array of items to be returned

next_page

String

URL of the next_page to call (calculated with the page and per_pageargs)

stat

String

Status of the response ("ok" is everything is fine, "error" otherwise)

title

String

Title of the source

url

String

URL of the source


Então, tudo que você tem que fazer é preencher a tabela de itens com os objetos do Artigo (que variam de acordo o tipo de item).
Aqui está a descrição de cada atributo.

Chaves do dicionário relacionados com itens gerais
Esses comandos são os mesmos para todos os itens. Se o feed customizado fosse para fotos, também seriam utilizados esses atributos.

Nome

Tipo

Descrição

id

String

Item unique identifier on its source

type

String

Item type

title

String

Item title

url

String

Item URL on its source

categories

Array of Strings

Categories associated with the item on the source

date

String (date)

Item publication date

author

String

Item author

subtype

String

Item subtype (generally describes the service type of the source)


Chaves do dicionário relacionados com artigos
Como nosso exemplo é sobre um feed Artigo, precisa inserir essas chaves para todos os objetos

Nome

Tipo

Descrição

nbComments

Integer

Number of comments associated with the item on its source

commentsEnabled

Bool

Describes if the comments have to be enabled or not for this item

commentsUrl

String

URL to access the JSON feed of comments for this item

commentsPostUrl

String

URL that allows to post comments on this item

summary

String

Summary of the article (no HTML, text only)

content

String

Article content

smallThumbnail

String

Article thumbnail (small format)

thumbnail

String

Article thumbnail (medium format)

largeThumbnail

String

Article thumbnail (big format)

images

Array of Dict

List of images contained in the article

images/[]/id

String

Value of the id attribute of the <img> tags in article content

images/[]/url

String

Image URL


Dê uma olhada em alguns exemplos mais detalhados que fizemos, tenha precisão ao criar seu feed, e tudo vai ficar bem. Sinta-se livre para entrar em contato com a equipe de suporte se precisar de ajuda.

5 - Conecte seu feed customizado ao seu app GoodBarber

Crie um app para qualquer website
Assim que o seu feed estiver pronto, você precisa voltar para o seu back office para conectar ele em alguma seção. Uma vez que você tenha chegado até esta etapa, a pior parte já vai ter passado.

Se você já está familiarizado com o back office da GoodBarber, você sabe que quando adicionar uma seção, você pode escolher entre diferentes conectores para ligar conteúdo. Entre os conectores, existe um chamado "Customizado". Você irá encontrar esta opção nas seguintes seções: artigos, vídeos, fotos, sons, mapas e eventos.

Crie um app para qualquer website
Em seguida, você pode definir diferentes opções para o seu feed customizado: últimos artigos, motor de busca, filtros, categorias, etc.

Salve a seção e aproveite o ótimo trabalho que você fez!



Oi
Eu consegui criar o ambiente do meu blog dentro do App,usando o plugin.
Foi super fácil ,depois que meu desenvolvedor esclareceu como usar e vou deixar aqui,para quem estiver com alguma dificuldade .
É muito simples,recomendo realmente o uso do plugin,para facilitar a criação do conteúdo.

Baixe o plugin no seu WP
Ative o plugin
Nas configurações do plugin,copie a numeração (KEY) que foi gerida

Volte ao backofice e clique em conteudo
Escolha implantar um link (ICON da corrente)
Insira o link desejado,de seu blog,como, um link de categoria x,ou uma outra página,Post ,ou mesmo a HOME ,ou uma página de galeria.

Salve e aguarde até 5/10 minutos

Enquanto aguarda vai dando uma modificada no layout,da tal seção

Clique em editar seção ,clique em postagem e escolha como aparecerá suas postagens dessa seção ou link.

É mega fácil
http://josephmurphybrasil.com
avatar
Bom dia Taillards,

Exato, com o Wordpress a integração é a bastante fácil, mas para te dar uma resposta mais precisa, necessito consultar o seu projeto.
Você poderia abrir este ticket através do back office do seu app?

De qualquer forma, com este tipo de integração é possível importar para diversos tipos de conteúdo de forma nativa no seu app. :)
http://blog.goodbarber.com/pt
Goodbarber tem um excelente suporte!

Olá!
Excelente estas ferramentas de apoio,que a goodbarber oferece aos usuários .
Ainda bem que não me unsubscrevi da lista de novidades e promoções da empresa.
Bem por favor poderia responder-me,sobre a parte técnica e mão na massa desse código de costumaçao do feed ?

Eu gostaria de saber aonde eu criaria esse código acima,no WordPress é uma nota,ou dentro do editor,usando o php do blog?
Estou confusa aonde colo esse código !
Pois tenho 3 cursos e 3 diferentes segmentações Gratis Convidados PRO
E um blog a parte,criado no optimizepress (extremamente responsivo) no qual eu puxaria o feed costumizado.

E gostaria de usar esse gancho,porque pelo que eu entendi empacota todo o conteúdo dentro do próprio aplicativo . E torna o blog sugerido completamente nativo.
É isso?

Estou perguntando em público,porque deve haver mais pessoas no mesmo dilema!

Muito obrigada!

Goodbarber tem
Excelente suporte
http://opoderdamente.com

Insira seu endereço de e-mail