practice-uffs / maker Goto Github PK
View Code? Open in Web Editor NEWFerramenta para criação de conteúdos digitais diversos no contexto universitário
License: MIT License
Ferramenta para criação de conteúdos digitais diversos no contexto universitário
License: MIT License
Uniformizar o layout do lbk para que ele fique no mesmo padrão do resto do site. Além disso, verificar as configurações existentes para que somente as configs necessárias sejam utilizadas.
O Ibis tem a opção de tema claro e escuro, disponibilizar esta opção para o usuário.
Atualmente só podemos gerar a versão 'light' do livro digital, o @alissonpeloso sugeriu gerar a opção dark também, eu acredito que esta não é uma tarefa tão difícil, tendo em vista que seria apenas alterar o chamado do ibis e algumas coisas no asset do ibis também.
Utilizar a queue do laravel na geração do livro.
Como a geração do livro demora alguns segundos, para permitir que o usuário navegue livremente pelo site, deve-se usar as queues/Job .
Dessa maneira também é registrado no banco os jobs que foram criados e também os que falharam.
Proveniente do comentário da isse: #37
Depende de #7
Depois que a classe GoogleDocs
for atualizada para permitir a listagem dos documentos do google drive compartilhadas com a conta Google do Practice, esses dados devem ser mostrados no maker.
O objetivo dessa tarefa é criar uma página (uma rota e uma view) para mostrar a listagem desses documentos. A listagem dos documentos no maker deve mostrar o nome do documento, a URL dele (no google drive) e, se possivel, quem é o dono daquele documento (por exemplo, se o Fernando compartilhou um doc com o practice, o dono desse documento é o Fernando).
Dicas:
O mural v2 tem uma classe que faz buscas de arquivos e pastas no google drive. Talvez seja uma boa dar uma olhada nela.
Eu acho que a documentação do SDK PHP do Google deve ter exemplos de como listar arquivos compartilhados com uma determinada conta).
Para a renderização do conteúdo do LBK através de node, a URL de conteúdo precisa estar disponível publicante para um script externo. O objetivo dessa issue é implementar isso.
Foi levantado nas duas reuniões de líder que eu participei que a funcionalidade da geração de livros digitáis deveria ser utilizável.
Pelo menos para testes, isso envolve alguns ajustes no que está na dev agora, como a parte do credentials e do token.
Atualizar o método de login de todos os nossos serviços para não sobrecarregar os servidores.
balb baoldfj
Atualmente a área de conteúdo do lbk não faz redimensionamento algum. Isso faz com que conteúdos muito grandes fiquem fora do campo de visão do usuário (ou que muitos scrolls apareção). O objetivo dessa tarefa é criar um painel de visualização da área de conteúdo que permita ao usuário ajudar o zoom de visualização.
Na issue 1068 do programa, desenvolvendo o livro digital para um conteúdo específico, notei que o Ibis não conseguiu renderizar uma imagem a partir de um link.
O intuito desta issue é verificar o motivo desse bug acontecer e tentar arrumar.
Na issue foi dada a volta por cima utilizando a imagem em base:64 (muuuuito inviável).
O objetivo desta issue é adicionar algo que indique ao usuário que o livro está sendo gerado, para que o mesmo possa aguardar a sua geração e depois ser redirecionado para o livro.
Talvez uma barrinha de carregamento ou algo do tipo.
Como o livro é gerado dentro de um Job do Laravel, e assim que o Job finaliza o livro está disponível para ser acessado, não sei como vai funcionar essa relação (levando em conta que o dispatch do láravel chama o Job para ser processado e a aplicação segue rodando), se tem algum tipo de callback quando o Job finaliza ou algo do tipo, algo a ser estudado.
Melhorias no espaçamento entre linhas, tipo de fonte e espaçamento do título do capitulo
Aplicar as alterações da issue 1068
Esse arquivo vai em: public/book/assets/fonts/Roboto-Regular.ttf
Alterar no MakeBookJob e UpdateBookJob;
\'fonts\' => [
\'roboto\' => \'Roboto-Regular.ttf\',
],
Alterar nos arquivos do ibis theme-light e theme-dark: (no light o background collor ñ existe e o color é 252525)
body {
font-family: roboto;
font-size: 14px;
line-height: 2;
color: #252525;
}
h1, h2 {
font-family: roboto;
}
h3 {
font-family: roboto;
font-weight: bold;
}
h1 {
font-size: 30px;
padding-top: 0;
padding-bottom: 30px;
}
.mpdf_toc {
font-family: roboto;
color: #252525;
}
span.mpdf_toc_t_level_0, span.mpdf_toc_p_level_0 {
color: #252525;
font-family: roboto;
font-weight: bold;
font-style: normal;
}
span.mpdf_toc_t_level_1, span.mpdf_toc_p_level_1 {
color: #252525;
font-family: roboto;
font-weight: normal;
font-style: normal;
}
span.mpdf_toc_t_level_2, span.mpdf_toc_p_level_2 {
color: #252525;
font-family: roboto;
font-weight: normal;
font-style: normal;
}
Na #13 foi criado um botão para salvar as imagens.
Porém nem sempre será em forma de imagem.
O LBK precisa identificar se é imagem, gift ou vídeo e salvar no formato correto.
O objetivo dessa issue é implementar uma forma do usuário informar, via texto, meta informações que sirvam para guiar o maker na produção de conteúdo. Inicialmente, precisamos de uma forma de informar:
A forma que isso será implementada é utilizando-se uma marcação como { ... }
no começo de uma linha. O que estiver dentro das chaves é a meta informação que o maker deve analisar para entender do que se trata.
Quando o maker estiver gerando o conteúdo para o Ibis renderizar um livro, ele deve procurar pela string {capitulo}
no começo da linha. Por exemplo, o texto abaixo produziria 3 capítulos diferentes no livro sendo renderizado:
{capitulo} # Olá mundo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum eu urna a tempus.
In non facilisis velit, a laoreet purus. Vivamus nec justo in ligula efficitur aliquam id id dui.
Vestibulum venenatis, leo vel elementum dignissim, dui turpis feugiat nibh, sed pellentesque lectus sapien non est.
Quisque mollis ornare lectus posuere placerat.
{capitulo} # Alguma coisa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum eu urna a tempus.
In non facilisis velit, a laoreet purus. Vivamus nec justo in ligula efficitur aliquam id id dui.
Vestibulum venenatis, leo vel elementum dignissim, dui turpis feugiat nibh, sed pellentesque lectus sapien non est.
Quisque mollis ornare lectus posuere placerat.
{capitulo} # Conclusão
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum eu urna a tempus.
In non facilisis velit, a laoreet purus. Vivamus nec justo in ligula efficitur aliquam id id dui.
Vestibulum venenatis, leo vel elementum dignissim, dui turpis feugiat nibh, sed pellentesque lectus sapien non est.
Quisque mollis ornare lectus posuere placerat.
Detalhe que a string {capitulo}
deve ser removida pelo maker quando o conteúdo for passado ao Ibis. Ela é uma marcação puramente para instruir o maker no que fazer, ela não tem contribuição no texto.
Quando o maker estiver gerando um site, ele deve procurar pela string { ... }
no começo da linha para saber que o conteúdo, a partir daquela linha, refere-se a uma página. O conteúdo que está entre chaves é a URL daquela página.
Por exemplo, se o maker encontrar uma linha que tenha o seguinte conteúdo:
{teste} Dicas de nutrição
Ele saberá que a partir desse ponto (até que ele encontre uma nova marcação dessas, por exemplo {sobre} Sobre o site
) o texto encontrado faz parte da página teste
.
É importante notar que o conteúdo que está entre chaves é a URL completa daquela página. Logo, se o usuário escrever algo como:
{dicas/saude/nutricao} Dicas de nutrição
Minhas dicas de nutrição.
{dicas/saude/exercicio} Dicas de exercícios
Alguma coisa sobre exercícios.
O maker criará duas páginas para esse site, sendo que a estrutura de arquivos delas será a seguinte:
- /dicas
|--- /saude
|--- /exercicios
|--- index.html (conteúdo desse arquivo será "Minhas dicas de nutrição.")
|--- /nutricao
|--- index.html (conteúdo desse arquivo será "Alguma coisa sobre exercícios.")
Em linhas gerais, cada vez que uma /
seja encontrada dentro da string entre chaves, isso indica a criação de uma pasta no sistema de arquivos. A string {oi/voce/teste/aqui}
criará a pasta oi
, que tem dentro a voce
, que tem dentro a teste
, que tem dentro a aqui
, que tem dentro o arquivo index.html
com o conteúdo daquela página.
O objetivo dessa tarefa é criar o aparato inicial para que páginas web sejam geradas a partir do maker. A ideia básica é o seguinte:
Title
será considerado uma página/url).Nesse primeiro momento, o layout de cada arquivo html não é importante (vamos melhorar isso no futuro).
Eu acho que a melhor forma de organizar isso tudo é criado um job Laravel que faça o que foi descrito acima. O job deve utilizar uma configuração do Laravel (pode ser o arquivo config/sites.php
) que informe a pasta no sistema onde os arquivos serão colocados. Cada site deve ser colocado em uma pasta cujo nome é o id do próprio site.
Por exemplo, se o job receber via config que a paste de site é D:\sites
e que ele está gerando o site de id 20
, os arquivos desse site serão colocados todos na pasta D:\sites\20
(se a pasta 20
não existir, ela precisa ser criada pelo job).
O maker será utilizado também para a publicação de websites criados pelos usuários. O fluxo é muito semelhante à publicação de livros: o usuário fornece um link no Google Docs, o maker obtem o conteúdo desse documento, processa ele, e gera um artefato.
No caso do livro, o processamento é rodar o ibis
e o artefato é um PDF. No caso do site, o processamento é será a criação de uma pasta com vários arquivos (que comporão o site). O objetivo dessa tarefa é criar o fluxo para a geração de um site, com uma ferramenta de linha de comando que apenas receba o conteúdo do Google Docs e crie um único arquivo html, que tem exatamente o mesmo conteúdo do documento do Google Docs.
Além disso, o fluxo completo para o usuário criar um site, informar a URL, clicar em gerar deve ser implementado. O modelo Site
deve ser utilizado para essa tarefa. Em resumo, será uma replicação de tudo que é feito com o modelo Book
(e suas páginas) para ser feito para o modelo Site
.
A criação do processador que efetivamente criará o site está fora do escopo dessa tarefa (isso será feito no futuro).
Quando o usuário criar algum material no LBK (um poster, por exemplo) e clicar no botão Download
, o conteúdo será gerado por um browser no back-end e, em seguida, enviado ao front-end para download. Esse processo será implementado como um job do Laravel no futuro. Para agora, vamos fazer uma implementação não ideal, porém bem mais simples.
A ideia é a seguinte:
Download
ContentController@download
)download
do controller ContentController
roda um comando na máquina (usando exec()
, system()
, etc) que é um script node que usa o puppeteerdownload()
do controller terá o retorno do script, que é a imagem resultado em formato basee64. Essa informação é retornada pelo controller dentro do campo download_url
Eu acho que o mais fácil para se começar essa tarefa é criar um script node que utilize o puppeter para acessar uma URL e tirar um screenshot dela. Em seguida, o próximo passo pode ser imprimir no console essa imagem codificada como base64. Existem vários materiais na internet sobre como tirar um screenshot usando puppeter:
O projeto ccuffs/api-cc faz uso desse mesmo fluxo. No caso da api-cc, o script node é utilizado para acessar uma página dos sistemas da UFFS e imprimir seus conteúdos (para que o Laravel faça uso).
A execução do script acontece no arquivo SgaScrapper. Há um arquivo de configuração chamado sgascraper que contém informações sobre como o script node é executado (em linhas gerais, ele tem um node script.js
). No caso da API cc, o script node usa um arquivo de configuração externo, que não será utilizado pelo nosso. No nosso caso, o script node pode receber os parâmetros direto pela linha de comando.
Portar o layout da página de login do Mural para o Maker. O objetivo é que a página de login do Maker fique exatamente igual à do Mural (só que em vez de Mural a palavra é Maker).
Ajustar as classes de CSS que são usadas no layout interno para que elas sejam as classes certas para o conteúdo ficar com a página em fundo branco.
Se eu não me engano, estamos usando as classes do tailwind bg-gray-XXX
nas páginas. Se remover elas o layout já deve ficar com fundo branco.
Portar o layout da página inicial (para não logados) do mural v2 para a página inicial (não logados) do Maker.
O objetivo dessa issue é implementar o fluxo para buscar o conteúdo de um arquivo no google drive e, a partir dele, gerar um livro em formato PDF. A seguir estão os passos para que essa issue seja completada.
Livro
Criar uma página nova (no menu superior ela se chamada Livro
, nas views é resources/views/book.blade.php
, e no controller é App/Http/Controller/BookController.php
, rota /livro
). Essa página deve conter um campo (input) e um botão para enviar. O usuário informará o link de um documento do google drive nesse input.
Utilizando a informação do campo input, buscar o conteúdo do documento e salvar esse conteúdo como texto puro (sem formatação alguma) localmente. É importante que o conteúdo seja salvo em uma pasta própria, porque teremos outros elementos dentro dessa pasta (que são usados pela ferramenta de criação do livro).
Utilizar o Ibis para gerar um livro em PDF a partir do conteúdo baixado. Você terá que inicializar a pasta (onde está o texto puro) com os arquivos do ibis via linha de comando. Dá uma olhada no projeto id-uffs-avatar para ver como um arquivo de linha de comando é executado em integração com o projeto. Para o teu caso, você pode assumir que o comando ibis
está disponível para rodar (não precisa instalar ele), então é uma questão de rodar algo na linha de comando a partir do Laravel e imprimir na tela a saída desse comando (olha esse arquivo por exemplo).
Com o readme atual eu consigo instalar todas as dependências, iniciar o maker localmente e utilizar o LBK.
Porém o Livro Didático Digital não é possível.
Em conversa com @GuilhermeGraeff fui informado que existem alguns passos a seguir para utilizar localmente para teste.
Objetivo: Atualizar o readme com os passos e recursos necessários para testar o livro didático digital
Precisamos de dois modelos para representar as ações atuais do maker. O modelo Art
será para guardar qualquer coisa relacionada ao LBK, o modelo Book
guardará informações de um livro didático digital. Por fim, o modelo Site
será usado para coordenar ações de criação de sites (a ser implementado no futuro).
Alterar de acordo com a nova logo: LINK
Sexta-feira foram definidos mais alguns ajustes que devem ser feito no maker.
Ex: https://github.com/ccuffs/intranet
Maker: https://github.com/practice-uffs/maker
Criar um botão de para utilizar dessa biblioteca para salvar o iframe de conteúdo do live-broadcast-kit como uma imagem.
Issue para ajustar o que foi pedido na issue 1068.
Essa issue vem da issue #37, onde o @alissonpeloso sugeriu "Também seria interessante criar uma issue pra adicionar esse manual no maker ou talvez um manual mais iterativo."
Criar um manual mostrando as tags markdown, para que serve e exemplos.
Hoje um livro didático é gerado pelo maker através de um arquivo no google drive. Porém quando esse arquivo é atualizado com novas informações é necessário gerar um novo livro para obtê-las.
Objetivo é criar uma opção dentro do livro, ou na listagem do mesmo, para atualizar os dados de acordo com o momento atual do arquivo no drive.
Acho que a ideia aqui é buscar uma branch estável para que possámos fazer merge para a master e ter essa como a versão de produção do maker.
@GuilhermeGraeff, acho que você pode selecionar esse checkpoint, acredito que a dev
mesmo já está num ponto ok para ser posto em produção.
O objetivo dessa tarefa é incrementar a classe App\Services\GoogleDocs
para que ela tenha um método que liste os arquivos compartilhados com a conta do Google do Practice.
Atualmente a obtenção de documentos do Google Drive está sendo feita na conta do Guilherme. Ela tem que ser feita pela conta do Google do Practice.
/livro/create
, /livro/index
, /livro/show/:id
A página de Poster atualmente não mostra nenhum conteúdo relevante. O objetivo dessa tarefa é integrar o LBK como conteúdo da página de Poster.
O LBK é uma aplicação 100% estática, então é provável que as pastas delas (imagens, css, etc) tenham que ficar na pasta public
do Laravel. A única coisa (que eu acho) do LBK que será realmente colocada em uma view do Laravel é o index.html
(provavelmente o index.html
do LBK se tornará uma view do tipo /views/poster.blade.php
).
O mural v2 teve diversas simplificações de design e rotas. Essa issue tem como objetivo portar essas alterações para o maker.
No começo do desenvolvimento do livro digital queríamos que a geração funcionasse a qualquer custo, para ver se era possível utilizar o Ibis, foi possível.
Porém do modo que ficou o funcionamento, o livro digital gerado pode ser acessado por qualquer um que tenha o seu id do google Docs, o que não trás segurança para o livro gerado.
O objetivo desta issue é achar outro lugar para armazenar os livros, e dar a permissão de acesso ao livro só aqueles que geraram aquele livro.
Para colocar o maker no ar, precisamos ter um conhecimento mínimo da gerência do projeto em produção. O objetivo dessa issue é agendar e conduzir um treinamento sobre o assunto. Seria muito interessante gravar essa reunião.
Gravar treinamento e disponibilizar em nossa pasta do drive
Essa tarefa precisa utilizar a API do Google. Utilizar o código do repositório do bot para configurar a infra do Google.
O Google tem um Google Services SDK para PHP.
O @alissonpeloso sugeriu adicionar um scroll na pré-visualização do conteúdo antes de gerar o pdf, pois se não tem que rolar a página até embaixo pra gerar o livro digital.
Pode se basear nessa issue aqui: practice-uffs/app-practice#219
A ideia é utilizar um iframe e utilizar o token de autenticação (se estiver logado) sem precisar fazer o login pelo widget.
v0/widgets/aura?type=button
é a rota de acesso pela API
. Vamos utilizar a type button pois é a que faz sentido para uma aplicação web.
Assim como no mural na issue 403 do mural, criar um tutorial semelhante e também fazer com que a inserção do arquivo credentials.json e do token seja feito de maneira mais simples.
Criar um modelo para geração de capa de lives para que usuários do maker consigam gerar capas de lives.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.