142 lines
5.1 KiB
Markdown
142 lines
5.1 KiB
Markdown
## Casadoc: Technical specifications describing cross-platform feasibility
|
||
|
||
##### Summary
|
||
|
||
The strategic choice, considering high quality UI/UX and performance over a quick-fix migration (using a framework like Ionic), is **React Native**. While it requires more initial work than Ionic, the result will be a robust mobile app that feels truly native on both iOS and Android. The frontend will have to be written in JavaScript entirely but it offers a significantly faster, smoother *native* feel. The PHP code would only serve as the backend API.
|
||
|
||
##### React Native
|
||
|
||
* **Architecture:** Renders true native mobile UI components using JavaScript.
|
||
|
||
* **Frontend Migration:** We won't be able to use the original HTML/CSS output rendered by the PHP code directly. We'll have to rewrite the UI using JSX (React).
|
||
|
||
* **Language:** JavaScript/TypeScript.
|
||
|
||
* **Native Features:** React Native supports a large ecosystem of native modules.
|
||
|
||
#### Technical strategy for migrating Casadoc from PHP to React Native
|
||
|
||
1. **Architectural Shift**
|
||
|
||
**Decoupling**. Currently, our PHP code likely mixes logic and UI (e.g., fetching data from DB and immediately rendering an HTML table).
|
||
|
||
- **Current State:** PHP $\rightarrow$ HTML/CSS (Browser renders UI)
|
||
|
||
- **Future State:** PHP $\rightarrow$ JSON Data $\rightarrow$ React Native (Mobile renders UI)
|
||
|
||
2. **Category-Wise Migration Plan**
|
||
|
||
- **The Backend (PHP): Transformation to API**
|
||
|
||
We do not need to rewrite the backend logic (code), but we must change *how* it delivers data.
|
||
|
||
- Create a new set of endpoints specifically for the mobile app.
|
||
|
||
- **Authentication:**
|
||
|
||
- *Current:* Likely uses Sessions/Cookies (`$_SESSION`).
|
||
|
||
- *New:* Switch to **JWT (JSON Web Tokens)**. The app will send a "Token" with every request to prove who the user is.
|
||
|
||
- **Response Format:**
|
||
|
||
- Stop returning `view('profile.index', $data)`
|
||
|
||
- Start returning `json_encode($data)` or `return response()->json($data)`
|
||
|
||
- **The Frontend (React Native): Complete Rewrite**
|
||
|
||
Most of the work will go into the frontend development since we can't use the HTML/CSS given by PHP directly for rendering.
|
||
|
||
**UI Components:**
|
||
|
||
- HTML `<div>` becomes `<View>`
|
||
|
||
- HTML `<span>` or `<p>` becomes `<Text>`
|
||
|
||
- HTML `<img>` becomes `<Image>`
|
||
|
||
- HTML `<button>` becomes `<TouchableOpacity>`
|
||
|
||
**Styling:**
|
||
|
||
- CSS is replaced by **StyleSheet** objects (JavaScript objects that look like CSS).
|
||
|
||
**Navigation:**
|
||
|
||
- Unlike the web app which uses URLs, mobile app uses Stack/Tab navigation. We'll use a library like **React Navigation** to move between screens.
|
||
|
||
- ###### **The Database (DB)**
|
||
|
||
- **Master DB:** Stays as MySQL/MariaDB on the server.
|
||
|
||
- **Local Storage:** For features like caching, we'll use **AsyncStorage**. For heavy offline data (e.g., viewing documents offline), we'll use **SQLite** on the device.
|
||
|
||
3. **Example code comparison**
|
||
|
||
A simple "User Profile" card change from PHP to React Native.
|
||
|
||
- **Current PHP (Blade/Standard)**
|
||
|
||
```php
|
||
<div class="user-card">
|
||
<img src="<?php echo $user->avatar; ?>" />
|
||
<h1><?php echo $user->name; ?></h1>
|
||
<p><?php echo $user->email; ?></p>
|
||
</div>
|
||
```
|
||
|
||
- **New React Native (JSX)**
|
||
|
||
```javascript
|
||
// UserProfile.js
|
||
import React from 'react';
|
||
import { View, Text, Image, StyleSheet } from 'react-native';
|
||
|
||
const UserProfile = ({ user }) => {
|
||
return (
|
||
<View style={styles.card}>
|
||
<Image source={{ uri: user.avatar }} style={styles.avatar} />
|
||
<Text style={styles.name}>{user.name}</Text>
|
||
<Text style={styles.email}>{user.email}</Text>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// Styles are defined in JS, not CSS files
|
||
const styles = StyleSheet.create({
|
||
card: { padding: 20, backgroundColor: '#fff' },
|
||
name: { fontSize: 18, fontWeight: 'bold' }
|
||
});
|
||
|
||
export default UserProfile;
|
||
```
|
||
|
||
### Tentative roadmap
|
||
|
||
##### **Phase 1: API Foundation (PHP Side)**
|
||
|
||
1. **Environment:** Set up a route group (e.g., `/api/v1/`) in the PHP project.
|
||
|
||
2. **Auth:** Implement an endpoint `/api/login` that accepts email/password and returns a JWT Token.
|
||
|
||
3. **Read-Only Data:** Create endpoints to *fetch* data (e.g., `GET /documents`).
|
||
|
||
##### **Phase 2: The Basic Blueprint App (React Native Side)**
|
||
|
||
1. **Setup:** Initialize the project using **React Native CLI** (for maximum control) or **Expo**.
|
||
|
||
2. **Navigation:** Build the "Skeleton" – Login Screen, Dashboard (List View), and Detail Screen.
|
||
|
||
3. **Connection:** Write a service function in JS to `fetch` data from the new PHP API and display it.
|
||
|
||
##### **Phase 3: Native Features & Interactivity**
|
||
|
||
1. **Camera:** Add a feature to "Scan Document" using a React Native Camera library.
|
||
|
||
2. **Upload:** Create a PHP endpoint to accept `POST` file uploads and wire it to the camera.
|
||
|
||
3. **Push Notifications:** (*optional*) Integrate Firebase (FCM) to notify users when a document status changes.
|
||
|
||
|