# BNAR Frontend - Intégration API

## 🔗 Connexion Backend-Frontend

Le frontend est maintenant connecté au backend via **axios** et des services API TypeScript.

## 📁 Structure des fichiers API

```
BNAR_AIBD/
├── services/
│   └── api.ts              # Services API (CRUD complet)
├── config/
│   └── api.config.ts       # Configuration URL API
└── hooks/
    └── useAeroports.ts     # Hooks React personnalisés
```

## 🛠️ Configuration

### 1. URL de l'API

Le fichier `config/api.config.ts` gère automatiquement l'URL selon la plateforme :

- **iOS Simulator** : `http://localhost:3000/api`
- **Android Emulator** : `http://10.0.2.2:3000/api`
- **Appareil physique** : Modifier l'IP dans le fichier

### 2. Utilisation dans un composant

```typescript
import { useAeroports } from '@/hooks/useAeroports';
import { aeroportService } from '@/services/api';

export default function AeroportList() {
  // Utilisation du hook
  const { aeroports, loading, error, refreshAeroports } = useAeroports();

  // Ou utilisation directe du service
  const fetchAeroport = async (id: number) => {
    const aeroport = await aeroportService.getById(id);
    console.log(aeroport);
  };

  if (loading) return <Text>Chargement...</Text>;
  if (error) return <Text>Erreur: {error}</Text>;

  return (
    <View>
      {aeroports.map(aeroport => (
        <Text key={aeroport.id}>{aeroport.nom}</Text>
      ))}
    </View>
  );
}
```

## 📚 Services disponibles

### Aéroports
```typescript
aeroportService.getAll()           // Liste tous les aéroports
aeroportService.getById(id)        // Récupère un aéroport
aeroportService.create(data)       // Crée un aéroport
aeroportService.update(id, data)   // Met à jour un aéroport
aeroportService.delete(id)         // Supprime un aéroport
aeroportService.search(query)      // Recherche des aéroports
```

### Cartes
```typescript
carteService.getAll()
carteService.getById(id)
carteService.getByAeroport(aeroportId)
carteService.create(data)
carteService.update(id, data)
carteService.delete(id)
```

### Documents
```typescript
documentService.getAll()
documentService.getById(id)
documentService.getByAeroport(aeroportId)
documentService.create(data)
documentService.update(id, data)
documentService.delete(id)
```

### Informations
```typescript
informationService.getAll()
informationService.getById(id)
informationService.getByAeroport(aeroportId)
informationService.create(data)
informationService.update(id, data)
informationService.delete(id)
```

## 🚀 Démarrage

### 1. Démarrer le backend
```bash
cd BNAR_BACK
npm run dev
```

### 2. Démarrer le frontend
```bash
cd BNAR_AIBD
npx expo start
```

### 3. Tester la connexion

Le hook `useAeroports` se connectera automatiquement à l'API au chargement du composant.

## 🔍 Exemple complet

```typescript
import React, { useState } from 'react';
import { View, Text, FlatList, Button, ActivityIndicator } from 'react-native';
import { useAeroports } from '@/hooks/useAeroports';
import { Aeroport } from '@/services/api';

export default function AeroportScreen() {
  const { aeroports, loading, error, refreshAeroports } = useAeroports();

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Erreur: {error}</Text>
        <Button title="Réessayer" onPress={refreshAeroports} />
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={aeroports}
        keyExtractor={(item) => item.id?.toString() || '0'}
        renderItem={({ item }) => (
          <View style={{ padding: 16, borderBottomWidth: 1 }}>
            <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
              {item.nom}
            </Text>
            <Text>{item.ville} - {item.region}</Text>
            <Text>IATA: {item.code_iata} | OACI: {item.code_oaci}</Text>
          </View>
        )}
        refreshing={loading}
        onRefresh={refreshAeroports}
      />
    </View>
  );
}
```

## 📱 Configuration pour appareil physique

Si vous testez sur un appareil physique, modifiez `config/api.config.ts` :

```typescript
PHYSICAL_DEVICE_URL: 'http://192.168.1.X:3000/api', // Remplacez X par l'IP de votre PC
```

Trouvez votre IP locale :
- **Mac/Linux** : `ifconfig | grep inet`
- **Windows** : `ipconfig`

## ⚠️ Notes importantes

1. **CORS** : Le backend a déjà le CORS activé
2. **Réseau** : Assurez-vous que le backend tourne sur le port 3000
3. **Base de données** : MySQL doit être configuré et en cours d'exécution
4. **Firewall** : Autorisez le port 3000 dans votre firewall