suportebahia/Equipe SBahia - Mobile Developer

Mobile Developer - Equipe SBahia

Responsabilidades

Desenvolvimento

• Apps nativos (Swift/Kotlin) ou híbrido (React Native/Flutter)
• UI/UX mobile
• Integração com APIs
• Offline-first features
• Push notifications

Performance

• Otimização de render
• Memory management
• Battery optimization
• App size reduction
• Lazy loading

Publicação

• App Store (iOS)
• Google Play (Android)
• TestFlight / Internal Testing
• CI/CD mobile
• Code signing

Competências Técnicas

React Native

// Componente otimizado
import { memo } from 'react';
import { StyleSheet, TouchableOpacity, Text } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
  loading?: boolean;
  variant?: 'primary' | 'secondary';
}

const Button = memo(({ title, onPress, loading, variant = 'primary' }: ButtonProps) => {
  return (
    <TouchableOpacity
      style={[styles.button, styles[variant]]}
      onPress={onPress}
      disabled={loading}
      activeOpacity={0.7}
    >
      {loading ? <ActivityIndicator /> : <Text style={styles.text}>{title}</Text>}
    </TouchableOpacity>
  );
});

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
  },
  primary: { backgroundColor: '#007AFF' },
  secondary: { backgroundColor: '#E5E5EA' },
  text: { fontSize: 16, fontWeight: '600' },
});

Flutter

// Widget otimizado com const
class UserCard extends StatelessWidget {
  final User user;
  final VoidCallback onTap;

  const UserCard({
    super.key,
    required this.user,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [
              CircleAvatar(backgroundImage: NetworkImage(user.avatar)),
              const SizedBox(width: 12),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(user.name, style: Theme.of(context).textTheme.titleMedium),
                    Text(user.email, style: Theme.of(context).textTheme.bodySmall),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

State Management

// Zustand (React Native)
import { create } from 'zustand';

interface UserStore {
  user: User | null;
  isLoading: boolean;
  fetchUser: (id: string) => Promise<void>;
}

const useUserStore = create<UserStore>((set) => ({
  user: null,
  isLoading: false,
  fetchUser: async (id) => {
    set({ isLoading: true });
    const user = await api.getUser(id);
    set({ user, isLoading: false });
  },
}));

// Uso
const { user, fetchUser } = useUserStore();

Offline-First

// AsyncStorage + Sync
import AsyncStorage from '@react-native-async-storage/async-storage';

class OfflineStorage {
  async save(key: string, data: any) {
    await AsyncStorage.setItem(key, JSON.stringify({
      data,
      timestamp: Date.now(),
    }));
  }

  async get<T>(key: string): Promise<T | null> {
    const stored = await AsyncStorage.getItem(key);
    return stored ? JSON.parse(stored).data : null;
  }

  async sync(key: string, apiCall: () => Promise<any>) {
    const localData = await this.get(key);
    
    if (navigator.onLine) {
      const remoteData = await apiCall();
      await this.save(key, remoteData);
      return remoteData;
    }
    
    return localData;
  }
}

Push Notifications

// Expo Notifications
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

// Permissão
const { status } = await Notifications.requestPermissionsAsync();

// Listener
Notifications.addNotificationReceivedListener((notification) => {
  const data = notification.request.content.data;
});

native vs Híbrido

| Aspecto | Nativo (Swift/Kotlin) | Híbrido (RN/Flutter) | |---------|----------------------|---------------------| | Performance | Excelente | Bom | | UI Nativa | Sim | Parcial | | Curva aprendizado | Alta | Média | | Manutenção | 2 codebases | 1 codebase | | Biblioteca | Nativas | cross-platform |

Publicação

iOS (App Store)

# Build
xcodebuild -workspace MyApp.xcworkspace \
  -scheme MyApp \
  -configuration Release \
  -archivePath MyApp.xcarchive \
  archive

# Export
xcodebuild -exportArchive \
  -archivePath MyApp.xcarchive \
  -exportOptionsPlist ExportOptions.plist \
  -exportPath ./build

Android (Play Store)

# Build release
cd android && ./gradlew assembleRelease

# Assinar
jarsigner -keystore my-release-key.keystore app-release.apk alias_name

# Upload
gcloud beta app deploy app-release.apk

Performance Checklist

• [ ] React.memo / const widgets
• [ ] FlatList com getItemLayout
• [ ] Imagens em cache (FastImage)
• [ ] Lazy loading de rotas
• [ ] ProGuard/R8 minification
• [ ] APK/AAB splitting por ABI
• [ ] Hermes JS engine (React Native)
• [ ] Binary size < 30MB

Ferramentas

| Tipo | Ferramenta | |------|------------| | Framework | React Native, Flutter | | Nativo | Swift, Kotlin | | State | Redux, Zustand, Riverpod, Bloc | | Navigation | React Navigation, GoRouter | | Storage | AsyncStorage, Realm, SQLite | | Images | FastImage, CachedNetworkImage | | CI/CD | Fastlane, GitHub Actions |