docs: update README with React Native mobile app documentation
This commit is contained in:
@@ -4,6 +4,7 @@ A web application to search for medicines from the official Spanish CIMA databas
|
|||||||
|
|
||||||
## ✨ Features
|
## ✨ Features
|
||||||
|
|
||||||
|
### Web App (Desktop/PWA)
|
||||||
- 🔍 **Real-time medicine search** from CIMA API (Agencia Española de Medicamentos)
|
- 🔍 **Real-time medicine search** from CIMA API (Agencia Española de Medicamentos)
|
||||||
- 💾 **Redis caching** for improved performance
|
- 💾 **Redis caching** for improved performance
|
||||||
- 📍 View pharmacies that sell a specific medicine
|
- 📍 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
|
- Search medicines from CIMA database
|
||||||
- Link medicines to pharmacies with prices and stock
|
- 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
|
## 🛠️ Tech Stack
|
||||||
|
|
||||||
- **Frontend**: React + Vite
|
### Backend
|
||||||
- **Backend**: Node.js + Express
|
- **Runtime**: Node.js + Express
|
||||||
- **Database**: SQLite (for pharmacies and relationships)
|
- **Database**: SQLite (for pharmacies and relationships)
|
||||||
- **Cache**: Redis
|
- **Cache**: Redis
|
||||||
- **External API**: CIMA (Centro de Información online de Medicamentos de la AEMPS)
|
- **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
|
## 📋 Prerequisites
|
||||||
|
|
||||||
- Node.js (v18 or higher)
|
- Node.js (v18 or higher)
|
||||||
@@ -200,7 +225,7 @@ FarmaFinder/
|
|||||||
│ ├── create-admin.js # Admin user creation script
|
│ ├── create-admin.js # Admin user creation script
|
||||||
│ ├── .env.example # Environment variable template
|
│ ├── .env.example # Environment variable template
|
||||||
│ └── package.json
|
│ └── package.json
|
||||||
├── frontend/
|
├── frontend/ # React + Vite (Desktop/PWA)
|
||||||
│ ├── Dockerfile
|
│ ├── Dockerfile
|
||||||
│ ├── nginx.conf # Nginx config (Docker): serves SPA + proxies /api
|
│ ├── nginx.conf # Nginx config (Docker): serves SPA + proxies /api
|
||||||
│ ├── src/
|
│ ├── src/
|
||||||
@@ -213,6 +238,27 @@ FarmaFinder/
|
|||||||
│ │ └── main.jsx # Entry point
|
│ │ └── main.jsx # Entry point
|
||||||
│ ├── index.html
|
│ ├── index.html
|
||||||
│ └── package.json
|
│ └── 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
|
└── 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
|
- Results are cached in Redis for performance
|
||||||
- `pharmacy_medicines` now uses `medicine_nregistro` (CIMA registration number) instead of local `medicine_id`
|
- `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
|
## 🐛 Troubleshooting
|
||||||
|
|
||||||
### Redis Connection Issues
|
### Redis Connection Issues
|
||||||
@@ -321,19 +456,52 @@ npm run create-admin
|
|||||||
|
|
||||||
## 📝 Development
|
## 📝 Development
|
||||||
|
|
||||||
**Backend development with auto-reload:**
|
### Backend
|
||||||
|
|
||||||
|
**Start with auto-reload:**
|
||||||
```bash
|
```bash
|
||||||
cd backend
|
cd backend
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
**Frontend development:**
|
### Frontend (Web/PWA)
|
||||||
|
|
||||||
|
**Start development server:**
|
||||||
```bash
|
```bash
|
||||||
cd frontend
|
cd frontend
|
||||||
npm run dev
|
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
|
```bash
|
||||||
redis-cli FLUSHALL
|
redis-cli FLUSHALL
|
||||||
```
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user