BlogLFlower

BlogLFlower - информационый сайт о растениеводстве

Проект создан с помощью Angular CLI версии 12.2.10

Используются:

1. AngularMaterial
2. плагин редактора quill
3. firebase

Проект: https://bloglflower.web.app/

Админка: https://bloglflower.web.app/admin

1. В публичной части размещен список постов о растениях. В необходимый пост можно перейти по кнопке "Открыть"
2. В административной части сайта существует возможность создавать/редактировать/удалять посты.
3. БД подключена с использованием firebase с помощью методов, которые позволяют работать с firebase как c RestAPI (набор URL, к которым идет обращение и получение данных)
4. В административной части сайта используется форма авторизации с проверкой на валидацию, обработкой ошибок. Права пользователей настраиваются в firebase. Время жизни токена 3600.
5. Без авторизации с правами администратора невозможно попасть на любую страницу админки (например https://bloglflower.web.app/admin/dashboard)
6. В административной части используется фильтрация по названию поста (search.pipe.ts)
7. При создании/удалении/редактировании поста выводится сообщение (например "Пост создан"). Реализовано с помощью созданного плагина сообщений (alert.component.ts)
8. Используется локализация (regicterLocaleDate). При выводе даты поста используется pipe date (| date:'medium':'':'ru')
9. Деплой приложения осуществлен с помощью firebase

Languages and Tools

Подключение плагина редактора (quill)

https://www.npmjs.com/package/ngx-quill

1. npm i ngx-quill
2. для проектов, использующих Angular < v5.0.0 установить npm install ngx-quill@1.6.0

3. установить @angular/core, @angular/common, @angular/forms, @angular/platform-browser, quillv1.x, @types/quillv1.x и rxjs одноранговые зависимости ngx-quill

   Т.к. есть все пакеты, кроме quill, то необходимо его установить npm install quill

   Если возникают ошибки, например:
   Module '"quill"' has no exported member 'Delta'. Did you mean to use 'import Delta from "quill"' instead?
   тогда установить @types/quill": "^1.3.10"

   Если всё равно ошибки, тогда в package.json в dependencies прописать @types/quill": "^1.3.10" пересобрать проект (npm install)

4. В глабальном файле стилей (style.scss) подключить стили темы: bubble.css, snow.css и core.css quilljs в свой index.html (вы можете найти их в node_modules/quill/dist), или добавьте их в свои файлы css/scss с @importинструкциями, или добавьте их внешние стили в свою сборку процесс.

   @ import '~quill/dist/quill.core.css'; @ import '~quill/dist/quill.bubble.css'; @ import '~quill/dist/quill.snow.css' ;

СОВЕТ: Если вы используете модули с отложенной загрузкой, вам нужно добавить QuillModule.forRoot()их к импорту в корневом модуле, чтобы убедиться, что Config сервисы зарегистрированы.

Добавление PWA

1. Остановить выполнение проекта (ctrl+C)
2. Запустить установку ng add @angular/pwa, подтвердить выполнение

   Появятся файлы (manifest.webmanifest, ngsw-config.json)

   В src\app\app.module.ts появляется ServiceWorkerModule, который регистрируется в imports

3. Отредактировать ngsw-config.json:

   Закэшировать шрифты:

   "files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/css?family=Roboto"
]

   На уровне "assetGroups" создать "dataGroups":

   "dataGroups": [
{
"name": "firebase-posts",
"urls": [
"https://angularblogtest-1b8f2-default-rtdb.firebaseio.com/**"
],
"cacheConfig": {
"maxSize": 5,
"maxAge": "3600"
}
}
]
4. Сделать production сборку
   ng build --prod
5. После чего в корне создалась папка dist

Деплой приложения

1. Зайти в firebase -> hoisting -> начать
2. Установить firebase-tools npm install -g firebase-tools
3. После установки пакета возвращаемся в firebase, нажимаем далее
4. firebase login
5. Если не было аккаунта, то откроется вкладка браузера, где можно выбрать аккаунт
6. firebase init
7. !!!!!!!!!Обязательно нужно находиться в корневой папке (cd.. - выйти из папки)
8. Are you ready to proceed? (Y/n) Y
9. Выбрать Hoisting c FireBase (выбрать пробелом -> enter)
10. Use an existing project Какой проект используем?
11. Выбрать пр
12. What do you want to use as your public directory? Какая директория является публичной? dist/AngularBlogTest
13. Configure as a single-page app (rewrite all urls to /index.html)? Необходимо ли конфигурировать данное приложение как single page application? - Y
14. Set up automatic builds and deploys with GitHub? Настроить автоматические сборки и развертывания с помощью GitHub? - y
15. For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) Marisha-tech/BlogLFlower
16. Set up the workflow to run a build script before every deploy? (y/N) - y
17. File dist/AngularBlogTest/index.html already exists. Overwrite? - n
18. firebase deploy
19. После чего в консоло сообщение Firebase initialization complete!
    В корне приложения появляются файлы .firebaserc, firebase.json
20. Переходим в firebase нажимаем далее
21. В консоли написать firebase deploy