Wróć do projektów
Mobile Development · React Native · IoT
2026 Projekt własny

IoTApp

Cross-platform aplikacja mobilna do sterowania urządzeniami smart home — dodawaj lampy, rolety i inne urządzenia, przypisuj im miejsce, kolor i komendy sterujące. React Native 0.83, TypeScript, Android + iOS.

GitHub Screenshots Stack
React Native
Framework
TypeScript
Język
Android + iOS
Platformy
5 języków
W projekcie
Cel projektu

Smart home
w zasięgu ręki

IoT App to cross-platform aplikacja mobilna do sterowania urządzeniami smart home — lampami, roletami i innymi urządzeniami IoT. Użytkownik sam definiuje urządzenia, nadaje im nazwy, przypisuje pomieszczenie, komendy sterujące i kolor identyfikacyjny.

Dolny pasek nawigacyjny przełącza między widokiem urządzeń (Devices) a konfiguracją połączenia (Connection). Aplikacja działa natywnie na Androidzie i iOS z jednej bazy kodu React Native.

📱
Cross-platform
Jedna baza kodu działa natywnie na Androidzie i iOS — React Native 0.83.1
➕
Dodawanie urządzeń
Formularz z nazwą (np. Lampa), miejscem (np. Kuchnia) i komendą sterującą
🎨
Wybór koloru
8 pastelowych kolorów do oznaczenia urządzeń — szybka identyfikacja na liście
🗂️
Siatka urządzeń
Przejrzysty grid z kafelkami — każde urządzenie z nazwą, miejscem i kolorem tła
🗑️
Usuwanie urządzeń
Przycisk ✕ na każdym kafelku do szybkiego usunięcia urządzenia z listy
🔌
Zakładka Connection
Dolny pasek nawigacyjny — Devices i Connection do konfiguracji połączenia IoT
Języki

Skład projektu

Kotlin 26.1%
Ruby 23.1%
Swift 19.9%
TypeScript 18.5%
JavaScript 12.4%
🤖
Kotlin — natywny Android
Logika biznesowa Androida, integracje z systemem, natywne moduły
💎
Ruby — CocoaPods iOS
Zarządzanie zależnościami iOS przez Gemfile i CocoaPods
🍎
Swift — natywny iOS
Natywna funkcjonalność iOS, moduły wymagające dostępu do systemu
Technologie

Stack technologiczny

⚛️
React Native 0.83
Najnowsza wersja — nowa architektura, lepsza wydajność, React 19.2.0.
🔷
TypeScript 5.8
Statyczna typizacja, strict mode — bezpieczniejszy kod i lepsze podpowiedzi IDE.
🤖
Android (Kotlin)
Natywna warstwa Android z Kotlin — integracje z systemem i API urządzenia.
🍎
iOS (Swift)
Natywna warstwa iOS z Swift i CocoaPods do zarządzania zależnościami.
⚡
Metro Bundler
JavaScript bundler zoptymalizowany dla React Native — Hot Reload i Fast Refresh.
🧪
Jest 29
Unit testy i snapshot testy z react-test-renderer bez potrzeby DOM.
Architektura

Jak to działa

01
Punkt wejścia — index.js

Aplikacja startuje z index.js, który rejestruje główny komponent App w React Native runtime. Metro bundluje JavaScript i przekazuje go do natywnego hosta. 

// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name} from './app.json';

AppRegistry.registerComponent(
  name, () => App
);
02
Dark Mode — useColorScheme

Hook useColorScheme() odczytuje motyw systemowy i dostosowuje StatusBar oraz style komponentów bez potrzeby ręcznego przełączania. 

function App() {
  const isDarkMode =
    useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={
        isDarkMode
          ? 'light-content'
          : 'dark-content'
      } />
      <AppContent />
    </SafeAreaProvider>
  );
}
03
Safe Area Context

SafeAreaProvider opakowuje całą aplikację, a useSafeAreaInsets() dostarcza marginesy dla notchów, Dynamic Island i pasków systemowych. 

function AppContent() {
  const safeAreaInsets =
    useSafeAreaInsets();

  return (
    <View style={styles.container}>
      <NewAppScreen
        safeAreaInsets={
          safeAreaInsets
        }
      />
    </View>
  );
}
04
Build — Android (Gradle)

Metro tworzy JavaScript bundle, Gradle kompiluje Kotlin i pakuje wszystko do APK/AAB. Pełny pipeline przez React Native Community CLI. 

# Dev build
npx react-native run-android

# Release build
cd android
./gradlew assembleRelease

# Wynik: app-release.apk
05
Build — iOS (Xcode)

CocoaPods zarządza zależnościami Swift/ObjC, Xcode kompiluje natywny kod iOS. Metro dostarcza JavaScript bundle dla symulatora i urządzenia. 

# Instalacja zależności
cd ios && pod install

# Dev build
npx react-native run-ios

# Release: Xcode →
# Product → Archive
06
TypeScript — konfiguracja

Strict mode TypeScript z konfiguracją @react-native/typescript-config i ESLint do statycznej analizy kodu. 

// tsconfig.json (skrót)
{
  "extends":
    "@react-native/typescript-config",
  "compilerOptions": {
    "strict": true
  }
}

// ESLint: @react-native/eslint-config
Zależności

Biblioteki

📦 Production
react 19.2.0 Core library UI
react-native 0.83.1 Framework mobilny
react-native-safe-area-context ^5.5.2 Obsługa notchów i safe areas
@react-native/new-app-screen 0.83.1 Gotowe ekrany startowe
🔧 Development
typescript ^5.8.3 Statyczna typizacja
jest ^29.6.3 Framework testowy
eslint ^8.19.0 Statyczna analiza kodu
prettier 2.8.8 Formatowanie kodu
@babel/core ^7.25.2 Transpilacja JS/TS
@react-native-community/cli 20.0.0 CLI do build i run
react-test-renderer 19.2.0 Renderowanie komponentów w testach
Instalacja

Jak uruchomić

Wymagania
Node.js 20+ React Native CLI Android Studio Xcode (iOS) Ruby 2.6+ (iOS)
1
Klonuj i zainstaluj zależności
git clone https://github.com/Andrii418/IoT.git
cd IoT
npm install
2
Zainstaluj zależności iOS (tylko macOS)
cd ios && pod install && cd ..
3
Uruchom Metro dev server
npm start
# lub
yarn start
4
Uruchom na platformie
# Android
npm run android

# iOS
npm run ios
Dostępne komendy
Komenda Opis
npm start Uruchomienie Metro dev server
npm run android Build i uruchomienie na Androidzie
npm run ios Build i uruchomienie na iOS
npm test Uruchomienie testów Jest
npm run lint Statyczna analiza kodu ESLint
Wszystkie projekty