###### © 2023 Jia-Yu, CHEN All Rights Reserved

### Project Structure
* Using Laravel Framework to implement **MVC Structure**(Model, View, Controller)
and develop a wep application.
* We use **Laravel Breeze** to implement functions and views of User Authentication

Backend: php 8.2.0(Laravel 10 Framework)
Frontend: Tailwind CSS + HTML + JavaScript, using Vite as building tool
Database: MySql
Package Manager: npm
Dependency Manager: Composer

### Project Functions
* Personal Center
* Historical Chart
* [Realtime Data](https://hackmd.io/@1989ONCE/r1yCEQtdn)
* [Warning Management](https://hackmd.io/@1989ONCE/BJoE8-gih)
* Administration Managment

### Build Environment
1. node.js(LTS)(v18.14.1)& npm(v9.3.1):
[(for Windows)](https://nodejs.org/dist/v18.14.1/node-v18.14.1-x64.msi) [(for MacOS)](https://nodejs.org/dist/v18.14.1/node-v18.14.1.pkg)
you can check if it's installed successfully by enter>

    node -v

in the command line

2. XAMPP(8.2.0) portable: [Ref Article in Chinese](https://ithelp.ithome.com.tw/articles/10190877)
[(for Windows)](https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/8.2.0/xampp-portable-windows-x64-8.2.0-0-VS16-installer.exe/download) [(for MacOS)](https://sourceforge.net/projects/xampp/files/XAMPP%20Mac%20OS%20X/8.2.0/xampp-osx-8.2.0-0-installer.dmg/download)
If you encoutered error msg when quitting the control panel, delete the "xampp-control.ini" file in your xampp folder, and restart "xampp-control.exe", it should work!

2. Composer: (requires PHP 5.3.2+ version)
[(for MacOS)](https://ithelp.ithome.com.tw/articles/10190770) if you use ios please refer to this article
[(for Windows)](https://getcomposer.org/Composer-Setup.exe)
You don't have to check any of the check boxes during installation ! When you see the following screen, choose the "php.exe" file in your xampp path that you just downloaded (this is just an example image, the path may differ in your device)<img src="https://i.imgur.com/LEaip2F.png" />
Restart your device after the installation, enter>

    composer(or composer -v)

in your command line to see if it's installed successfully! (you can see the following screen if it's okay to use)


### Project Folder Structure intro
There are some folder that are used more commonly, which are
* ***app/Http/Controllers***: functions are written in here
* ***app/Http/Middleware***: checking the Http Request validness instead of in controller to save time
* ***resources***: Web View Folder
* ***resources/views***: Web View(Blade.php)
* ***routes***: manage data sending routes(GET, POST etc.)
* ***database/migrations***: database files
* ***node_modules/:*** node Modules
* ***vendor/:*** Composer Modules

[More Info in Official Documentation (Press Me)](https://laravel.com/docs/10.x/structure)

### Command for initialization (in your command line)
Reminder : Open your php/php.ini file and remove the semicolon(;) before this three lines
> extension=gd
> extension=sockets
> extension=zip

and then you can run these commmand in your command line ↓

- composer install  #install all the dependencies into the vendor folder automactically, you couldn't open the serve without this step
- npm install #install node modules
- npm run build
- copy .env.example .env #copy the .env file
- php artisan key:generate
- php artisan migrate #migrate all tables with no data
- php artisan db:seed

Last but not the least, if you need to use email verify function, you have to setup your own stmp settings
- modify gray lines of below image in your own environment, and don't forget to use a valid email of your own
- if you have problem setting your email, you can reference [this link](https://stackoverflow.com/questions/32515245/how-to-to-send-mail-using-gmail-in-laravel)

### CSS framework: Tailwind CSS
We use Tailwind CSS (currently v3.3.2) as our CSS framework
[Tailwind CSS official website](https://tailwindcss.com/)