153 lines
5.4 KiB
Markdown
153 lines
5.4 KiB
Markdown
# Desa+ Mobile Application - Project Overview
|
|
|
|
## Project Summary
|
|
Desa+ is a comprehensive village/desa management mobile application built with React Native and Expo. The application serves as a digital platform for village administration, community communication, and information management. It provides various features to facilitate village governance, resident communication, and administrative tasks.
|
|
|
|
## Architecture & Technology Stack
|
|
- **Framework**: React Native with Expo (SDK 53)
|
|
- **State Management**: Redux Toolkit with React-Redux
|
|
- **Navigation**: Expo Router with React Navigation
|
|
- **Backend Services**: Firebase (Authentication, Realtime Database, Cloud Messaging)
|
|
- **UI Components**: Custom-built components with React Native elements
|
|
- **Language**: TypeScript for type safety
|
|
- **Build System**: EAS (Expo Application Service) for builds and deployments
|
|
|
|
## Key Features
|
|
- Announcement and village information system
|
|
- Community discussion forums
|
|
- Village event calendar
|
|
- Document management and archiving
|
|
- Project and task management
|
|
- Member and organizational structure management
|
|
- Push notifications for important updates
|
|
- Verification and authentication features
|
|
|
|
## Project Structure
|
|
```
|
|
├── app/ # Application routes and pages (Expo Router)
|
|
│ ├── (application)/ # Main application screens
|
|
│ │ ├── announcement/
|
|
│ │ ├── banner/
|
|
│ │ ├── discussion/
|
|
│ │ ├── division/
|
|
│ │ ├── group/
|
|
│ │ ├── member/
|
|
│ │ ├── position/
|
|
│ │ ├── project/
|
|
│ │ ├── _layout.tsx
|
|
│ │ ├── edit-profile.tsx
|
|
│ │ ├── feature.tsx
|
|
│ │ ├── home.tsx
|
|
│ │ ├── notification.tsx
|
|
│ │ ├── profile.tsx
|
|
│ │ └── search.tsx
|
|
│ ├── _layout.tsx # Root layout
|
|
│ ├── index.tsx # Splash/login screen
|
|
│ ├── verification.tsx # OTP verification screen
|
|
├── components/ # Reusable UI components
|
|
│ ├── announcement/
|
|
│ ├── auth/
|
|
│ ├── banner/
|
|
│ ├── calendar/
|
|
│ ├── discussion/
|
|
│ ├── division/
|
|
│ ├── document/
|
|
│ ├── group/
|
|
│ ├── home/
|
|
│ ├── member/
|
|
│ ├── position/
|
|
│ ├── project/
|
|
│ ├── task/
|
|
│ ├── alertKonfirmasi.ts
|
|
│ ├── AppHeader.tsx
|
|
│ ├── Text.tsx
|
|
│ └── ... (many more components)
|
|
├── constants/ # Constants and styles
|
|
│ ├── Colors.ts
|
|
│ ├── ColorsStatus.ts
|
|
│ ├── ConstEnv.ts
|
|
│ ├── Headers.ts
|
|
│ ├── RoleUser.ts
|
|
│ ├── Styles.ts
|
|
│ └── ... (other constants)
|
|
├── assets/ # Static assets (images, fonts)
|
|
├── lib/ # Business logic and API utilities
|
|
├── providers/ # Context providers (AuthProvider)
|
|
├── android/ # Android native code
|
|
├── ios/ # iOS native code
|
|
├── scripts/ # Build and utility scripts
|
|
├── index.js # Entry point
|
|
├── app.config.js # Expo configuration
|
|
├── package.json # Dependencies and scripts
|
|
└── eas.json # EAS build configuration
|
|
```
|
|
|
|
## Environment Configuration
|
|
The application uses environment variables defined in a `.env` file:
|
|
- `URL_API` - API endpoint
|
|
- `URL_OTP` - OTP service endpoint
|
|
- `URL_STORAGE` - Storage endpoint
|
|
- `URL_FIREBASE_DB` - Firebase database URL
|
|
- `PASS_ENC` - Encryption password
|
|
- `WA_SERVER_TOKEN` - WhatsApp server token
|
|
- `IOS_GOOGLE_SERVICES_FILE` - Path to iOS Google services file
|
|
|
|
## Building and Running
|
|
|
|
### Development
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Run the development server:
|
|
```bash
|
|
npx expo start
|
|
```
|
|
|
|
3. For platform-specific builds:
|
|
- Android: `npm run android`
|
|
- iOS: `npm run ios`
|
|
- Web: `npm run web`
|
|
|
|
### Production Builds
|
|
- Android: `npm run build:android` (uses EAS to build an app bundle)
|
|
|
|
### Testing
|
|
- Run tests: `npm run test`
|
|
|
|
### Linting
|
|
- Check code quality: `npm run lint`
|
|
|
|
## Key Dependencies
|
|
- `@react-native-firebase/*` - Firebase integration
|
|
- `@react-navigation/*` - Navigation solutions
|
|
- `@reduxjs/toolkit` - State management
|
|
- `expo-router` - File-based routing
|
|
- `react-native-gesture-handler` - Touch gesture support
|
|
- `react-native-reanimated` - Advanced animations
|
|
- `react-native-svg` - SVG rendering support
|
|
|
|
## Development Conventions
|
|
- Uses TypeScript for type safety
|
|
- Implements custom styling through the Styles.ts constant file
|
|
- Follows Expo's file-based routing convention
|
|
- Uses Redux Toolkit for centralized state management
|
|
- Implements custom components in the components directory
|
|
- Uses absolute imports with @/ alias (e.g., "@/components/...")
|
|
- Implements Firebase for authentication and real-time data
|
|
|
|
## Deployment
|
|
- Uses EAS for building and submitting to app stores
|
|
- Supports both Android (APK and App Bundle) and iOS (TestFlight/App Store)
|
|
- Configured for internal testing, preview, and production distributions
|
|
|
|
## Special Features
|
|
- Background message handling for push notifications
|
|
- Biometric authentication support
|
|
- Image picking and media library access
|
|
- Document picker functionality
|
|
- Date/time pickers with localization
|
|
- Custom toast notifications
|
|
- Carousel components for featured content
|
|
- Data visualization with charts |