UNIVERSIDADE ESTÁCIO DE SÁ CENTRO UNIVERSITÁRIO ESTÁCIO DE SÁ DE SANTA CATARINA - EAD CURSO DE ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

Transcrição

1 UNIVERSIDADE ESTÁCIO DE SÁ CENTRO UNIVERSITÁRIO ESTÁCIO DE SÁ DE SANTA CATARINA - EAD CURSO DE ANÁLISE E DESENVOLVIMENTO DE SISTEMAS INTEGRANDO SERVIÇOS CORPORATIVOS EM APLICATIVO PARA SMARTPHONES SEM USO DE LINGUAGENS NATIVAS: Estudo de caso na empresa Softplan Planejamento e Sistemas Ltda. INTEGRATING CORPORATE SERVICES IN SMARTPHONES APPLICATION WITHOUT USING NATIVE LANGUAGES: Case study in the company Softplan Planejamento e Sistemas Ltda. Por Guilherme Lopes Mattje São José (SC), Dezembro de 2014

2 SUMÁRIO LISTA DE ABREVIATURAS... iv LISTA DE FIGURAS... v RESUMO... vi ABSTRACT... vii 1. INTRODUÇÃO PROBLEMATIZAÇÃO Formulação do Problema Solução Proposta OBJETIVOS Objetivo Geral Objetivos Específicos METODOLOGIA ESTRUTURA DO TRABALHO FUNDAMENTAÇÃO TEÓRICA APLICATIVOS HÍBRIDOS PARA SMARTPHONES LOJAS DE APLICATIVOS PHONEGAP HTML CSS CSS RESPONSIVIDADE JAVASCRIPT JQUERY JQUERY MOBILE PHP WEB SERVICES PROJETO DEFINIÇÃO DO ESCOPO ANÁLISE DE REQUISITOS REQUISITOS FUNCIONAIS REQUISITOS NÃO FUNCIONAIS REGRAS DE NEGÓCIO DIAGRAMA DE CASOS DE USO CODIFICAÇÃO ii

3 CRIAÇÃO DOS WEBSERVICES CODIFICAÇÃO PHP CODIFICAÇÃO HTML CODIFICAÇÃO CSS CODIFICAÇÃO JAVASCRIPT INTERAÇÕES COM WEB SERVICES TELAS FINAIS COMPILAÇÃO TESTES PUBLICAÇÕES DO APLICATIVO CONCLUSÕES REFERÊNCIAS BIBLIOGRÁFICAS iii

4 LISTA DE ABREVIATURAS AJAX APPs CSS CSV DOM EAD HTML IDE ios JSON REST TCC TI URLs XML W3C WP Asynchronous Javascript and XML Aplicativos CascadingStyleSheets Comma-separated values Document Object Model Ensino à Distância HyperTextMarkupLanguage Integrated Development Environment iphone Operational System JavaScript Object Notation Representational State Transfer Trabalho de Conclusão de Curso Tecnologia da Informação Uniform Resource Locator extensible Markup Language World Wide Web Consortium Windows Phone iv

5 LISTA DE FIGURAS Figura 1 - Atuais ferramentas de comunicação interna... 9 Figura 2 - Desenvolvimento de aplicativos em linguagens nativas Figura 3 - Desenvolvimento de aplicativos híbridos Figura 4 - Representação site Phonegap.com do processo de desenvolvimento Figura 5 - Tabela comparativa de recursos nativos suportados pelo phonegap Figura 6 - Representação de um site com o design responsivo Figura 7 - Diagrama de caso de uso do módulo Softnews Figura 8 - Diagrama de caso de uso do módulo Carona Amiga Figura 9 - Diagrama de caso de uso do módulo Mural Figura 10 - Diagrama de caso de uso do módulo Manual de Redes Sociais Figura 11 - Estrutura do HTML para uso do Jquery Mobile Figura 12 - HTML da tela de login do aplicativo Figura 13 - CSS da tela de login do aplicativo Figura 14 - JavaScript inicial da tela de login do aplicativo Figura 15 - JavaScript da função de login do aplicativo Figura 16 - Representação das telas e do processo de login Figura 17 - Comparação entre o processo clássico de requisição de aplicação web com a requisição AJAX 34 Figura 18 - Representação de retorno do servidor após requisição de validação de login e senha Figura 19 - Representação das telas finais do APP Figura 20 - Interface do serviço de build do phonegap.com Figura 21 - Ambiente de testes Ripple Figura 22 - Tela do Itunes Connect para publicação de aplicativo na Apple Store Figura 23 - Tela do Google Play para publicação de aplicativo v

6 RESUMO MATTJE, Guilherme Lopes. Integrando Serviços Corporativos em Aplicativo Para Smartphones Sem Uso de Linguagens Nativas: Estudo de caso na empresa Softplan Planejamento e Sistemas Ltda. São José, f. (quarenta e cinco folhas). Trabalho de Conclusão de Curso (Análise e Desenvolvimento de Sistemas) Centro universitário Estácio de Sá de Santa Catarina - EAD, Universidade Estácio de Sá, São José, A TI (Tecnologia da Informação) surgiu como uma revolução, automatizou vários processos tornando-se indispensável no cotidiano de muitas pessoas, inclusive facilitando o acesso às informações que tornam os seus consumidores bem informados. No cenário corporativo as empresas necessitam se comunicar com os seus colaboradores de forma eficiente, e para isso precisam prover uma série de maneiras de entregar os conteúdos aos seus destinatários. Este cenário é ainda mais importante para empresas de grande porte que precisam comunicar para muitos e muito rapidamente, o que é o caso da Softplan. O presente trabalho aborda os conceitos dos chamados aplicativos híbridos que têm como finalidade permitir o desenvolvimento de aplicativos mobile para diversas plataformas utilizando-se apenas uma programação. Após o estudo, é proposto um aplicativo para smartphones que integre várias ferramentas de comunicação aos colaboradores e que através de um mesmo código poder ser acessado por dispositivos Android e ios. Palavras-chave: Melhorar Comunicação Corporativa, Aplicativos Híbridos. vi

7 ABSTRACT The IT (Information Technology) has emerged as a revolution, automated several processes becoming indispensable on the daily basis of many people's lives, including facilitating access to information that makes their consumers well-informed. In the corporate scenario, companies need to communicate with their employees efficiently, and in order to do that, they must provide several ways to deliver content to their recipients. This scenario is even more important for large companies that need to communicate to many people and very quickly, which is the case of Softplan. This paper discusses the concepts of hybrid applications that intends to enable the development of mobile applications for multiple platforms using only one code. After this study, it is proposed an application for smartphones that integrate various communications tools to employees and through the same code would be available to Android and ios devices. Keywords: Improving Corporate Communications, Hybrid Applications. vii

8 1. INTRODUÇÃO Uma das maiores dificuldades das organizações é fazer com que as informações alcancem os colaboradores de forma clara. Robbins (2005) aponta que é necessário que a comunicação interna seja mais do que uma simples transferência de informações, pois falhas nesse processo podem acarretar conflitos dentro da empresa. Dessa maneira, a comunicação interna se caracteriza por um diálogo, entre a empresa e os seus colaboradores. Já Corrado (1994) afirma que a comunicação organizacional já não se concentra apenas em transmitir informações, mas também em mudar o comportamento dos empregados para que realizem um melhor trabalho, impulsionando a organização em direção a suas metas. Assumindo que a comunicação interna aumenta os esforços para que todos criem identidade com a empresa, gerando maior comprometimento e satisfação de todos os envolvidos, este estudo visa criar uma alternativa para otimizar a comunicação interna entre empresa e colaborador, integrando o uso de ferramentas já existentes em um único ambiente PROBLEMATIZAÇÃO Formulação do Problema A empresa foco desse estudo caracteriza-se por ser uma empresa de grande porte que atualmente conta com mais de colaboradores no seu quadro funcional. Esta empresa cresce de forma exponencial, crescendo nos últimos 5 anos o que havia crescido em 20. O crescimento rápido de empresas pode gerar uma série de problemas se não for bem planejado e estruturado, e um destes problemas é a dificuldade em se comunicar com os colaboradores e fazê-los andar em uma mesma linha. Barnard (1938) coloca o primeiro entre os três elementos necessários para as organizações, pessoas capazes de se comunicar entre si. Conforme Goulart e Schadeck (2011) Uma comunicação eficaz é uma exigência de primeira ordem para manter a excelência em uma pessoa ou empresa. Uma adequada comunicação favorece um bom entendimento, o qual é um fator de motivação e uma inesgotável fonte de energia. Com frequência pensamos que a comunicação é algo natural e espontâneo, A comunicação interna na obtenção dos melhores resultados de crescimento e desenvolvimento da organização do qual não faz falta se ocupar especialmente. Portanto, é habitual que nas empresas não se conte com 7

9 elementos operativos concretos para resolver problemas vinculados à comunicação, nem se observe claramente que a comunicação dentro da empresa é uma ferramenta de gestão. A empresa reconhece que o processo de comunicação interna é essencial para uma melhor integração dos funcionários, e por conseqüência, para a manutenção de um bom ambiente de trabalho. Neste sentido, (França e Leite, 2007) salientam que a comunicação interna começou a ser considerada um importante instrumento de informação e motivação dos empregados na execução de seus trabalhos. Assim, ressalta-se que colaboradores satisfeitos com a organização a que pertencem tendem a assumir mais responsabilidade pela execução das suas tarefas. Atualmente os colaboradores contam com uma ferramenta principal agregadora de notícias que tem o objetivo de disseminar informações aos seus colaboradores. A ferramenta é em formato de blog atualizado mensalmente, chamado de Softnews. Nesta mesma ferramenta, há um espaço reservado para o Mural de anúncios liberado aos colaboradores, cujo objetivo é disponibilizar um canal único onde colaboradores possam oferecer indicações, comunicar algo importante, etc. Outra ferramenta em formato de Hotsite que tem por objetivo orientar os colaboradores no uso das redes sociais uma vez que o nome deles está vinculado à empresa, chamado de Manual de Conduta nas Redes Sociais. Uma terceira ferramenta em formato de aplicativo web que tem por objetivo concentrar em um único mapa os dados dos colaboradores que querem solicitar ou oferecer carona para o horário do expediente, chamado de Carona Amiga. 8

10 Figura 1 - Atuais ferramentas de comunicação interna Solução Proposta Apesar dos canais de comunicação da empresa estarem estruturados e serem acessíveis via browser, eles não encontram-se em um único ambiente e nem há ligação entre eles. A proposta seria integrá-los em um único ambiente a fim de facilitar e ampliar toda a divulgação de informações que estes canais contêm, além de criar uma identidade única entre os mesmos. 9

11 APPs, aplicativos para smartphones, ou aplicativos mobile como também podem ser chamados são softwares que desempenham objetivos específicos em smartphones e tablets. Geralmente são descarregados (vulgo download) por meio das lojas de aplicativos, como a App Store, Google Play, Windows Phone Store, entre outros. Alguns aplicativos são gratuitos, e outros pagos. Normalmente são destinados a dispositivos como iphone, ipad, Android, Tablets ou Windows Phone, mas também podem ser baixados para computadores menos portáteis, como laptops ou desktops. Os aplicativos são destinados a facilitar o desempenho de atividades do usuário, para diversas finalidades, assim como para puro divertimento. Para fins estatísticos, O relatório The Mobile Economy Latin America 2013 (GSMA) dá conta de que já em 2013 os dispositivos conectados ultrapassassem o número de habitantes do planeta, em grande parte pela popularização dos smartphones e a melhoria da infraestrutura por parte das empresas de telefonia móvel. Segundo dados de uma pesquisa realizada em 2012 pela Gartner, 102 milhões de APPs seriam instalados durante o ano de 2013, 91% gratuitos, que ainda assim gerariam uma receita de 26 bilhões de Dólares Americanos. Conforme um relatório analítico estimou-se que as receitas provenientes da distribuição de APPs ultrapassem os 10 milhões de dólares americanos por ano dentro da União Européia, bem como, em 28 países da EU, mais de de empregos criar-seiam como resultado do aumento exponencial do mercado dos APPs. Com esta popularização dos dispositivos móveis conectados à internet, o mercado e o uso de aplicativos para smartphones cresce a cada dia. Estes dispositivos rodam pequenos programas comumente chamados de APPs e que são dependentes das plataformas para as quais foram projetados. Um APP produzido em linguagem Objective-C rodará em smartphones com o sistema operacional ios, Já um APP que for produzido em linguagem JAVA rodará em dispositivos com o sistema operacional Android, ou ainda se um APP for produzido em linguagem C# rodará em smartphones com sistema operacional Windows Phone. Mesmo sendo este aplicativo com o mesmo design e funcionalidades, para rodar nas três plataformas acima citadas, ele deverá ser produzido por três vezes em cada uma das três linguagens. 10

12 Figura 2 - Desenvolvimento de aplicativos em linguagens nativas Uma alternativa para esta duplicidade de versões para diferentes plataformas são os chamados aplicativos híbridos, que são produzidos em três linguagens: HTML, CSS e JavaScript e podem ser compilados para várias plataformas, e entre elas, ios, Android e Windows Phone, ou seja, com uma única codificação conseguimos criar e manter um APP que poderá ser disponibilizado para as três principais plataformas do mercado de sistemas operacionais para smartphones. Figura 3 - Desenvolvimento de aplicativos híbridos Juntando-se a solução supracitada com a necessidade de se juntar as quatro ferramentas disponibilizadas pela empresa em locais distintos, a solução proposta por este trabalho é a criação de um aplicativo híbrido, para ios e Android, que integre Softnews, Carona Amiga, Manual de Conduta nas Redes Sociais e Mural em um mesmo ambiente. 11

13 1.2. OBJETIVOS Objetivo Geral Desenvolver um aplicativo para smartphones para facilitar e aumentar o consumo de informações internas por parte dos colaboradores, por meio deste único ambiente facilmente acessível e criando-se assim uma identidade única entre as ferramentas atuais disponibilizadas pela empresa via navegador (Browser) Objetivos Específicos Estudar as ferramentas necessárias para a construção do aplicativo; Implementar o aplicativo; Testar e validar a implementação do aplicativo; Documentar o desenvolvimento e o resultado obtido METODOLOGIA A realização dos estudos aplicados a esse trabalho segue a mesma metodologia de trabalhos científicos. O conhecimento científico não á algo pronto e acabado, isso permite que os contextos existentes sejam interpretados e discutidos de diferentes formas por diferentes pessoas. Segundo Bunge (1974), com vários questionamentos, é possível propor uma ou mais soluções para um referido problema. Métodos científicos são as formas mais seguras inventada pelo homem para controlar o movimento das coisas que cerceiam um fato e montar formas de compreensão adequadas de fenômenos. Abaixo está descrita a metodologia seguida para o desenvolvimento deste Trabalho de Conclusão de curso: 1. Determinação do tema problema tese do trabalho: Nesta fase, foi verificada uma necessidade, um contexto não explorado; 12

14 2. Levantamento da bibliografia: Com o ponto focal do trabalho estabelecido, foi efetuado um levantamento sobre os recursos bibliográficos disponíveis para a fundamentação do conteúdo do assunto; 3. Leitura e documentação: Foi de competência desta fase, a filtragem e entendimento do material encontrado conforme a relevância da publicação; 4. Construção lógica: As ideias da pesquisa foram estruturadas conforme as exigências racionais da sistematização própria do trabalho; 5. Construção do texto e articulação dos parágrafos: O desenvolvimento do texto foi organizado em capítulos em cada qual abordava diferentes ênfases com parágrafos individuais. 6. Projeto e desenvolvimento: Fase prática de desenvolvimento da aplicação que tem finalidade de entregar e mostrar, no formato físico, os resultados das pesquisas; e 7. Conclusão: Terminado as fases anteriores, a conclusão define os resultados obtidos, reflexão sobre a aplicabilidade de aplicativos híbridos neste contexto, assim como pontos para discussões e trabalhos futuros ESTRUTURA DO TRABALHO Este trabalho está dividido em três capítulos. O capítulo 1 dá ênfase ao estado atual das ferramentas utilitárias e de comunicação interna. Os conceitos básicos, que serão abordados mais profundamente durante o capítulo 2, são mostrados nesta etapa. A situação problema, solução proposta, objetivos e a metodologia de como foi realizado o trabalho fazem parte dos tópicos inseridos nesse capítulo. O capítulo 2 será responsável pela fundamentação de aplicativos mobile. As metodologias, modelos, frameworks e a visão técnico-operacional estão sucintamente explicados. Aplicativos híbridos, ponto focal deste trabalho, são explorados nesse capítulo para que a partir de então as aplicações que adotam os conceitos abordados nesse trabalho possam ser analisados para permitir que um sistema seja modelado no próximo capítulo. O capítulo 3 apresenta os requisitos funcionais e não funcionais e delimitação do escopo da aplicação. Ainda nesse capítulo são apresentados o desenvolvimento da aplicação e seus webservices de comunicação com os servidores, e sua compilação para diferentes plataformas. Finalizando, é explicado como a aplicação desenvolvida funciona, mostrando suas telas. 13

15 2. FUNDAMENTAÇÃO TEÓRICA Este capítulo aborda os conceitos que envolvem o contexto deste TCC fazendo uma revisão bibliográfica sobre o tema para que após a aquisição do conhecimento possa ser proposto uma aplicação que se utilize de tais fundamentos APLICATIVOS HÍBRIDOS PARA SMARTPHONES Ao passo de que os aplicativos nativos exigem uma programação única em cada linguagem para cada plataforma, ios, Android e Windows Phone, uma aplicação híbrida precisa apenas de uma programação em tecnologia intermediária que após ser compilada é levada a um estágio que possibilita o uso nas diferentes plataformas, ele leva vantagem em relação ao segundo, por poder acessar de forma plena todos os recursos de hardware que o device (aparelho) disponibiliza. Os APPs híbridos, além da limitação de acesso ao hardware, ainda não podem acessar diretamente o Sistema Operacional e sofrem alguns problemas na implementação entre os navegadores. Ou seja, estas aplicações ainda possuem lacunas. As lacunas em aplicações híbridas estão sendo superadas a cada lançamento de plataformas e frameworks e quando colocadas na balança perdem para a economia de mão de obra e economia de tempo em sua criação, o que permite que esta tecnologia seja cada vez mais empregada entre as empresas LOJAS DE APLICATIVOS Tanto os aplicativos híbridos, quando os nativos, tem seus canais oficiais de distribuição definidos pelas empresas responsáveis pelos respectivos sistemas operacionais que tem por modelo de negócio o licenciamento de desenvolvedores de aplicativos e o consumo por que faz uso de seus aparelhos destes aplicativos. Para o desenvolvedor que deseja desenvolver para sistemas operacionais ios, a loja de distribuição é chamada de Apple Store, e para que possa ser licenciado a vender, seja cobrando ou não pelo aplicativo desenvolvido, o mesmo deve pagar uma taxa anual de desenvolvedor à Apple. 14

16 Agora o desenvolvedor que deseja desenvolver para sistemas operacionais Android, a loja de distribuição é chamada de Google Play, e para que possa ser licenciado a vender, seja cobrando ou não pelo aplicativo desenvolvido, o mesmo deve pagar uma taxa única de desenvolvedor Android. Uma vez os aplicativos disponibilizados nestas lojas, o usuário final pode fazer a instalação em seus dispositivos compatíveis com aquele aplicativo específico, e pagando por ele, caso o desenvolvedor opte por esta cobrança PHONEGAP PhoneGap é um framework open source para criar rapidamente APPs multi-plataforma fazendo uso do HTML5, Javascript e CSS, sendo que a interface com o usuário da aplicação deve ser feita com HTML5 e CSS3, e a Lógica deve ser feito com JavaScript. Essas tecnologias intermediárias que compiladas pelo PhoneGap permitem a instalação da aplicação em dispositivos ios, Android e Windows Phone, por exemplo. Figura 4 - Representação site Phonegap.com do processo de desenvolvimento Fonte 1 - phonegap.com O site oficial do framework disponibiliza uma tabela com os acessos de hardware que os APPs desenvolvidos com esta tecnologia suportam: 15

17 Figura 5 - Tabela comparativa de recursos nativos suportados pelo phonegap Fonte 2 - Adaptação phonegap.com 2.4. HTML HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste em uma linguagem de marcação utilizada para produção de páginas na web, que permite a criação de documentos que podem ser lidos em praticamente qualquer tipo de computador e transmitidos pela internet. Para escrever documentos HTML não é necessário mais do que um editor de texto simples e conhecimento dos códigos que compõem a linguagem. Os códigos (conhecidos como tags) servem para indicar a função de cada elemento da página Web. Os tags funcionam como comandos de formatação de textos, formulários, links (ligações), imagens, tabelas, entre outros. 16

18 Os browsers (navegadores) identificam as tags e apresentam a página conforme está especificada. Um documento em HTML é um texto simples, que pode ser editado no Bloco de Notas, por exemplo, e transformado em hipertexto CSS As folhas de estilo descrevem o modo como os documentos são apresentados não só no display como também na sua versão impressa e provavelmente a forma como são pronunciados. O W3C promove ativamente a utilização de folhas de estilo na web desde a fundação do consórcio em 1994 e hoje CSS é amplamente utilizada em navegadores. Anexando folhas de estilo a documentos estruturados na web (por exemplo, HTML), autores e leitores podem influenciar a apresentação dos seus documentos sem sacrificar a independência de dispositivos ou adicionar novas tags HTML CSS 3 Com o avanço dos recursos gráficos dos computadores e a melhoria constante dos browsers, o CSS pode sofrer atualizações periódicas de tempos em tempos. A padrão mais recente do CSS é o 3 (três), nele são incluídos novos módulos que suprem muitas necessidades dos programadores. Com o CSS3 podemos, entre outras possibilidades, trabalhar com animações, transformações 2D e 3D e media queries, que são as responsáveis pelo tratamento do CSS para diferentes tamanhos de displays e resoluções RESPONSIVIDADE Design responsivo é um conceito para o desenvolvimento de layouts, tanto de sites como de sistemas, onde é elaborado um layout (e conteúdo) único, que se ajusta automaticamente para qualquer sistema ou dispositivo, independente de resolução. Ou seja, ao invés de ter uma versão do layout para cada dispositivo (técnica muito usada hoje) ou até APPs, você tem um layout que 17

19 adapta-se ao dispositivo do usuário. Pode parecer uma ideia óbvia, e é até um conceito antigo por sinal, mas só agora vem ganhando força e tendo uma boa compatibilidade pelos navegadores. Figura 6 - Representação de um site com o design responsivo Fonte JAVASCRIPT JavaScript é uma linguagem de programação interpretada. Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido. É atualmente a principal linguagem para programação client-side em navegadores web. Foi concebida para ser uma linguagem script com orientação a objetos baseada em protótipos, tipagem fraca e dinâmica e funções de primeira classe. Possui suporte à programação funcional e apresenta recursos como fechamentos e funções de alta ordem comumente indisponíveis em linguagens populares como Java e C++. 18

20 JQUERY jquery é uma biblioteca JavaScript veloz, pequena e rica em recursos. Ele faz manipulação do DOM, manipulação de eventos, animação e Ajax de forma muito mais simples do que ao se usar JavaScript puro. O jquery conta com uma API fácil de usar e que funciona em inúmeros browsers, ou seja, ao se fazer uso do Jquery ao invés de JavaScript puro, abrimos mão de performance do navegador para termos um trabalho reduzido com as diferenças que cada browser cliente pode apresentar JQUERY MOBILE jquery Mobile é um framework web, otimizado para uso do Touch, é um sistema de interface de usuário baseada em HTML5 projetado para fazer sites e aplicativos que são acessíveis em todos os dispositivos smartphones, tablets e desktop responsivos PHP O PHP (um acrônimo recursivo para PHP: Hypertext Preprocessor) é uma linguagem de script open source de uso geral, muito utilizada, e especialmente adequada para o desenvolvimento web. O que distingue o PHP de algo como o Javascript no lado do cliente é que o código é executado no servidor, gerando o HTML que é então enviado para o cliente. O cliente recebe os resultados da execução desse script, mas não sabe qual era o código fonte WEB SERVICES Web service é uma solução utilizada na integração de sistemas e na comunicação entre aplicações diferentes. Com esta tecnologia é possível que novas aplicações possam interagir com aquelas que já existem e que sistemas desenvolvidos em plataformas diferentes sejam compatíveis. Os Web services são componentes que permitem às aplicações enviar e receber dados mesmo que 19

21 cada aplicação tenha a sua própria "linguagem", pois elas são traduzidas para uma linguagem universal, um formato intermediário como XML, JSON, CSV, etc. 3. PROJETO Neste capítulo é documentada a modelagem e criação de um aplicativo que atenda o agrupamento das ferramentas de comunicação interna, com premissas e objetivos definidos conforme seção 1.2, levando em consideração a definição de um escopo, a análise de requisitos, diagrama de casos de uso, testes e publicações do aplicativo DEFINIÇÃO DO ESCOPO Para o contexto deste TCC as ferramentas de comunicação interna que serão trabalhadas, apesar de existirem outras, serão apenas o Softnews e seu Mural, o Carina Amiga e o Manual de Redes Sociais. Neste trabalho serão trabalhados apenas os sistemas operacionais ios e Android, pois estes são os dois dominantes do mercado, apesar de existirem vários outros que se utilizariam dos mesmos métodos. Este trabalho de TCC não focará nos sistemas de web services que deverão ser desenvolvidos, mostrará apenas a integração básica para que possa haver comunicação entre aplicativo e servidor ANÁLISE DE REQUISITOS Para mostrar o modo que o aplicativo vai funcionar, os próximos tópicos mostram respectivamente os requisitos funcionais, não funcionais e as regras de negócio que delimitam o sistema REQUISITOS FUNCIONAIS 20

22 No contexto do sistema a ser desenvolvido há quatro módulos: Softnews: Responsável por apresentar e permitir interações com os editoriais e notícias do serviço/blog Carona Amiga: Responsável por apresentar e permitir interações com os solicitantes e ofertantes de carona do serviço Carona Amiga Mural: Responsável por apresentar e permitir interações com os anúncios do serviço Mural, que é alojado dentro do serviço/blog Softnews; e Manual de Redes Sociais: Responsável por apresentar o conteúdo do serviço/hotsite Softnews RF01: O sistema deve apresentar o editorial vigente de forma resumida; RF02: O sistema deve permitir ao usuário filtras as notícias por categorias; RF03: O sistema deve apresentar o conteúdo total das notícias; RF04: O sistema deve permitir ao usuário curtir a notícia; e RF05: O sistema deve permitir ao usuário comentar e ver comentários da notícia. Carona Amiga RF06: O sistema deve disponibilizar um tutorial de como utilizar esta parte do sistema; RF07: O sistema deve apresentar a política de uso; RF08: O sistema deve apresentar os solicitantes e ofertantes de carona no mapa; RF09: O sistema deve apresentar as informações de cada solicitante e ofertante; RF10: O sistema deve permitir a habilitação e saída do usuário do programa; e RF11: O sistema deve permitir a inclusão e edição dos dados de perfil do usuário. Mural RF12: O sistema deve apresentar a política de uso; RF13: O sistema deve apresentar o conteúdo total dos anúncios; RF14: O sistema deve disponibilizar uma forma de contato com o anunciante; RF15: O sistema deve apresentar os anúncios do usuário; e 21

23 RF16: O sistema deve permitir a inserção, edição e exclusão de anúncio. Manual de Redes Sociais RF17: O sistema deve apresentar o conteúdo total do manual; e RF18: O sistema deve permitir que o usuário vá diretamente para partes específicas do manual REQUISITOS NÃO FUNCIONAIS RNF01: O sistema deve ser desenvolvido em plataforma orientada para Smartphone; RNF02: O sistema deve ser desenvolvido na linguagem HTML, JavaScript e CSS; RNF03: Os web services devem ser desenvolvidos na linguagem PHP; RNF04: O sistema deve utilizar o Banco de Dados MySQL; e RNF05: O sistema deve solicitar autenticação de usuário e senha para acesso REGRAS DE NEGÓCIO RN01: O sistema deve enviar comentários feitos pelos usuários nas notícias para moderação antes da publicação; RN02: O sistema deve apresentar o tutorial do Carona Amiga assim que o usuário entrar pela primeira no módulo, e após esta vez, ver o tutorial deverá ser opcional; RN03: O sistema deverá permitir a alteração e cadastro do perfil do usuário do módulo Carona Amiga, apenas se o endereço do usuário tenha sido localizado de acordo com as informações fornecidas por ele; e RN04: O sistema deverá validar os formulários antes do envio, a fim de verificar campos obrigatórios não preenchidos DIAGRAMA DE CASOS DE USO 22

24 Os diagramas de caso de uso são os modelos para uma representação das funcionalidades observáveis do sistema e dos elementos externos a ele. O diagrama de casos de uso mostra como a análise de requisitos molda o sistema (BEZERRA, 2002). A seguir, estão relacionados os Casos de Uso dos quatro módulos pertinentes ao sistema. Softnews Os usuários Acessarão o editorial vigente, as notícias do editorial e as notícias categorizadas. Os usuários poderão ler as notícias, curti-las, comentar e ver comentários sobre cada notícia. A figura abaixo ilustra o caso de uso deste módulo. Figura 7 - Diagrama de caso de uso do módulo Softnews Carona Amiga Os usuários Acessarão o mapa com os pontos que informam cada solicitante e ofertante de carona e poderão ver as informações de cada ponto no mapa. Os usuários ainda poderão cadastrar, editar e excluir seu perfil do módulo, assim como terão acesso à política de uso do serviço e ao tutorial. A figura abaixo ilustra o caso de uso deste módulo. 23

25 Figura 8 - Diagrama de caso de uso do módulo Carona Amiga Mural Os usuários acessarão a lista de anúncios e poderão lê-los. Os usuários poderão também ver os seus próprios anúncios, cadastrar, editar e excluí-los, assim como também terão acesso à política de uso do serviço. A figura abaixo ilustra o caso de uso deste módulo. 24

26 Figura 9 - Diagrama de caso de uso do módulo Mural Manual de Redes Sociais Os usuários poderão ler todo o conteúdo do manual. A figura abaixo ilustra o caso de uso deste módulo. Figura 10 - Diagrama de caso de uso do módulo Manual de Redes Sociais 25

27 3.4. CODIFICAÇÃO Para se ter uma arquitetura web é necessário ter um servidor para que o conteúdo possa ser acessado e geralmente um Banco de Dados para suportar a aplicação e armazenando dados que serão acessados por um cliente. No caso deste projeto, os servidores já encontram-se em produção e como os sites focos deste projeto são desenvolvidos em tecnologia PHP, os web services usarão desta mesma tecnologia e destes mesmos servidores. Este projeto não usará um banco de dados próprio, pois, os web services serão apenas uma interface de comunicação entre o aplicativo e o banco de dados dos serviços em produção, fazendo com que os dados solicitados sejam entregues em formato JSON. Todos os códigos deste projeto, sejam eles PHP, HTML, JavaScript ou CSS podem ser escritos através de qualquer editor de texto desde que seja respeitada sua sintaxe. Para a codificação de todo este projeto foi escolhido a IDE de desenvolvimento NetBeans CRIAÇÃO DOS WEBSERVICES Os três web services desenvolvidos para este projeto seguem a arquitetura REST, que através de uma linguagem intermediária permitem a troca de informações entre sistemas que usam tecnologias diferentes. Estes serviços exigem a cada requisição HTTP, dados de login e senha do solicitante, para só depois de validado retornar uma resposta em formato JSON. Como definido no escopo do projeto, estes web services não serão detalhados CODIFICAÇÃO PHP Como apresentado anteriormente, o PHP é uma linguagem que roda no servidor, portanto não será a linguagem que estará presente no aplicativo, apenas nos web services que serão os responsáveis pela troca de informações com os servidores. Como os web services não serão detalhados, a importância do PHP deverá ficar subentendida como primordial para a realização do TCC. 26

28 Os web services desenvolvidos são compostos por vários arquivos PHP, cada um com funções bem definidas, mas para fins dos exemplos apresentados neste trabalho falaremos apenas do arquivo webservice.php que é o único que poderá ser chamado a cada requisição e o único responsável por entregar as respostas solicitadas CODIFICAÇÃO HTML O HTML não é uma linguagem de programação, mas sim de marcação. Ela roda diretamente no cliente e é parte fundamental na formatação dos dados na tela do dispositivo do usuário. Este projeto utiliza-se do framework Jquery Mobile, que oferece a possibilidade de criar várias telas do APP em um único arquivo HTML, sendo que o próprio framework se encarrega das mudanças de tela e histórico de navegação. A estrutura do HTML para uso do framework segue modelo abaixo: Figura 11 - Estrutura do HTML para uso do Jquery Mobile Fonte Tomaremos como exemplo a página inicial do aplicativo, que no caso é a página de login. O HTML apresentado a seguir encontra-se dentro da da tag body do HTML, ou tomando-se por base a figura acima, o HTML apresentado ocupa o lugar do texto...content goes here

29 Figura 12 - HTML da tela de login do aplicativo Nesta parte do HTML, logo na primeira linha, temos uma TAG DIV. Uma TAG DIV define uma divisão ou uma seção em um documento HTML. Este em especial tem o seu atributo data-role definido como page, e isto diz ao framework Jquery Mobile que esta TAG é uma tela do aplicativo. O tratamento deste HTML para um layout agradável, será detalhado na seção posterior (Codificação CSS) e o tratamento dos dados do formulário será tratado na seção após a próxima (Codificação JavaScript) CODIFICAÇÃO CSS O CSS tem por objetivo deixar o HTML apresentável sem acoplamento, ou seja, o HTML formata apenas o conteúdo e o CSS trata apenas de sua aparência, sendo arquivos separados que podem ser substituídos sem que o outro precise necessariamente sofrer alterações. Abaixo é mostrado o CSS que faz com que o HTML apresentado na seção anterior seja formatado e também é mostrado o resultado final da tela, já renderizada pelo navegador: 28

30 Figura 13 - CSS da tela de login do aplicativo CODIFICAÇÃO JAVASCRIPT 29

31 Este projeto utiliza-se do framework Phonegap, e a codificação JavaScript para um projeto Phonegap inicia-se declarando a variável app e em seguida três funções iniciais: initialize(), bindevents() e ondeviceready(), sendo que a primeira função, como se vê na imagem a seguir, serve para fazer as primeiras definições, como o tipo de transição se página, por exemplo, a segunda função serve para escutar o device e chamar uma outra função para quando o device estiver pronto, que no caso é chamada a terceira função. Figura 14 - JavaScript inicial da tela de login do aplicativo Detalhando mais esta parte inicial: Antes do APP iniciar-se, procura-se se o dado de login já esteja gravado no localstorage do próprio navegador. O localstorage faz parte da API Web Storage do HTML5, cuja função é guardar dados (com limite de 5MB) no próprio navegador, praticamente 30

32 como funcionam os cookies. Estado o login já gravado na localstorage a variável login é populada, como se vê no primeiro pontilhado azul da figura acima. Após esta verificação do dado de login o aplicativo inicia-se, é definido mais alguns parâmetros e já na primeira função chamada (checkconnection()) ele valida a conexão do device com a internet, e que caso exista esta conexão, seta o dado login, caso exista, no input homônimo no formulário da tela de login, como se vê no segundo pontilhado azul da figura acima. Logo após as validações acima, é chamada função abrelogin(), como se vê no primeiro pontilhado vermelho da imagem acima, sendo que a mesma tem a função de trocar a tela do dispositivo, mostrando então o formulário de login e senha, como se vê no segundo pontilhado vermelho da imagem acima. Na tela inicial, o botão entrar do formulário de login dispara a função fazerlogin(), que é detalhado na figura abaixo, que faz basicamente uma requisição ao web service enviando os parâmetros de login e senha, e que por sua vez retorna se os dados estão corretos, e que caso positivo faz uma chamada a outra função (loginok()) que leva à tela com o menu principal, conforme figura subsequente à próxima. 31

33 Figura 15 - JavaScript da função de login do aplicativo 32

34 Figura 16 - Representação das telas e do processo de login INTERAÇÕES COM WEB SERVICES Tanto no processo de login como em todas as outras requisições solicitadas ao servidor, utiliza-se de um conjunto de tecnologias com as técnicas de AJAX, que possibilita que o servidor só retorne os dados relevantes, reduzindo o tráfego de dados pela rede. A imagem abaixo ilustra o processo clássico de requisição ao servidor que a cada requisição faz transitar pela rede o HTML, CSS e dados, e compara com a utilização do AJAX que faz transitar pela rede apenas os dados, sendo que entende-se, na imagem, browser client por device do usuário. 33

35 Figura 17 - Comparação entre o processo clássico de requisição de aplicação web com a requisição AJAX Fonte 5 - Adaptação adaptivepath.com Permanecendo no exemplo da requisição para validação de login e senha, via AJAX, o retorno do servidor será apenas os dados relevantes que se espera, conforme figura abaixo vemos o retorno de que o login foi liberado, o e o nome correspondentes àquelas informações enviadas. Figura 18 - Representação de retorno do servidor após requisição de validação de login e senha Em resumo, o device do usuário envia uma requisição para um serviço web que faz todo o processamento e só envia de volta o resultado, em formato JSON, que é lido pelo aplicativo que por 34

36 sua vez toma alguma ação conforme esta resposta recebida. Esta mesma lógica se estende a todas as demais funcionalidades do aplicativo TELAS FINAIS Figura 19 - Representação das telas finais do APP 3.6. COMPILAÇÃO Todos os códigos do aplicativo são desenvolvidos em HTML, CSS e JavaScript, como já pontuado, porém como estas linguagens não rodam nos sistemas operacionais dos smartphones 35

37 atuais precisamos compilar (ou transformar) estes códigos em um arquivo único, ou no caso deste projeto, dois arquivos finais: arquivo com extensão ipa e arquivo com extensão apk, sendo que o primeiro se refere a um aplicativo ios e o segundo a um aplicativo Android. Para fazer esta transformação, ou compilação, usou-se o serviço de buil do próprio Phonepag que é disponibilizado pelo endereço que basicamente recebe o pacote com todos os arquivos do projeto, recebe as chaves dos desenvolvedores, e faz o processamento e compilação, e ao final do processo disponibiliza os dois arquivos finais. Figura 20 - Interface do serviço de build do phonegap.com 3.7. TESTES Os testes seguem duas frentes, a primeira e mais prática é feita diretamente no navegador do computador do programador, ou seja, no servidor de homologação. Para este teste no navegador foi utilizado a ferramenta Ripple, que é um complemento para o navegador Google Chrome e tem por finalidade emular diferentes tamanhos de telas de diferentes dispositivos. Testes desta forma são excelentes para validar o layout, mas ainda assim não substitui o teste completo. 36

38 Figura 21 - Ambiente de testes Ripple O teste completo é a segunda frente. Após a compilação via serviço de build do Phonegap é baixado para os devices de testes o aplicativo não finalizado e testado em sua plenitude, ou seja, layout e todas as funcionalidades. Após os testes serem validados, o aplicativo estará pronto para publicação PUBLICAÇÕES DO APLICATIVO Após os testes e compilações finais, os dois arquivos (ipa e apk) estão prontos para serem disponibilizados nas lojas de oficiais de aplicativos, o ipa na loja Apple Store (itunes) e o apk na loja Google Play. A Loja do sistema ios é a mais restritiva com relação a todo o processo, desde a liberação de versões de testes, quanto na publicação. Enquanto nesta loja precisamos trabalhar com um 37

39 Macintosh (Computador com sistema operacional Macintosh, da própria Apple) para envio do arquivo ipa, na loja da Google já não encontramos qualquer restrição neste sentido. As restrições do sistema ios também podem ser percebidas no pós processo de produção do APP, uma vez entregue para a loja o arquivo final, este arquivo passa pela revisão da própria Apple e somente após isto é disponibilizado para download dos usuários finais. A sua concorrente, Google, já não faz esta validação, disponibilizando para download dos usuários finais algumas horas depois do término do processo. As telas dos cadastros das lojas estão representadas pelas imagens abaixo. Figura 22 - Tela do Itunes Connect para publicação de aplicativo na Apple Store 38

40 Figura 23 - Tela do Google Play para publicação de aplicativo CONCLUSÕES Este TCC apresentou os conceitos que relatam como os aplicativos híbridos trazem agilidade no desenvolvimento de aplicativos para várias plataformas diferentes, uma vez que se trata de um código único para todas as plataformas. Para o desenvolvimento do APP foi usada a plataforma líder de mercado na atualidade. Procurou-se dar ênfase à facilidade da compilação que o Phonegap disponibiliza e ao processo geral de desenvolvimento representando uma das funcionalidades do APP. O uso do complemento Ripple no Google Chrome para os testes de interface do sistema desenvolvido foi uma forma rápida para encontrar erros e corrigir antes do processo mais demorado de testes nos dispositivos. O aplicativo foi disponibilizado nas lojas de distribuição e se mostraram eficientes no que se propõe: a disseminação mais fácil das informações corporativas. O retorno dos usuários foi positivo e outras funcionalidades já foram sugeridas. Como trabalhos futuros, há a possibilidade de, por exemplo, integração de ferramentas que disponibilize aos colaboradores as parcerias que a empresa tem com outras empresas, e uma 39

41 ferramenta que disponibilize os ramais e telefones de outros colaboradores para facilitar o encontro destas informações. Outro incentivo é a criação de outros aplicativos voltados para não colaboradores, para disponibilizar as vagas de emprego disponíveis da empresa, por exemplo. 40

42 REFERÊNCIAS BIBLIOGRÁFICAS BARNARD, C. The Functions of the Executive, Cambridge, Mass., Harvard University, BEZERRA, Eduardo. Princípios de análise e projeto de sistemas com UML. Rio de Janeiro: Campus, BUNGE, Mário. Teoria e Realidade. São Paulo: Perspectiva, CLUBETECH, O Que é o Design Responsivo, Disponível em: Acesso em: 11 dez. 2013, 15:22:00. CORRADO, F. M. A Força da Comunicação. Trad. Bárbara T. Lambert. São Paulo: Makron Books, EICH, Brendan. JavaScript. Disponível em: Acesso em: 05 ago. 2013, 10:55:00. FRANÇA, F.; LEITE, G. A comunicação como estratégia de Recursos humanos. Rio de Janeiro: Qualitymark, GARRETT, J. James, Ajax: A New Approach to Web Applications, Disponível em: Acesso em: 06 set. 2013, 11:52:06. GOULART, A. G.; SCHADECK, M. A Comunicação Interna na Obtenção dos Melhores Resultados de Crescimento e Desenvolvimento da Organização. Revista Eletrônica de Iniciação Científica: Gestão Sustentável e Negócios - v. 1, ano 1, p , GSMA. Mobile Economy Latin America 2013, Disponível em: Acesso em: 30 dez. 2013, 12:31:30. JQUERY. What is jquery? Disponível em: Acesso em: 22 set. 2013, 10:01:00. JQUERY MOBILE. About. Disponível em: Acesso em: 22 set. 2013, 10:15:30. PHONEGAP. About the Project. Disponível em: Acesso em: 28 abr. 2013, 15:40:00. PHP, O que é o PHP? Disponível em: Acesso em: 15 mai. 2013, 22:11:00. 41

43 PORTO, Fábio. Aplicativos Mobile: Definições, História e Previsões. Disponível em: Acesso em: 20 nov. 2013, 17:45:00. ROBBINS, S. P. Comportamento Organizacional. Trad. Reynaldo C. Marcondes. 11º ed. São Paulo: Pearson Prentice Haal, ; Comportamento Organizacional. Trad. Reynaldo C. Marcondes. 9 ed. São Paulo: Pearson Prentice Haal, SIGNIFICADOS, Significado de HTML, Disponível em: Acesso em: 05 fev. 2013, 18:02:00. SILVA, Jomar. Aplicações Móveis Híbridas Com HTML5. Disponível em: Acesso em: 10 nov. 2013, 15:22:00. W3SCHOOLS, CSS3 Introduction, Disponível em: Acesso em: 21 dez. 2013, 09:00:30. WHITFIELD, Karl. Fast Growth Of Apps User Base In Booming Asia Pacific Market, Disponível em: Acesso em: 15 nov. 2013, 10:20:00. WIKIPEDIA, Web Service, Disponível em: Acesso em: 28 fev. 2013, 14:10:00. 42