Knigopis2

Angular 2 клиент для api.knigopis.com.

Есть такой сайт www.knigopis.com — дневник читателя и сервис учёта прочитанных книг. Его создатель - мой друг Роман. Клиентская часть сайта Книгописи написана на первом Ангуляре, а в данном проекте я пытаюсь написать клиентскую часть на Ангуляре 2 и параллельно изучаю его. Для работы с книгами использую прокси и api.knigopis.com.

Как попробовать?

Посмотреть рабочую версию этого репозитория можно тут: alpha.knigopis.com.

Чтобы самому попробовать запустить проект локально, нужно сделать следующее:

1. Установить Angular cli (будет запускаться локальный сервер с прокси);
2. Клонировать репозиторий: git clone https://github.com/gurov/knigopis2;
3. Зайти в полученный резозиторий cd knigopis2;
4. Установить зависимости npm i
5. Запустить проект npm run start

Разработка шаг за шагом

Ссылки на видео разработки доступны по клику для каждой части.

Часть 1

1. О сайте книгописи
2. Костяк проекта на Angular 2
3. Настройка прокси

Часть 2

1. Создаем bookService для обращения к api
2. RxJs и Observable объекты
3. Модели Book, User, интерфейс List
4. Вывод списка

Часть 3

1. Обработка ошибок для bookService
2. Расширяем настройки прокси
3. Добавляем UserService
4. Выносим обработку запросов к http сервису в отдельный файл

Часть 4

1. Подключаем Bootstrap 4
2. Создаем HomeComponent
3. Добавляем главное меню

Часть 5

1. Создаем UserBookListComponent
2. Добавляем getUserBooks функцию в UserService для получения списка книг
3. Расширяем модель Book
4. Прописываем роутинг на страницу пользователя

Часть 6

1. Добавляем отписку от роута в UserBookListComponent
2. Создаем BookComponent
3. Добавляем getUserInfo в UserService
4. Форматируем UserBookListComponent
5. Форматируем HomeComponent

Часть 7

1. Добавляем оглавление (Bootstrap 4: list groups)
2. Адаптируем под широкие экраны и мобильные телефоны (Bootstrap 4: .push-md-* and .pull-md-*)
3. Добавляем сортировку по годам (Angular 2 Pipe: yearSort)

Часть 8

1. Добавляем поиск по книгам (BookSearchPipe)
2. Добавляем анимацию загрузки книг (CSS3 лоадер)
3. Выводим ошибку загрузки книг PS) Извините, немного замешкался во второй половине видео

Часть 9.1

1. Добавляем виджет авторизации (uLogin)
2. Добавляем initAuth функцию в window (RxJs Subject, AuthService)
3. Получаем access-token (UserService, getCredentials, httpPost)

Часть 9.2

1. Изменяем модели (Credentials, User)
2. Добавляем заголовок авторизации к запросам (ApiSerivice)
3. Записываем токен в localStorage (AuthService)
4. Запоминаем авторизованного пользователя (AuthService)
5. Прячем uLogin меню и показываем юзера (AppComponent)

Часть 10

1. Добавляем в верхнее меню ссылки на свой список книг и на страницу добавления книги (AppComponent)
2. Добавляем компоненту редактирования книги (BookEditComponent)
3. Добавляем ссылку с книги на страницу редактирования (BookComponent)
4. Добавляем метод put в ApiService
5. Добавляем методы get и update в BookService

Часть 11

1. Добавляем метод delete в ApiService
2. Создаем общую функцию getRequestOptionsArgs для методов ApiService
3. Добавляем метод remove а BookSerice и изменяем update
4. Добавляем методы saveAndClose, saveAndAdd, remove в BookEditComponent