Antoni Nuñez Romeu
3418 lines
86 KiB
Markdown
3418 lines
86 KiB
Markdown
# FarmaFinder Mobile Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Create a React Native mobile frontend using Expo that provides native iOS/Android experience for FarmaFinder, with core features (medicine search, pharmacy map) plus native extras (push notifications, barcode scanner, biometrics).
|
|
|
|
**Architecture:** Expo Router for file-based routing, Zustand for state management, TanStack Query for API caching, react-native-maps for pharmacy locations. Separate `frontend-mobile/` directory sharing only the backend API.
|
|
|
|
**Tech Stack:** Expo SDK 52+, React Native 0.76+, Expo Router v4, Zustand, TanStack Query, Axios, react-native-maps, expo-camera, expo-notifications
|
|
|
|
---
|
|
|
|
## File Structure Overview
|
|
|
|
```
|
|
FarmaFinder/
|
|
├── frontend-mobile/ ← NEW
|
|
│ ├── app/
|
|
│ │ ├── _layout.tsx ← Root layout (providers)
|
|
│ │ ├── (tabs)/
|
|
│ │ │ ├── _layout.tsx ← Tab navigator
|
|
│ │ │ ├── index.tsx ← Home (search)
|
|
│ │ │ ├── map.tsx ← Map view
|
|
│ │ │ └── profile.tsx ← User profile
|
|
│ │ ├── medicine/[id].tsx ← Medicine detail
|
|
│ │ ├── pharmacy/[id].tsx ← Pharmacy detail
|
|
│ │ └── auth/
|
|
│ │ ├── login.tsx ← Login screen
|
|
│ │ └── register.tsx ← Register screen
|
|
│ ├── components/
|
|
│ │ ├── SearchBar.tsx ← Search input with debounce
|
|
│ │ ├── MedicineCard.tsx ← Medicine result card
|
|
│ │ ├── PharmacyMarker.tsx ← Custom map marker
|
|
│ │ ├── StockBadge.tsx ← Stock availability badge
|
|
│ │ └── LoadingSpinner.tsx ← Loading indicator
|
|
│ ├── services/
|
|
│ │ ├── api.ts ← Axios client
|
|
│ │ ├── medicines.ts ← Medicine API calls
|
|
│ │ ├── pharmacies.ts ← Pharmacy API calls
|
|
│ │ └── auth.ts ← Auth API calls
|
|
│ ├── store/
|
|
│ │ ├── authStore.ts ← Auth state (Zustand)
|
|
│ │ └── searchStore.ts ← Search state (Zustand)
|
|
│ ├── hooks/
|
|
│ │ ├── useDebounce.ts ← Debounce hook
|
|
│ │ └── useAuth.ts ← Auth hook
|
|
│ ├── constants/
|
|
│ │ ├── theme.ts ← Colors, spacing
|
|
│ │ └── config.ts ← API URLs, settings
|
|
│ ├── types/
|
|
│ │ └── index.ts ← TypeScript types
|
|
│ ├── assets/
|
|
│ │ └── icon.png ← App icon
|
|
│ ├── app.json ← Expo config
|
|
│ ├── eas.json ← EAS Build config
|
|
│ └── package.json ← Dependencies
|
|
├── frontend/ ← EXISTING (no changes)
|
|
├── backend/ ← EXISTING (no changes)
|
|
└── package.json ← MODIFY (add mobile scripts)
|
|
```
|
|
|
|
---
|
|
|
|
## Task 1: Initialize Expo Project
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/` (entire directory structure)
|
|
- Create: `frontend-mobile/package.json`
|
|
- Create: `frontend-mobile/app.json`
|
|
- Create: `frontend-mobile/tsconfig.json`
|
|
- Create: `frontend-mobile/babel.config.js`
|
|
|
|
- [ ] **Step 1: Create project directory and initialize**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
mkdir -p frontend-mobile
|
|
cd frontend-mobile
|
|
npx create-expo-app@latest . --template blank-typescript
|
|
```
|
|
|
|
- [ ] **Step 2: Install core dependencies**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
|
|
npx expo install react-native-gesture-handler react-native-reanimated
|
|
```
|
|
|
|
- [ ] **Step 3: Install additional dependencies**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npm install zustand @tanstack/react-query axios
|
|
npm install react-native-maps
|
|
npx expo install expo-camera expo-notifications expo-local-authentication expo-secure-store @react-native-async-storage/async-storage
|
|
```
|
|
|
|
- [ ] **Step 4: Configure app.json**
|
|
|
|
```json
|
|
{
|
|
"expo": {
|
|
"name": "FarmaFinder",
|
|
"slug": "farmafinder",
|
|
"version": "1.0.0",
|
|
"orientation": "portrait",
|
|
"icon": "./assets/icon.png",
|
|
"userInterfaceStyle": "light",
|
|
"newArchEnabled": true,
|
|
"splash": {
|
|
"image": "./assets/splash.png",
|
|
"resizeMode": "contain",
|
|
"backgroundColor": "#007AFF"
|
|
},
|
|
"ios": {
|
|
"supportsTablet": true,
|
|
"bundleIdentifier": "com.farmafinder.app"
|
|
},
|
|
"android": {
|
|
"adaptiveIcon": {
|
|
"foregroundImage": "./assets/adaptive-icon.png",
|
|
"backgroundColor": "#007AFF"
|
|
},
|
|
"package": "com.farmafinder.app"
|
|
},
|
|
"plugins": [
|
|
"expo-router",
|
|
[
|
|
"expo-camera",
|
|
{
|
|
"cameraPermission": "Allow FarmaFinder to access your camera for scanning barcodes"
|
|
}
|
|
],
|
|
[
|
|
"expo-notifications",
|
|
{
|
|
"icon": "./assets/notification-icon.png",
|
|
"color": "#007AFF"
|
|
}
|
|
]
|
|
],
|
|
"scheme": "farmafinder"
|
|
}
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 5: Configure babel.config.js**
|
|
|
|
```javascript
|
|
module.exports = function(api) {
|
|
api.cache(true);
|
|
return {
|
|
presets: ['babel-preset-expo'],
|
|
plugins: ['react-native-reanimated/plugin'],
|
|
};
|
|
};
|
|
```
|
|
|
|
- [ ] **Step 6: Configure tsconfig.json**
|
|
|
|
```json
|
|
{
|
|
"extends": "expo/tsconfig.base",
|
|
"compilerOptions": {
|
|
"strict": true,
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": ["./*"]
|
|
}
|
|
},
|
|
"include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 7: Verify project compiles**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npx expo start --clear
|
|
```
|
|
|
|
Expected: Expo dev server starts without errors
|
|
|
|
- [ ] **Step 8: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: initialize Expo project for mobile frontend"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 2: Setup Navigation Structure
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/app/_layout.tsx`
|
|
- Create: `frontend-mobile/app/(tabs)/_layout.tsx`
|
|
- Create: `frontend-mobile/app/(tabs)/index.tsx`
|
|
- Create: `frontend-mobile/app/(tabs)/map.tsx`
|
|
- Create: `frontend-mobile/app/(tabs)/profile.tsx`
|
|
|
|
- [ ] **Step 1: Create root layout**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/_layout.tsx
|
|
import { Stack } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
export default function RootLayout() {
|
|
return (
|
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<Stack>
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen name="medicine/[id]" options={{ title: 'Medicamento' }} />
|
|
<Stack.Screen name="pharmacy/[id]" options={{ title: 'Farmacia' }} />
|
|
<Stack.Screen name="auth/login" options={{ title: 'Iniciar Sesión' }} />
|
|
<Stack.Screen name="auth/register" options={{ title: 'Registrarse' }} />
|
|
</Stack>
|
|
<StatusBar style="auto" />
|
|
</QueryClientProvider>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Create tab navigator**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/_layout.tsx
|
|
import { Tabs } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
|
|
export default function TabLayout() {
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: '#007AFF',
|
|
tabBarInactiveTintColor: '#8E8E93',
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Buscar',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="search" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="map"
|
|
options={{
|
|
title: 'Mapa',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="map" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'Perfil',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="person" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 3: Create Home screen (placeholder)**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/index.tsx
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
|
|
export default function HomeScreen() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>FarmaFinder</Text>
|
|
<Text style={styles.subtitle}>Busca medicamentos</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#F2F2F7',
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: '#1C1C1E',
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#8E8E93',
|
|
marginTop: 8,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 4: Create Map screen (placeholder)**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/map.tsx
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
|
|
export default function MapScreen() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Mapa de Farmacias</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#F2F2F7',
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: '#1C1C1E',
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 5: Create Profile screen (placeholder)**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/profile.tsx
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
|
|
export default function ProfileScreen() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Perfil</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#F2F2F7',
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: '#1C1C1E',
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 6: Update package.json with scripts**
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"start": "expo start",
|
|
"android": "expo start --android",
|
|
"ios": "expo start --ios",
|
|
"web": "expo start --web"
|
|
}
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 7: Verify navigation works**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npx expo start
|
|
```
|
|
|
|
Expected: App shows with 3 tabs (Buscar, Mapa, Perfil)
|
|
|
|
- [ ] **Step 8: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: setup navigation structure with Expo Router"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 3: Create TypeScript Types
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/types/index.ts`
|
|
|
|
- [ ] **Step 1: Create types file**
|
|
|
|
```typescript
|
|
// frontend-mobile/types/index.ts
|
|
export interface Medicine {
|
|
nregistro: string;
|
|
nombre: string;
|
|
principioActivo: string;
|
|
laboratorio: string;
|
|
formaFarmaceutica: string;
|
|
precio: number | null;
|
|
stock: number;
|
|
disponibilidad: 'disponible' | 'sin_stock' | 'bajo_stock';
|
|
}
|
|
|
|
export interface Pharmacy {
|
|
id: number;
|
|
name: string;
|
|
address: string;
|
|
phone: string;
|
|
latitude: number;
|
|
longitude: number;
|
|
}
|
|
|
|
export interface PharmacyMedicine {
|
|
id: number;
|
|
pharmacy_id: number;
|
|
medicine_nregistro: string;
|
|
medicine_name: string;
|
|
price: number;
|
|
stock: number;
|
|
pharmacy?: Pharmacy;
|
|
}
|
|
|
|
export interface User {
|
|
id: number;
|
|
username: string;
|
|
is_admin: boolean;
|
|
}
|
|
|
|
export interface AuthResponse {
|
|
user: User;
|
|
token: string;
|
|
}
|
|
|
|
export interface SearchResponse {
|
|
medicines: Medicine[];
|
|
total: number;
|
|
}
|
|
|
|
export interface ApiResponse<T> {
|
|
data: T;
|
|
success: boolean;
|
|
error?: string;
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/types/
|
|
git commit -m "feat: add TypeScript types for mobile app"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 4: Create API Client and Services
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/constants/config.ts`
|
|
- Create: `frontend-mobile/services/api.ts`
|
|
- Create: `frontend-mobile/services/medicines.ts`
|
|
- Create: `frontend-mobile/services/pharmacies.ts`
|
|
- Create: `frontend-mobile/services/auth.ts`
|
|
|
|
- [ ] **Step 1: Create config constants**
|
|
|
|
```typescript
|
|
// frontend-mobile/constants/config.ts
|
|
import Constants from 'expo-constants';
|
|
|
|
const ENV = {
|
|
development: {
|
|
API_BASE_URL: 'http://localhost:3001/api',
|
|
},
|
|
production: {
|
|
API_BASE_URL: 'https://your-production-api.com/api',
|
|
},
|
|
};
|
|
|
|
const environment = Constants.expoConfig?.extra?.environment || (__DEV__ ? 'development' : 'production');
|
|
|
|
export const config = {
|
|
API_BASE_URL: ENV[environment as keyof typeof ENV]?.API_BASE_URL || ENV.development.API_BASE_URL,
|
|
SEARCH_DEBOUNCE_MS: 300,
|
|
CACHE_STALE_TIME: 5 * 60 * 1000, // 5 minutes
|
|
CACHE_CACHE_TIME: 30 * 60 * 1000, // 30 minutes
|
|
};
|
|
```
|
|
|
|
- [ ] **Step 2: Create API client**
|
|
|
|
```typescript
|
|
// frontend-mobile/services/api.ts
|
|
import axios from 'axios';
|
|
import * as SecureStore from 'expo-secure-store';
|
|
import { config } from '../constants/config';
|
|
|
|
export const api = axios.create({
|
|
baseURL: config.API_BASE_URL,
|
|
timeout: 10000,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
// Request interceptor - add auth token
|
|
api.interceptors.request.use(
|
|
async (axiosConfig) => {
|
|
const token = await SecureStore.getItemAsync('auth_token');
|
|
if (token) {
|
|
axiosConfig.headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
return axiosConfig;
|
|
},
|
|
(error) => Promise.reject(error)
|
|
);
|
|
|
|
// Response interceptor - handle errors
|
|
api.interceptors.response.use(
|
|
(response) => response,
|
|
async (error) => {
|
|
if (error.response?.status === 401) {
|
|
await SecureStore.deleteItemAsync('auth_token');
|
|
}
|
|
return Promise.reject(error);
|
|
}
|
|
);
|
|
|
|
export default api;
|
|
```
|
|
|
|
- [ ] **Step 3: Create medicines service**
|
|
|
|
```typescript
|
|
// frontend-mobile/services/medicines.ts
|
|
import api from './api';
|
|
import { Medicine, PharmacyMedicine } from '../types';
|
|
|
|
export async function searchMedicines(query: string): Promise<Medicine[]> {
|
|
const response = await api.get(`/medicines/search?q=${encodeURIComponent(query)}`);
|
|
return response.data;
|
|
}
|
|
|
|
export async function getMedicine(nregistro: string): Promise<Medicine> {
|
|
const response = await api.get(`/medicines/${nregistro}`);
|
|
return response.data;
|
|
}
|
|
|
|
export async function getMedicinePharmacies(nregistro: string): Promise<PharmacyMedicine[]> {
|
|
const response = await api.get(`/medicines/${nregistro}/pharmacies`);
|
|
return response.data;
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 4: Create pharmacies service**
|
|
|
|
```typescript
|
|
// frontend-mobile/services/pharmacies.ts
|
|
import api from './api';
|
|
import { Pharmacy } from '../types';
|
|
|
|
export async function getPharmacies(): Promise<Pharmacy[]> {
|
|
const response = await api.get('/pharmacies');
|
|
return response.data;
|
|
}
|
|
|
|
export async function getPharmacy(id: number): Promise<Pharmacy> {
|
|
const response = await api.get(`/pharmacies/${id}`);
|
|
return response.data;
|
|
}
|
|
|
|
export async function getPharmacyMedicines(id: number): Promise<any[]> {
|
|
const response = await api.get(`/pharmacies/${id}/medicines`);
|
|
return response.data;
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 5: Create auth service**
|
|
|
|
```typescript
|
|
// frontend-mobile/services/auth.ts
|
|
import api from './api';
|
|
import * as SecureStore from 'expo-secure-store';
|
|
import { AuthResponse, User } from '../types';
|
|
|
|
export async function login(username: string, password: string): Promise<AuthResponse> {
|
|
const response = await api.post('/auth/login', { username, password });
|
|
const { user, token } = response.data;
|
|
|
|
await SecureStore.setItemAsync('auth_token', token);
|
|
await SecureStore.setItemAsync('user', JSON.stringify(user));
|
|
|
|
return response.data;
|
|
}
|
|
|
|
export async function logout(): Promise<void> {
|
|
await api.post('/auth/logout');
|
|
await SecureStore.deleteItemAsync('auth_token');
|
|
await SecureStore.deleteItemAsync('user');
|
|
}
|
|
|
|
export async function checkAuth(): Promise<User | null> {
|
|
try {
|
|
const response = await api.get('/auth/check');
|
|
return response.data.user;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export async function getStoredUser(): Promise<User | null> {
|
|
const userStr = await SecureStore.getItemAsync('user');
|
|
return userStr ? JSON.parse(userStr) : null;
|
|
}
|
|
|
|
export async function register(username: string, password: string): Promise<AuthResponse> {
|
|
const response = await api.post('/auth/register', { username, password });
|
|
const { user, token } = response.data;
|
|
|
|
await SecureStore.setItemAsync('auth_token', token);
|
|
await SecureStore.setItemAsync('user', JSON.stringify(user));
|
|
|
|
return response.data;
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 6: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: add API client and services for medicines, pharmacies, auth"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 5: Create State Management (Zustand)
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/store/authStore.ts`
|
|
- Create: `frontend-mobile/store/searchStore.ts`
|
|
- Create: `frontend-mobile/hooks/useAuth.ts`
|
|
|
|
- [ ] **Step 1: Create auth store**
|
|
|
|
```typescript
|
|
// frontend-mobile/store/authStore.ts
|
|
import { create } from 'zustand';
|
|
import { User } from '../types';
|
|
import * as authService from '../services/auth';
|
|
|
|
interface AuthState {
|
|
user: User | null;
|
|
isLoading: boolean;
|
|
isAuthenticated: boolean;
|
|
login: (username: string, password: string) => Promise<void>;
|
|
logout: () => Promise<void>;
|
|
checkAuth: () => Promise<void>;
|
|
}
|
|
|
|
export const useAuthStore = create<AuthState>((set) => ({
|
|
user: null,
|
|
isLoading: true,
|
|
isAuthenticated: false,
|
|
|
|
login: async (username: string, password: string) => {
|
|
const { user } = await authService.login(username, password);
|
|
set({ user, isAuthenticated: true });
|
|
},
|
|
|
|
logout: async () => {
|
|
await authService.logout();
|
|
set({ user: null, isAuthenticated: false });
|
|
},
|
|
|
|
checkAuth: async () => {
|
|
set({ isLoading: true });
|
|
const user = await authService.checkAuth() || await authService.getStoredUser();
|
|
set({
|
|
user,
|
|
isAuthenticated: !!user,
|
|
isLoading: false
|
|
});
|
|
},
|
|
}));
|
|
```
|
|
|
|
- [ ] **Step 2: Create search store**
|
|
|
|
```typescript
|
|
// frontend-mobile/store/searchStore.ts
|
|
import { create } from 'zustand';
|
|
import { Medicine } from '../types';
|
|
|
|
interface SearchState {
|
|
query: string;
|
|
results: Medicine[];
|
|
isLoading: boolean;
|
|
error: string | null;
|
|
setQuery: (query: string) => void;
|
|
setResults: (results: Medicine[]) => void;
|
|
setLoading: (loading: boolean) => void;
|
|
setError: (error: string | null) => void;
|
|
clearResults: () => void;
|
|
}
|
|
|
|
export const useSearchStore = create<SearchState>((set) => ({
|
|
query: '',
|
|
results: [],
|
|
isLoading: false,
|
|
error: null,
|
|
|
|
setQuery: (query) => set({ query }),
|
|
setResults: (results) => set({ results, isLoading: false }),
|
|
setLoading: (isLoading) => set({ isLoading }),
|
|
setError: (error) => set({ error, isLoading: false }),
|
|
clearResults: () => set({ results: [], query: '', error: null }),
|
|
}));
|
|
```
|
|
|
|
- [ ] **Step 3: Create useAuth hook**
|
|
|
|
```typescript
|
|
// frontend-mobile/hooks/useAuth.ts
|
|
import { useEffect } from 'react';
|
|
import { useAuthStore } from '../store/authStore';
|
|
|
|
export function useAuth() {
|
|
const { user, isLoading, isAuthenticated, login, logout, checkAuth } = useAuthStore();
|
|
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, []);
|
|
|
|
return {
|
|
user,
|
|
isLoading,
|
|
isAuthenticated,
|
|
login,
|
|
logout,
|
|
isAdmin: user?.is_admin ?? false,
|
|
};
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 4: Create useDebounce hook**
|
|
|
|
```typescript
|
|
// frontend-mobile/hooks/useDebounce.ts
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export function useDebounce<T>(value: T, delay: number): T {
|
|
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedValue(value);
|
|
}, delay);
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
};
|
|
}, [value, delay]);
|
|
|
|
return debouncedValue;
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 5: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: add Zustand stores and custom hooks"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 6: Create Constants and Theme
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/constants/theme.ts`
|
|
|
|
- [ ] **Step 1: Create theme constants**
|
|
|
|
```typescript
|
|
// frontend-mobile/constants/theme.ts
|
|
export const colors = {
|
|
// Primary
|
|
primary: '#007AFF',
|
|
primaryLight: '#4DA3FF',
|
|
primaryDark: '#0056CC',
|
|
|
|
// Semantic
|
|
success: '#34C759',
|
|
danger: '#FF3B30',
|
|
warning: '#FF9500',
|
|
|
|
// Neutral
|
|
background: '#F2F2F7',
|
|
card: '#FFFFFF',
|
|
border: '#E5E5EA',
|
|
separator: '#C6C6C8',
|
|
|
|
// Text
|
|
text: '#1C1C1E',
|
|
textSecondary: '#8E8E93',
|
|
textInverse: '#FFFFFF',
|
|
textLink: '#007AFF',
|
|
};
|
|
|
|
export const spacing = {
|
|
xs: 4,
|
|
sm: 8,
|
|
md: 16,
|
|
lg: 24,
|
|
xl: 32,
|
|
xxl: 48,
|
|
};
|
|
|
|
export const borderRadius = {
|
|
sm: 8,
|
|
md: 12,
|
|
lg: 16,
|
|
xl: 24,
|
|
};
|
|
|
|
export const typography = {
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold' as const,
|
|
},
|
|
heading: {
|
|
fontSize: 20,
|
|
fontWeight: '600' as const,
|
|
},
|
|
body: {
|
|
fontSize: 16,
|
|
fontWeight: 'normal' as const,
|
|
},
|
|
caption: {
|
|
fontSize: 12,
|
|
fontWeight: 'normal' as const,
|
|
},
|
|
};
|
|
```
|
|
|
|
- [ ] **Step 2: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/constants/
|
|
git commit -m "feat: add theme constants (colors, spacing, typography)"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 7: Create UI Components
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/components/SearchBar.tsx`
|
|
- Create: `frontend-mobile/components/MedicineCard.tsx`
|
|
- Create: `frontend-mobile/components/StockBadge.tsx`
|
|
- Create: `frontend-mobile/components/LoadingSpinner.tsx`
|
|
|
|
- [ ] **Step 1: Create SearchBar component**
|
|
|
|
```typescript
|
|
// frontend-mobile/components/SearchBar.tsx
|
|
import React, { useState } from 'react';
|
|
import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { colors, spacing, borderRadius } from '../constants/theme';
|
|
|
|
interface SearchBarProps {
|
|
placeholder?: string;
|
|
onSearch: (query: string) => void;
|
|
value?: string;
|
|
onChangeText?: (text: string) => void;
|
|
}
|
|
|
|
export function SearchBar({
|
|
placeholder = 'Buscar medicamentos...',
|
|
onSearch,
|
|
value,
|
|
onChangeText
|
|
}: SearchBarProps) {
|
|
const [localValue, setLocalValue] = useState(value || '');
|
|
|
|
const handleChange = (text: string) => {
|
|
setLocalValue(text);
|
|
onChangeText?.(text);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
onSearch(localValue);
|
|
};
|
|
|
|
const handleClear = () => {
|
|
setLocalValue('');
|
|
onChangeText?.('');
|
|
onSearch('');
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder={placeholder}
|
|
placeholderTextColor={colors.textSecondary}
|
|
value={localValue}
|
|
onChangeText={handleChange}
|
|
onSubmitEditing={handleSubmit}
|
|
returnKeyType="search"
|
|
autoCorrect={false}
|
|
/>
|
|
{localValue.length > 0 && (
|
|
<TouchableOpacity onPress={handleClear} style={styles.clearButton}>
|
|
<Ionicons name="close-circle" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
marginHorizontal: spacing.md,
|
|
marginVertical: spacing.sm,
|
|
},
|
|
icon: {
|
|
marginRight: spacing.sm,
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
paddingVertical: spacing.xs,
|
|
},
|
|
clearButton: {
|
|
marginLeft: spacing.sm,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 2: Create MedicineCard component**
|
|
|
|
```typescript
|
|
// frontend-mobile/components/MedicineCard.tsx
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { colors, spacing, borderRadius } from '../constants/theme';
|
|
import { StockBadge } from './StockBadge';
|
|
import { Medicine } from '../types';
|
|
|
|
interface MedicineCardProps {
|
|
medicine: Medicine;
|
|
}
|
|
|
|
export function MedicineCard({ medicine }: MedicineCardProps) {
|
|
const router = useRouter();
|
|
|
|
const handlePress = () => {
|
|
router.push(`/medicine/${medicine.nregistro}`);
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.name} numberOfLines={2}>
|
|
{medicine.nombre}
|
|
</Text>
|
|
<StockBadge stock={medicine.stock} />
|
|
</View>
|
|
|
|
<Text style={styles.principioActivo} numberOfLines={1}>
|
|
{medicine.principioActivo}
|
|
</Text>
|
|
|
|
<View style={styles.footer}>
|
|
<View style={styles.priceContainer}>
|
|
<Ionicons name="pricetag" size={14} color={colors.textSecondary} />
|
|
<Text style={styles.price}>
|
|
{medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.labContainer}>
|
|
<Ionicons name="business" size={14} color={colors.textSecondary} />
|
|
<Text style={styles.laboratorio} numberOfLines={1}>
|
|
{medicine.laboratorio}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
marginHorizontal: spacing.md,
|
|
marginVertical: spacing.xs,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: spacing.xs,
|
|
},
|
|
name: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
marginRight: spacing.sm,
|
|
},
|
|
principioActivo: {
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
footer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
priceContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
price: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
labContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
justifyContent: 'flex-end',
|
|
},
|
|
laboratorio: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
marginLeft: spacing.xs,
|
|
maxWidth: 120,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 3: Create StockBadge component**
|
|
|
|
```typescript
|
|
// frontend-mobile/components/StockBadge.tsx
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
import { colors, borderRadius, spacing } from '../constants/theme';
|
|
|
|
interface StockBadgeProps {
|
|
stock: number;
|
|
}
|
|
|
|
export function StockBadge({ stock }: StockBadgeProps) {
|
|
const getBadgeStyle = () => {
|
|
if (stock === 0) return styles.danger;
|
|
if (stock < 5) return styles.warning;
|
|
return styles.success;
|
|
};
|
|
|
|
const getText = () => {
|
|
if (stock === 0) return 'Sin stock';
|
|
if (stock < 5) return `Bajo (${stock})`;
|
|
return `Disponible (${stock})`;
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.badge, getBadgeStyle()]}>
|
|
<Text style={styles.text}>{getText()}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
paddingHorizontal: spacing.sm,
|
|
paddingVertical: spacing.xs,
|
|
borderRadius: borderRadius.sm,
|
|
},
|
|
success: {
|
|
backgroundColor: '#D4EDDA',
|
|
},
|
|
warning: {
|
|
backgroundColor: '#FFF3CD',
|
|
},
|
|
danger: {
|
|
backgroundColor: '#F8D7DA',
|
|
},
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 4: Create LoadingSpinner component**
|
|
|
|
```typescript
|
|
// frontend-mobile/components/LoadingSpinner.tsx
|
|
import React from 'react';
|
|
import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
|
|
import { colors, spacing } from '../constants/theme';
|
|
|
|
interface LoadingSpinnerProps {
|
|
message?: string;
|
|
}
|
|
|
|
export function LoadingSpinner({ message = 'Cargando...' }: LoadingSpinnerProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
<Text style={styles.message}>{message}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
message: {
|
|
marginTop: spacing.md,
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 5: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/components/
|
|
git commit -m "feat: add UI components (SearchBar, MedicineCard, StockBadge, LoadingSpinner)"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 8: Implement Home Screen (Search)
|
|
|
|
**Files:**
|
|
- Modify: `frontend-mobile/app/(tabs)/index.tsx`
|
|
|
|
- [ ] **Step 1: Implement search functionality**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/index.tsx
|
|
import React, { useState, useEffect } from 'react';
|
|
import { View, FlatList, StyleSheet, Text } from 'react-native';
|
|
import { SearchBar } from '../../components/SearchBar';
|
|
import { MedicineCard } from '../../components/MedicineCard';
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
|
import { useDebounce } from '../../hooks/useDebounce';
|
|
import { searchMedicines } from '../../services/medicines';
|
|
import { colors, spacing } from '../../constants/theme';
|
|
import { Medicine } from '../../types';
|
|
import { config } from '../../constants/config';
|
|
|
|
export default function HomeScreen() {
|
|
const [query, setQuery] = useState('');
|
|
const [results, setResults] = useState<Medicine[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
|
|
|
|
useEffect(() => {
|
|
if (debouncedQuery.length < 2) {
|
|
setResults([]);
|
|
return;
|
|
}
|
|
|
|
const fetchResults = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await searchMedicines(debouncedQuery);
|
|
setResults(data);
|
|
} catch (err) {
|
|
setError('Error al buscar medicamentos');
|
|
console.error(err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchResults();
|
|
}, [debouncedQuery]);
|
|
|
|
const handleSearch = (searchQuery: string) => {
|
|
setQuery(searchQuery);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<SearchBar
|
|
onSearch={handleSearch}
|
|
value={query}
|
|
onChangeText={setQuery}
|
|
/>
|
|
|
|
{isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
|
|
|
|
{error && (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{!isLoading && !error && results.length === 0 && query.length >= 2 && (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>No se encontraron medicamentos</Text>
|
|
</View>
|
|
)}
|
|
|
|
<FlatList
|
|
data={results}
|
|
keyExtractor={(item) => item.nregistro}
|
|
renderItem={({ item }) => <MedicineCard medicine={item} />}
|
|
contentContainerStyle={styles.list}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
list: {
|
|
paddingBottom: spacing.xl,
|
|
},
|
|
errorContainer: {
|
|
padding: spacing.md,
|
|
marginHorizontal: spacing.md,
|
|
backgroundColor: '#F8D7DA',
|
|
borderRadius: 8,
|
|
},
|
|
errorText: {
|
|
color: '#721C24',
|
|
textAlign: 'center',
|
|
},
|
|
emptyContainer: {
|
|
padding: spacing.xl,
|
|
alignItems: 'center',
|
|
},
|
|
emptyText: {
|
|
color: colors.textSecondary,
|
|
fontSize: 16,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 2: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/app/\(tabs\)/index.tsx
|
|
git commit -m "feat: implement home screen with medicine search"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 9: Implement Medicine Detail Screen
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/app/medicine/[id].tsx`
|
|
|
|
- [ ] **Step 1: Create medicine detail screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/medicine/[id].tsx
|
|
import React, { useEffect, useState } from 'react';
|
|
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'react-native';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { getMedicine, getMedicinePharmacies } from '../../services/medicines';
|
|
import { StockBadge } from '../../components/StockBadge';
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
|
import { Medicine, PharmacyMedicine } from '../../types';
|
|
|
|
export default function MedicineDetailScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const router = useRouter();
|
|
const [medicine, setMedicine] = useState<Medicine | null>(null);
|
|
const [pharmacies, setPharmacies] = useState<PharmacyMedicine[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
|
|
const fetchMedicine = async () => {
|
|
try {
|
|
const [medData, pharmData] = await Promise.all([
|
|
getMedicine(id),
|
|
getMedicinePharmacies(id),
|
|
]);
|
|
setMedicine(medData);
|
|
setPharmacies(pharmData);
|
|
} catch (error) {
|
|
console.error('Error fetching medicine:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchMedicine();
|
|
}, [id]);
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner message="Cargando medicamento..." />;
|
|
}
|
|
|
|
if (!medicine) {
|
|
return (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>Medicamento no encontrado</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.name}>{medicine.nombre}</Text>
|
|
<StockBadge stock={medicine.stock} />
|
|
</View>
|
|
|
|
<View style={styles.infoSection}>
|
|
<InfoRow label="Principio activo" value={medicine.principioActivo} />
|
|
<InfoRow label="Laboratorio" value={medicine.laboratorio} />
|
|
<InfoRow label="Forma farmacéutica" value={medicine.formaFarmaceutica} />
|
|
<InfoRow
|
|
label="Precio"
|
|
value={medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'No disponible'}
|
|
/>
|
|
<InfoRow label="Registro" value={medicine.nregistro} />
|
|
</View>
|
|
|
|
<View style={styles.pharmaciesSection}>
|
|
<Text style={styles.sectionTitle}>
|
|
Farmacias ({pharmacies.length})
|
|
</Text>
|
|
|
|
{pharmacies.length === 0 ? (
|
|
<Text style={styles.noPharmacies}>No hay farmacias con este medicamento</Text>
|
|
) : (
|
|
pharmacies.map((pharm) => (
|
|
<TouchableOpacity
|
|
key={pharm.id}
|
|
style={styles.pharmacyCard}
|
|
onPress={() => router.push(`/pharmacy/${pharm.pharmacy_id}`)}
|
|
>
|
|
<View style={styles.pharmacyInfo}>
|
|
<Text style={styles.pharmacyName}>{pharm.pharmacy?.name}</Text>
|
|
<Text style={styles.pharmacyAddress}>{pharm.pharmacy?.address}</Text>
|
|
</View>
|
|
<View style={styles.pharmacyStock}>
|
|
<Text style={styles.price}>{pharm.price.toFixed(2)} €</Text>
|
|
<Text style={styles.stock}>Stock: {pharm.stock}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
))
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
function InfoRow({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>{label}</Text>
|
|
<Text style={styles.infoValue}>{value}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
padding: spacing.md,
|
|
backgroundColor: colors.card,
|
|
},
|
|
name: {
|
|
flex: 1,
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginRight: spacing.sm,
|
|
},
|
|
infoSection: {
|
|
backgroundColor: colors.card,
|
|
marginTop: spacing.sm,
|
|
padding: spacing.md,
|
|
},
|
|
infoRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: spacing.sm,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.separator,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
},
|
|
infoValue: {
|
|
fontSize: 14,
|
|
color: colors.text,
|
|
fontWeight: '500',
|
|
},
|
|
pharmaciesSection: {
|
|
marginTop: spacing.sm,
|
|
padding: spacing.md,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
marginBottom: spacing.md,
|
|
},
|
|
noPharmacies: {
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
pharmacyCard: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
pharmacyInfo: {
|
|
flex: 1,
|
|
},
|
|
pharmacyName: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
},
|
|
pharmacyAddress: {
|
|
fontSize: 14,
|
|
color: colors.textSecondary,
|
|
marginTop: spacing.xs,
|
|
},
|
|
pharmacyStock: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
price: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
},
|
|
stock: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
marginTop: spacing.xs,
|
|
},
|
|
errorContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
errorText: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 2: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/app/medicine/
|
|
git commit -m "feat: implement medicine detail screen with pharmacies list"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 10: Implement Map Screen
|
|
|
|
**Files:**
|
|
- Modify: `frontend-mobile/app/(tabs)/map.tsx`
|
|
|
|
- [ ] **Step 1: Install react-native-maps types**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npm install --save-dev @types/react-native-maps
|
|
```
|
|
|
|
- [ ] **Step 2: Implement map screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/map.tsx
|
|
import React, { useEffect, useState } from 'react';
|
|
import { View, StyleSheet, Text } from 'react-native';
|
|
import MapView, { Marker } from 'react-native-maps';
|
|
import { useRouter } from 'expo-router';
|
|
import { getPharmacies } from '../../services/pharmacies';
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
|
import { colors, spacing } from '../../constants/theme';
|
|
import { Pharmacy } from '../../types';
|
|
|
|
export default function MapScreen() {
|
|
const router = useRouter();
|
|
const [pharmacies, setPharmacies] = useState<Pharmacy[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [region, setRegion] = useState({
|
|
latitude: 40.4168, // Madrid default
|
|
longitude: -3.7038,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
});
|
|
|
|
useEffect(() => {
|
|
const fetchPharmacies = async () => {
|
|
try {
|
|
const data = await getPharmacies();
|
|
setPharmacies(data);
|
|
|
|
// Center map on first pharmacy if available
|
|
if (data.length > 0) {
|
|
setRegion({
|
|
latitude: data[0].latitude,
|
|
longitude: data[0].longitude,
|
|
latitudeDelta: 0.0922,
|
|
longitudeDelta: 0.0421,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching pharmacies:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchPharmacies();
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner message="Cargando farmacias..." />;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<MapView
|
|
style={styles.map}
|
|
region={region}
|
|
onRegionChangeComplete={setRegion}
|
|
showsUserLocation={true}
|
|
showsMyLocationButton={true}
|
|
>
|
|
{pharmacies.map((pharmacy) => (
|
|
<Marker
|
|
key={pharmacy.id}
|
|
coordinate={{
|
|
latitude: pharmacy.latitude,
|
|
longitude: pharmacy.longitude,
|
|
}}
|
|
title={pharmacy.name}
|
|
description={pharmacy.address}
|
|
onCalloutPress={() => router.push(`/pharmacy/${pharmacy.id}`)}
|
|
/>
|
|
))}
|
|
</MapView>
|
|
|
|
<View style={styles.legend}>
|
|
<Text style={styles.legendText}>
|
|
{pharmacies.length} farmacias en el mapa
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
map: {
|
|
flex: 1,
|
|
},
|
|
legend: {
|
|
position: 'absolute',
|
|
bottom: spacing.lg,
|
|
left: spacing.md,
|
|
right: spacing.md,
|
|
backgroundColor: colors.card,
|
|
borderRadius: 8,
|
|
padding: spacing.sm,
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5,
|
|
},
|
|
legendText: {
|
|
fontSize: 14,
|
|
color: colors.text,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/app/\(tabs\)/map.tsx
|
|
git commit -m "feat: implement map screen with pharmacy markers"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 11: Implement Pharmacy Detail Screen
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/app/pharmacy/[id].tsx`
|
|
|
|
- [ ] **Step 1: Create pharmacy detail screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/pharmacy/[id].tsx
|
|
import React, { useEffect, useState } from 'react';
|
|
import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'react-native';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import MapView, { Marker } from 'react-native-maps';
|
|
import { getPharmacy, getPharmacyMedicines } from '../../services/pharmacies';
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
|
import { Pharmacy, PharmacyMedicine } from '../../types';
|
|
|
|
export default function PharmacyDetailScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const router = useRouter();
|
|
const [pharmacy, setPharmacy] = useState<Pharmacy | null>(null);
|
|
const [medicines, setMedicines] = useState<PharmacyMedicine[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
|
|
const fetchPharmacy = async () => {
|
|
try {
|
|
const [pharmData, medData] = await Promise.all([
|
|
getPharmacy(Number(id)),
|
|
getPharmacyMedicines(Number(id)),
|
|
]);
|
|
setPharmacy(pharmData);
|
|
setMedicines(medData);
|
|
} catch (error) {
|
|
console.error('Error fetching pharmacy:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchPharmacy();
|
|
}, [id]);
|
|
|
|
const handleCall = () => {
|
|
if (pharmacy?.phone) {
|
|
Linking.openURL(`tel:${pharmacy.phone}`);
|
|
}
|
|
};
|
|
|
|
const handleDirections = () => {
|
|
if (pharmacy) {
|
|
const url = `https://www.google.com/maps/dir/?api=1&destination=${pharmacy.latitude},${pharmacy.longitude}`;
|
|
Linking.openURL(url);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <LoadingSpinner message="Cargando farmacia..." />;
|
|
}
|
|
|
|
if (!pharmacy) {
|
|
return (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>Farmacia no encontrada</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.name}>{pharmacy.name}</Text>
|
|
</View>
|
|
|
|
<View style={styles.actionsRow}>
|
|
<TouchableOpacity style={styles.actionButton} onPress={handleCall}>
|
|
<Ionicons name="call" size={20} color={colors.primary} />
|
|
<Text style={styles.actionText}>Llamar</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.actionButton} onPress={handleDirections}>
|
|
<Ionicons name="navigate" size={20} color={colors.primary} />
|
|
<Text style={styles.actionText}>Cómo llegar</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.infoSection}>
|
|
<View style={styles.infoRow}>
|
|
<Ionicons name="location" size={18} color={colors.textSecondary} />
|
|
<Text style={styles.infoText}>{pharmacy.address}</Text>
|
|
</View>
|
|
|
|
{pharmacy.phone && (
|
|
<View style={styles.infoRow}>
|
|
<Ionicons name="call" size={18} color={colors.textSecondary} />
|
|
<Text style={styles.infoText}>{pharmacy.phone}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.mapContainer}>
|
|
<MapView
|
|
style={styles.map}
|
|
initialRegion={{
|
|
latitude: pharmacy.latitude,
|
|
longitude: pharmacy.longitude,
|
|
latitudeDelta: 0.01,
|
|
longitudeDelta: 0.01,
|
|
}}
|
|
scrollEnabled={false}
|
|
>
|
|
<Marker
|
|
coordinate={{
|
|
latitude: pharmacy.latitude,
|
|
longitude: pharmacy.longitude,
|
|
}}
|
|
title={pharmacy.name}
|
|
/>
|
|
</MapView>
|
|
</View>
|
|
|
|
<View style={styles.medicinesSection}>
|
|
<Text style={styles.sectionTitle}>
|
|
Medicamentos ({medicines.length})
|
|
</Text>
|
|
|
|
{medicines.length === 0 ? (
|
|
<Text style={styles.noMedicines}>No hay medicamentos disponibles</Text>
|
|
) : (
|
|
medicines.map((med) => (
|
|
<TouchableOpacity
|
|
key={med.id}
|
|
style={styles.medicineCard}
|
|
onPress={() => router.push(`/medicine/${med.medicine_nregistro}`)}
|
|
>
|
|
<View style={styles.medicineInfo}>
|
|
<Text style={styles.medicineName}>{med.medicine_name}</Text>
|
|
<Text style={styles.medicineNregistro}>Reg: {med.medicine_nregistro}</Text>
|
|
</View>
|
|
<View style={styles.medicineStock}>
|
|
<Text style={styles.price}>{med.price.toFixed(2)} €</Text>
|
|
<Text style={styles.stock}>Stock: {med.stock}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
))
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
header: {
|
|
padding: spacing.md,
|
|
backgroundColor: colors.card,
|
|
},
|
|
name: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
},
|
|
actionsRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
padding: spacing.md,
|
|
backgroundColor: colors.card,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.separator,
|
|
},
|
|
actionButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: spacing.sm,
|
|
},
|
|
actionText: {
|
|
marginLeft: spacing.xs,
|
|
color: colors.primary,
|
|
fontWeight: '500',
|
|
},
|
|
infoSection: {
|
|
padding: spacing.md,
|
|
backgroundColor: colors.card,
|
|
marginTop: spacing.sm,
|
|
},
|
|
infoRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
marginBottom: spacing.sm,
|
|
},
|
|
infoText: {
|
|
flex: 1,
|
|
marginLeft: spacing.sm,
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
},
|
|
mapContainer: {
|
|
height: 200,
|
|
marginTop: spacing.sm,
|
|
},
|
|
map: {
|
|
flex: 1,
|
|
},
|
|
medicinesSection: {
|
|
marginTop: spacing.sm,
|
|
padding: spacing.md,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
marginBottom: spacing.md,
|
|
},
|
|
noMedicines: {
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
medicineCard: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
medicineInfo: {
|
|
flex: 1,
|
|
},
|
|
medicineName: {
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
color: colors.text,
|
|
},
|
|
medicineNregistro: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
marginTop: spacing.xs,
|
|
},
|
|
medicineStock: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
price: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.primary,
|
|
},
|
|
stock: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
marginTop: spacing.xs,
|
|
},
|
|
errorContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
errorText: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 2: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/app/pharmacy/
|
|
git commit -m "feat: implement pharmacy detail screen with map and medicines"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 12: Implement Auth Screens
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/app/auth/login.tsx`
|
|
- Create: `frontend-mobile/app/auth/register.tsx`
|
|
- Modify: `frontend-mobile/app/(tabs)/profile.tsx`
|
|
|
|
- [ ] **Step 1: Create login screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/auth/login.tsx
|
|
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Alert
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
|
|
|
export default function LoginScreen() {
|
|
const router = useRouter();
|
|
const { login } = useAuthStore();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleLogin = async () => {
|
|
if (!username || !password) {
|
|
Alert.alert('Error', 'Por favor ingresa usuario y contraseña');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await login(username, password);
|
|
router.replace('/(tabs)');
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Credenciales incorrectas');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<View style={styles.form}>
|
|
<Text style={styles.title}>Iniciar Sesión</Text>
|
|
<Text style={styles.subtitle}>Ingresa tus credenciales para continuar</Text>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Usuario</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
placeholder="Tu usuario"
|
|
placeholderTextColor={colors.textSecondary}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Contraseña</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
placeholder="Tu contraseña"
|
|
placeholderTextColor={colors.textSecondary}
|
|
secureTextEntry
|
|
/>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, isLoading && styles.buttonDisabled]}
|
|
onPress={handleLogin}
|
|
disabled={isLoading}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
{isLoading ? 'Ingresando...' : 'Iniciar Sesión'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.linkButton}
|
|
onPress={() => router.push('/auth/register')}
|
|
>
|
|
<Text style={styles.linkText}>¿No tienes cuenta? Regístrate</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
form: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
inputContainer: {
|
|
marginBottom: spacing.md,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
input: {
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
},
|
|
button: {
|
|
backgroundColor: colors.primary,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
alignItems: 'center',
|
|
marginTop: spacing.md,
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
buttonText: {
|
|
color: colors.textInverse,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
linkButton: {
|
|
marginTop: spacing.lg,
|
|
alignItems: 'center',
|
|
},
|
|
linkText: {
|
|
color: colors.primary,
|
|
fontSize: 14,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 2: Create register screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/auth/register.tsx
|
|
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Alert
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { register } from '../../services/auth';
|
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
|
|
|
export default function RegisterScreen() {
|
|
const router = useRouter();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleRegister = async () => {
|
|
if (!username || !password || !confirmPassword) {
|
|
Alert.alert('Error', 'Por favor completa todos los campos');
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
Alert.alert('Error', 'Las contraseñas no coinciden');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await register(username, password);
|
|
router.replace('/(tabs)');
|
|
} catch (error) {
|
|
Alert.alert('Error', 'No se pudo crear la cuenta');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<View style={styles.form}>
|
|
<Text style={styles.title}>Crear Cuenta</Text>
|
|
<Text style={styles.subtitle}>Regístrate para empezar</Text>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Usuario</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
placeholder="Elige un usuario"
|
|
placeholderTextColor={colors.textSecondary}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Contraseña</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
placeholder="Elige una contraseña"
|
|
placeholderTextColor={colors.textSecondary}
|
|
secureTextEntry
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.inputContainer}>
|
|
<Text style={styles.label}>Confirmar Contraseña</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={confirmPassword}
|
|
onChangeText={setConfirmPassword}
|
|
placeholder="Repite la contraseña"
|
|
placeholderTextColor={colors.textSecondary}
|
|
secureTextEntry
|
|
/>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, isLoading && styles.buttonDisabled]}
|
|
onPress={handleRegister}
|
|
disabled={isLoading}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
{isLoading ? 'Creando cuenta...' : 'Crear Cuenta'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.linkButton}
|
|
onPress={() => router.back()}
|
|
>
|
|
<Text style={styles.linkText}>¿Ya tienes cuenta? Inicia sesión</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
form: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
inputContainer: {
|
|
marginBottom: spacing.md,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
input: {
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
},
|
|
button: {
|
|
backgroundColor: colors.primary,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
alignItems: 'center',
|
|
marginTop: spacing.md,
|
|
},
|
|
buttonDisabled: {
|
|
opacity: 0.6,
|
|
},
|
|
buttonText: {
|
|
color: colors.textInverse,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
linkButton: {
|
|
marginTop: spacing.lg,
|
|
alignItems: 'center',
|
|
},
|
|
linkText: {
|
|
color: colors.primary,
|
|
fontSize: 14,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 3: Update profile screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/(tabs)/profile.tsx
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useAuth } from '../../hooks/useAuth';
|
|
import { colors, spacing, borderRadius } from '../../constants/theme';
|
|
|
|
export default function ProfileScreen() {
|
|
const router = useRouter();
|
|
const { user, isAuthenticated, isLoading, logout, isAdmin } = useAuth();
|
|
|
|
const handleLogout = async () => {
|
|
Alert.alert(
|
|
'Cerrar Sesión',
|
|
'¿Estás seguro que deseas cerrar sesión?',
|
|
[
|
|
{ text: 'Cancelar', style: 'cancel' },
|
|
{
|
|
text: 'Cerrar Sesión',
|
|
style: 'destructive',
|
|
onPress: async () => {
|
|
await logout();
|
|
router.replace('/auth/login');
|
|
}
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.loadingText}>Cargando...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.authPrompt}>
|
|
<Ionicons name="person-outline" size={64} color={colors.textSecondary} />
|
|
<Text style={styles.authTitle}>Inicia Sesión</Text>
|
|
<Text style={styles.authSubtitle}>
|
|
Inicia sesión para acceder a todas las funcionalidades
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => router.push('/auth/login')}
|
|
>
|
|
<Text style={styles.buttonText}>Iniciar Sesión</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.linkButton}
|
|
onPress={() => router.push('/auth/register')}
|
|
>
|
|
<Text style={styles.linkText}>Crear cuenta nueva</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<View style={styles.avatar}>
|
|
<Ionicons name="person" size={40} color={colors.primary} />
|
|
</View>
|
|
<Text style={styles.username}>{user?.username}</Text>
|
|
{isAdmin && <Text style={styles.adminBadge}>Administrador</Text>}
|
|
</View>
|
|
|
|
<View style={styles.menuSection}>
|
|
{isAdmin && (
|
|
<TouchableOpacity style={styles.menuItem}>
|
|
<Ionicons name="settings" size={24} color={colors.text} />
|
|
<Text style={styles.menuText}>Panel Admin</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
<TouchableOpacity style={styles.menuItem}>
|
|
<Ionicons name="heart" size={24} color={colors.text} />
|
|
<Text style={styles.menuText}>Favoritos</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.menuItem}>
|
|
<Ionicons name="notifications" size={24} color={colors.text} />
|
|
<Text style={styles.menuText}>Notificaciones</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.menuItem}>
|
|
<Ionicons name="help-circle" size={24} color={colors.text} />
|
|
<Text style={styles.menuText}>Ayuda</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
|
<Ionicons name="log-out" size={20} color={colors.danger} />
|
|
<Text style={styles.logoutText}>Cerrar Sesión</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
loadingText: {
|
|
textAlign: 'center',
|
|
marginTop: spacing.xxl,
|
|
color: colors.textSecondary,
|
|
},
|
|
authPrompt: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: spacing.xl,
|
|
},
|
|
authTitle: {
|
|
fontSize: 24,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginTop: spacing.lg,
|
|
},
|
|
authSubtitle: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
marginTop: spacing.sm,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
header: {
|
|
alignItems: 'center',
|
|
padding: spacing.xl,
|
|
backgroundColor: colors.card,
|
|
},
|
|
avatar: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 40,
|
|
backgroundColor: colors.background,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
username: {
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginTop: spacing.md,
|
|
},
|
|
adminBadge: {
|
|
fontSize: 12,
|
|
color: colors.primary,
|
|
backgroundColor: '#E3F2FD',
|
|
paddingHorizontal: spacing.sm,
|
|
paddingVertical: spacing.xs,
|
|
borderRadius: borderRadius.sm,
|
|
marginTop: spacing.sm,
|
|
},
|
|
menuSection: {
|
|
marginTop: spacing.md,
|
|
backgroundColor: colors.card,
|
|
},
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: spacing.md,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.separator,
|
|
},
|
|
menuText: {
|
|
flex: 1,
|
|
marginLeft: spacing.md,
|
|
fontSize: 16,
|
|
color: colors.text,
|
|
},
|
|
button: {
|
|
backgroundColor: colors.primary,
|
|
borderRadius: borderRadius.md,
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.xl,
|
|
},
|
|
buttonText: {
|
|
color: colors.textInverse,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
linkButton: {
|
|
marginTop: spacing.md,
|
|
},
|
|
linkText: {
|
|
color: colors.primary,
|
|
fontSize: 14,
|
|
},
|
|
logoutButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: spacing.xl,
|
|
padding: spacing.md,
|
|
backgroundColor: colors.card,
|
|
borderRadius: borderRadius.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.danger,
|
|
},
|
|
logoutText: {
|
|
marginLeft: spacing.sm,
|
|
color: colors.danger,
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: implement auth screens (login, register) and profile screen"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 13: Configure Root Layout with Auth Check
|
|
|
|
**Files:**
|
|
- Modify: `frontend-mobile/app/_layout.tsx`
|
|
|
|
- [ ] **Step 1: Update root layout with auth provider**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/_layout.tsx
|
|
import { useEffect } from 'react';
|
|
import { Stack } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
import { useAuthStore } from '../store/authStore';
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
export default function RootLayout() {
|
|
const { checkAuth } = useAuthStore();
|
|
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, []);
|
|
|
|
return (
|
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<Stack>
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen
|
|
name="medicine/[id]"
|
|
options={{
|
|
title: 'Medicamento',
|
|
headerTintColor: '#007AFF',
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="pharmacy/[id]"
|
|
options={{
|
|
title: 'Farmacia',
|
|
headerTintColor: '#007AFF',
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="auth/login"
|
|
options={{
|
|
title: 'Iniciar Sesión',
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="auth/register"
|
|
options={{
|
|
title: 'Registrarse',
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<StatusBar style="auto" />
|
|
</QueryClientProvider>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/app/_layout.tsx
|
|
git commit -m "feat: add auth check on app startup"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 14: Configure EAS Build
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/eas.json`
|
|
- Create: `frontend-mobile/.gitignore`
|
|
|
|
- [ ] **Step 1: Create EAS configuration**
|
|
|
|
```json
|
|
{
|
|
"cli": {
|
|
"version": ">= 12.0.0"
|
|
},
|
|
"build": {
|
|
"development": {
|
|
"developmentClient": true,
|
|
"distribution": "internal"
|
|
},
|
|
"preview": {
|
|
"distribution": "internal"
|
|
},
|
|
"production": {}
|
|
},
|
|
"submit": {
|
|
"production": {
|
|
"ios": {
|
|
"appleId": "",
|
|
"ascAppId": "",
|
|
"appleTeamId": ""
|
|
},
|
|
"android": {
|
|
"serviceAccountKeyPath": "./google-service-account.json"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Create .gitignore for mobile**
|
|
|
|
```gitignore
|
|
# Expo
|
|
.expo/
|
|
dist/
|
|
web-build/
|
|
|
|
# Native
|
|
ios/
|
|
android/
|
|
*.jks
|
|
*.p8
|
|
*.p12
|
|
*.key
|
|
*.mobileprovision
|
|
*.orig.*
|
|
|
|
# Metro
|
|
.metro-health-check*
|
|
|
|
# debug
|
|
npm-debug.*
|
|
yarn-debug.*
|
|
yarn-error.*
|
|
|
|
# env files
|
|
.env
|
|
.env.local
|
|
.env.production
|
|
|
|
# EAS
|
|
eas-cli.json
|
|
|
|
# Dependencies
|
|
node_modules/
|
|
|
|
# OS
|
|
.DS_Store
|
|
Thumbs.db
|
|
|
|
# Build artifacts
|
|
*.apk
|
|
*.aab
|
|
*.ipa
|
|
```
|
|
|
|
- [ ] **Step 3: Update root package.json with mobile scripts**
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"dev": "npm-run-all --parallel dev:backend dev:frontend",
|
|
"dev:backend": "npm run dev --prefix backend",
|
|
"dev:frontend": "npm run dev --prefix frontend",
|
|
"dev:mobile": "cd frontend-mobile && npx expo start",
|
|
"dev:mobile:android": "cd frontend-mobile && npx expo start --android",
|
|
"dev:mobile:ios": "cd frontend-mobile && npx expo start --ios",
|
|
"start": "npm-run-all --parallel start:backend start:frontend",
|
|
"start:backend": "npm start --prefix backend",
|
|
"start:frontend": "npm run preview --prefix frontend",
|
|
"install:all": "npm install && npm install --prefix backend && npm install --prefix frontend && npm install --prefix frontend-mobile",
|
|
"build:web": "npm run build --prefix frontend",
|
|
"build:mobile": "cd frontend-mobile && eas build",
|
|
"submit:android": "cd frontend-mobile && eas submit --platform android",
|
|
"submit:ios": "cd frontend-mobile && eas submit --platform ios",
|
|
"cap:sync": "npm run build:web && cap sync",
|
|
"cap:copy": "npm run build:web && cap copy",
|
|
"cap:open:android": "cap open android",
|
|
"cap:open:ios": "cap open ios",
|
|
"cap:run:android": "npm run build:web && cap run android",
|
|
"cap:run:ios": "npm run build:web && cap run ios"
|
|
}
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/eas.json frontend-mobile/.gitignore package.json
|
|
git commit -m "feat: configure EAS Build and add mobile scripts"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 15: Add Push Notifications (Native Extra)
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/services/notifications.ts`
|
|
- Modify: `frontend-mobile/app/_layout.tsx`
|
|
|
|
- [ ] **Step 1: Create notifications service**
|
|
|
|
```typescript
|
|
// frontend-mobile/services/notifications.ts
|
|
import * as Notifications from 'expo-notifications';
|
|
import * as Device from 'expo-device';
|
|
import { Platform } from 'react-native';
|
|
|
|
Notifications.setNotificationHandler({
|
|
handleNotification: async () => ({
|
|
shouldShowAlert: true,
|
|
shouldPlaySound: true,
|
|
shouldSetBadge: true,
|
|
}),
|
|
});
|
|
|
|
export async function registerForPushNotifications() {
|
|
if (!Device.isDevice) {
|
|
console.log('Push notifications require a physical device');
|
|
return null;
|
|
}
|
|
|
|
const { status: existingStatus } = await Notifications.getPermissionsAsync();
|
|
let finalStatus = existingStatus;
|
|
|
|
if (existingStatus !== 'granted') {
|
|
const { status } = await Notifications.requestPermissionsAsync();
|
|
finalStatus = status;
|
|
}
|
|
|
|
if (finalStatus !== 'granted') {
|
|
console.log('Failed to get push token for push notification');
|
|
return null;
|
|
}
|
|
|
|
const token = await Notifications.getExpoPushTokenAsync();
|
|
|
|
if (Platform.OS === 'android') {
|
|
Notifications.setNotificationChannelAsync('default', {
|
|
name: 'default',
|
|
importance: Notifications.AndroidImportance.MAX,
|
|
vibrationPattern: [0, 250, 250, 250],
|
|
lightColor: '#007AFF',
|
|
});
|
|
}
|
|
|
|
return token.data;
|
|
}
|
|
|
|
export async function scheduleMedicineAvailabilityNotification(
|
|
medicineName: string,
|
|
pharmacyName: string
|
|
) {
|
|
await Notifications.scheduleNotificationAsync({
|
|
content: {
|
|
title: 'Medicamento disponible',
|
|
body: `${medicineName} está disponible en ${pharmacyName}`,
|
|
data: { type: 'medicine_availability' },
|
|
},
|
|
trigger: null, // Immediate
|
|
});
|
|
}
|
|
|
|
export async function addNotificationListener(
|
|
handler: (notification: Notifications.Notification) => void
|
|
) {
|
|
return Notifications.addNotificationReceivedListener(handler);
|
|
}
|
|
|
|
export async function addNotificationResponseListener(
|
|
handler: (response: Notifications.NotificationResponse) => void
|
|
) {
|
|
return Notifications.addNotificationResponseReceivedListener(handler);
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Update root layout to initialize notifications**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/_layout.tsx (add to imports and useEffect)
|
|
import { useEffect, useRef } from 'react';
|
|
import { Stack } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
import * as Notifications from 'expo-notifications';
|
|
import { useAuthStore } from '../store/authStore';
|
|
import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
export default function RootLayout() {
|
|
const { checkAuth } = useAuthStore();
|
|
const notificationListener = useRef<Notifications.Subscription>();
|
|
const responseListener = useRef<Notifications.Subscription>();
|
|
|
|
useEffect(() => {
|
|
checkAuth();
|
|
|
|
// Setup push notifications
|
|
registerForPushNotifications();
|
|
|
|
notificationListener.current = addNotificationListener((notification) => {
|
|
console.log('Notification received:', notification);
|
|
});
|
|
|
|
responseListener.current = addNotificationResponseListener((response) => {
|
|
console.log('Notification clicked:', response);
|
|
});
|
|
|
|
return () => {
|
|
if (notificationListener.current) {
|
|
Notifications.removeNotificationSubscription(notificationListener.current);
|
|
}
|
|
if (responseListener.current) {
|
|
Notifications.removeNotificationSubscription(responseListener.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// ... rest of component remains the same
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: add push notifications support"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 16: Add Barcode Scanner (Native Extra)
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/components/BarcodeScanner.tsx`
|
|
- Create: `frontend-mobile/app/scanner.tsx`
|
|
|
|
- [ ] **Step 1: Create barcode scanner component**
|
|
|
|
```typescript
|
|
// frontend-mobile/components/BarcodeScanner.tsx
|
|
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { CameraView, CameraType, useCameraPermissions } from 'expo-camera';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { colors, spacing, borderRadius } from '../constants/theme';
|
|
|
|
interface BarcodeScannerProps {
|
|
onBarcodeScanned: (barcode: string) => void;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProps) {
|
|
const [permission, requestPermission] = useCameraPermissions();
|
|
const [scanned, setScanned] = useState(false);
|
|
|
|
if (!permission) {
|
|
return <View style={styles.container} />;
|
|
}
|
|
|
|
if (!permission.granted) {
|
|
return (
|
|
<View style={styles.permissionContainer}>
|
|
<Ionicons name="camera" size={64} color={colors.textSecondary} />
|
|
<Text style={styles.permissionTitle}>Permiso de cámara requerido</Text>
|
|
<Text style={styles.permissionText}>
|
|
Necesitamos acceso a la cámara para escanear códigos de barras
|
|
</Text>
|
|
<TouchableOpacity style={styles.permissionButton} onPress={requestPermission}>
|
|
<Text style={styles.permissionButtonText}>Conceder permiso</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={styles.cancelButton} onPress={onClose}>
|
|
<Text style={styles.cancelButtonText}>Cancelar</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
|
|
if (scanned) return;
|
|
setScanned(true);
|
|
onBarcodeScanned(data);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<CameraView
|
|
style={StyleSheet.absoluteFillObject}
|
|
facing="back"
|
|
barcodeScannerSettings={{
|
|
barcodeTypes: ['ean13', 'ean8', 'upc_a', 'upc_e'],
|
|
}}
|
|
onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
|
|
/>
|
|
|
|
<View style={styles.overlay}>
|
|
<View style={styles.scannerFrame}>
|
|
<View style={styles.corner} style={[styles.corner, styles.topLeft]} />
|
|
<View style={[styles.corner, styles.topRight]} />
|
|
<View style={[styles.corner, styles.bottomLeft]} />
|
|
<View style={[styles.corner, styles.bottomRight]} />
|
|
</View>
|
|
|
|
<Text style={styles.instruction}>
|
|
Apunta la cámara al código de barras del medicamento
|
|
</Text>
|
|
|
|
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
|
|
<Ionicons name="close" size={24} color={colors.textInverse} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{scanned && (
|
|
<View style={styles.scannedOverlay}>
|
|
<TouchableOpacity
|
|
style={styles.scanAgainButton}
|
|
onPress={() => setScanned(false)}
|
|
>
|
|
<Text style={styles.scanAgainText}>Escanear de nuevo</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#000',
|
|
},
|
|
permissionContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.background,
|
|
padding: spacing.xl,
|
|
},
|
|
permissionTitle: {
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
color: colors.text,
|
|
marginTop: spacing.lg,
|
|
},
|
|
permissionText: {
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
marginTop: spacing.sm,
|
|
marginBottom: spacing.xl,
|
|
},
|
|
permissionButton: {
|
|
backgroundColor: colors.primary,
|
|
borderRadius: borderRadius.md,
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.xl,
|
|
},
|
|
permissionButtonText: {
|
|
color: colors.textInverse,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
cancelButton: {
|
|
marginTop: spacing.md,
|
|
},
|
|
cancelButtonText: {
|
|
color: colors.textSecondary,
|
|
fontSize: 14,
|
|
},
|
|
overlay: {
|
|
flex: 1,
|
|
backgroundColor: 'transparent',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
scannerFrame: {
|
|
width: 250,
|
|
height: 250,
|
|
borderWidth: 2,
|
|
borderColor: 'transparent',
|
|
position: 'relative',
|
|
},
|
|
corner: {
|
|
position: 'absolute',
|
|
width: 30,
|
|
height: 30,
|
|
borderColor: colors.primary,
|
|
},
|
|
topLeft: {
|
|
top: 0,
|
|
left: 0,
|
|
borderTopWidth: 3,
|
|
borderLeftWidth: 3,
|
|
},
|
|
topRight: {
|
|
top: 0,
|
|
right: 0,
|
|
borderTopWidth: 3,
|
|
borderRightWidth: 3,
|
|
},
|
|
bottomLeft: {
|
|
bottom: 0,
|
|
left: 0,
|
|
borderBottomWidth: 3,
|
|
borderLeftWidth: 3,
|
|
},
|
|
bottomRight: {
|
|
bottom: 0,
|
|
right: 0,
|
|
borderBottomWidth: 3,
|
|
borderRightWidth: 3,
|
|
},
|
|
instruction: {
|
|
color: colors.textInverse,
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
marginTop: spacing.xl,
|
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
borderRadius: borderRadius.sm,
|
|
},
|
|
closeButton: {
|
|
position: 'absolute',
|
|
top: spacing.xl,
|
|
right: spacing.xl,
|
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
|
borderRadius: 20,
|
|
padding: spacing.sm,
|
|
},
|
|
scannedOverlay: {
|
|
position: 'absolute',
|
|
bottom: spacing.xxl,
|
|
left: spacing.xl,
|
|
right: spacing.xl,
|
|
},
|
|
scanAgainButton: {
|
|
backgroundColor: colors.primary,
|
|
borderRadius: borderRadius.md,
|
|
padding: spacing.md,
|
|
alignItems: 'center',
|
|
},
|
|
scanAgainText: {
|
|
color: colors.textInverse,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 2: Create scanner screen**
|
|
|
|
```typescript
|
|
// frontend-mobile/app/scanner.tsx
|
|
import React, { useState } from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { BarcodeScanner } from '../components/BarcodeScanner';
|
|
import { searchMedicines } from '../services/medicines';
|
|
|
|
export default function ScannerScreen() {
|
|
const router = useRouter();
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
|
|
const handleBarcodeScanned = async (barcode: string) => {
|
|
setIsSearching(true);
|
|
try {
|
|
// Try to find medicine by barcode/registration number
|
|
const results = await searchMedicines(barcode);
|
|
if (results.length > 0) {
|
|
router.push(`/medicine/${results[0].nregistro}`);
|
|
} else {
|
|
// Fallback: try direct lookup
|
|
router.push(`/medicine/${barcode}`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error searching medicine:', error);
|
|
router.push(`/medicine/${barcode}`);
|
|
} finally {
|
|
setIsSearching(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
router.back();
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<BarcodeScanner
|
|
onBarcodeScanned={handleBarcodeScanned}
|
|
onClose={handleClose}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
});
|
|
```
|
|
|
|
- [ ] **Step 3: Add scanner button to home screen**
|
|
|
|
```typescript
|
|
// Add to frontend-mobile/app/(tabs)/index.tsx - add import and button
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { TouchableOpacity } from 'react-native';
|
|
|
|
// Add this button next to SearchBar
|
|
<TouchableOpacity
|
|
style={styles.scannerButton}
|
|
onPress={() => router.push('/scanner')}
|
|
>
|
|
<Ionicons name="scan" size={24} color={colors.primary} />
|
|
</TouchableOpacity>
|
|
|
|
// Add to styles
|
|
scannerButton: {
|
|
position: 'absolute',
|
|
right: spacing.md,
|
|
top: spacing.md,
|
|
backgroundColor: colors.card,
|
|
borderRadius: 20,
|
|
padding: spacing.sm,
|
|
},
|
|
```
|
|
|
|
- [ ] **Step 4: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: add barcode scanner for medicine lookup"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 17: Add Biometrics (Native Extra)
|
|
|
|
**Files:**
|
|
- Create: `frontend-mobile/services/biometrics.ts`
|
|
- Modify: `frontend-mobile/app/auth/login.tsx`
|
|
|
|
- [ ] **Step 1: Create biometrics service**
|
|
|
|
```typescript
|
|
// frontend-mobile/services/biometrics.ts
|
|
import * as LocalAuthentication from 'expo-local-authentication';
|
|
import * as SecureStore from 'expo-secure-store';
|
|
|
|
export async function isBiometricsAvailable(): Promise<boolean> {
|
|
const compatible = await LocalAuthentication.hasHardwareAsync();
|
|
const enrolled = await LocalAuthentication.isEnrolledAsync();
|
|
return compatible && enrolled;
|
|
}
|
|
|
|
export async function authenticateWithBiometrics(): Promise<boolean> {
|
|
try {
|
|
const result = await LocalAuthentication.authenticateAsync({
|
|
promptMessage: 'Inicia sesión con biometría',
|
|
cancelLabel: 'Cancelar',
|
|
disableDeviceFallback: false,
|
|
});
|
|
return result.success;
|
|
} catch (error) {
|
|
console.error('Biometric authentication error:', error);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
export async function saveBiometricCredentials(username: string): Promise<void> {
|
|
await SecureStore.setItemAsync('biometric_username', username);
|
|
}
|
|
|
|
export async function getBiometricUsername(): Promise<string | null> {
|
|
return await SecureStore.getItemAsync('biometric_username');
|
|
}
|
|
|
|
export async function clearBiometricCredentials(): Promise<void> {
|
|
await SecureStore.deleteItemAsync('biometric_username');
|
|
}
|
|
```
|
|
|
|
- [ ] **Step 2: Update login screen with biometrics**
|
|
|
|
```typescript
|
|
// Add to frontend-mobile/app/auth/login.tsx
|
|
import {
|
|
isBiometricsAvailable,
|
|
authenticateWithBiometrics,
|
|
saveBiometricCredentials,
|
|
getBiometricUsername
|
|
} from '../../services/biometrics';
|
|
|
|
// Add state
|
|
const [biometricsAvailable, setBiometricsAvailable] = useState(false);
|
|
const [biometricUsername, setBiometricUsername] = useState<string | null>(null);
|
|
|
|
// Add useEffect
|
|
useEffect(() => {
|
|
checkBiometrics();
|
|
}, []);
|
|
|
|
const checkBiometrics = async () => {
|
|
const available = await isBiometricsAvailable();
|
|
setBiometricsAvailable(available);
|
|
if (available) {
|
|
const savedUsername = await getBiometricUsername();
|
|
setBiometricUsername(savedUsername);
|
|
}
|
|
};
|
|
|
|
const handleBiometricLogin = async () => {
|
|
const success = await authenticateWithBiometrics();
|
|
if (success && biometricUsername) {
|
|
setIsLoading(true);
|
|
try {
|
|
// Use stored password or implement token-based auth
|
|
await login(biometricUsername, ''); // You may need to adjust this
|
|
router.replace('/(tabs)');
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Error al autenticar con biometría');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
// After successful login, save for biometrics
|
|
const handleLogin = async () => {
|
|
// ... existing login logic
|
|
if (success) {
|
|
await saveBiometricCredentials(username);
|
|
}
|
|
};
|
|
|
|
// Add biometric button in the form
|
|
{biometricsAvailable && biometricUsername && (
|
|
<TouchableOpacity
|
|
style={styles.biometricButton}
|
|
onPress={handleBiometricLogin}
|
|
>
|
|
<Ionicons name="finger-print" size={24} color={colors.primary} />
|
|
<Text style={styles.biometricText}>
|
|
Iniciar sesión con biometría
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
// Add styles
|
|
biometricButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: spacing.lg,
|
|
padding: spacing.md,
|
|
backgroundColor: colors.background,
|
|
borderRadius: borderRadius.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.primary,
|
|
},
|
|
biometricText: {
|
|
marginLeft: spacing.sm,
|
|
color: colors.primary,
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
},
|
|
```
|
|
|
|
- [ ] **Step 3: Commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add frontend-mobile/
|
|
git commit -m "feat: add biometric authentication support"
|
|
```
|
|
|
|
---
|
|
|
|
## Task 18: Test and Verify
|
|
|
|
**Files:**
|
|
- None (testing only)
|
|
|
|
- [ ] **Step 1: Run Expo development server**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npx expo start --clear
|
|
```
|
|
|
|
Expected: Dev server starts, QR code displayed
|
|
|
|
- [ ] **Step 2: Test on iOS Simulator (if Mac)**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npx expo start --ios
|
|
```
|
|
|
|
Expected: App launches in simulator
|
|
|
|
- [ ] **Step 3: Test on Android Emulator**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder/frontend-mobile
|
|
npx expo start --android
|
|
```
|
|
|
|
Expected: App launches in emulator
|
|
|
|
- [ ] **Step 4: Verify navigation**
|
|
|
|
- [ ] Tab navigation works (Home, Map, Profile)
|
|
- [ ] Medicine search returns results
|
|
- [ ] Medicine detail shows pharmacies
|
|
- [ ] Map shows pharmacy markers
|
|
- [ ] Pharmacy detail shows medicines
|
|
- [ ] Login/logout works
|
|
|
|
- [ ] **Step 5: Final commit**
|
|
|
|
```bash
|
|
cd /home/f80ans0/Projects/Webs/FarmaFinder
|
|
git add .
|
|
git commit -m "feat: complete FarmaFinder Mobile MVP with native extras"
|
|
```
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
| Task | Description | Files |
|
|
|------|-------------|-------|
|
|
| 1 | Initialize Expo project | package.json, app.json, tsconfig.json, babel.config.js |
|
|
| 2 | Setup navigation | app/_layout.tsx, (tabs)/_layout.tsx, screen files |
|
|
| 3 | Create types | types/index.ts |
|
|
| 4 | Create API services | services/api.ts, medicines.ts, pharmacies.ts, auth.ts |
|
|
| 5 | Create state management | store/authStore.ts, searchStore.ts, hooks/useAuth.ts |
|
|
| 6 | Create theme | constants/theme.ts |
|
|
| 7 | Create UI components | components/*.tsx |
|
|
| 8 | Implement Home screen | app/(tabs)/index.tsx |
|
|
| 9 | Implement Medicine detail | app/medicine/[id].tsx |
|
|
| 10 | Implement Map screen | app/(tabs)/map.tsx |
|
|
| 11 | Implement Pharmacy detail | app/pharmacy/[id].tsx |
|
|
| 12 | Implement Auth screens | app/auth/login.tsx, register.tsx, profile.tsx |
|
|
| 13 | Configure root layout | app/_layout.tsx |
|
|
| 14 | Configure EAS Build | eas.json, .gitignore, package.json |
|
|
| 15 | Add Push Notifications | services/notifications.ts |
|
|
| 16 | Add Barcode Scanner | components/BarcodeScanner.tsx, app/scanner.tsx |
|
|
| 17 | Add Biometrics | services/biometrics.ts, login.tsx |
|
|
| 18 | Test and verify | Manual testing |
|
|
|
|
---
|
|
|
|
## Next Steps After Implementation
|
|
|
|
1. **Configure EAS Build**: Set up Expo account and EAS
|
|
2. **Test on real devices**: Use Expo Go or development build
|
|
3. **Configure push notifications**: Set up FCM/APNs
|
|
4. **Add app icons and splash screens**: Design assets
|
|
5. **Configure deep links**: Set up URL scheme
|
|
6. **Submit to App Store**: Follow Apple guidelines
|
|
7. **Submit to Google Play**: Follow Google guidelines
|