wehub-resource-sync
95 lines
4.3 KiB
Markdown
95 lines
4.3 KiB
Markdown
# QuickBot App Frontend | image-background-changer-using-imagen3
|
|
|
|
[](https://github.com/pylint-dev/pylint)
|
|
[](https://github.com/google/gts)
|
|
|
|
QuickBot App is a set of templates that can be deployed out of the box into Cloud Run and work independently. Each one can be run independently connected to the user default google cloud auth credentials, and based on the complexity of each template, may require to deploy more or less resources into our Google Cloud Project.
|
|
The architecture always follows the following structure: a folder for the frontend which consists in an Angular app, and a backend folder which consists of a FastAPI Python app.
|
|
|
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.3.
|
|
|
|
## Development server
|
|
|
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
|
|
|
## Code scaffolding
|
|
|
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
|
|
|
## Build
|
|
|
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
|
|
## Running unit tests
|
|
|
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
|
|
## Running end-to-end tests
|
|
|
|
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
|
|
|
## Further help
|
|
|
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
|
|
|
|
|
## Code Styling & Commit Guidelines
|
|
|
|
To maintain code quality and consistency:
|
|
|
|
* **TypeScript (Frontend):** We follow [Angular Coding Style Guide](https://angular.dev/style-guide) by leveraging the use of [Google's TypeScript Style Guide](https://github.com/google/gts) using `gts`. This includes a formatter, linter, and automatic code fixer.
|
|
* **Python (Backend):** We adhere to the [Google Python Style Guide](https://google.github.io/styleguide/pyguide.html), using tools like `pylint` and `black` for linting and formatting.
|
|
* **Commit Messages:** We suggest following [Angular's Commit Message Guidelines](https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md) to create clear and descriptive commit messages.
|
|
|
|
#### Frontend (TypeScript with `gts`)
|
|
|
|
1. **Initialize `gts` (if not already done in the project):**
|
|
Navigate to the `frontend/` directory and run:
|
|
```bash
|
|
npx gts init
|
|
```
|
|
This will set up `gts` and create necessary configuration files (like `tsconfig.json`). Ensure your `tsconfig.json` (or a related gts config file like `.gtsrc`) includes an extension for `gts` defaults, typically:
|
|
```json
|
|
{
|
|
"extends": "./node_modules/gts/tsconfig-google.json",
|
|
// ... other configurations
|
|
}
|
|
```
|
|
2. **Check for linting issues:**
|
|
```bash
|
|
npm run lint
|
|
```
|
|
(This assumes a `lint` script is defined in `package.json`, e.g., `"lint": "gts lint"`)
|
|
3. **Fix linting issues automatically (where possible):**
|
|
```bash
|
|
npm run fix
|
|
```
|
|
(This assumes a `fix` script is defined in `package.json`, e.g., `"fix": "gts fix"`)
|
|
|
|
#### Backend (Python with `pylint` and `black`)
|
|
|
|
1. **Ensure Dependencies are Installed:**
|
|
Add `pylint` and `black` to your `backend/requirements.txt` file:
|
|
```
|
|
pylint
|
|
black
|
|
```
|
|
Then install them within your virtual environment:
|
|
```bash
|
|
pip install pylint black
|
|
# or pip install -r requirements.txt
|
|
```
|
|
2. **Configure `pylint`:**
|
|
It's recommended to have a `.pylintrc` file in your `backend/` directory to configure `pylint` rules. You might need to copy a standard one or generate one (`pylint --generate-rcfile > .pylintrc`).
|
|
3. **Check for linting issues with `pylint`:**
|
|
Navigate to the `backend/` directory and run:
|
|
```bash
|
|
pylint .
|
|
```
|
|
(Or specify modules/packages: `pylint your_module_name`)
|
|
4. **Format code with `black`:**
|
|
To automatically format all Python files in the current directory and subdirectories:
|
|
```bash
|
|
python -m black . --line-length=80
|
|
```
|