Как создать простой веб-сайт компании с помощью Cosmic JS и Angular

* В этой статье предполагается наличие некоторых базовых знаний об Angular, чтобы можно было сосредоточиться на конкретной задаче запроса и отображения данных из Cosmic JS.

тл; ДР

Взгляни на хранилище а также установить приложение

О чем это приложение?

Типичный веб-сайт компании — это просто набор страниц, структурированных с более или менее простой навигацией. Мы хотим создать веб-сайт, который позволит пользователю создавать любое количество страниц и определять структуру навигации без необходимости ждать выпуска кода. Для этого мы будем полагаться на Cosmic JS и создадим структуру для реализации этого проекта. В этом примере наше ведро будет иметь следующие типы объектов:

  • Страницы. Это простой объект без дополнительных метаполей.
  • Навигация. Он будет содержать коллекцию страниц.
  • Предустановки. Это объект конфигурации со списком атрибутов, которые помогут нам запустить наше приложение. Он будет содержать значение для домашней страницы и основной навигации, которую мы будем использовать для меню нашего сайта.

Использование API

Теперь, когда мы определили структуру наших данных, нам нужно создать наше приложение Angular (я рекомендую использовать Angular CLI) и создать службу для выполнения наших вызовов Cosmic JS API. Посмотрите, как просто запросить один объект страницы из Cosmic JS:

getPage(slug: string): Observable<Page> {
    if (!this.page$.get(slug)) {
      const url = `api.cosmicjs.com/v1/company-presentation/object/${slug}`;
      const response = this.http.get<Page>(url).pipe(
        tap(_ => console.log(`fetched page: ${slug}`)),
        map(_ => {
          return new Page(_['object']);
        }),
        shareReplay(1),
        catchError(this.handleError<Page>(`getPage: ${slug}`))
      );
      this.page$.set(slug, response);
    }
    return this.page$.get(slug);
  }

получить одну страницу и сохранить ее в потоке, чтобы сохранить ее в кэше для сеанса

Обратите внимание, что для вложенных объектов Cosmic JS не будет возвращать полное дерево, поэтому иногда вам потребуется объединять вызовы, чтобы максимально использовать наш сервис, например: при извлечении основных пресетов вы, вероятно, захотите включить страницы навигации.

getMainPresets(includeNavigation?: boolean): Observable<Preset> {
    if (includeNavigation) {
      return this.getPreset(environment.presets).pipe(
        switchMap(response => {
          return forkJoin([of(response), this.getNavigation(response.mainNavigation._id)]);
        }),
        map(res => {
          res[0].mainNavigation = res[1];
          return res[0];
        })
      );
    } else {
      return this.getPreset(environment.presets);
    }
  }

этот вызов объединит результат getNavigation с результатом getPreset

Наши вызовы API должны быть аутентифицированы с помощью ключа чтения, мы можем включить его в каждый метод, но проще всего создать перехватчик. Это перехватит все http-запросы, поэтому мы проверяем, является ли это запросом Cosmic JS, и при необходимости добавляем ключ чтения.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url.match(/api.cosmicjs/)) {
      let params = new HttpParams({ fromString: req.params.toString() });
      if (req.method === 'GET') {
        params = params.append('read_key', environment.read_key);
      } else {
        params = params.append('write_key', environment.write_key);
      }
      req = req.clone({
        params: params
      });
    }
    return next.handle(req);
  }

перехватывать и добавлять параметры чтения или записи

Маршрутизация на страницы

На данный момент наш веб-сайт ничего не делает, первое, что ему нужно сделать, это узнать, как загрузить свою первую страницу. Нам нужно создать маршрутизируемый модуль для страниц и настроить его для загрузки в корень. Оказавшись внутри модуля, на его собственной маршрутизации, мы установим маршрут для параметра :slug для загрузки компонента страницы. А что происходит, когда маршрут не указан? Это будет наш самый распространенный сценарий, для которого мы устанавливаем пустой маршрут с Guard.

const routes: Routes = [
  {
    path: '',
    canActivate: [HomepageGuard]
  },
  {
    path: ':slug',
    component: PageComponent
  }
];

Guard будет выполняться при сопоставлении маршрута и перед загрузкой компонента, поэтому мы будем использовать его для получения основных пресетов из Cosmic JS и перенаправления приложения на домашнюю страницу, которую мы установили.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.cosmicService.getMainPresets().pipe(
      map(presets => {
        return this.router.parseUrl(`/${presets.homepage.slug}`);
      })
    );
  }

из Angular 7.1 canActivate может возвращать либо логическое значение, либо UrlTree.

Составные части

Теперь у нас есть конфигурация маршрута, которая будет загружать компонент Page, и это способ загрузки страницы с использованием slug из списка параметров:

ngOnInit() {
    this.route.paramMap
      .pipe(
        map(paramMap => paramMap.get('slug')),
        switchMap(slug => (slug ? this.cosmicService.getPage(slug) : EMPTY))
      )
      .subscribe(page => (this.page = page));
  }

теперь мы можем использовать объект страницы в нашем шаблоне

При этом у нас есть способ навигации по URL-адресу, но мы также должны загрузить меню, чтобы пользователь мог видеть доступные страницы. Для этого мы добавим компонент меню в основной модуль, так как он будет общим для всего приложения. Наше меню будет состоять из навигационного списка, логотипа и названия компании; все это определено в пресетах, поэтому меню будет иметь такой вызов:

ngOnInit() {
    this.cosmicService.getMainPresets(true).subscribe(presets => {
      this.logo = presets.companyLogoUrl;
      this.navigation = presets.mainNavigation;
      this.title = presets.companyName;
    });
  }

обратите внимание, что мы специально просим включить навигацию, добавив «true» в качестве параметра метода

Все это позволит вам быстро создать веб-сайт с использованием Angular и Cosmic JS, все, что осталось сделать, это создать шаблоны и расширить конфигурацию в соответствии с вашими потребностями.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *