O que precisas de saber para programar a próxima app

Certamente tiveste ideias para lançar uma nova app, mas não sabias bem o tempo necessário ou que tecnologias terias de aprender para o fazer. Neste artigo vamos responder a essas questões.

Web App vs Mobile App

Apps

O que é uma aplicação? Normalmente associamos essa palavra a software que tem funcionalidades CRUD (create, read, update, destroy), log in, etc. Mais que um website estático meramente informativo, é uma tecnologia que nos permite mais funcionalidades e manipulação. Por exemplo, plataformas onde se consiga fazer reservas, procurar espaços utilizando vários filtros, adicionar informação.

Web App

De forma genérica, uma Web App é uma aplicação que acedemos a partir de um browser (seja em que dispositivo for), entrando pelo URL. Acedendo a www.facebook.com, está a entrar-se na aplicação web do facebook.

Mobile Apps

Uma aplicação mobile é uma aplicação que acedemos diretamente através do nosso smartphone. Ao entrar-se no facebook diretamente pelo "ícone" e não pelo URL, está a entrar-se na app mobile. Estas duas podem ser muitos diferentes uma da outra.

A Arquitetura de uma aplicação

arqU

Esta imagem ilustra as várias componentes de uma aplicação web (a estrutura geral é válida para uma app mobile, mudando o ponto de entrada (UI) para um smartphone). Podemos observar 4 grandes blocos: client side, HTTP server, app server, database server. Para criarmos uma aplicação vamos ter de lidar com estas 4 categorias. Esta arquitetura leva-nos a uma distinção importante: a diferença entre front-end e back-end.

Diferenças entre Front-End e Back-End

É importante distinguir estas duas áreas de desenvolvimento e perceber no que diferem.

Front-End

app-UI

Front-End é tudo o que o user vê (client side). Ou seja, todo o layout gráfico ou UI (user interface). Exemplificando, quando se visita o Facebook, o Front-End é o que vemos, ou seja, o feed, avatar, comentários, etc. Nesta secção, as tecnologias básicas usadas são HTML, CSS e JavaScript. Contudo, para criar projetos mais complexos são usadas ferramentas como: Angular, React ou Vue.

Back-end

A casa de máquinas, o Back-End é tudo o que não vês (HTTP server + app server + database server). As bases de dados, os tão famosos algoritmos, etc.

Pegando novamente no Facebook: os teus amigos têm de estar guardados em algum lado (base de dados), quando fazes um like, as contagens são feitas no Back-End. Quando se publica um post, ou qualquer outro tipo de ação tem de ficar registada e tem de ser programada no Back-End.

Aqui há uma grande variedade de tecnologias que podem ser usadas. Exemplos gerais: PHP (linguagem em que o Facebook foi criado inicialmente), Python, Ruby, Go, Java, C++, C#, entre outras.

Destacamos a tecnologia que permite correr o JavaScript no Back-End (linguagem que anteriormente era usada apenas no Front-End) - Node.js

Com ele apenas precisamos de saber as linguagem padrão para conseguirmos andar entre Back-End e Front-End.

O que é uma Stack

stacks

Tal como o próprio nome indica uma Stack é uma "pilha" de tecnologias. Designa-se de stack o conjunto de tecnologias que permitem o desenvolvimento de todas estas componentes de uma app. Por outras palavras, o “conjunto” de tecnologias usadas para criar uma app desde o Front-End ao Back-End.

Stack Mais Usadas em Web apps

Vamos distinguir aqui as principais tecnologias no mundo web. Existem variadas combinações de stacks à volta destas tecnologias, mas vamos referenciar aqui apenas as stacks principais e as suas componentes nucleares.

MERN

Linguagens de programação: HTML, CSS, Javascript; Base de Dados: MongoDB; Frameworks/libraries/tools: Express.js, React.js, Node.js;

Ruby On Rails

Linguagens de programação: HTML, CSS, Javascript, Ruby; Base de Dados: MySQL; Frameworks/libraries/tools: Rails;

LAMP

Linguagens de programação: HTML, CSS, Javascript, PHP; Base de Dados: MySQL; Frameworks/libraries/tools: Laravel;

Django

Linguagens de programação: HTML, CSS, Javascript, Python; Base de Dados: MySQL; Frameworks/libraries/tools: Django;

Spring

Linguagens de programação: HTML, CSS, Javascript, Java; Base de Dados: MySQL; Frameworks/libraries/tools: Hibernate, Spring;

ASP.Net

Linguagens de programação: HTML, CSS, Javascript, C#; Base de Dados: MySQL; Frameworks/libraries/tools: ASP.NET;

Se te quiseres aventurar pelo mundo web, escolhe uma stack (sugerimos a que possui Node.js) e começa a aprender. Se tens curisiodade em saber que tecnologias as grandes empresas usam tens aqui as suas stacks. A stack da Uber por exemplo.

O que é uma Framework e uma biblioteca

De forma simplificada, Frameworks e Bibliotecas são tecnologias que visam simplificar e tornar mais rápido o trabalho de um programador. Existem Frameworks tanto para Front-End como para Back-End.

As Frameworks, libraries ou outras ferramentas não são linguagens de programação, mas sim, de maneira geral, pacotes criados por outros developers, que possibilitam utilizar as linguagens de programação para aceder a funcionalidades (ex: montar servidores, manipular bases de dados, etc) sem ter o trabalho de reinventar a roda em cada projeto e despender demasiado tempo em infrastrutura ou criar funcionalidades básicas.

Se queres saber a diferença entre uma biblioteca e uma framework começa por este post no Stack Overflow.

Frameworks e Bibliotecas famosas

React

react

Neste caso a equipa do Facebook é a responsável pela criação desta biblioteca. A melhor forma para se pensar nesta tecnologia é vê-la como um lego.

Tal como nos legos verdadeiros, quando queremos construir um castelo precisamos de juntar outras peças. Uma ferramenta poderosa para se renderizar UIs e tornar páginas interativas.

Angular

angular

Uma framework criada pela gigante Google. É importante saber que há 2 versões desta Framework. AngularJS foi a 1ª versão e teve algum sucesso, contudo houve algum descontentamento por parte de utilizadores e dos criadores o que levou a um shift bastante grande dando origem ao Angular 2.

Apesar de ambos se chamarem Angular, eles não são o mesmo produto. Tudo o que foi feito com AngularJS deixou de ser compatível com Angular 2.

Vue

vue

Depois de Evan You ter realizado inúmeros projectos em Angular durante a sua passagem pela Google ele sentiu que era capaz de criar algo mais eficiente e melhor do que Angular.

Com esse pensamento criou Vue. Em 2017 houve um crescimento abrupto no número de utilizadores desta Framework.

Back-End Frameworks

Express

express

Para se usar esta Framework é necessário a utilização de Node.js. Uma ferramenta para se criar servidores de forma rápida e eficiente.

De forma a usares Node.js é recomendado que tenhas fortes conhecimentos em JavaScript. Desta forma será muito mais fácil compreenderes os core concepts.

Django

express

Esta Framework é totalmente construída em Python. Por isso se tu gostas do conceito desta linguagem poderá ser uma solução para ti. Django é considerada uma Framework fácil de aprender e onde se capta o pragmatic approach de forma bastante rápida.

Rails (Ruby On Rails)

express

A linguagem que está por de trás desta tecnologia é Ruby. Esta tecnologia é muito usada no âmbito das Startups. Um dos motivos para que isso aconteça é a simplicidade da mesma e rapidez de se conseguir criar um MVP (minimum value product). Curiosamente há alguma disputa entre Node.js/Express.js e Ruby On Rails.

Mobile Apps

Web App Gif

Até aqui temos estado a dar maior relevância ao Web Development. Contudo existe também a área de Mobile Development. Há duas formas de criar Mobile Apps.

Native App – aplicações nativas

Podemos dizer que este método de criar Mobile Apps é o mais tradicional. Neste caso são usadas linguagens próprias para se programar em ambiente Android (Java) ou iOS (Swift / Objective C).

Em síntese, se houver tempo, budget, necessidade de uma alta performance e acesso a recursos muito específicos dentro do aparelho smartphone então a Native App será o solução ideal.

No caso de uma app mobile nativa utiliza-se apenas Java e XML (Android) ou Swift e XML (iOS) se for um app mobile que funciona offline.

Se a aplicação for mais completa e for preciso comunicar com um servidor ou uma base de dados, terá de se juntar também tecnologias de servidor e bases de dados semelhantes às das web apps. Exemplo hipotético de uma stack neste caso: Java, XML, mySQL, Spring, Hibernate.

Hybrid App – aplicações híbridas

Uma aplicação híbrida ou nativa progressiva é uma extensão de uma aplicação web, ou seja, uma app mobile que corre num browser e não no telemóvel em si, uma "mistura" entre web e mobile.

Uma Hybrid App é uma Web App empacotada num invólucro nativo. As Hybrid App são criadas com as tecnologias web (HTML, CSS, Javascript, etc). Para que corram correctamente num smartphone são utilizadas Frameworks como Ionic (Angular) ou React Native (React).

A solução ideal para quando, se quer criar um MVP rápido, criar uma app para mobile e web ao mesmo tempo, gastando menos recursos. É de salientar que em algumas situações a performance pode ser um pouco inferior às Native Apps.

Recursos para aprender a programar

Agora que sabes a diferença entre Front-End e Back-End e os conjuntos de tecnologias que podes optar por aprender, vamos agora explorar que recursos podes usar para aprender a programar.

Opções Tradicionais

Há entidades bastante competentes nesta área. Caso tenhas interesse no ensino tradicional recomendamos que faças uma visita à Uniarea e Unlimited Future.

Opções | E-Learning

Dentro do e-learning existem imensas opções. Se estás a ter o teu primeiro contacto com a programação sugerimos que visites:

Gratuitos

Pagos

Recursos/documentação Gratuitos

Opções | Bootcamps

Se por outro lado preferes ter alguém experiente disponível a responder às tuas questões na hora podes sempre recorrer a uma das soluções mais populares e em constante crescimento, os Bootcamps.

Os Bootcamps são cursos intensivos sobre algum tema em específico, neste caso programação. Neste modelo acredita-se que o método “Learn By Doing” é a melhor forma de se aprender e tem como objectivo principal ser uma forma otimizada de ensino.

Academia de Código

Quem frequenta este Bootcamp irá desenvolver um fullstack Java & JavaScript mindset. Tem de se estar 100% disponível para se frequentar este curso. Esta equipa possui profissionais esplêndidos e ao sair-se daqui está-se pronto para o mercado de trabalho.

Le Wagon

Tal como o exemplo anterior, tem de se estar 100% disponível para se frequentar este curso. Ao terminar o curso, o participante irá obter o nível de junior developer em Ruby on Rails. Todo o curso é administrado em inglês e requer que o participante conclua previamente uma preparação online sobre Ruby no Codecademy.

Eddisrupt

Nós providenciamos a opção ideal para quem trabalha, estuda ou se encontra afastado dos locais dos cursos, mas que mesmo assim têm uma gigantesca vontade de aprender a programar e se tornar Developer. O Bootcamp da Eddisrupt é um bootcamp de programação para te tornares um software developer em 8 meses.

Aqui são ensinadas as tecnologias usadas pela Uber, Airbnb, 9Gag, Twitter, entre outras. Podes consultar o programa da Eddisrupt para saberes mais informações.

Quanto tempo é preciso para aprender?

Mobile Apps

Para aprender a programar uma aplicação web ou aplicação mobile híbrida terás de, no mínimo, dominar 3 linguagens de programação (html, css e js), saber utilizar frameworks associadas a essas linguagens e trabalhar com APIs (que foi um tópico não explorado neste artigo). No caso de uma app mobile nativa, pelos menos duas linguagens (Java e XML).

Estimativas temporais? É difícil estimar mas diríamos que para um iniciante aprender uma stack demora em média no mínimo 6 meses (1-2 horas por dia) e desenvolver uma aplicação (MVP), dependendo da complexidade, entre semanas a alguns meses.

Uma stack à volta de React.js pode ser uma boa escolha para começar a desenvolver web apps visto que se precisa apenas de 3 linguagens: HTML, CSS e Javascript.

Hard Way

Aprender por conta própria pode parecer um método interessante ao início. Há muita informação na internet gratuita e paga. Contudo, chega sempre aquele momento em que se fica “encalhado” com algo.

Existem os fóruns, o “engenheiro” Google, o Dr. Youtube e outras fontes onde conseguimos encontrar, por vezes, a resposta ao nosso dilema. Contudo, num lado dizem uma coisa no outro dizem outro… Pode ser uma dor de cabeça terrível.

Smart Way

Aprender no Bootcamp da Eddisrupt. Através deste método aprendes o que está a ser praticado no mercado e com alguém que esteja a trabalhar em empresas/startups bem conceituadas. Todo o conhecimento é providenciado através de uma metodologia testada e com o devido apoio.