Como ir além no Desenvolvimento Mobile com TypeScript e Angular

Olá, comunidade da DIO!

Na semana passada aconteceu a Santander Dev Week, uma série de lives incríveis, promovidas pela DIO e o Banco Santander, que ajudou a comunidade a conhecer um pouco mais sobre algumas das principais linguagens de programação do momento, como Dart, Kotlin, Typescript e Swift principalmente quando estamos falando de Desenvolvimento Mobile.

Entretanto, para construir projetos cada vez mais modernos e que atendam a demanda do mercado, que preza pela qualidade com o menor custo possível, é preciso entender o papel dos Frameworks no desenvolvimento de interfaces cada vez mais personalizadas, para construção do Desenvolvimento Mobile, principalmente no Front-End.

Porém, você já parou para pensar em como você pode se destacar e utilizar todo esse conteúdo para ir além na sua carreira? Sabe como utilizar todo esse aprendizado tão rico para se destacar em uma entrevista?

Se você está em busca das respostas, então, este é o artigo certo! Apresento para todos vocês como utilizar a linguagem TypeScript e o Framework Angular como diferencial para você ir além em sua carreira e ser um profissional de destaque, disputado pelos profissionais de recrutamento, os chamados tech recruiters, de diversas empresas em todo o mundo!

Venha conferir e não deixe de ler este artigo até o final! Nele você vai encontrar:

• O que é preciso para atuar com Desenvolvedor Mobile?
• O que é Typescript e qual a diferença com JavaScript?
• Quais os requisitos mínimos que preciso ter para utilizar o framework Angular?
• Como se destacar na carreira?
•  Considerações Finais.

O que é preciso para atuar como Desenvolvedor Mobile?

O mercado de Desenvolvimento Mobile é um dos que mais crescem no Brasil. Para você ter uma ideia, segundo uma pesquisa da GeekHunter, especializada na contratação de profissionais de tecnologia da informação, em uma reportagem do site Tecmundo, foi registrado um aumento considerável da demanda por pessoas desenvolvedoras mobile.

De acordo com a pesquisa, somente no ano de 2021, o número cresceu 600%! A expectativa é que continue assim nos próximos anos, com um crescimento médio das vagas abertas ultrapassando os 10%. O que significa que se você deseja atuar nessa área, vale muito a pena, mesmo que você esteja começando, pois, algumas vagas podem não exigir experiência.

Mais quais são os motivos para essa demanda crescente? Uma possível resposta é a necessidade de diversas empresas dos mais variados segmentos estarem passando pelo processo de transformação digital, que foi impulsionado pela pandemia. Os aplicativos móveis tornam a experiência do usuário (UX) melhor e mais fácil, pois, com apenas alguns cliques é possível realizar diversas operações que podem poupar um tempo precioso dos clientes, isso pode ser uma maneira de agregar valor e conquistar a fidelização dos usuários.

Agora que você entendeu um pouco sobre o mercado de Desenvolvimento Mobile, pode surgir uma dúvida: O que é preciso para ser um Desenvolvedor Mobile? Veja as respostas abaixo:

•  Ter conhecimento em linguagens de programação como Dart, Java Kotlin, Swift e TypeScript;
• Identificar qual plataforma você deseja criar aplicativos como: Android ou iOS, isso pode te ajudar a ter foco para conquistar uma vaga mais rapidamente;
• Praticar bastante: quanto mais projetos você criar, maior será sua confiança para se preparar para os desafios do mercado;
• Não se esquecer de dominar o básico, pois, ele será uma base sólida para sustentar o seu aprendizado, entender
• Lógica de Programação, HTML, CSS e JavaScript é essencial;
•  Entender sobre os principais Frameworks do mercado também pode ser considerado fundamental. Não deixe de estudar sobre Angular, Flutter, React e Vue.js por exemplo;
• Saber um pouco sobre experiência do usuário (UX) e interface do usuário (UI) também é essencial, os aplicativos devem ser desenvolvidos sempre pensando em entregar o melhor resultado possível para os clientes;
• Testes e Qualidade de Software (QA), antes de lançar um aplicativo é essencial garantir a qualidade, para isso é preciso realizar testes para verificar se tudo está funcionando corretamente;
• Criatividade, comunicação assertiva, inovação, planejamento, trabalho em equipe e a capacidade de resolver problemas complexos também são temas que todo o Desenvolvedor Mobile precisa desenvolver para se destacar em um mercado com muitas oportunidades, porém competitivo;
• Banco de dados e Big Data: os aplicativos recebem grandes volumes de dados (big data) e por isso é preciso entender como armazenar, analisar, organizar e tratar os dados para gerar insights e manter cada um deles em segurança para evitar expor as informações confidenciais dos clientes.

Essas são algumas das habilidades técnicas (hardskills) e humanas (softskills) que você precisa desenvolver para começar na área. É importante ressaltar que ao longo de sua jornada você provavelmente terá de se atualizar constantemente para atender as demandas que possam surgir neste mercado que deve continuar crescendo nos próximos anos.

Quais cargos posso atuar no Desenvolvimento Mobile?

Existem uma série de cargos para quem deseja atuar na área. São perfis diversos para atender a necessidade do mercado em ter em seus times de desenvolvimento profissionais qualificados e preparados para resolver problemas que possam surgir. Conheça algumas das profissões dentro do mundo de Desenvolvimento Mobile:

• Arquiteto de Soluções Mobile: adapta o modelo de negócio das empresas buscando proporcionar soluções digitais para os problemas das empresas, com o objetivo de atender a demanda pela transformação digital das corporações que precisam inovar constantemente para não perder espaço no mercado;
• Desenvolvedor Front-End: profissional responsável pelo desenvolvimento da interface dos aplicativos, será responsável por fornecer o primeiro contato do cliente com os serviços que o aplicativo fornece;
• Desenvolvedor Back-End: responsável pelas regras de negócios e pela parte em que o cliente, a princípio, não terá acesso.
• Desenvolvedor Fullstack: é aquele que possui conhecimentos avançados tanto de Back-End como Front-End e está preparado para implementar ambas as funcionalidades. É uma das carreiras mais valorizadas no momento;
• Desenvolvedor Web: sua missão é criar aplicativos web dinâmicos que permitem o uso sem a necessidade de baixar o aplicativo, basta ter acesso a internet e um navegador compatível. Esse profissional precisa ter conhecimentos em como a criar soluções web robustas que atendam a demanda dos clientes;
• Gerente de Projetos: organizar as equipes de desenvolvimento da melhor maneira possível, respeitando as boas práticas de gestão de projetos e fazendo uso das metodologias ágeis e demais técnicas que ajudem a entregar o melhor resultado possível;
• Analista de Testes: responsável por verificar e prevenir erros em aplicativos, busca propor melhores soluções para minimizar os riscos de falhas que possam prejudicar a experiência e usabilidade dos aplicativos;
• Especialista em UX e UI: é profissional que procura entender melhor como proporcionar a melhor experiência possível aos clientes, tanto em sua usabilidade (UX), quanto na interface dinâmica e intuitiva (UI);
• Profissional de Segurança da Informação: verifica e procura tomar medidas preventivas para que os dados dos usuários não sejam expostos de maneira desnecessário e que os aplicativos não fiquem vulneráveis em ataques cibernéticos;
• DevOps: é uma área do desenvolvimento mobile que funciona como uma ponte, capaz de ligar diversas áreas de desenvolvimento com o time de operações;
• Suporte: esclarecer dúvidas dos clientes, responder chamados da maneira mais rápida e ágil possível, sempre buscando entregar a melhor resposta possível para os usuários no menor tempo possível;

Agora que você conheceu melhor o mercado e as áreas de atuação dentro do Desenvolvimento Mobile, venha conhecer, no próximo bloco, uma das linguagens mais recomendadas para o quem deseja atuar no Desenvolvimento Mobile: o TypeScript e também, qual a sua diferença com JavaScript.

Não deixe de conferir!

O que é TypeScript e qual a diferença com JavaScript?

Dentro do Desenvolvimento Mobile, temos uma linguagem que tem conquistado cada vez mais espaço: Typescript. Muito utilizada principalmente para os desenvolvedores Front-End, Typescript é uma linguagem que foi criada pela Microsoft, big tech de tecnologia, seu desenvolvedor foi Anders Hejlsberg e equipe, curiosamente o mesmo criador de outra linguagem famosa: C#. Ela possui uma ampla capacidade de utilizar os recursos da programação orientada a objetos, que consiste na aplicação dos seguintes conceitos:

• Abstração: busca trazer objetos do mundo real para representar dentro do código, com o objetivo de facilitar o entendimento e reduzir sua complexidade;
•  Encapsulamento: divisão das funcionalidades do código em pequenas partes, seja por métodos ou funções;
• Herança: busca economizar tempo com o reuso de código sempre que for possível. É muito semelhante a relação entre pais e filhos que assim como acontecem no mundo real, os filhos herdam características de seus pais, os códigos buscam “herdar” características das chamadas “objetos pais” para facilitar o desenvolvimento;
• Polimorfismo: é um conceito importante dentro da programação orientada a objetos. Busca realizar o tratamento de diferentes classes de forma uniformizada, dessa forma, é possível que apenas um código possua a capacidade de manipular os mais variados objetos.

Ao entender melhor sobre os 4 pilares da programação orientada os objetos, podemos avançar nos conhecimentos sobre Typescript. Além de ser orientada a objetos, a linguagem também é considerada um superset de JavaScript, uma vez que ela proporciona uma série de melhorias em relação ao JavaScript que facilitam o desenvolvimento.

Veja agora as principais diferenças entre JavaScript e TypeScript:

•  Melhor suporte a programação orientada a objetos;
• Considerada de tipagem estática;
• A sintaxe de Typescript é geralmente mais simplificada;
• Melhor suporte para as IDE´s mais modernas que estão disponíveis no mercado atualmente;
• Rápida conversão de arquivos, pode utilizar códigos JavaScript em TypeScript, sem muitos problemas, bastando apenas acrescentar .ts no final dos arquivos substituindo o .js;
• Possui suporte para bibliotecas do JavaScript;
• É muito útil, pois tem a capacidade de apontar erros enquanto o desenvolvedor está escrevendo seu código, poupando tempo e evitando o risco de falhas;
• Existe a possiblidade de TypeScript não ser suportado por alguns navegadores, o que pode ser uma desvantagem a ser considerada em relação ao JavaScript.

Essas são algumas diferenças entre o TypeScript e JavaScript, vale a pena ressaltar que ambas as linguagens são importantes não existindo uma melhor ou pior. Vai depender mesmo da maneira de programar dos desenvolvedores, uma dica é aprender ambas, assim, você só tem a ganhar.

Se ainda é um iniciante, aconselho começar por JavaScript, uma vez que é uma linguagem muito indicada para esse público e depois tentar escrever seus códigos em TypeScript, para ganhar destaque, você provavelmente vai perceber com o tempo aquela que melhor se adapta a sua realidade de desenvolvimento.

"Hello World!" em TypeScript

Agora que você conheceu um pouco mais sobre TypeScript, que tal escrever seu primeiro Hello World! Em TypeScript, você vai perceber que não existe muita diferença com o Hello World! De JavaScript, veja como você pode fazer:

• Tenha uma IDE instalada em sua máquina, como por exemplo, o Visual Studio Code;
• Crie um arquivo chamado hello.ts ou com o nome que achar melhor, desde que a extenção final seja .ts;
• Escreva o seguinte código: console.log(“Hello World!");
• É importante ter instalado o Node.js mais recente instalado, caso não tenha, clique aqui para acessar como você pode instalar o Node.js;
• Não se esqueça também de instalar o Typescript também em sua IDE;
•  Clique em executar para ver a mensagem “Hello World!” exibida na tela.

É possível utilizar uma IDE online para executar meu código?

Sim, caso você esteja começando é possível utilizar algumas IDE´s online para escrever seus primeiros códigos. Confira algumas delas:

•   Typescript Playground: < https://www.typescriptlang.org/play>;
•     Play Code: < https://playcode.io/typescript>
•    W3 Schools: < https://www.w3schools.com/typescript/typescript_editor.php>

Com elas você já pode escrever seus primeiros códigos em TypeScript, não deixe de conferir!

As linguagens de programação são uma parte fundamental para poder construir soluções robustas, porém para ir além é preciso ter conhecimentos em Frameworks também. No próximo bloco vamos apresentar o Framework Angular, venha conhecer mais sobre ele.

Quais os requisitos mínimos que preciso ter para utilizar o framework Angular?

Um pouco da história do Angular

O Angular é um Framework muito utilizado, principalmente para o Desenvolvimento Front-End. Ele foi criado no ano de 2009, pelo Google, ou seja, é recente, com apenas 14 anos de mercado. Sua base é o JavaScript inspirado na filosofia declarativa, com extensão do HTML para criar páginas simples e dinâmicas.

Porém, Angular precisou passar por uma série de melhorias para se adaptar as novas demandas do mercado, e em 2016 passou a por uma reescrituração utilizando como base a linguagem TypeScript, a nova versão ficou conhecida como Angular 2.

Para não gerar confusão na comunidade de desenvolvimento, Angular foi divido em dois: a versão antiga antes de 2016, passou a se chamar AngularJS e a versão a partir de 2016, passou a se chamar somente Angular. 

Os requisitos mínimos para utilizar Angular

O Angular é composto basicamente por HTML, CSS e Typescript, ou seja, para utilizar suas funcionalidades e construir sites cada vez mais robustos e completos, você precisa ter conhecimento em cada um deles.

É importante também ter conhecimentos em programação orientada a objetos e entender que o Framework Angular é muito organizado, o que pode fazer com que algumas pessoas tenham dificuldade em aprender, porém vale a pena aprender pela sua grande capacidade de elaborar sites cada vez melhores.

Confira outros requisitos para usar Angular em seus projetos:

• Uma IDE de sua preferência, uma recomendação é utilizar o Visual Studio Code;
• Node.js: é um ambiente de capaz de executar códigos JavaScript no lado do servidor e ainda possui o npm que é uma parte importante para instalar as dependências do projeto;
• Angular CLI: é fundamental para o gerenciamento dos projetos que utilizam o Framework Angular. Você pode instalar o CLI na sua IDE utilizando o seguinte comando:

npm install -g @angular/cli

• Para criar seu primeiro projeto, após concluir todas as instalações, vá até o terminal e digite o seguinte comando:

ng new nome-do-projeto

• Após isso escolha as opções que deseja para criar seu projeto;

• Conheça algumas funções dos diretórios que serão criados:

•  /e2e/: /parte responsável por fazer uma previsão do comportamento do usuário;
• /node_modules/: /onde estão localizadas as pastas de terceiros;
• /src/: é o “coração” do projeto, onde se encontram as pastas principais;
•  /app/: /onde estão localizados os módulos e componentes do projeto;
• /assets/: é onde estão localizados arquivos como, por exemplo, imagens;
•  /environments/: local dos arquivos de configuração do ambiente de desenvolvimento;
•  /browserlist/: fornece suporte ao CSS;
• favicon.ico: contém o arquivo de favicon;
•  index.html: é o arquivo principal do HTML;
• karma.conf.js: //responsável pela realização de testes;
•  main.ts: principal arquivo, em que o App Module, realiza sua inicialização;
•  polyfills.ts: são arquivos necessários para o funcionamento do Angular;
•  styles.css: onde está localizado as folhas de estilo em cascata (CSS);
• test.ts: realiza as configurações do Karma;   
•  tsconfig.*.json: onde estão localizados as configurações do Typescript no projeto;
•   angular.json: onde estão localizados as configurações que pertencem ao CLI do Angular;
• package.json: todas as informações mais básicas do projeto ficam localizadas neste arquivo;
• README.md: é o local reservado para descrever o projeto.

Assim você, estará pronto para começar seu primeiro projeto utilizando o Angular!

Considerações Finais

Com este artigo você conheceu um pouco mais sobre o mercado de trabalho do Desenvolvimento Mobile. Viu que são diversas áreas de atuação e que também é um mercado que não para de crescer, ou seja, cheio de possibilidades para diferentes perfis profissionais, em variadas possibilidades de atuação.

Conheceu também sobre uma das linguagens de programação fundamentais para desenvolvimento mobile, como TypeScript, um superset de JavaScript, que está revolucionando a maneira como criamos as telas iniciais de diversos aplicativos, em diferentes projetos ao redor de todo o mundo.

Por fim conheceu o Framework Angular, sua história e como ele pode ajudar a desenvolver de maneira mais dinâmica e robusta sites web que foi criado pelo Google e continua a se desenvolver e ganhar espaço na comunidade de desenvolvimento.

Acredito que se você deseja iniciar no Desenvolvimento Mobile, aprender HTML, CSS, TypeScript e Angular é um ótimo caminho, principalmente se você deseja se especializar na área de Front-End. Para isso não deixe de estudar e aproveitar as oportunidades de qualificação aqui na DIO, porém não deixe de ser protagonista da sua carreira, buscando outras fontes!

Bons estudos!

Referências

Alura. Node.JS: o que é, como funciona esse ambiente de execução JavaScript e um Guia para iniciar. Disponível em: <https://www.alura.com.br/artigos/node-js>. Acesso em: 31/07/2023;

Alura. Como começar com Angular. Disponível em: <https://www.alura.com.br/artigos/como-comecar-com-angular>. Acesso em 31/07/2023;

DevMedia. Os 4 pilares da Programação Orientada a Objetos. Disponível em: <https://www.devmedia.com.br/os-4-pilares-da-programacao-orientada-a-objetos/9264>. Acesso em 31/07/2023;

DevMedia. Introdução ao TypeScript. Disponível em: <https://www.devmedia.com.br/introducao-ao-typescript/36729>. Acesso em 31/07/2023;

FreeCodeCamp. Como instalar o Angular no Windows: um guia de Angular CLI, Node.js e ferramentas de criação.Disponível em: <https://www.freecodecamp.org/portuguese/news/como-instalar-o-angular-no-windows-um-guia-de-angular-cli-node-js-e-ferramentas-de-criacao/>. Acesso em : 31/07/2023;

GeekHunter. Saiba como se tornar um desenvolvedor mobile. Disponível em: <https://blog.geekhunter.com.br/desenvolvedor-mobile/>. Acesso em: 31/07/2023;

Iesb. Mercado de aplicativos cresce no Brasil, abrindo novas oportunidades. Disponível em: <https://www.iesb.br/noticias/mercado-de-aplicativos-cresce-no-brasil-abrindo-novas-oportunidades/>. Acesso em: 31/07/2023;

Supero. Arquiteto de Soluções: você sabe se precisa deste profissional?. Disponível em: <https://www.supero.com.br/blog/arquiteto-de-solucoes-voce-sabe-se-precisa-deste-profissional/>. Acesso em: 31/07/2023;

Tecmundo. Demanda por desenvolvedor mobile cresce 600% em 2021. Disponível em: < https://www.tecmundo.com.br/mercado/224413-demanda-desenvolvedor-mobile-cresce-600-2021.htm>. Acesso em 31/07/2023;