🚀 QR Device Manager Mobile

Aplikasi IoT Device Management untuk Sistem Pemberi Pakan Otomatis

Features • Tech Stack • Getting Started • Project Structure • Documentation

📱 Tentang Aplikasi

QR Device Manager adalah aplikasi mobile React Native untuk monitoring dan kontrol perangkat IoT, khususnya sistem automatic feeder untuk aquarium, pet feeder, atau peternakan.

✨ Features

🔌 Device Management

📷 Scan QR Code untuk claim/register perangkat baru
📋 List Devices dengan info real-time (status, baterai, feed level)
🔄 Share Device ke user lain (collaborative ownership)
🗑️ Delete Device dari akun

🎮 Remote Control

⚡ Power On/Off - Kontrol nyala/mati perangkat
🍽️ Motor Pakan - Set durasi pemberian pakan otomatis
📊 Monitor Feed Level - Cek sisa pakan (%)
📡 WiFi Configuration - Set SSID & password perangkat

📊 Monitoring & Analytics

🗺️ Maps View - Lokasi perangkat dengan Google Maps/MapLibre
🌤️ Weather Integration - Cuaca real-time berdasarkan lokasi
📈 Telemetry Charts - Grafik baterai & tegangan
📜 Activity Logs - History lengkap dengan telemetry data
📊 Dashboard - Statistik perangkat (active, offline, error)

👤 User Features

🔐 Authentication (Login, Register, Forgot Password)
👤 Profile Management
🔔 Push Notifications
⚙️ Settings

🛠️ Tech Stack

Core

⚛️ React Native 0.82 - Cross-platform mobile framework
📘 TypeScript 5.8 - Type-safe development
🧭 React Navigation 7 - Navigation solution

Backend Integration

🔌 Axios - HTTP client untuk REST API
🔐 JWT Authentication - Token-based auth
📡 MQTT - Real-time IoT communication (optional)

UI/UX Libraries

🎨 React Native Paper 5 - Material Design components
📊 React Native Chart Kit - Data visualization
🎬 Lottie - Smooth animations
🎭 React Native Modal - Beautiful modals
🔔 Toast Message - User notifications

Device Features

📷 React Native Vision Camera 4 - QR code scanning
🗺️ MapLibre / React Native Maps - Interactive maps
📍 Geolocation - Location tracking
🖼️ Image Picker - Photo selection
🔐 Permissions - Runtime permissions handler

Development Tools

🎯 ESLint - Code linting
💅 Prettier - Code formatting
🧪 Jest - Unit testing
🔥 Hot Reloading - Fast development

🚀 Getting Started

Prerequisites

Pastikan Anda sudah install:

✅ Node.js >= 20
✅ React Native CLI
✅ Android Studio (untuk Android)
✅ Xcode (untuk iOS, Mac only)

Installation

Step 1: Clone Repository

git clone <repository-url>
cd QRDeviceManagerMobile

Step 2: Install Dependencies

npm install

Step 3: Setup Environment Variables ⚠️ PENTING!

# Copy template environment
cp .env.example .env

Edit file .env dan isi konfigurasi Anda:

API_URL=http://your-api-server:8085/api/v1

📖 Detailed Guide: Lihat SETUP_ENV.md untuk panduan lengkap

Step 4: Setup iOS (Mac only)

cd ios
bundle install          # Install Ruby dependencies
bundle exec pod install # Install CocoaPods
cd ..

Step 5: Start Metro Bundler

npm start

Step 6: Run Application

Buka terminal baru dan jalankan:

For Android 🤖

npm run android

For iOS 🍎

npm run ios

Build Variants (Android)

# Debug build (default)
npm run android

# Release build
npm run android:release

📁 Project Structure

QRDeviceManagerMobile/
├── src/
│   ├── app/                    # App initialization & providers
│   │   ├── navigation/         # Navigation configuration
│   │   └── providers/          # Context providers (Auth, Theme, etc)
│   ├── features/               # Feature-based modules
│   │   ├── auth/              # Authentication (Login, Register)
│   │   ├── dashboard/         # Dashboard & statistics
│   │   ├── devices/           # Device management
│   │   ├── notifications/     # Notifications
│   │   ├── profile/           # User profile & settings
│   │   └── qr/                # QR scanner
│   ├── services/              # API & business logic
│   │   ├── api.ts            # Axios configuration
│   │   ├── route_api.ts      # API endpoints
│   │   └── repositories/     # Data repositories
│   ├── shared/               # Shared resources
│   │   ├── components/       # Reusable components
│   │   ├── constants/        # Constants & config
│   │   ├── lib/             # Utilities & helpers
│   │   ├── styles/          # Themes & styling
│   │   └── types/           # TypeScript types
│   └── assets/              # Images, fonts, animations
├── android/                 # Android native code
├── ios/                     # iOS native code
└── ...

🔧 Configuration Files

File	Purpose
`.env`	Environment variables (API URL, keys) - NOT in Git
`.env.example`	Template untuk .env
`babel.config.js`	Babel configuration + dotenv plugin
`metro.config.js`	Metro bundler configuration
`tsconfig.json`	TypeScript configuration
`react-native.config.js`	React Native CLI config

📚 Documentation

📖 SETUP_ENV.md - Environment variables setup guide
🔄 CHANGELOG_ENV_SECURITY.md - Security updates & migration
🚀 QUICKSTART_AFTER_PULL.md - Quick setup after git pull
🗺️ MAPLIBRE_SETUP.md - MapLibre integration guide
🗺️ GOOGLE_MAPS_SETUP.md - Google Maps setup

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm test -- --coverage

# Run linter
npm run lint

🏗️ Building for Production

Android APK/AAB

# Build APK (debug)
cd android
./gradlew assembleDebug

# Build APK (release)
./gradlew assembleRelease

# Build AAB (for Play Store)
./gradlew bundleRelease

Output: android/app/build/outputs/

iOS IPA

# Open in Xcode
open ios/QRDeviceManagerMobile.xcworkspace

# Then: Product > Archive

🔍 Troubleshooting

Metro Bundler Issues

# Clear cache and restart
npm start -- --reset-cache

Android Build Issues

cd android
./gradlew clean
cd ..
npm run android

iOS Build Issues

cd ios
bundle exec pod install --repo-update
cd ..
npm run ios

Environment Variables Not Working

# Make sure .env file exists
ls -la .env

# Restart Metro with cache clear
npm start -- --reset-cache

# Rebuild app
npm run android

📖 More Help: See SETUP_ENV.md for detailed troubleshooting

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Code Style

Follow TypeScript best practices
Use ESLint & Prettier for formatting
Write meaningful commit messages
Add comments for complex logic

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Team

Developed with ❤️ by the QR Device Manager Team

🙏 Acknowledgments

React Native - Amazing framework
React Navigation - Navigation solution
React Native Paper - UI components
MapLibre - Open-source maps
All open-source contributors

📞 Support

📧 Email: support@qrdevicemanager.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

🔗 Links

⭐ Star this repo if you find it helpful!

Made with ❤️ using React Native

Name		Name	Last commit message	Last commit date
Latest commit History 203 Commits
__tests__		__tests__
android		android
assets		assets
ios		ios
src		src
.env.example		.env.example
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierrc.js		.prettierrc.js
.watchmanconfig		.watchmanconfig
App.tsx		App.tsx
CHANGELOG_ENV_SECURITY.md		CHANGELOG_ENV_SECURITY.md
FINAL_SUMMARY.md		FINAL_SUMMARY.md
GIT_COMMIT_GUIDE.md		GIT_COMMIT_GUIDE.md
GOOGLE_MAPS_SETUP.md		GOOGLE_MAPS_SETUP.md
Gemfile		Gemfile
MAPLIBRE_SETUP.md		MAPLIBRE_SETUP.md
QUICKSTART_AFTER_PULL.md		QUICKSTART_AFTER_PULL.md
README.md		README.md
SECURITY_BEST_PRACTICES.md		SECURITY_BEST_PRACTICES.md
SETUP_ENV.md		SETUP_ENV.md
app.json		app.json
babel.config.js		babel.config.js
index.js		index.js
jest.config.js		jest.config.js
metro.config.js		metro.config.js
package-lock.json		package-lock.json
package.json		package.json
react-native.config.js		react-native.config.js
remove-tracked-files.bat		remove-tracked-files.bat
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation