Trabalho de Conclusão de Curso MAC CandyTex Editor LaTeX On-line

Transcrição

1 Universidade de São Paulo Instituto de Matemática e Estatística Trabalho de Conclusão de Curso MAC 0499 CandyTex Editor LaTeX On-line Almir Alves Pereira Orientador: Prof. Dr. Roberto Hirata Jr. almir.pereira@usp.br 28 de Novembro de 2013

2 Conteúdo 1 Introdução 3 2 Desenvolvimento Programação O modelo cliente-servidor Ruby on Rails HTML e CSS JavaScript Google Drive Layout Twitter Bootstrap Font Awesome Ace Editor Sistema Apresentando o CandyTex Ferramentas Barra superior Barra inferior Barras Laterais s Problemas e Limitações Inclusão de imagens Bugs Comparação com Sistemas Similares ShareLaTeX Verbosus JaxEdit WriteLaTex Latexlab

3 4 Conclusão Disciplinas Relevantes ao Trabalho Desaos e Frustrações Futuro

4 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 armazenamento de arquivos na nuvem criado pela Google, que fornece ferramentas para criação e edição de documentos similar ao pacote Oce da Microsoft, mas com o diferencial de ser gratuito e utilizável a partir de um navegador da internet, 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, dispensando 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

5 Capítulo 2 Desenvolvimento Este capítulo trata do desenvolvimento do aplicativo, apresentando as linguagens 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 desenvolvimento do sistema O modelo cliente-servidor Ao contrário de sistemas convencionais, onde normalmente temos apenas um compilador/interpretador trabalhando, um sistema web envolve diversas linguagens 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 linguagens envolvidas 4

6 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 Eiel). 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 interpretadores 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 desenvolvimento 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 executado 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 praticamente 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 determinada gem fazendo que o código de um projeto deixe de funcionar caso a versão 1 (acessado em 10/07/2013) 2 en.wikipedia.org/wiki/ruby_(programming_language) (acessado em 10/09/2013) 3 (acessado em 15/11/2013) 5

7 errada seja instalada. É para resolver tais problemas que existe o RubyGems, um gerenciador de pacotes para Ruby que permite instalar, desinstalar, vericar 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 conito 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 Gemle, 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 conitos entre versões :-) Rails Rails é um framework muito popular e amigável para desenvolvimento de aplicativos 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 Conguration - Rails assume que seu código é escrito seguindo um padrão predeterminado, evitando assim a necessidade de congurar 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 signique 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 diculdades e sem arquivos de conguração chatos centenas de gems que simplicam 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 s? Active Mailer permite gerar e enviar s 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

8 dos. Controllers contém as funções que são executadas ao serem feitas requisiçõ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, é comum durante o desenvolvimento de um sistema a mudança da modelagem para atender novas necessidades ou corrigir problemas de eciê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 s 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 versionam 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

9 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, também temos a pasta mailers que contém templates para geração de s e por m assets, onde guardamos imagens e scripts do JavaScript e do CSS; cong - Os arquivos mais importantes aqui são: routes.rb, responsável pelo roteamento do sistema, enviroment.rb, congurações básicas do sistema e database.yml, conguraçõ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 conguradas; Gemle - 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; Rakele - 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, recebendo os arquivos tex do cliente, fazendo requisições ao sistema para compilalos 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

10 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 especicaçõ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. Denida 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 modicar a cor, tamanho, fonte e outros aspectos dos elementos HTML, também é possível especicar mudanças de estilo associadas 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 JavaScript Enquanto é possível criar sites somente com HTML e CSS, os resultados serão apenas documentos estáticos, como panetos e revistas virtuais, é por tal motivo que existe o JavaScript. 4 (acessado em 19/09/2013) 9

11 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 linguagem de programação Java. Enquanto o HTML é uma linguagem de marcaçã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 assim à 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 Google Drive Graças a excelente documentação da API do Google e os diversos tutoriais disponíveis no site ocial, 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 Cloud 6. 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 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 les é o 5 (acessado em 09/11/2013) 6 (acessado em 16/11/2013) 10

12 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 simplicando ainda mais o trabalho, com a biblioteca para JavaScript o mesmo comando é escrito assim: gapi.client.drive.files.list({ }) 'q': ``title contains '.tex''', 'maxresults': (acessado em 19/10/2013) 11

13 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 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 especicaçã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 funcionalidades como pop-ups, efeitos especiais e apresentação de slides para imagens. As plugins necessitam de JQuery para funcionar (acessado em 18/11/2013) 12

14 Figura 2.4: Comparação lado a lado do exemplo de HTML anterior com uma versão usando Bootstrap Font Awesome Ícones são necessários para indicar visualmente aos usuários o que uma ferramenta faz, anal 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 9 (acessado em 09/11/2013) 10 (acessado em 09/11/2013) 13

15 Figura 2.6: Exemplo acima quando exibido no navegador Ace Editor Ace Editor é um editor de texto escrito especicamente 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 remover linhas, pular para linhas especicas, 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ça de tema, infelizmente as tecnologias de exibição de imagens atuais não permitem a demonstração das teclas de atalho 14

16 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

17 3.2 Ferramentas 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 documento e deixar o texto em negrito, itálico, sobrescrito, subscrito e sublinhado. 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 template na lista e o conteúdo do editor será substituído pelo template desejado. Ajuda - A clicar no ícone de ajuda é exibido um pop-up com teclas de atalho e links úteis Barra inferior Aqui temos os comandos de manipulação de arquivos. Conguraçõ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 . 16

18 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 é construí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 s Ao clicar no botão de enviar arquivos por na barra de ferramentas inferior o seguinte pop-up será exibido: 17

19 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 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 limitado de desenvolvimento alguns problemas permaneceram no sistema.e alguns recursos interessantes deixaram de ser implementados 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, protegelas 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 exatamente o mesmo nome e contidos no mesmo diretório! Isso ocorre pois arquivos são indexados por um identicador ú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! 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

20 Figura 3.2: Demonstração do bug. Na esquerda temos a tela do CandyTex com o caractere `é' não sendo exibido corretamente, na direita o mesmo documento aberto 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 problemas. 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

21 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 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 ShareLaTeX Figura 3.3: Editor do ShareLaTeX exibindo um dos templates disponíveis ShareLaTeX ( conta um conjunto de recursos impressionantes... 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 arquivos 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

22 Integração com Dropbox - Similar a integração com o Google Drive do CandyTex, o Dropbox é um serviço popular para armazenamento de arquivos 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 Verbosus Figura 3.4: Editor do Verbosus Verbosus ( exige cadastro e tem limitações para usuários gratuitos. Vantagens: Preview do documento; Trabalha com projetos. Desvantagens: 21

23 Cadastro obrigatório; Interface gráca confusa; Apesar de contar com uma barra de ferramentas, esta é pobre em funcionalidades; 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 JaxEdit Figura 3.5: Editor do JaxEdit JaxEdit ( é um projeto bem similar ao CandyTex. É 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

24 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 WriteLaTex Figura 3.6: Editor do WriteLaTex WriteLatex ( cadastro opcional, porém exige cadastro e pagamento de mensalidade para acesso de algumas funcionalidades. 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; Vericação ortográca - Não disponível para usuários gratuitos. Desvantagens: 23

25 Não disponibiliza barra de ferramentas; Não tem mudança de temas Latexlab Figura 3.7: Editor do Latexlab Latexlab é 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; Vericaçã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

26 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 Desaos 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 diculdade foi aprender a programar 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 desao 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

27 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 vericaçã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 complexas 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

28 Bibliograa [1] Chad Fowler. Rails Recipes, Rails 3 Edition. The Pragmatic Bookshelf, Dallas, Texas, Raleigh, North Carolina, [2] Jon Duckett. Beginning HTML, XHTML, CSS, and JavaScript. Wiley Publishing, Inc., Indianapolis, Indiana,