isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor QRScannerScreen and ScannedDataBox, alot of broken functions

Browse Source
This commit is contained in:
Isky
2024-06-30 01:32:39 +08:00
parent 7b396073f7
commit 0f9453ef45
3 changed files with 137 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
README.md
View File

@@ -1,21 +1,35 @@
# SafeQR Code Scanner
SafeQR is a React Native application that allows users to scan QR codes using their mobile device's camera. The app provides a user-friendly interface with a bottom navigation bar for easy access to different sections such as QR Scanner, History, Settings, and Profile.
SafeQR Code Scanner is a React Native application that allows users to scan QR codes securely. The app includes features such as scanning QR codes using the camera or image gallery, checking the security of URLs via VirusTotal, bookmarking scanned QR codes, and viewing detailed scan results.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [File Structure](#file-structure)
- [Components](#components)
- [Navigation](#navigation)
- [Screens](#screens)
- [Dependencies](#dependencies)
- [Contributing](#contributing)
- [License](#license)
## Features
- **QR Code Scanning**: Scan QR codes and display the scanned data.
- **History**: (Placeholder) View the history of scanned QR codes.
- **Settings**: (Placeholder) Adjust application settings.
- **Profile**: (Placeholder) View and edit user profile.
- Scan QR codes using the device camera
- Scan QR codes from the image gallery
- Check the security of scanned URLs via VirusTotal
- Bookmark and manage scanned QR codes
- View detailed scan results and security headers
## Installation
1. **Clone the Repository**:
```sh
git clone https://github.com/safeqr/SafeQR_Front_End_Mobile.git
cd SafeQR_Front_End_Mobile
git clone https://github.com/yourusername/safeqr.git
cd safeqr
```
2. **Install Dependencies**:
@@ -24,75 +38,94 @@ SafeQR is a React Native application that allows users to scan QR codes using th
npm install
```
3. **Start the Application**:
```sh
npx expo start
```
3. **Install Expo CLI** (if step 3 causes expo error):
3. **Install Expo CLI** (if not already installed):
```sh
npm install -g expo-cli
```
4. **Start the Application**:
cd to project directory **SafeQR**
```shell
npx expo start
```
5. **Run on Device**:
- For iOS, use the Expo Go app.
- For Android, use the Expo Go app or an emulator.
- For Windows/MacOS Install Android studio and stat the [[Android Emulator]] **first**. Once Expo and Emulater has started, press a on the terminal to connect expo to emulator
## Usage
1. Open the app on your device.
2. Navigate to the **QR Scanner** tab.
3. Point your camera at a QR code.
4. The app will scan and display the QR code data below the camera view.
5. Use the bottom navigation to explore other sections (History,QR Scanner, Settings).
2. Use the camera to scan a QR code or select an image from your gallery.
3. View the scan results and security details.
4. Bookmark important QR codes for later reference.
## Project Structure
## File Structure
The project structure is organized as follows:
```
.//OTHER Node_modules
├── App.tsx
├── package.json
├── tsconfig.json
├── assets
│ └── ...
├── components
│ ├── CameraView.tsx
safeqr-code-scanner/
├── assets/
│ └── ScanIcon3.png
├── components/
│ ├── ScannedDataBox.tsx
│ └── CustomTabBar.tsx
├── screens
│ ├── QRScannerScreen.tsx
├── navigation/
│ ├── AppNavigator.tsx
│ └── BottomTabNavigator.tsx
├── screens/
│ ├── HistoryScreen.tsx
│ ├── QRScannerScreen.tsx
│ └── SettingsScreen.tsx
├── navigation
│ └── AppNavigator.tsx
└── types.ts
├── types/
│ └── index.ts
├── App.tsx
├── README.md
└── package.json
```
### Components
Reusable components used throughout the application.
- `ScannedDataBox.tsx`: Displays detailed information about the scanned QR code.
- `CustomTabBar.tsx`: Custom tab bar for navigation.
### Navigation
Handles the navigation structure of the application.
- `AppNavigator.tsx`: Main navigator that includes the bottom tab navigator.
- `BottomTabNavigator.tsx`: Defines the bottom tab navigation.
### Screens
Individual screens used in the application.
- `HistoryScreen.tsx`: Displays the history of scanned QR codes and bookmarks.
- `QRScannerScreen.tsx`: Main screen for scanning QR codes using the camera.
- `SettingsScreen.tsx`: Displays app settings and additional information.
## Dependencies
The following dependencies are required to run this project:
The project relies on the following major dependencies:
"@expo/vector-icons": "^14.0.2",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"axios": "^1.7.2",
"expo": "~51.0.11",
"expo-camera": "~15.0.10",
"expo-image-picker": "~15.0.5",
"expo-status-bar": "~1.12.1",
"react": "18.2.0",
"react-native": "0.74.2",
"react-native-safe-area-context": "^4.10.4",
"react-native-screens": "^3.31.1"
- `react-native`: For building native apps using React.
- `expo-camera`: For camera access and barcode scanning.
- `react-native-qrcode-svg`: For generating QR codes.
- `axios`: For making HTTP requests to the VirusTotal API.
- `@react-navigation/native`: For navigation within the app.
- `@expo/vector-icons`: For using vector icons in the app.
- `expo-image-picker`: For selecting images from the device gallery.
- `react-native-reanimated`: For animations and gesture handling.
### Installation
### Installation of dependencies
To install the dependencies, run the following command(it will auto read package.json):
```bash
npm install
```
```