|
January 31, 2017
|

Desenvolvimento mobile para back-end devs: como começar

Muito tem se falado sobre desenvolvimento mobile utilizando tecnologias web (html, javascript, etc), e diversos frameworks/plataformas tem surgido, como: Ionic, React, entre outros. A proposta principal desses frameworks é facilitar o desenvolvimento mobile a partir do uso de tecnologias conhecidas da web, possibilitando que mais desenvolvedores criem o seu aplicativo.

Desafios no desenvolvimento mobile

Na prática, observamos que para empresas de pequeno e médio porte, que possuem um time de desenvolvimento reduzido, utilizar tecnologias WEB no desenvolvimento de apps mobile pode se tornar um desafio. Em primeiro lugar, está cada vez mais comum a especialização do conhecimento, os desenvolvedores back end estão muito mais interessados em se atualizar quanto a novas tecnologias e recursos que possam otimizar a construção/manutenção de aplicações server side do que conhecer profundamente HTML, CSS, etc. Além disso, para o perfil de empresa observado acima, nem sempre é viável manter um time front e back end para o desenvolvimento de apps mobile.

Passo-a-passo para desenvolver apps mobile em JAVA

O objetivo desse post é apresentar um exemplo de como um desenvolvedor back end JAVA pode desenvolver apps mobile utilizando a linguagem JAVA, de forma fácil e com interface rica utilizando a plataforma TotalCross. O exemplo completo está disponível neste link.

O primeiro passo para criar um app com TotalCross e baixar o SDK disponível gratuitamente no site. TotalCross é um JAR, então basta adicionar ao seu projeto, utilizando a sua IDE favorita (eclipse, netbeans, etc).

Após a configuração do projeto, vamos criar uma classe de exemplo que herda de totalcross.ui.MainWindow indicando que é a classe principal do nosso app. No nosso exemplo será a classe HelloTC:

public class HelloTC extends MainWindow

No construtor da classe, devemos passar algumas informações como o estilo da interface (Android, Windows, etc), o tipo da borda que utilizaremos e a cor/imagem de fundo que será utilizada no app.

public HelloTC() {
super("Hello TotalCross", NO_BORDER);
// sets the default user interface style to Android
// There are others, like
setUIStyle(Settings.Android);
// Use font height for adjustments, not pixels
Settings.uiAdjustmentsBasedOnFontHeight = true;

// setting back and foreground colors for the app.
setBackForeColors(Color.getRGB(240, 240, 240), Color.getRGB(50, 50, 50));
// Change the color for Color class to see the results.
}

Para instanciarmos os componentes de tela devemos utilizar o método public void initUI(); O TotalCross utiliza um posicionamento relativo dos componentes da tela. Esse posicionamento é particularmente útil para os casos de múltiplos dispositivos, com formato e resolução de telas distintos (como é muito comum entre aparelhos iOS, Android, etc). Para mais informações sobre o posicionamento relativo, acesse: http://www.totalcross.com/documentation/companion.html?#toc-Section-44

Para mostrar algumas opções que temos com o TotalCross, iremos carregar uma imagem, adicionar alguns componentes de texto com máscara numérica, data e carregar também alguns botões. O exemplo de código abaixo mostra como adicionar componentes:

// Initialize the user interface
public void initUI() {

// add the logo at top. Copy your logo to img folder and try to
// change it.
ImageControl ic = new ImageControl(new Image("img/logo.png"));
ic.scaleToFit = ic.centerImage = true;
add(ic, LEFT, PARENTSIZE + 12, FILL, PARENTSIZE + 15);

// setting font to bold
Label lbWelcome = new Label(“Welcome to your First TotalCross App!”);
lbWelcome.setFont(lbWelcome.getFont().asBold());

add(lbWelcome, CENTER, AFTER);

// regular font is not bold
add(new Label(“Name: “), LEFT + FLAT_EDGE_MARGIN, AFTER + 100, FILL
– FLAT_EDGE_MARGIN, COMPONENT_H);
add(edName = new Edit(), SAME, AFTER, SAME, SAME);

Importante ressaltar que todos os eventos disparados de tela são enviados para o método public void onEvent(Event e) e devem ser tratados. No nosso exemplo temos três botões na tela: Um para realizar ligações, outro para salvar informações e o último que limpa o formulário criado.

public void onEvent(Event e) {
try {
switch (e.type) {
case ControlEvent.PRESSED:
if (e.target == btClear) {
clear();
showToast("All fields are clear!");
} else if (e.target == btInsert)
doInsert();
else if (e.target == btDial && edPhone.getTrimmedLength() > 0)
Dial.number(edPhone.getText());
break;
}
} catch (Exception ee) {
MessageBox.showException(ee, true);
}
}

É muito comum ao desenvolvimento mobile utilizarmos o banco de dados SQLite para armazenamento dos dados off-line, dessa forma, o exemplo disponível acima realiza a persistência das informações nesse banco, porém como o foco principal é interface rica, não iremos explicar seu funcionamento neste post.

Por fim, nosso app ficou com esse look and feel e executando operações básicas como ligação, persistindo dados e validando informações.

Últimas dicas

Vale lembrar que o app irá rodar com a mesma interface nos dispositivos, como: iOS, Android, Windows Desktop, Windows CE e Linux. Para aplicações corporativas isso é uma grande vantagem, visto que você irá reduzir tempo de treinamento e capacitação do seu usuário final.

As tecnologias para desenvolvimento mobile avançam dia após dia para facilitar a construção de apps tanto para desenvolvedores back-end como front-end. Cada plataforma/tecnologia possui um foco específico e é importante estar atento na hora de escolher qual tecnologia utilizar para criar o seu app.

Conseguiu construir seu app ou ficou com alguma dúvida? Compartilhe com a gente nos comentários ou nos siga no Facebook e no Twitter para interagir por lá!

 

Comments

More articles

Pesquisa de mercado: Por que ela é importante para o desenvolvimento de apps?

November 19, 2018

Afinal, é possível criar app sem saber programação?

November 16, 2018

Como transformar um website em aplicativo?

November 14, 2018

Aplicativos: O que conhecer antes de criar um

November 13, 2018