-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
12 additions
and
478 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,99 +1,15 @@ | ||
# Parcel template | ||
# Filmoteka | ||
|
||
Этот проект был создан при помощи Parcel. Для знакомства и настройки | ||
дополнительных возможностей [обратись к документации](https://parceljs.org/). | ||
Filmoteka is a simple CRUD (Create, Read, Update, Delete) application that allows users to create their own watchlist and explore information about movies. The application is built using Vanilla JavaScript, Sass for styling, HTML, and integrates with The Movie Database (TMDB) API for fetching movie details. | ||
|
||
## Подготовка нового проекта | ||
## Features | ||
|
||
1. Убедись что на компьютере установлена LTS-версия Node.js. | ||
[Скачай и установи](https://nodejs.org/en/) её если необходимо. | ||
2. Склонируй этот репозиторий. | ||
3. Измени имя папки с `parcel-project-template` на имя своего проекта. | ||
4. Создай новый пустой репозиторий на GitHub. | ||
5. Открой проект в VSCode, запусти терминал и свяжи проект с GitHub-репозиторием | ||
[по инструкции](https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url). | ||
6. Установи зависимости проекта в терминале командой `npm install` . | ||
7. Запусти режим разработки, выполнив команду `npm start`. | ||
8. Перейди в браузере по адресу [http://localhost:1234](http://localhost:1234). | ||
Эта страница будет автоматически перезагружаться после сохранения изменений в | ||
файлах проекта. | ||
1. **Create Watchlist**: Users can create their personalized watchlist by adding movies to it. | ||
|
||
## Файлы и папки | ||
2. **Search Movies**: Explore a vast database of movies using the TMDB API. Search and discover information about your favorite films. | ||
|
||
- Все паршалы файлов стилей должны лежать в папке `src/sass` и импортироваться в | ||
файлы стилей страниц. Например, для `index.html` файл стилей называется | ||
`index.scss`. | ||
- Изображения добавляй в папку `src/images`. Сборщик оптимизирует их, но только | ||
при деплое продакшн версии проекта. Все это происходит в облаке, чтобы не | ||
нагружать твой компьютер, так как на слабых машинах это может занять много | ||
времени. | ||
3. **Movie Details**: Get detailed information about each movie, including title, release date, overview, and more. | ||
|
||
## Деплой | ||
4. **Update Watchlist**: Modify your watchlist by adding or removing movies as your preferences change. | ||
|
||
Для настройки деплоя проекта необходимо выполнить несколько дополнительных шагов | ||
по настройке твоего репозитория. Зайди во вкладку `Settings` и в подсекции | ||
`Actions` выбери выбери пункт `General`. | ||
|
||
![GitHub actions settings](./assets/actions-config-step-1.png) | ||
|
||
Пролистай страницу до последней секции, в которой убедись что выбраны опции как | ||
на следующем изображении и нажми `Save`. Без этих настроек у сборки будет | ||
недостаточно прав для автоматизации процесса деплоя. | ||
|
||
![GitHub actions settings](./assets/actions-config-step-2.png) | ||
|
||
Продакшн версия проекта будет автоматически собираться и деплоиться на GitHub | ||
Pages, в ветку `gh-pages`, каждый раз когда обновляется ветка `main`. Например, | ||
после прямого пуша или принятого пул-реквеста. Для этого необходимо в файле | ||
`package.json` отредактировать поле `homepage` и скрипт `build`, заменив | ||
`your_username` и `your_repo_name` на свои, и отправить изменения на GitHub. | ||
|
||
```json | ||
"homepage": "https://your_username.github.io/your_repo_name/", | ||
"scripts": { | ||
"build": "parcel build src/*.html --public-url /your_repo_name/" | ||
}, | ||
``` | ||
|
||
Далее необходимо зайти в настройки GitHub-репозитория (`Settings` > `Pages`) и | ||
выставить раздачу продакшн версии файлов из папки `/root` ветки `gh-pages`, если | ||
это небыло сделано автоматически. | ||
|
||
![GitHub Pages settings](./assets/repo-settings.png) | ||
|
||
### Статус деплоя | ||
|
||
Статус деплоя крайнего коммита отображается иконкой возле его идентификатора. | ||
|
||
- **Желтый цвет** - выполняется сборка и деплой проекта. | ||
- **Зеленый цвет** - деплой завершился успешно. | ||
- **Красный цвет** - во время линтинга, сборки или деплоя произошла ошибка. | ||
|
||
Более детальную информацию о статусе можно посмотреть кликнув по иконке, и в | ||
выпадающем окне перейти по ссылке `Details`. | ||
|
||
![Deployment status](./assets/status.png) | ||
|
||
### Живая страница | ||
|
||
Через какое-то время, обычно пару минут, живую страницу можно будет посмотреть | ||
по адресу указанному в отредактированном свойстве `homepage`. Например, вот | ||
ссылка на живую версию для этого репозитория | ||
[https://goitacademy.github.io/parcel-project-template](https://goitacademy.github.io/parcel-project-template). | ||
|
||
Если открывается пустая страница, убедись что во вкладке `Console` нет ошибок | ||
связанных с неправильными путями к CSS и JS файлам проекта (**404**). Скорее | ||
всего у тебя неправильное значение свойства `homepage` или скрипта `build` в | ||
файле `package.json`. | ||
|
||
## Как это работает | ||
|
||
![How it works](./assets/how-it-works.png) | ||
|
||
1. После каждого пуша в ветку `main` GitHub-репозитория, запускается специальный | ||
скрипт (GitHub Action) из файла `.github/workflows/deploy.yml`. | ||
2. Все файлы репозитория копируются на сервер, где проект инициализируется и | ||
проходит сборку перед деплоем. | ||
3. Если все шаги прошли успешно, собранная продакшн версия файлов проекта | ||
отправляется в ветку `gh-pages`. В противном случае, в логе выполнения | ||
скрипта будет указано в чем проблема. | ||
5. **Delete Movies**: Remove movies from your watchlist that you no longer wish to track. |
Oops, something went wrong.