Desenvolvimento de Interface (Frontend)

A criação da camada de apresentação para dispositivos móveis frequentemente utiliza frameworks modernos que permitem a compilação para plataformas nativas. Abaixo estão implementações base utilizando React Native e Flutter.

React Native (JavaScript/TypeScript)

Exemplo de um componente funcional com gerenciamento de estado local:

import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

const MainScreen = () => {
  const [clickCount, setClickCount] = useState(0);

  const handlePress = () => {
    setClickCount(prev => prev + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Contador de Cliques</Text>
      <Text style={styles.counter}>{clickCount}</Text>
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Incrementar</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  counter: { fontSize: 48, marginBottom: 30 },
  button: { backgroundColor: '#007BFF', padding: 15, borderRadius: 8 },
  buttonText: { color: '#FFF', fontSize: 18 }
});

export default MainScreen;

Flutter (Dart)

Implementação de uma tela estática utilizando widgets do Material Design:

import 'package:flutter/material.dart';

void main() => runApp(TechApp());

class TechApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.deepPurple),
      home: WelcomeScreen(),
    );
  }
}

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Painel de Controle')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.dashboard, size: 80, color: Colors.deepPurple),
            SizedBox(height: 20),
            Text(
              'Bem-vindo ao Sistema',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

Lógica de Servidor (Backend)

O processamento de regras de negócio e exposição de dados para o aplicativo é realizado no back end. A seguir, exemplos de APIs RESTful utilizando Node.js, Python e Java.

Node.js (Express)

Configuração de um servidor HTTP simples retornando um objeto JSON:

const express = require('express');
const server = express();
const PORT = 4000;

server.get('/api/status', (request, response) => {
  response.json({
    service: 'Node Backend',
    status: 'online',
    timestamp: new Date().toISOString()
  });
});

server.listen(PORT, () => {
  console.log(`API rodando na porta ${PORT}`);
});

Python (Flask)

Criação de uma rota de verificação de saúde (health check) utilizando o microframework Flask:

from flask import Flask, jsonify

web_app = Flask(__name__)

@web_app.route('/api/health')
def check_health():
    return jsonify({
        "environment": "production",
        "uptime": "healthy"
    })

if __name__ == '__main__':
    web_app.run(host='0.0.0.0', port=5000, debug=False)

Java (Spring Boot)

Para ecossistemas corporativos, o Spring Boot oferece uma configuração robusta. Exemplo de dependência no arquivo de configuração e um controlador REST:

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class StatusEndpoint {

    @RequestMapping(value = "/api/info", method = RequestMethod.GET)
    public String fetchInfo() {
        return "Spring Boot API is operational.";
    }
}