📱 JavaScript - Partie 10

// App React Native import React, { useState } from 'react'; import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native'; const App = () => { const [count, setCount] = useState(0); const [items, setItems] = useState([]); return ( React Native App Compteur: {count} setCount(count + 1)}> Incrémenter {item}} keyExtractor={(item, idx) => idx.toString()} /> ); }; // Navigation import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const Stack = createNativeStackNavigator(); function MyStack() { return ( ); } // Accès natif - API Camera import { launchCamera } from 'react-native-image-picker'; const openCamera = () => { launchCamera({ mediaType: 'photo' }, (response) => { if (response.assets) { setPhoto(response.assets[0].uri); } }); };

// main.js (Process principal) const { app, BrowserWindow, ipcMain, Menu } = require('electron'); const path = require('path'); function createWindow() { const win = new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true, contextIsolation: false, preload: path.join(__dirname, 'preload.js') } }); win.loadFile('index.html'); win.webContents.openDevTools(); // DevTools } // Menu personnalisé const template = [ { label: 'Fichier', submenu: [ { label: 'Nouveau', accelerator: 'CmdOrCtrl+N', click: () => createNewFile() }, { type: 'separator' }, { label: 'Quitter', accelerator: 'CmdOrCtrl+Q', role: 'quit' } ]}, { label: 'Édition', submenu: [ { label: 'Copier', accelerator: 'CmdOrCtrl+C', role: 'copy' }, { label: 'Coller', accelerator: 'CmdOrCtrl+V', role: 'paste' } ]} ]; Menu.setApplicationMenu(Menu.buildFromTemplate(template)); // Communication IPC (main <-> renderer) ipcMain.handle('get-user-data', async (event, arg) => { return { name: 'User', id: 123 }; }); // Notification système new Notification({ title: 'Desktop App', body: 'Message depuis l\'application!' }).show(); // Tray (icône barre d'état) const Tray = require('electron').Tray; const tray = new Tray('icon.png'); tray.setToolTip('Mon App');

// manifest.json - Configuration PWA { "name": "Mon App Progressive", "short_name": "MonApp", "start_url": "/", "display": "standalone", "theme_color": "#34e89e", "background_color": "#ffffff", "icons": [ { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" } ] } // Service Worker - Cache hors ligne const CACHE_NAME = 'my-pwa-cache-v1'; const urlsToCache = ['/', '/index.html', '/style.css', '/app.js']; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => { return response || fetch(event.request); }) ); }); // Installation de la PWA if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } // Prompt d'installation let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { deferredPrompt = e; // Afficher un bouton "Installer" });

// Capacitor - Accès natif depuis le web import { Capacitor } from '@capacitor/core'; import { Camera, CameraResultType } from '@capacitor/camera'; import { Geolocation } from '@capacitor/geolocation'; import { Share } from '@capacitor/share'; import { Preferences } from '@capacitor/preferences'; // Prendre une photo async function takePhoto() { const image = await Camera.getPhoto({ quality: 90, allowEditing: true, resultType: CameraResultType.Uri }); return image.webPath; } // Géolocalisation async function getPosition() { const coordinates = await Geolocation.getCurrentPosition(); return coordinates; } // Partage async function shareText(text) { await Share.share({ title: 'Partage', text: text }); } // Stockage natif await Preferences.set({ key: 'user', value: JSON.stringify(userData) }); const data = await Preferences.get({ key: 'user' }); // Ionic - UI Components import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonList, IonItem } from '@ionic/react';

// Installation Expo // npx create-expo-app my-app // cd my-app // npm start // App avec Expo import { StatusBar } from 'expo-status-bar'; import { useFonts } from 'expo-font'; import * as ImagePicker from 'expo-image-picker'; import * as Location from 'expo-location'; export default function App() { const [fontsLoaded] = useFonts({ 'Inter-Bold': require('./assets/fonts/Inter-Bold.ttf'), }); // Demander permissions const [location, requestLocation] = Location.useForegroundPermissions(); // Expo Router (fichier-based routing) // app/index.tsx → /, app/about.tsx → /about return ( Expo App ); } // Build EAS (Expo Application Services) // eas build --platform ios // eas build --platform android

# Google Play Store # 1. Générer APK/AAB cd android && ./gradlew bundleRelease # 2. Signer l'application jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 \ -keystore my-release-key.keystore app-release.aab alias_name # 3. Upload sur Google Play Console # Apple App Store # 1. Build iOS npx expo run:ios --configuration Release # 2. Archive dans Xcode # Product > Archive # 3. Upload sur App Store Connect # Transporter ou xcodebuild # Electron - Build pour distribution npm run make # Génère .exe (Windows), .dmg (Mac), .deb (Linux)