diff --git a/client/app.json b/client/app.json index 5fc73c6..de4c789 100644 --- a/client/app.json +++ b/client/app.json @@ -11,7 +11,8 @@ "ios": { "supportsTablet": true, "infoPlist": { - "NSCameraUsageDescription": "deze app gebruikt de camera om de signs te kunnen vertalen." + "NSCameraUsageDescription": "deze app gebruikt de camera om de signs te kunnen vertalen.", + "ITSAppUsesNonExemptEncryption": false }, "bundleIdentifier": "com.anonymous.signapse" }, diff --git a/client/eas.json b/client/eas.json index 37e5adf..4694626 100644 --- a/client/eas.json +++ b/client/eas.json @@ -15,7 +15,17 @@ } }, "production": { - "autoIncrement": true + "autoIncrement": true, + "distribution": "store", + "env":{ + "EXPO_PUBLIC_API_URL":"https://api.smart-gestures.devbitapp.be" + }, + "android": { + "buildType": "app-bundle" + }, + "ios": { + "image": "latest" + } } }, "submit": { diff --git a/client/package.json b/client/package.json index 8662428..19f0aed 100644 --- a/client/package.json +++ b/client/package.json @@ -8,6 +8,12 @@ "ios": "expo start --ios", "web": "expo start --web", "export": "expo export -p web", + "prod:build:android": "npx eas build --platform android --profile production --clear-cache", + "prod:build:ios": "npx eas build --platform ios --profile production --clear-cache", + "dev:build:android": "npx eas build --platform android --profile development --clear-cache", + "dev:build:ios": "npx eas build --platform ios --profile development --clear-cache", + "preview:build:android": "npx eas build --platform android --profile preview --clear-cache", + "preview:build:ios": "npx eas build --platform ios --profile preview --clear-cache", "serve": "expo serve", "lint": "expo lint", "prepare": "husky" diff --git a/docs/Getting Started/Development/buildingGuide.md b/docs/Getting Started/Development/buildingGuide.md index cc950c4..6fe034f 100644 --- a/docs/Getting Started/Development/buildingGuide.md +++ b/docs/Getting Started/Development/buildingGuide.md @@ -1,3 +1,6 @@ +
+ Beschrijving van afbeelding +
# EAS Build Guide This guide describes how to perform three types of builds with **EAS (Expo Application Services)**: cloud builds, local builds, and iOS builds. This is suitable for beginners and other developers who want to get started quickly. @@ -72,6 +75,7 @@ This will build the app in the cloud for iOS using the `production` build profil 4. Choose the build profile when prompted (for example `preview`, `production`, or `development`). 5. EAS will show a link where you can monitor the build status. + #### Example terminal output: ```bash @@ -107,6 +111,30 @@ With a local build, the app is built on your own computer. Useful for quick test npx eas build --platform android '--local' --profile preview npx eas build --platform ios '--local' --profile preview ``` +!!!! note + for ease we pre programmed the command in scripts in package.json like so: + ```json + "scripts": + { + "prod:build:android": "npx eas build --platform android --profile production --clear-cache", + "prod:build:ios": "npx eas build --platform ios --profile production --clear-cache", + "dev:build:android": "npx eas build --platform android --profile development --clear-cache", + "dev:build:ios": "npx eas build --platform ios --profile development --clear-cache", + "preview:build:android": "npx eas build --platform android --profile preview --clear-cache", + "preview:build:ios": "npx eas build --platform ios --profile preview --clear-cache", + } + ``` + + You can run these commands via: + ```bash + npm run prod:build:android # this will trigger a production build for android + npm run prod:build:ios # this will trigger a production build for ios + npm run dev:build:android # this will trigger a development build for android + npm run dev:build:ios # this will trigger a development build for ios + npm run preview:build:android # this will trigger a preview build for android + npm run preview:build:ios # this will trigger a preview build for ios + ``` + you can still add extra flags like `--local` if needed. You can rename the file afterward using F2. 3. The build runs locally and the result is in the `./build` folder of your project. @@ -145,6 +173,25 @@ npx eas build --platform ios --profile production * Choose a provisioning profile (EAS can handle this automatically) 4. EAS will start the cloud build and provide a link to monitor the status. +!!!! note + for ease we pre programmed the command in scripts in package.json like so: + ```json + "scripts": + { + "prod:build:ios": "npx eas build --platform ios --profile production --clear-cache", + "dev:build:ios": "npx eas build --platform ios --profile development --clear-cache", + "preview:build:ios": "npx eas build --platform ios --profile preview --clear-cache", + } + ``` + + You can run these commands via: + ```bash + npm run prod:build:ios # this will trigger a production build for ios + npm run dev:build:ios # this will trigger a development build for ios + npm run preview:build:ios # this will trigger a preview build for ios + ``` + you can still add extra flags like `--non-interactive` if needed. + #### Example terminal output: ```bash diff --git a/docs/MkDocs/structure.md b/docs/MkDocs/structure.md index 875b5b2..6cb973c 100644 --- a/docs/MkDocs/structure.md +++ b/docs/MkDocs/structure.md @@ -2,6 +2,46 @@ This document provides a comprehensive overview of how the MkDocs documentation system is structured and configured in the Smart Glasses project. +## Table of Contents +- [MkDocs Structure Guide](#mkdocs-structure-guide) + - [Table of Contents ](#table-of-contents-) + - [Directory Structure](#directory-structure) + - [Configuration Architecture](#configuration-architecture) + - [1. Main Configuration (`config/mkdocs/mkdocs.yml`)](#1-main-configuration-configmkdocsmkdocsyml) + - [Site Information](#site-information) + - [File Structure](#file-structure) + - [Theme Configuration](#theme-configuration) + - [Markdown Extensions](#markdown-extensions) + - [Plugins](#plugins) + - [2. Docker Configuration (`config/mkdocs/Dockerfile`)](#2-docker-configuration-configmkdocsdockerfile) + - [Base Image](#base-image) + - [Dependencies](#dependencies) + - [File Structure Setup](#file-structure-setup) + - [Service Configuration](#service-configuration) + - [3. Service Orchestration (`docker-compose.yaml`)](#3-service-orchestration-docker-composeyaml) + - [Service Definition](#service-definition) + - [Content Organization](#content-organization) + - [Development Workflow](#development-workflow) + - [1. Local Development](#1-local-development) + - [2. Content Creation](#2-content-creation) + - [3. Configuration Updates](#3-configuration-updates) + - [Advanced Features](#advanced-features) + - [Mermaid Diagrams](#mermaid-diagrams) + - [Code Highlighting](#code-highlighting) + - [Admonitions](#admonitions) + - [Customization Points](#customization-points) + - [Theme Customization](#theme-customization) + - [Navigation Structure](#navigation-structure) + - [Plugin Extensions](#plugin-extensions) + - [Deployment Considerations](#deployment-considerations) + - [Production Deployment](#production-deployment) + - [Performance Optimization](#performance-optimization) + - [Security](#security) + - [Troubleshooting](#troubleshooting) + - [Common Issues](#common-issues) + - [Debug Mode](#debug-mode) + - [Log Access](#log-access) + ## Directory Structure ```text diff --git a/docs/assets/cli.png b/docs/assets/cli.png new file mode 100644 index 0000000..e9e9dae Binary files /dev/null and b/docs/assets/cli.png differ diff --git a/docs/assets/logo-wordmark.png b/docs/assets/logo-wordmark.png new file mode 100644 index 0000000..597a5a6 Binary files /dev/null and b/docs/assets/logo-wordmark.png differ diff --git a/docs/assets/node.js_logo.png b/docs/assets/node.js_logo.png new file mode 100644 index 0000000..ee07dea Binary files /dev/null and b/docs/assets/node.js_logo.png differ diff --git a/docs/assets/npm vs npx.png b/docs/assets/npm vs npx.png new file mode 100644 index 0000000..5e78fe6 Binary files /dev/null and b/docs/assets/npm vs npx.png differ diff --git a/docs/assets/npm.png b/docs/assets/npm.png new file mode 100644 index 0000000..cd4342f Binary files /dev/null and b/docs/assets/npm.png differ diff --git a/docs/info/eas-cli.md b/docs/info/eas-cli.md index 8ab6f67..f40d020 100644 --- a/docs/info/eas-cli.md +++ b/docs/info/eas-cli.md @@ -1,12 +1,11 @@ -!!! warning - This file serves as a reference for understanding EAS-CLI. For installation or setup, see the [Getting Started](../Getting%20Started/README.md) folder of your Expo project. + +![EAS-CLI Logo](/assets/cli.png) # EAS-CLI — Info (Expo Application Services Command Line Interface) - - - +!!! warning + This file serves as a reference for understanding EAS-CLI. For installation or setup, see the [Getting Started](../Getting%20Started/README.md) folder of your Expo project. --- ## What is EAS-CLI? diff --git a/docs/info/expo.md b/docs/info/expo.md index 8eb0cfb..def43cd 100644 --- a/docs/info/expo.md +++ b/docs/info/expo.md @@ -1,2 +1,354 @@ !!! warning This file serves as a reference for understanding expo. For installation or setup, see the [Getting Started](../Getting%20Started/README.md) folder. + +# Expo Reference Guide + +![expo logo](/assets/logo-wordmark.png) + +## What is Expo? + +Expo is a framework and toolchain built on top of React Native. +It lets you build mobile apps for iOS, Android, and Web using one JavaScript or TypeScript codebase. +It provides a preconfigured native runtime, access to native APIs, fast development through Expo Go, and cloud builds using EAS (Expo Application Services). + +--- + +## Why use Expo? + +- Create mobile apps without Xcode or Android Studio. +- Cross-platform: iOS, Android, and web from one codebase. +- Instant reload and rapid iteration with Expo Go. +- Access to Camera, Haptics, Sensors, FileSystem, Notifications, and more. +- Production-ready builds with EAS. +- Strong TypeScript support. +- Excellent developer experience. + +--- + +## Project Structure + +Create a new Expo project: + +```bash +npx create-expo-app my-app +``` + +Typical structure: + +- `app/` — screens and routes (Expo Router) +- `app.json` or `app.config.js` — configuration +- `package.json` — dependencies and scripts +- `assets/` — images, fonts, icons +- `metro.config.js` — bundler config (optional) + +Example `app.json`: + +```json +{ + "expo": { + "name": "my-expo-app", + "slug": "my-expo-app", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "android": { + "package": "com.example.myexpoapp" + } + } +} +``` + +--- + +## Running Expo Apps + +Start the development server: + +```bash +npx expo start +``` + +Options when running: + +- Scan the QR code with Expo Go +- Run in an Android emulator +- Run in an iOS simulator +- Open the web preview + +--- + +## Expo Modules & Native APIs + +Use built-in native modules: + +```javascript +import * as Haptics from "expo-haptics"; +import * as FileSystem from "expo-file-system"; +import * as Battery from "expo-battery"; +``` + +Example: + +```javascript +Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); +``` + +Install a new module the Expo way: + +```bash +npx expo install expo-camera +``` + +Expo will choose compatible native versions for your SDK. + +--- + +## Expo Router + +Expo Router uses the filesystem as navigation. + +Example structure: + +``` +app/ + ├── index.js + ├── profile.js + ├── settings.js + └── (more routes...) +``` + +Each file becomes a route: + +- `/` -> `index.js` +- `/profile` -> `profile.js` +- `/settings` -> `settings.js` + +Basic screen example: + +```javascript +import { View, Text } from "react-native"; + +export default function Screen() { + return ( + + Hello from Expo! + + ); +} +``` + +--- + +## EAS (Expo Application Services) + +EAS provides cloud-based building, submitting, and over-the-air updates. + +Install the EAS CLI: + +```bash +npm install -g eas-cli +``` + +Initial configuration: + +```bash +eas build:configure +``` + +Build binaries for platforms: + +```bash +eas build -p android +eas build -p ios +``` + +Submit to stores: + +```bash +eas submit -p android +eas submit -p ios +``` + +Use `eas update` for OTA updates to JavaScript and assets. + +--- + +## Environment Variables + +Manage environment and configuration via `app.config.js` or `app.json` `extra` fields. + +Example `app.config.js`: + +```javascript +export default ({ config }) => ({ + ...config, + extra: { + apiUrl: process.env.API_URL, + }, +}); +``` + +Start with variables: + +```bash +API_URL="https://api.example.com" npx expo start +``` + +Access them in app code: + +```javascript +import Constants from "expo-constants"; + +const apiUrl = Constants.expoConfig.extra.apiUrl; +console.log(apiUrl); +``` + +For secrets in production, use a secure environment (CI secrets, EAS secrets). + +--- + +## Prebuilding and Bare Workflow + +If you need custom native code or modules, use prebuild: + +```bash +npx expo prebuild +``` + +This generates native `ios/` and `android/` folders so you can edit native code. If you choose this path, you move from managed Expo workflow toward a "bare" React Native project with Expo tooling still available. + +--- + +## Debugging and Development Tools + +- Expo DevTools: browser UI that comes up with `npx expo start`. +- React Native Debugger and Flipper for deeper inspection. +- Use `console.log`, breakpoints in VS Code, and React DevTools. +- `npx expo start --tunnel` to debug across networks. + +--- + +## Useful Expo Commands — Reference + +### General + +| Command | Description | +| ---------------------- | ---------------------------------- | +| `npx expo start` | Start development server | +| `npx expo install` | Install Expo-compatible packages | +| `npx expo prebuild` | Generate native Android/iOS code | +| `npx expo run:android` | Run on Android device/emulator | +| `npx expo run:ios` | Run on iOS simulator/device | +| `npx expo export` | Export a static web build | +| `npx expo doctor` | Diagnose project issues | +| `npx expo upgrade` | Upgrade Expo SDK version | +| `npx expo publish` | Publish an OTA update | + +### Flags +| Flag | Description | +| ---------------------- | ---------------------------------- | +| `--clear` | Clear Metro bundler cache | +| `--tunnel` | Use tunnel connection for devices | +| `--lan` | Use LAN connection for devices | +| `--localhost` | Use localhost connection for devices| + +- `--tunnel`, `--lan`, and `--localhost` specify how devices connect to the dev server. + - `--tunnel` works when your testing device is on a different network. + - `--lan` is faster but requires devices to be on the same network. + - `--localhost` is for local development on the same machine. + +- `--clear` helps resolve caching issues. + +💡 Use `npx expo --help` to see all available commands and options. +the terminal shows the different options available and shorthands. + + +### EAS Tools + +| Command | Description | +| ----------------------- | ---------------------------------- | +| `eas build` | Build Android/iOS binaries | +| `eas submit` | Submit to app stores | +| `eas update` | Push OTA updates | +| `eas build:configure` | Configure project for EAS builds | + +--- + +## Example: Creating a Basic Expo App + +1. Create the project: + +```bash +npx create-expo-app my-app +cd my-app +``` + +2. Start development: + +```bash +npx expo start +``` + +3. Create a simple screen at `app/index.js`: + +```javascript +import { View, Text } from "react-native"; + +export default function App() { + return ( + + Expo app running! + + ); +} +``` + +4. Open the app: + +- Scan QR code with Expo Go +- Or run in emulator/simulator + +--- + +## Best Practices + +- Use `expo install` to preserve compatibility with your SDK. +- Prefer EAS builds for production and store submissions. +- Keep your Expo SDK version updated; follow upgrade guides. +- Store secrets outside the repository; use CI or EAS secret stores. +- Use TypeScript for larger projects to catch errors early. +- Modularize code: separate screens, components, hooks, and services. +- Add tests for critical flows (unit and integration). + +--- + +## Troubleshooting Tips + +- If a module fails, run `expo doctor` to diagnose version mismatches. +- Clear caches: `npx expo start -c`. +- If native build fails in EAS, check build logs in the EAS dashboard. +- Use `expo diagnostics` to collect environment info for bug reports. + +--- + +## Comparison: Expo vs Bare React Native + +**Expo (Managed)** +- Fast iteration, fewer native worries +- Easier access to many native APIs +- Best for most apps and rapid prototyping + +**Bare React Native** +- Full native control and custom native modules +- Required for some advanced native features +- Slightly more complex setup and maintenance + +--- + +## Additional Resources + +- [docs.expo.dev](https://docs.expo.dev/) +- [reactnative.dev](https://reactnative.dev/) +- [github.com/expo/expo](https://github.com/expo/expo) +--- + diff --git a/docs/info/node.js.md b/docs/info/node.js.md index 4b01e54..5481aec 100644 --- a/docs/info/node.js.md +++ b/docs/info/node.js.md @@ -1,2 +1,348 @@ +# Node.js Reference Guide + +![node.js logo](/assets/node.js_logo.png) +## What is Node.js? + +Node.js is a [**JavaScript runtime**](https://nodejs.org/en/about/) built on the [**V8 engine**](https://nodejs.org/en/learn/getting-started/the-v8-javascript-engine), the same engine that powers Google Chrome. Instead of running JavaScript inside a browser, Node.js allows you to run JavaScript directly on your machine as a backend or scripting environment. + +It was designed around a simple but powerful idea: [**non-blocking, event‑driven I/O**](https://nodejs.org/en/learn/asynchronous-work/overview-of-blocking-vs-non-blocking). This lets Node.js handle massive numbers of concurrent connections with very little overhead. + +Node.js powers everything from tiny automation scripts to full-scale backend servers and real-time platforms. + !!! warning This file serves as a reference for understanding node.js. For installation or setup, see the [Getting Started](../Getting%20Started/README.md) folder. +--- + +## Why use Node.js? + +* Run JavaScript outside the browser. +* Build fast, scalable network applications. +* Handle thousands of concurrent requests efficiently. +* Use one language for both frontend and backend. +* Massive ecosystem through **npm**, the world’s largest package registry. +* Perfect for real‑time systems (chat apps, live dashboards, IoT). +* Plays well inside CI/CD pipelines. +* Lightweight and highly portable. + +Node.js modernizes the full-stack JavaScript workflow by giving developers a simple, powerful backend environment. + +--- + +## Project Structure + +A typical Node.js project uses a `package.json` file in the project root. This file describes: + +* dependencies +* scripts +* metadata +* engine version +* configuration for tools and frameworks + +Here is an example `package.json`: + +```json +{ + "name": "example-node-project", + "version": "1.0.0", + "description": "Simple Node.js example project", + "main": "index.js", + "scripts": { + "start": "node index.js", + "dev": "nodemon index.js" + }, + "dependencies": { + "express": "^4.19.0" + }, + "devDependencies": { + "nodemon": "^3.1.0" + }, + "engines": { + "node": ">=18" + } +} +``` + +This file acts as the configuration backbone of your Node.js project. + +--- + +## Running Node.js Scripts + +A Node.js application starts with a simple JavaScript file. For example, `index.js`: + +```javascript +console.log("Hello from Node.js!"); +``` + +Run it using: + +```bash +node index.js +``` + +Or use a development watcher like `nodemon`: + +```bash +npx nodemon index.js +``` + +--- + +## Node.js Modules and Packages + +Node.js uses a module system. You can load modules using: + +```javascript +const fs = require("fs"); +``` + +or ES module syntax: + +```javascript +import fs from "fs"; +``` + +To install packages from npm: + +```bash +npm install express +``` + +This installs the package into the `node_modules` folder and registers it in `package.json`. + +--- + +## Express.js — the most common Node.js server + +A minimal Express server: + +```javascript +import express from "express"; + +const app = express(); +const port = 3000; + +app.get("/", (req, res) => { + res.send("Hello from Express!"); +}); + +app.listen(port, () => { + console.log(`Server running on port ${port}`); +}); +``` +- `import express from "express";` — Import the Express module. +- `const app = express();` — Create an Express application. +- `const port = 3000;` — Define the port number (3000). +- `app.get("/", (req, res) => { ... });` — Define a route for GET requests to the root URL. +- `res.send("Hello from Express!");` — Send a response to the client (Hello from Express!). +- `app.listen(port, () => { ... });` — Start the server on the specified port. + +Run it via: + +```bash +npm start +``` + +Or: + +```bash +node index.js +``` + +--- + +## Node.js Package Management + +### Check installed Node.js versions: + +```bash +node -v # Check the installed Node.js version +npm -v # Check the installed npm version +``` +### Install a package: + +```bash +npm install # Install a package and add it to package.json +``` + +### Uninstall a package: + +```bash +npm uninstall # Remove a package and update package.json +``` + +### Update packages: + +```bash +npm update # Update all packages to their latest versions +``` + +### Install dev dependencies: + +```bash +npm install nodemon --save-dev # Install nodemon as a development dependency +``` + +### Install a specific version: + +```bash +npm install express@4.19.0 # Install a specific version of a package +``` + +--- + +## Node.js in Development vs Production + +### Development + +* Use hot‑reload tools like `nodemon`. +* Enable logging. +* Use environment variables via `.env`. + +### Production + +* Use `pm2` or Docker to run the server. +* Minimize debugging overhead. +* Use reverse proxies like Nginx. +* Configure environment variables securely. + +Start a production process via PM2: + +```bash +pm2 start index.js # Start the Node.js app with PM2 +``` + +--- + +## Working With Environment Variables + +Create a `.env` file: + +```bash +PORT=3000 # Server port +API_KEY=my-secret-key # API key for authentication +``` + +Load it in your app using **dotenv**: + +```bash +npm install dotenv # Install dotenv package +``` + +```javascript +import "dotenv/config"; //Load environment variables from .env file +console.log(process.env.PORT); // Access the PORT variable +``` + +--- + +## Useful Node.js Commands — Reference + +### General + +| Command | Description | +| --------------------- | ------------------------- | +| `node ` | Run a JavaScript file | +| `node -v` | Check Node.js version | +| `npm -v` | Check npm version | +| `node --watch ` | Watch mode for Node 18+ | +| `npm init -y` | Initialize a new project with default settings | +| `npm install` or `npm i`| Install all dependencies | +| `npm run