docs: update README with React Native mobile app documentation
This commit is contained in:
Antoni Nuñez Romeu
@@ -4,6 +4,7 @@ A web application to search for medicines from the official Spanish CIMA databas
|
||||
|
||||
## ✨ Features
|
||||
|
||||
### Web App (Desktop/PWA)
|
||||
- 🔍 **Real-time medicine search** from CIMA API (Agencia Española de Medicamentos)
|
||||
- 💾 **Redis caching** for improved performance
|
||||
- 📍 View pharmacies that sell a specific medicine
|
||||
@@ -15,14 +16,38 @@ A web application to search for medicines from the official Spanish CIMA databas
|
||||
- Search medicines from CIMA database
|
||||
- Link medicines to pharmacies with prices and stock
|
||||
|
||||
### Mobile App (React Native)
|
||||
- 📱 **Native iOS/Android** experience with Expo
|
||||
- 🔍 **Medicine search** with real-time results
|
||||
- 🗺️ **Interactive map** with pharmacy markers
|
||||
- 📷 **Barcode scanner** for quick medicine lookup
|
||||
- 🔔 **Push notifications** for availability alerts
|
||||
- 🔐 **Biometric authentication** (Face ID / Touch ID)
|
||||
- 💾 **Offline cache** for favorite medicines
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
- **Frontend**: React + Vite
|
||||
- **Backend**: Node.js + Express
|
||||
### Backend
|
||||
- **Runtime**: Node.js + Express
|
||||
- **Database**: SQLite (for pharmacies and relationships)
|
||||
- **Cache**: Redis
|
||||
- **External API**: CIMA (Centro de Información online de Medicamentos de la AEMPS)
|
||||
|
||||
### Frontend (Web/PWA)
|
||||
- **Framework**: React + Vite
|
||||
- **Mobile wrapper**: Capacitor (for hybrid mobile builds)
|
||||
|
||||
### Frontend (Mobile - React Native)
|
||||
- **Framework**: Expo SDK 57 + React Native
|
||||
- **Navigation**: Expo Router v4
|
||||
- **State**: Zustand
|
||||
- **HTTP**: Axios + TanStack Query
|
||||
- **Maps**: react-native-maps
|
||||
- **Camera**: expo-camera (barcode scanning)
|
||||
- **Auth**: expo-local-authentication (biometrics)
|
||||
- **Notifications**: expo-notifications
|
||||
- **Build**: EAS Build
|
||||
|
||||
## 📋 Prerequisites
|
||||
|
||||
- Node.js (v18 or higher)
|
||||
@@ -200,7 +225,7 @@ FarmaFinder/
|
||||
│ ├── create-admin.js # Admin user creation script
|
||||
│ ├── .env.example # Environment variable template
|
||||
│ └── package.json
|
||||
├── frontend/
|
||||
├── frontend/ # React + Vite (Desktop/PWA)
|
||||
│ ├── Dockerfile
|
||||
│ ├── nginx.conf # Nginx config (Docker): serves SPA + proxies /api
|
||||
│ ├── src/
|
||||
@@ -213,6 +238,27 @@ FarmaFinder/
|
||||
│ │ └── main.jsx # Entry point
|
||||
│ ├── index.html
|
||||
│ └── package.json
|
||||
├── frontend-mobile/ # Expo + React Native (iOS/Android)
|
||||
│ ├── app/
|
||||
│ │ ├── _layout.tsx # Root layout with providers
|
||||
│ │ ├── (tabs)/ # Bottom tab navigation
|
||||
│ │ │ ├── index.tsx # Home (medicine search)
|
||||
│ │ │ ├── map.tsx # Pharmacy map
|
||||
│ │ │ └── profile.tsx # User profile
|
||||
│ │ ├── medicine/[id].tsx # Medicine detail
|
||||
│ │ ├── pharmacy/[id].tsx # Pharmacy detail
|
||||
│ │ ├── auth/ # Login/Register screens
|
||||
│ │ └── scanner.tsx # Barcode scanner
|
||||
│ ├── components/ # Reusable UI components
|
||||
│ ├── services/ # API and business logic
|
||||
│ ├── store/ # Zustand state management
|
||||
│ ├── hooks/ # Custom React hooks
|
||||
│ ├── constants/ # Theme and config
|
||||
│ ├── types/ # TypeScript types
|
||||
│ ├── eas.json # EAS Build configuration
|
||||
│ └── package.json
|
||||
├── android/ # Capacitor Android project
|
||||
├── ios/ # Capacitor iOS project
|
||||
└── README.md
|
||||
```
|
||||
|
||||
@@ -289,6 +335,95 @@ The application now uses the **CIMA (Centro de Información online de Medicament
|
||||
- Results are cached in Redis for performance
|
||||
- `pharmacy_medicines` now uses `medicine_nregistro` (CIMA registration number) instead of local `medicine_id`
|
||||
|
||||
## 📱 Mobile App Setup (React Native)
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (v18 or higher)
|
||||
- npm or yarn
|
||||
- **Expo CLI**: `npm install -g expo-cli`
|
||||
- **EAS CLI**: `npm install -g eas-cli`
|
||||
- **iOS**: Xcode (Mac only) + CocoaPods
|
||||
- **Android**: Android Studio + Android SDK
|
||||
|
||||
### Quick Start
|
||||
|
||||
```bash
|
||||
# Install all dependencies (backend + web + mobile)
|
||||
npm run install:all
|
||||
|
||||
# Start mobile development server
|
||||
npm run dev:mobile
|
||||
|
||||
# Scan QR code with Expo Go app (iOS/Android)
|
||||
```
|
||||
|
||||
### Development Build
|
||||
|
||||
For native features (camera, biometrics, notifications), use a development build:
|
||||
|
||||
```bash
|
||||
# Install EAS CLI
|
||||
npm install -g eas-cli
|
||||
|
||||
# Login to Expo
|
||||
eas login
|
||||
|
||||
# Create development build
|
||||
eas build --profile development --platform ios
|
||||
eas build --profile development --platform android
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
frontend-mobile/
|
||||
├── app/ # Expo Router screens
|
||||
│ ├── (tabs)/ # Bottom tab navigation
|
||||
│ ├── auth/ # Login/Register
|
||||
│ ├── medicine/ # Medicine detail
|
||||
│ ├── pharmacy/ # Pharmacy detail
|
||||
│ └── scanner.tsx # Barcode scanner
|
||||
├── components/ # Reusable UI components
|
||||
├── services/ # API and business logic
|
||||
├── store/ # Zustand state management
|
||||
├── hooks/ # Custom React hooks
|
||||
├── constants/ # Theme and config
|
||||
└── types/ # TypeScript types
|
||||
```
|
||||
|
||||
### Native Features
|
||||
|
||||
| Feature | Implementation |
|
||||
|---------|---------------|
|
||||
| Barcode Scanner | `expo-camera` with `CameraView` |
|
||||
| Push Notifications | `expo-notifications` |
|
||||
| Biometrics | `expo-local-authentication` |
|
||||
| Maps | `react-native-maps` |
|
||||
| Secure Storage | `expo-secure-store` |
|
||||
|
||||
### EAS Build Profiles
|
||||
|
||||
- **development**: Local development with dev client
|
||||
- **preview**: Internal testing (APK/IPA)
|
||||
- **production**: App Store/Google Play submission
|
||||
|
||||
### Environment Configuration
|
||||
|
||||
The mobile app uses the same backend API as the web app. Configure the API URL in:
|
||||
|
||||
```typescript
|
||||
// frontend-mobile/constants/config.ts
|
||||
const ENV = {
|
||||
development: {
|
||||
API_BASE_URL: 'http://localhost:3001/api',
|
||||
},
|
||||
production: {
|
||||
API_BASE_URL: 'https://your-production-api.com/api',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Redis Connection Issues
|
||||
@@ -321,19 +456,52 @@ npm run create-admin
|
||||
|
||||
## 📝 Development
|
||||
|
||||
**Backend development with auto-reload:**
|
||||
### Backend
|
||||
|
||||
**Start with auto-reload:**
|
||||
```bash
|
||||
cd backend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Frontend development:**
|
||||
### Frontend (Web/PWA)
|
||||
|
||||
**Start development server:**
|
||||
```bash
|
||||
cd frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Clear Redis cache:**
|
||||
### Frontend (Mobile - React Native)
|
||||
|
||||
**Install all dependencies:**
|
||||
```bash
|
||||
npm run install:all
|
||||
```
|
||||
|
||||
**Start Expo dev server:**
|
||||
```bash
|
||||
npm run dev:mobile
|
||||
```
|
||||
|
||||
**Start for specific platform:**
|
||||
```bash
|
||||
npm run dev:mobile:android # Android emulator
|
||||
npm run dev:mobile:ios # iOS simulator
|
||||
```
|
||||
|
||||
**Build with EAS:**
|
||||
```bash
|
||||
npm run build:mobile # Production build
|
||||
```
|
||||
|
||||
**Submit to stores:**
|
||||
```bash
|
||||
npm run submit:android # Google Play
|
||||
npm run submit:ios # App Store
|
||||
```
|
||||
|
||||
### Clear Redis cache
|
||||
```bash
|
||||
redis-cli FLUSHALL
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user