Universidade de São PauloInstituto de Matemática e Estatística

Trabalho de Conclusão de CursoMAC 0499

CandyTexEditor LaTeX On-line

Almir Alves Pereira

Orientador: Prof. Dr. Roberto Hirata Jr.

almir.pereira@usp.br

28 de Novembro de 2013

Conteúdo

1 Introdução 3

2 Desenvolvimento 4

2.1 Programação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.1.1 O modelo cliente-servidor . . . . . . . . . . . . . . . . . . 4

2.1.2 Ruby on Rails . . . . . . . . . . . . . . . . . . . . . . . . 5

2.1.3 HTML e CSS . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.1.4 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.1.5 Google Drive . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.2.1 Twitter Bootstrap . . . . . . . . . . . . . . . . . . . . . . 12

2.2.2 Font Awesome . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2.3 Ace Editor . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3 Sistema 15

3.1 Apresentando o CandyTex . . . . . . . . . . . . . . . . . . . . . . 15

3.2 Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2.1 Barra superior . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2.2 Barra inferior . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.2.3 Barras Laterais . . . . . . . . . . . . . . . . . . . . . . . . 17

3.2.4 E-mails . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3 Problemas e Limitações . . . . . . . . . . . . . . . . . . . . . . . 18

3.3.1 Inclusão de imagens . . . . . . . . . . . . . . . . . . . . . 18

3.3.2 Bugs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.4 Comparação com Sistemas Similares . . . . . . . . . . . . . . . . 19

3.4.1 ShareLaTeX . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.4.2 Verbosus . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.4.3 JaxEdit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.4.4 WriteLaTex . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.4.5 Latexlab . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

1

4 Conclusão 25

4.1 Disciplinas Relevantes ao Trabalho . . . . . . . . . . . . . . . . . 25

4.2 Desa�os e Frustrações . . . . . . . . . . . . . . . . . . . . . . . . 25

4.3 Futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

2

Capítulo 1

Introdução

O objetivo deste trabalho é comentar sobre o desenvolvimento do editor de texto

online CandyTex. O sistema foi desenvolvido em Ruby on Rails, Javascript e

HTML.

A principal inspiração para o CandyTex é o Google Drive, um serviço de ar-

mazenamento de arquivos na nuvem criado pela Google, que fornece ferramentas

para criação e edição de documentos similar ao pacote O�ce da Microsoft, mas

com o diferencial de ser gratuito e utilizável a partir de um navegador da inter-

net, poupando-nos a necessidade de baixar e instalar um software que ocuparia

grande espaço em disco e não está disponível em todas as plataformas.

Minha proposta foi criar um serviço online com as seguintes características:

• Um editor de texto otimizado para edição de documentos LaTeX;

• Integração com diversos compiladores de arquivos LaTeX pela rede, dis-

pensando a necessidade de instalação de compiladores localmente;

• Possibilidade de salvar e carregar arquivos tanto do Google Drive, quanto

do computador do usuário.

3

Capítulo 2

Desenvolvimento

Este capítulo trata do desenvolvimento do aplicativo, apresentando as lingua-

gens de programação envolvidas e as principais bibliotecas de terceiros que foram

utilizadas.

2.1 Programação

Nesta sessão apresentamos as linguagens de programação utilizadas no desen-

volvimento do sistema.

2.1.1 O modelo cliente-servidor

Ao contrário de sistemas convencionais, onde normalmente temos apenas um

compilador/interpretador trabalhando, um sistema web envolve diversas lin-

guagens de programação funcionando tanto no computador do cliente quanto

no servidor que hospeda o sistema.

Figura 2.1: Exemplo básico do modelo cliente-servidor com as respectivas lin-guagens envolvidas

4

2.1.2 Ruby on Rails

Ruby

Ruby é uma linguagem de programação interpretada orientada a objetos de

alto nível, criada por Yukihiro �Matz� Matsumoto misturando partes de suas

linguagens de programação favoritas (Perl, Ada, Lisp, Smalltalk e Ei�el). 1

Em Ruby tudo é objeto, números, caracteres e até mesmo o nil/null e ao

contrário de linguagens mais populares como Java ou C, variáveis em Ruby têm

tipagem fraca.

Assim como outras linguagens interpretadas, Ruby pode ser executada em

qualquer plataforma que tenha um interpretador compatível instalado. Os in-

terpretadores mais populares são Ruby MRI (escrito em C) e JRuby (escrito em

Java). 2

Por tratar-se de uma linguagem interpretada, há grande �exibilidade no de-

senvolvimento e execução dos programas. Variáveis têm tipagem fraca, classes

podem ser estendidas em tempo de execução e código pode ser criado e execu-

tado dinamicamente.

Claro que toda a �exibilidade que uma linguagem interpretada oferece tem

por contrapeso o grande impacto na performance. Podemos argumentar que

nos tempos modernos com toda a memória e capacidade de processamento

disponíveis tal impacto é irrisório, mas o que acontece quando seu sistema cresce

ao ponto onde o impacto ser problemático? Um exemplo notável é o da rede

social Twitter, originalmente desenvolvida em Ruby on Rails precisou ser prati-

camente reconstruída fazendo uso de Java, Scala e Closure, pois a popularidade

da rede social cresceu ao ponto de ser economicamente e tecnicamente inviável

continuar o uso de Ruby on Rails. 3

RubyGems e Bundler

Gems são as bibliotecas do Ruby. Graças a uma comunidade forte, há uma

vasta gama de gems capazes de resolver diversos problemas. Porém, a grande

quantidade de gems também resulta em grande confusão, por exemplo, uma

gem pode depender de outras duas gems, que por sua vez dependem de outras

e assim por diante. O Candytex, por exemplo, depende de dez gems, que por

sua vez dependem de mais de cinquenta outras gems!

Há também o risco de não haver compatibilidade entre versões de uma deter-

minada gem fazendo que o código de um projeto deixe de funcionar caso a versão

1www.ruby-lang.org/en/about (acessado em 10/07/2013)2en.wikipedia.org/wiki/Ruby_(programming_language) (acessado em 10/09/2013)3http://www.wired.co.uk/news/archive/2013-09/26/the-second-coming-of-java

(acessado em 15/11/2013)

5

errada seja instalada. É para resolver tais problemas que existe o RubyGems,

um gerenciador de pacotes para Ruby que permite instalar, desinstalar, veri�car

quais estão instaladas e até mesmo publicar gems.

O RubyGems resolve o problema das dependências e fornece uma forma

rápida para baixa-las e instala-las, porém ainda temos o problema do con�ito

entre versões das gems. Por isso temos que fazer uso de uma segunda ferramenta

chamada Bundler. Um projeto que utiliza Bundler tem em sua raiz um arquivo

chamado �Gem�le�, que é simplesmente um arquivo de texto com uma lista das

gems do projeto e suas versões. Com as dependências listadas corretamente

basta digitar um único comando para instalar tudo que for necessário.

RubyGems em conjunto com Bundler, fazem com que instalar um projeto

Ruby on Rails se resuma a digitar um comando no terminal e ir tomar um café,

rindo dos colegas que utilizam outras linguagens e acabam por perder horas

e ganhar cabelos brancos buscando pacotes na Internet e resolvendo con�itos

entre versões :-)

Rails

Rails é um framework muito popular e amigável para desenvolvimento de aplica-

tivos web escrito em Ruby, daí o nome Ruby on Rails. O framwork Rails segue

alguns princípios básicos:

• DRY - �Don't Repeat Yourself� - Repetição de código é ruim;

• Convention Over Con�guration - Rails assume que seu código é escrito

seguindo um padrão predeterminado, evitando assim a necessidade de

con�gurar cada detalhe da aplicação. Dizemos que Rails é um software

�opinado�.

• MVC - Model View Controller

Os princípios delineados acima fazem com que programar em Rails signi�que

seguir um padrão rígido de desenvolvimento, tentar sair do padrão pode trazer

grandes frustrações ao desenvolvedor, porém é esta rigidez que permite integrar

sem di�culdades e sem arquivos de con�guração chatos centenas de gems que

simpli�cam ainda mais o desenvolvimento. Precisa de trabalhar com banco de

dados? Active Record fornece toda a infraestrutura necessária para traduzir

suas classes em tabelas sem escrever uma linha de SQL. Enviar e-mails? Active

Mailer permite gerar e enviar e-mails com ou sem anexos em poucas linhas de

código.

No modelo MVC, o código é organizado em três tipos. Models são as

declarações de classes, sendo que algumas fazem interface com o banco de da-

6

dos. Controllers contém as funções que são executadas ao serem feitas requi-

sições HTTP ao sistema, elas recebem os parâmetros das requisições, fazendo

as consultas necessárias ao banco de dados. Views são as páginas HTML que

são apresentadas aos usuários, no caso do Rails usamos o RHTML, que combina

HTML com código Ruby, fazendo uso dos dados obtidos dos controllers para

construir dinamicamente a página HTML.

Mesmo que partamos de uma modelagem do banco de dados sólida, é co-

mum durante o desenvolvimento de um sistema a mudança da modelagem para

atender novas necessidades ou corrigir problemas de e�ciência. Caso a equipe

de desenvolvimento seja grande estas mudanças provocam o caos, com o sistema

deixando de funcionar em algumas máquinas e e-mails sendo trocados com os

scripts SQL para resolver os problemas. É por esse motivo que para manutenção

do banco de dados de um sistema Rails fazemos uso de �migrations�, scripts da

biblioteca Active Record que facilitam o versionamento do banco de dados e

são compartilhados em conjunto com projeto. Esses scripts essencialmente ver-

sionam o banco de dados, cada um contém um timestamp que determina a

ordem em que devem ser executados e duas funções, up descreve o que deve

ser feito para migrar o banco para o estado atual e down descreve o que deve

ser feito para desfazer o estado atual. Os scripts são escritos na linguagem

Ruby, o que torna possível que as migrations funcionem em bancos de dados

com sintaxes diferentes.

Agora vejamos alguns exemplos do que o Rails faz por nós. Vamos começar

com alguns comandos básicos.

Para criar um projeto:

rails new projeto

O comando cria no pasta �projeto� o esqueleto básico do projeto:

app

bin

config

config.ru

db

Gemfile

lib

log

public

Rakefile

README.rdoc

test

7

tmp

vendor

Aqui os arquivos e pasta importantes são:

• app - A principal pasta de um projeto Rails, contém praticamente todo o

código fonte do projeto. Olhando dentro da pasta vemos as pastas models,

views e controllers separando o código conforme foi discutido acima, tam-

bém temos a pasta mailers que contém templates para geração de e-mails

e por �m assets, onde guardamos imagens e scripts do JavaScript e do

CSS;

• con�g - Os arquivos mais importantes aqui são: routes.rb, responsável pelo

roteamento do sistema, enviroment.rb, con�gurações básicas do sistema e

database.yml, con�gurações do banco de dados;

• public - Contém arquivos que não são gerenciados pelo Rails como páginas

HTML estáticas. Os arquivos desta pasta são acessíveis por qualquer

usuário do sistema e não precisam ter suas rotas con�guradas;

• Gem�le - O arquivo do Bundler, conforme abordado na sessão anterior.

Já contém algumas gems necessárias para o funcionamento do Rails;

• db - Contém o arquivo schema.rb com a modelagem do bando de dados,

a pasta migrations com as migrações do banco de dados e o seeds.rb com

alguns dados iniciais para o banco;

• test - Testes do sistema �cam aqui;

• Rake�le - O Rake é uma ferramenta similar ao Make, serve para executar

tarefas como atualização do banco de dados e execução de testes.

Após a criação do esqueleto básico do projeto, podemos também fazer uso

dos recursos de geração automática de código do Rails. Partindo da modelagem

do banco de dados é possível criar em poucas horas um protótipo funcional do

sistema.

No CandyTex o Ruby on Rails serve apenas de interface com o servidor, re-

cebendo os arquivos tex do cliente, fazendo requisições ao sistema para compila-

los e enviando o resultado pela rede. O sistema foi concebido desta maneira para

minimizar a comunicação pela rede, a maior parte do trabalho é feito na maquina

do cliente.

8

2.1.3 HTML e CSS

HTML e CSS são parte da Open Web Platform, um conjunto de tecnologias

abertas desenvolvidas colaborativamente por empresas, organizações e indiví-

duos. Qualquer pessoa têm acesso às especi�cações, podendo também contribuir

no desenvolvimento e fazer uso das tecnologias gratuitamente. 4

HTML (Hypertext Markup Language), uma linguagem de marcação e é o

mínimo necessário para o desenvolvimento de sites. De�nida por Tim Bernes-

Lee em 1991, atualmente com a quinta versão em constante desenvolvimento.

CSS (Cascading Style Sheets), linguagem utilizada para estilizar paginas

HTML. Com CSS é possível modi�car a cor, tamanho, fonte e outros aspectos

dos elementos HTML, também é possível especi�car mudanças de estilo associ-

adas a ações como, por exemplo, mudar a cor de um botão quando o ponteiro

do mouse passar por cima deste.

Figura 2.2: Exemplo de código HTML, note a regra CSS para deixar o texto doúltimo parágrafo em vermelho

Figura 2.3: Exemplo aberto no navegador

2.1.4 JavaScript

Enquanto é possível criar sites somente com HTML e CSS, os resultados serão

apenas documentos estáticos, como pan�etos e revistas virtuais, é por tal motivo

que existe o JavaScript.

4www.w3.org/wiki/Open_Web_Platform) (acessado em 19/09/2013)

9

Assim como HTML e CSS, o JavaScript faz parte da Open Web Platform

e ao contrário do que o nome indica tem pouquíssima semelhança com a lin-

guagem de programação Java. Enquanto o HTML é uma linguagem de mar-

cação, o JavaScript é uma linguagem de programação Turing completa, porém

é voltado ao processamento de páginas HTML, fornecendo funções e gatilhos

para manipulação de elementos da pagina.

Devido a sintaxe difícil e ausência de funções avançadas para manipulação

de páginas é comum o uso bibliotecas de terceiros para expandir o JavaScript.

No caso do Ruby on Rails utilizamos o JQuery.

No CandyTex, as ferramentas de edição são implementadas em JavaScript,

pois como trata-se de uma linguagem de programação client-side, reduz-se as-

sim à necessidade de requisições ao servidor do sistema, garantindo resposta

instantânea aos comandos do usuário e minimizando a carga de trabalho do

servidor.

2.1.5 Google Drive

Graças a excelente documentação da API do Google e os diversos tutoriais

disponíveis no site o�cial, a integração com o Google Drive foi rápida e fácil.5

Apesar de ser possível utilizar Ruby em conjunto com a API, as interações

são feitas por meio de Javascript diretamente na máquina do usuário, evitando

requisições desnecessárias ao servidor que hospeda o CandyTex.

Para utilizar a API é necessário registrar o aplicativo no site do Google

Cloud6. Após o registro seu aplicativo recebe um ID, que deve ser usado para

autorizar seu aplicativo a acessar os arquivos do usuário.

A comunicação com o Google Drive é feita através de JSON, um dos padrões

mais populares para troca de dados entre aplicativos Web. Ao clicar no botão

de conexão ao Google Drive é realizada autenticação por meio do protocolo

OAuth2. Após a autorização do aplicativo um token é devolvido pela API

permitindo acesso de leitura e escrita de arquivos da conta do usuário.

Para trabalharmos com serviços Web utilizamos URLs como comandos, por

exemplo, para listar de arquivos com �.tex� no nome basta usar o comando:

GET https://www.googleapis.com/drive/v2/files?

q=title+contains+'.tex'&maxResults=1000

&key=[CHAVE DO APLICATIVO]

No codigo acima, �GET� é um tipo de requisição HTTP, em seguida temos

o endereço do Web Service �https://www.googleapis.com/drive/v2�, ��les� é o

5https://developers.google.com/drive (acessado em 09/11/2013)6https://cloud.google.com/console#/flows/enableapi?apiid=drive (acessado em

16/11/2013)

10

comando que desejamos executar, nesse caso pretendemos acessar a lista de

arquivos do usuário, e por �m o texto após o ponto de interrogação são os

parâmetros do comando separados pelo caractere '&'.7

A Google oferece bibliotecas auxiliares para as linguagens mais populares

de desenvolvimento simpli�cando ainda mais o trabalho, com a biblioteca para

JavaScript o mesmo comando é escrito assim:

gapi.client.drive.files.list({

'q': ``title contains '.tex''', 'maxResults': 1000

})

7https://developers.google.com/drive/v2/reference/files/list (acessado em19/10/2013)

11

2.2 Layout

Além de funcionalidades interessantes, um sistema web precisa de um layout

prático e agradável, mas há limites no que um programador solitário consegue

fazer, daí a necessidade de utilizar bibliotecas e ferramentas de terceiros. Todas

as ferramentas aqui apresentadas são livres para uso não lucrativo, algumas são

totalmente livres.

2.2.1 Twitter Bootstrap

Criado pela equipe do Twitter, Twitter Bootstrap é um framework web composto

por bibliotecas CSS e JavaScript que visam facilitar o design de sites tanto para

principiantes quanto usuários avançados.

Seus principais recursos são:

• Design responsivo - As páginas ajustam-se automaticamente de acordo

com dispositivo utilizado. Muito importante dado que atualmente há

muitos dispositivos de tamanhos diferentes com acesso à Internet;

• Grid Layout - Uma página é divida numa grade de doze colunas que,

seguindo o princípio do design responsivo, mudam de tamanho de acordo

conforme a largura da tela do usuário;

• Recursos CSS e HTML - Alguns componentes úteis para desenvolvimento

de sites que não estão na especi�cação básica do HTML/CSS como barras

de navegação, menus, etiquetas e avisos, além de design mais atraente

para alguns componentes básicos como botões e tabelas;

• Plugins JavaScript - Componentes opcionais que adicionam funcionali-

dades como pop-ups, efeitos especiais e apresentação de slides para ima-

gens. As plugins necessitam de JQuery para funcionar. 8

8http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)#Features (aces-sado em 18/11/2013)

12

Figura 2.4: Comparação lado a lado do exemplo de HTML anterior com umaversão usando Bootstrap

2.2.2 Font Awesome

Ícones são necessários para indicar visualmente aos usuários o que uma ferra-

menta faz, a�nal de contas, uma imagem fala mais do que mil palavras e escrever

uma descrição de mil palavras para cada botão seria cansativo, além de deixar

o site um pouco inutilizável.

O Twitter BootStrap contém um pacote de ícones chamado Glyphicons Free,

uma versão gratuita, licenciada sob a Creative Commons Attribution Unported

3.0, do Glyphicons 9, porém, apesar da ótima qualidade do pacote de ícones, este

não contém grande parte do ícones necessários para editores de texto além de

só disponibilizar os ícones como imagens de baixa resolução na versão gratuita.

A solução foi utilizar o Font Awesome 10 que, ao contrário do Glyphicons,

é totalmente livre, tem ícones para editores de texto e disponibiliza-os como

imagens vetoriais, garantindo qualidade visual em qualquer resolução.

Figura 2.5: Exemplo de botões do Bootstrap com ícones do Font Awesome

9http://glyphicons.com/ (acessado em 09/11/2013)10http://fortawesome.github.io/Font-Awesome (acessado em 09/11/2013)

13

Figura 2.6: Exemplo acima quando exibido no navegador

2.2.3 Ace Editor

Ace Editor é um editor de texto escrito especi�camente para aplicativos web

com um grande leque de recursos e capaz de transformar uma simples área

de digitação de texto num editor avançado completo. Assim como as outras

bibliotecas aqui apresentadas, o Ace Editor é escrito em JavaScript e CSS além

de ter código aberto. Algumas das funções utilizadas são:

• Realce de sintaxe - As cores do editor mudam de acordo com o que foi

escrito;

• Teclas de atalho - Para agilizar o trabalho, além das teclas clássicas de

recortar, copiar, colar e desfazer, também temos teclas para mover e re-

mover linhas, pular para linhas especi�cas, buscar e substituir com suporte

a expressões regulares e muito mais;

• Mudança de temas - Sofre de daltonismo? Apaixonado pelo terminal do

Linux? Não gosta da cor vermelha? É fatalmente alérgico à cor laranja?

Seus problemas acabaram! Basta clicar no menu de seleção de temas para

ajustar as cores do editor de acordo com suas necessidades!

Figura 2.7: Exemplo do Ace Editor demonstrando realce de sintaxe e mudançade tema, infelizmente as tecnologias de exibição de imagens atuais não permitema demonstração das teclas de atalho

14

Capítulo 3

Sistema

A função deste capítulo é apresentar o sistema pronto, suas funcionalidades e

compara-lo com ferramentas semelhantes no mercado.

3.1 Apresentando o CandyTex

CandyTex é um sistema web, portanto precisa ser acessado por navegadores de

Internet, o melhor navegador para utilizar o site é o Google Chrome. Ao acessar

o site somos apresentados a seguinte pagina:

Figura 3.1: Tela do editor

Esta é a única tela do site e é a única necessária por trata-se de um editor

de texto. Na próxima sessão detalharemos melhor o que cada parte faz.

15

3.2 Ferramentas

3.2.1 Barra superior

A barra superior combina ferramentas do editor de texto que alteram a aparência

do editor ou auxiliam na edição do documento.

• Ferramentas de estilo - É possível ajustar o tamanho das fontes do doc-

umento e deixar o texto em negrito, itálico, sobrescrito, subscrito e sub-

linhado. Basta clicar no ícone correspondente e o código Latex necessário

será inserido na posição atual do cursor, caso deseje aplicar o estilo a um

trecho já escrito selecione-o com o mouse antes de clicar no botão;

• Ambientes do Latex - Para criar listas, tabelas, alinhar o texto e dividir o

documento em capítulos e sessões facilmente;

• Ferramentas do editor - Permitem aumentar ou reduzir a fonte do editor,

mudar o tema e desfazer/refazer as ultimas ações;

• Templates - Para criar novos documentos rapidamente, escolha um tem-

plate na lista e o conteúdo do editor será substituído pelo template dese-

jado.

• Ajuda - A clicar no ícone de ajuda é exibido um pop-up com teclas de

atalho e links úteis.

3.2.2 Barra inferior

Aqui temos os comandos de manipulação de arquivos.

• Con�gurações de arquivo - Escolha o nome e tipo de arquivo que deseja

como resultado da compilação;

• Ferramentas de manipulação de entrada e saída - Para baixar os arquivo

tex, fazer upload do arquivo atual no Google Drive, abrir um arquivo do

computador ou limpar o editor;

• Ferramentas de compilação - Enviam o arquivo para ser compilado no

servidor, dependendo do botão escolhido o resultado pode ser baixado ou

enviado como anexo por e-mail.

16

3.2.3 Barras Laterais

As barras laterais contém ferramentas para integração com o Google Drive.

• Lista de arquivos - ao ser estabelecida a conexão com o Google Drive o

sistema varre os arquivos do usuário em busca de arquivos válidos. Após

receber o resultado da requisição, a lista da barra lateral esquerda é con-

struída. Clicar num item da lista faz com que o arquivo seja carregado no

editor;

• Filtro - Digite o nome do arquivo para busca-lo na lista;

• Dados do arquivo - Quando um arquivo é carregado, um painel é exibido

na barra lateral direita com informações do arquivo carregado e um botão

para atualiza-lo.

3.2.4 E-mails

Ao clicar no botão de enviar arquivos por e-mail na barra de ferramentas inferior

o seguinte pop-up será exibido:

17

Basta digitar os dados requisitados e ao clicar no botão o arquivo será enviado

ao servidor para ser compilado, mas, ao invés ser enviado para download, este

será anexado a um e-mail com o endereço, assunto e mensagem fornecidos.

3.3 Problemas e Limitações

Infelizmente devido a limitações nas tecnologias, pouca experiência e tempo lim-

itado de desenvolvimento alguns problemas permaneceram no sistema.e alguns

recursos interessantes deixaram de ser implementados.

3.3.1 Inclusão de imagens

Para a inclusão de imagens funcionar seria necessário ou enviar as imagens junto

com o arquivo a ser compilado ou adquiri-las do Google Drive do usuário.

O problema da primeira abordagem é que esta resulta em uso agressivo da

rede, imagine que um documento tem 10Mb de imagens que devem ser enviadas

em conjunto, se ocorrer um erro de compilação os 10Mb deverão ser enviados

novamente. A melhor solução é guardar as imagens no servidor, mas daí surgem

novos problemas já temos que separar as imagens de cada usuário, protege-

las contra acessos não autorizados, fornecer infraestrutura para armazena-las e

fornecer ferramentas para gerenciamento das imagens armazenadas, dado que

usuários podem desejar remove-las do servidor ou atualiza-las.

Quanto a segunda abordagem, o maior problema vem da forma como o

Google Drive trata arquivos, é possível ter dois arquivos diferentes com exata-

mente o mesmo nome e contidos no mesmo diretório! Isso ocorre pois arquivos

são indexados por um identi�cador único atribuído arbitrariamente pelo sistema,

enquanto que em sistemas operacionais convencionais os arquivos são indexados

pelos nomes e diretórios garantindo a unicidade dos mesmos. Caso não existam

arquivos com nomes iguais, ainda é necessário recupera-los do Google Drive

para a compilação e voltamos ao primeiro problema!

3.3.2 Bugs

Durante a criação da apresentação de slides deparei-me com um bug bizarro,

ao carregar arquivos de texto do Google Drive todos os caracteres especiais

da língua portuguesa são corrompidos. O problema ocorre somente quando o

arquivo é recuperado do Google Drive, se criarmos um novo arquivo no editor,

envia-lo para o Google Drive e abri-lo para visualização no site da Google, os

caracteres especiais serão exibidos corretamente.

18

Figura 3.2: Demonstração do bug. Na esquerda temos a tela do CandyTex como caractere `é' não sendo exibido corretamente, na direita o mesmo documentoaberto no Google Drive

Uma funcionalidade que foi implementada porém não mencionada é a de

a cada minuto salvar o documento que está sendo editado atualmente num

cookie para ser recuperado caso o usuário feche a janela sem salvar o arquivo

ou o navegador trave. O motivo de não funcionar corretamente se deve ao

limite de tamanho dos cookies que um website pode armazenar na máquina do

usuário, meros 4 kilobytes. Quando o arquivo ultrapassa o limite de 4 kilobytes,

o navegador se recusa a atualizar o cookie e quando reabrimos o editor será

exibida a última versão do documento com tamanho menor que 4 kilobytes. A

melhor solução para o problema é fazer uso de técnicas avançadas de HTML5 que

permitem manipulação de arquivos na máquina do usuário, mas devido à pouca

experiência com tais tecnologias e o fato do bug ter sido encontrado próximo à

data de entrega �nal do trabalho não foi possível implementar a solução.

3.4 Comparação com Sistemas Similares

Já existem dezenas de soluções no mercado, mas a grande maioria tem proble-

mas.

• Necessidade de pagamento para uso do serviço;

• Interface grá�ca ruim;

• Poucas opções para compilação;

• Obrigatoriedade de cadastro para acesso ao site;

• Código fechado.

Tendo em vista os problemas apresentados acima, tomei como meta criar

uma editor com interface grá�ca agradável, com grande número de ferramentas

para agilizar a escrita dos documentos e que não apresentasse nenhuma barreira

19

para o usuário, ou seja, nada de preencher formulários chatos para criar uma

conta no site.

Agora vamos analisar alguns sites que oferecem o mesmo serviço. Todos os

sites foram avaliados em Novembro de 2013. Para cada site temos uma foto do

editor e as vantagens e desvantagens em relação ao CandyTex.

Vale destacar que é impossível meu humilde site desenvolvido em alguns

meses concorrer com sites desenvolvidos por equipes grandes e experientes ao

longo de vários anos.

3.4.1 ShareLaTeX

Figura 3.3: Editor do ShareLaTeX exibindo um dos templates disponíveis

ShareLaTeX (www.sharelatex.com) conta um conjunto de recursos impres-

sionantes... se o usuário cadastrar-se e pagar a mensalidade.

Vantagens:

• Templates - Dezenas de templates disponíveis;

• Projetos - Enquanto o CandyTex cria somente arquivos individuais, Share-

LaTeX permite criar projetos completos incluindo imagens e outros ar-

quivos do Latex. Os projetos podem ser baixados ou compartilhados com

outros usuários;

• Preview do documento - Preview do arquivo em pdf;

• Desenvolvimento colaborativo - Colaboradores podem compartilhar um

mesmo projeto. Recurso limitado para usuários gratuitos;

• Chat - Para conversar com colaboradores do projeto;

20

• Integração com Dropbox - Similar a integração com o Google Drive do

CandyTex, o Dropbox é um serviço popular para armazenamento de ar-

quivos em nuvem. Não disponível para usuários gratuitos;

• Histórico de mudanças - Versionamento do projeto, não disponível para

usuários gratuitos.

Desvantagens:

• Cadastro obrigatório;

• As funcionalidades mais interessantes só estão disponíveis para usuários

que assinam um plano;

• O editor não tem barra de ferramentas;

• Aparentemente também faz uso do Ace Editor, porém não disponibiliza

mudança de temas ou outras funcionalidades do editor.

3.4.2 Verbosus

Figura 3.4: Editor do Verbosus

Verbosus (www.verbosus.com) exige cadastro e tem limitações para usuários

gratuitos.

Vantagens:

• Preview do documento;

• Trabalha com projetos.

Desvantagens:

21

• Cadastro obrigatório;

• Interface grá�ca confusa;

• Apesar de contar com uma barra de ferramentas, esta é pobre em fun-

cionalidades;

• Exige assinatura de um plano para uso de mais de 4 recursos de cada

categoria (imagens, arquivos tex e arquivos auxiliares);

• Não existe mudança de temas ou outras funções do editor;

• Não há integração com serviços externos.

3.4.3 JaxEdit

Figura 3.5: Editor do JaxEdit

JaxEdit (http://jaxedit.com/note/) é um projeto bem similar ao Can-

dyTex. É gratuito e não necessita de cadastro.

Vantagens:

• Preview do documento - O grande diferencial é que enquanto o preview

dos sites abordados anteriormente enviam o arquivo para se compilado

no servidor, aqui o preview é gerado dinamicamente. Vale notar que a

abordagem adotada tem limitações e o resultado não é um arquivo em pdf

ou outro formato, é HTML gerado em JavaScript e inserido diretamente

na página;

• Integração com o SkyDrive - Um serviço similar ao Google Drive criado

pela Microsoft.

22

Desvantagens:

• Não existe barra de ferramentas;

• Não é possível compilar arquivos;

• Assim como o CandyTex, não trabalha com projetos, impossibilitando

inclusão de imagens ou arquivos auxiliares do LaTeX.

3.4.4 WriteLaTex

Figura 3.6: Editor do WriteLaTex

WriteLatex (https://www.writelatex.com) cadastro opcional, porém ex-

ige cadastro e pagamento de mensalidade para acesso de algumas funcionali-

dades.

Vantagens:

• Templates;

• Criação e edição de projetos;

• Preview do documento - Preview é gerada automaticamente durante edição

do texto;

• Compartilhamento de projetos - Projetos podem ser compartilhados para

leitura e edição ou somente leitura.

• Integração com Dropbox - Não disponível para usuários gratuitos;

• Veri�cação ortográ�ca - Não disponível para usuários gratuitos.

Desvantagens:

23

• Não disponibiliza barra de ferramentas;

• Não tem mudança de temas.

3.4.5 Latexlab

Figura 3.7: Editor do Latexlab

Latexlab http://docs.latexlab.org é um projeto bem similar ao Candy-

Tex, um editor LaTeX integrado ao Google Docs. A maior diferença é que o

acesso pela conta do Google é obrigatório.

Vantagens:

• Barra de ferramentas - Dezenas de ferramentas para auxiliar na edição,

mais funcionalidades do que o CandyTex;

• Preview de documento;

• Integração de outros arquivos como imagens e arquivos auxiliares do La-

TeX;

• Veri�cação ortográ�ca.

Desvantagens:

• Menus não são carregados imediatamente, ao clicar em qualquer item é

exibido a mensagem "Loading". Pode ser problemático em conexões ruins;

• Não é possível alterar o tema do editor;

• A integração com o Google Drive é obrigatória, não é possível acessar o

editor sem uma conta.

24

Capítulo 4

Conclusão

4.1 Disciplinas Relevantes ao Trabalho

Engenharia de Software - Estudei o modelo cliente-servidor, que é a base dos

sistemas web.

Laboratório de Programação 1 - Aprendi os básicos de LaTeX e desde então

raramente usei outro software para criação de documentos.

Laboratório de Programação Extrema - Trabalhei no meu primeiro sistema

Ruby on Rails.

Estágio na FAU - Sei que não é uma disciplina, mas foi no estágio que

realmente adquiri a experiência necessária para desenvolver sistemas web.

4.2 Desa�os e Frustrações

Como já tinha experiência desenvolvendo sistemas web, não tive grandes dores

de cabeça para desenvolver o sistema. A maior di�culdade foi aprender a progra-

mar em JavaScript, porém como desenvolvi em paralelo outro sistema com forte

dependência da linguagem, o aprendizado foi rápido e o conhecimento adquirido

num projeto foi útil para o outro.

Meu maior desa�o foi conciliar a vida pessoal aos estudos. Esse foi meu

primeiro ano morando sozinho, nos anos anteriores minha única preocupação

era estudar, agora além de estudar, preciso de trabalhar, cuidar de minha casa

e do meu bem estar.

25

4.3 Futuro

Apesar do sistema estar funcional, acredito que ainda há muito trabalho a ser

feito para �car perfeito. Vamos encerrar com algumas funcionalidades essenciais

que deveriam ser implementadas caso o sistema continue a ser desenvolvido e

algumas funcionalidades extras interessantes.

• Criação e edição de projetos LaTeX - A análise de sistemas similares feita

ao �m do último capítulo mostrou que o maior ponto fraco do CandyTex

é a falta de suporte a edição de projetos, sendo possível apenas trabalhar

com arquivos individuais. Implementar tal funcionalidade é essencial para

o futuro do projeto;

• Preview de documento - Outra funcionalidade importante que foi deixada

de lado devido a restrição de tempo. Implementa-la em JavaScript seria

o ideal, porém exigiria trabalho colossal em relação a alternativa, fazer

uma requisição ao servidor para compilar o arquivo e renderizar o pdf na

página;

• Correção ortográ�ca - Alguns navegadores modernos suportam correção

ortográ�ca nativamente, porém o Ace Editor além de não ter suporte,

desabilita a veri�cação ortográ�ca do navegador. É necessário descobrir

se existe alguma forma de habilita-la no editor ou utilizar uma biblioteca

externa que resolva o problema;

• Completação de código - As ferramentas implementadas no CandyTex

facilitam muito a edição, porém seria melhor ainda ir um passo além e

implementar sugestões de completação de código de acordo com o que

está sendo digitado;

• Compactação de arquivos - Para economizar banda de rede. Essencial

para implementação de gerenciamento de projetos;

• Integração com outros serviços - Google Drive não é o único serviço de

armazenamento de arquivos. Existem dezenas de outros serviços similares

que podem ser integrados ao sistema;

• Navegação pelo código - Ao trabalhar com arquivos grandes é muito útil

poder navegar por páginas, capítulos e sessões;

• Editor de formulas matemáticas - Escrever fórmulas matemáticas com-

plexas no LaTeX é frustrante. Um editor capaz de gerar as formulas

fazendo uso de imagens e inseri-las como código LaTeX no documento

seria um grande diferencial ao sistema.

26

Bibliogra�a

[1] Chad Fowler. Rails Recipes, Rails 3 Edition. The Pragmatic Bookshelf, Dal-

las, Texas, Raleigh, North Carolina, 2012.

[2] Jon Duckett. Beginning HTML, XHTML, CSS, and JavaScript. Wiley Pub-

lishing, Inc., Indianapolis, Indiana, 2010.

27