DEV Community: Diego Perez

Build an Ecommerce Product Filter with Angular and Cosmic

Diego Perez — Tue, 13 Oct 2020 15:50:36 +0000

* This article will assume some basic knowledge of Angular and CMS so it can focus on the specific task at hand. Feel free to ask me about any specifics on the implementation you may find unclear

TL; DR

Take a look at:

What are we going to build?

This site will be based on a previous example: an ecommerce website which purpose is to show how we can offer a customized experience for everyone. I strongly recommend that you read the first article, as we will work on top of what was built there. This time, we will add filtering functionality to showcase the Cosmic Advanced Queries feature. Our data will be stored and served by Cosmic and we will use Angular for our Front-End.

Preparing our bucket

The first thing we'll do is prepare our Cosmic bucket. We already have the following three object types:

Categories
Products
Users

Each product now will include a color attribute, and each category will include a isRoot attribute. These attributes will give us more to work with when building the filters.

We will also create a new type:

Price filters

Each price filter will have a min and max attribute. This new type will allow us to define price ranges to then use in the filter. There are other options to do this, as we could directly filter by all the different prices contained in the products, but this approach will give us (and the potential editor/merchandiser setting everything up) more flexibility on what we want to show the customer.

If you are as lazy as I am, you can always replicate the demo bucket by installing the app.

Updating the models

We need to reflect the changes to the bucket into our models. This will be the model for the price filters:

export class PriceFilter {
  _id: string;
  slug: string;
  title: string;
  max: number;
  min: number;

  constructor(obj) {
    this._id = obj._id;
    this.slug = obj.slug;
    this.title = obj.title;
    this.max = obj.metadata.max;
    this.min = obj.metadata.min;
  }
}

And, of course, we need to also update our product and category models:

import { Category } from './category';

export class Product {
  _id: string;
  slug: string;
  title: string;
  price: string;
  categories: Category[];
  image: string;
  color: string;

  constructor(obj) {
    this._id = obj._id;
    this.slug = obj.slug;
    this.title = obj.title;
    this.price = obj.metadata.price;
    this.image = obj.metadata.image.url;
    this.color = obj.metadata.color;
    this.categories = [];

    if (obj.metadata && obj.metadata.categories) {
      obj.metadata.categories.map(category => this.categories.push(new Category(category)));
    }
  }
}

export class Category {
  _id: string;
  slug: string;
  title: string;
  isRoot: boolean;

  constructor(obj) {
    this._id = obj._id;
    this.slug = obj.slug;
    this.title = obj.title;
    this.isRoot = obj.metadata ? obj.metadata.root : false;
  }
}

Modifying the service

In order to take full advantage of the advanced queries, we will create a new method on our service:

getProductsByQuery(query?: string): Observable<Product[]> {
    if (!this.products$.get(query)) {
      const querystring = query ? '&query=' + query : '';

      const response = this.http.get<Product[]>(this.productObjectsUrl + '&sort=random' + querystring).pipe(
        tap(_ => console.log('fetched products')),
        map(_ => {
          if (_['objects']) {
            return _['objects'].map(element => new Product(element));
          }
        }),
        shareReplay(1),
        catchError(this.handleError('getProducts', []))
      );
      this.products$.set(query, response);
    }
    return this.products$.get(query);
  }

*Note that the only difference with the old getProducts() is the inclusion of the optional query parameter.

Also, let's create a method to get our new price filters:

private priceFiltersUrl = this.objectTypePath + '/pricefilters';
private priceFilters$: Observable<PriceFilter[]>;

getPriceFilters(): Observable<PriceFilter[]> {
    if (!this.priceFilters$) {
      this.priceFilters$ = this.http.get<PriceFilter[]>(this.priceFiltersUrl).pipe(
        tap(_ => console.log('fetched price filters')),
        map(_ => {
          return _['objects'].map(element => new PriceFilter(element));
        }),
        shareReplay(1),
        catchError(this.handleError('getPriceFilters', []))
      );
    }
    return this.priceFilters$;
  }

Creating the filter component

Now we have a method to query products in an advanced manner, but we still need to construct the query, so let's build a component to allow the user to select the different filtering options.

We want to allow the customer to select different categories, colors and price ranges, for that, we will subscribe to our service and assign the results to a map that will store a pair of object, boolean; that way we can keep track of the user selections.

export class FilterComponent implements OnInit {
  public rootCategoryList: Map<Category, boolean> = new Map<Category, boolean>();
  public categoryList: Map<Category, boolean> = new Map<Category, boolean>();
  public colorList: Map<string, boolean> = new Map<string, boolean>();
  public priceList: Map<PriceFilter, boolean> = new Map<PriceFilter, boolean>();

  @Output() selectedFilters = new EventEmitter<string>();

  constructor(private cosmicService: CosmicService) {}

  ngOnInit() {
    forkJoin(this.cosmicService.getCategories(), this.cosmicService.getProducts(), this.cosmicService.getPriceFilters()).subscribe(
      ([categories, products, priceFilters]) => {
        // categories
        categories.forEach(cat => {
          cat.isRoot ? this.rootCategoryList.set(cat, false) : this.categoryList.set(cat, false);
        });

        // colors

        const colorSet = new Set<string>(); // Using a Set will automatically discard repeated colors
        products.forEach(p => colorSet.add(p.color));
        colorSet.forEach(c => {
          this.colorList.set(c, false);
        });

        // prices
        priceFilters.forEach(pf => this.priceList.set(pf, false));

        this.updateSelectedFilters();
      }
    );
  }
...

*The reasoning behind dividing categories between root/no-root is because I want to provide the user with a visual hint as to what this categories model looks like, but it's not relevant to the task.

Now, this is how the html will look like:

<ul>
  <li class="mb-3" *ngFor="let category of rootCategoryList | keyvalue">
    <label class="radio is-size-4" >
      <input type="checkbox" value="{{category.key.slug}}" [checked]="category.value" (change)="filterRootCategory(category)">
      <span class="pl-2">{{category.key.title}}</span>
    </label>
  </li>
</ul>
<hr/>
<ul>
  <li class="mb-3" *ngFor="let category of categoryList | keyvalue">
    <label class="checkbox is-size-4" >
      <input type="checkbox" value="{{category.key.slug}}" [checked]="category.value" (change)="filterCategory(category)">
      <span class="pl-2">{{category.key.title}}</span>
    </label>
  </li>
</ul>
<hr/>
<ul>
  <li class="mb-3 color-item" *ngFor="let color of colorList | keyvalue">
      <label class="checkbox is-size-4">
        <input type="checkbox" value="{{color.key}}" [checked]="color.value" (change)="filterColor(color)">
        <span [style.background-color]="color.key"></span>
      </label>
    </li>
</ul>
<hr/>
<ul>
  <li class="mb-3" *ngFor="let price of priceList | keyvalue">
    <label class="checkbox is-size-4" >
      <input type="checkbox" value="{{price.key.slug}}" [checked]="price.value" (change)="filterPrice(price)">
      <span class="pl-2">{{price.key.title}}</span>
    </label>
  </li>
</ul>

All the change events look the same, they just mark the element as selected/unselected on the map (this is bound to the checkbox value, so there is no need to modify the DOM manually) and trigger a filter update:

filterCategory(entry: { key: Category; value: boolean }) {
    this.categoryList.set(entry.key, !entry.value);
    this.updateSelectedFilters();
  }

* And so on...

Now, let's look at updateSelectedFilters(). This method will review what's currently selected on the maps (thanks to the help of aux methods setCategoryFilterSelection(), etc. and build our query.

updateSelectedFilters() {
    // categories
    const catInSelection: string[] = [];
    const catNotInSelection: string[] = [];

    this.setCategoryFilterSelection(this.categoryList, catInSelection, catNotInSelection);
    this.setCategoryFilterSelection(this.rootCategoryList, catInSelection, catNotInSelection);

    // colors

    const colorInSelection: string[] = this.setColorFilterSelection(this.colorList);

    // price
    const pricesInSelection: number[][] = this.setPriceFilterSelection(this.priceList);

    // query
    let jsonObj = {};
    if (catInSelection.length > 0 && catNotInSelection.length > 0) {
      jsonObj['metadata.categories'] = {
        $in: catInSelection,
        $nin: catNotInSelection
      };
    }
    if (colorInSelection.length > 0) {
      jsonObj['metadata.color'] = { $in: colorInSelection };
    }

    if (pricesInSelection.length > 0) {
      jsonObj['$or'] = [];
      pricesInSelection.forEach(price => {
        jsonObj['$or'].push({
          $and: [
            {
              'metadata.price': {
                $gte: price[0]
              }
            },
            {
              'metadata.price': {
                $lte: price[1]
              }
            }
          ]
        });
      });

      // Introducing "$or" means we need to combine with an "$and" for the other conditions
      const auxObj = { $and: [] };

      auxObj.$and.push(
        { "'metadata.categories": jsonObj['metadata.categories'], 'metadata.color': jsonObj['metadata.color'] },
        { $or: jsonObj['$or'] }
      );
      jsonObj = auxObj;
    }

    const query = encodeURIComponent(JSON.stringify(jsonObj));
    this.selectedFilters.emit(query);
  }

Wrapping it all together

Did you notice we are emitting the query? Now it's time to go to our product listing and modify how it request the products to accommodate all the changes we made. First of all, let's update the HTML to include our new filter component.

<div class="columns">
<div class="column is-one-fifth filters">
  <app-filter (selectedFilters)="onChangeFilters($event)"></app-filter>
</div>
<div class="column columns" *ngIf="productList && user">
  <ng-container *ngFor="let product of (productList | customSort:user.interests)">
          <div class="product-tile column is-one-third">
            <img src="{{ product.image }}" class="image"/>
            <div class="level is-size-4 is-uppercase">
                <span class="level-item">{{product.title}}</span>
                <span class="level-item has-text-weight-bold">${{product.price}}</span>
            </div>
            <app-actions [product]="product"></app-actions>
          </div>
  </ng-container>
  <div *ngIf="productList.length === 0">
    <span>There are no products that match your search, try something else.</span>
  </div>
</div>
</div>

Now we just need to define the method for our selectedFilters event, it looks like this:

  onChangeFilters(selectedFilters: string) {
    this.cosmicService.getProductsByQuery(selectedFilters).subscribe(products => {
      this.productList = products ? products : [];
    });
  }

And that's all. With just a couple updates on our previous eCommerce application, we've been able to add a pretty powerful filter component that would help our customers find the product they are looking for.

Interested in more articles like this? Check out Cosmic articles for more tutorials like this one, or join us in the Slack community, where hundreds of devs like you are discussing the future of Headless websites.

Build an Ecommerce App with Personalization using Angular and Cosmic JS

Diego Perez — Thu, 02 May 2019 16:27:55 +0000

* This article will assume some basic knowledge of Angular so it can focus on the specific task at hand. Feel free to ask me about any specifics on the implementation you may find unclear

TL; DR

Take a look at the repository and install the app, or view a demo

What are we going to build?

This site will be a very simplistic representation of an ecommerce website and its purpose is to show how we can offer a customized experience for everyone. Our data will be stored and served by Cosmic JS and we will use Angular for our Front-End.

How will it work?

Our storefront will be just a product listing page, showing all products stored in Cosmic JS, randomly sorted. The products will belong to a number of categories, and each product will show 3 buttons to mock the following behaviors:

view -> value: 1
add to cart -> value: 2
buy -> value: 3

These will represent the different degrees of interest.

The user will interact with the site and its interests will be stored in its profile, increasing the corresponding value of each product's categories.

A full interaction would be something like: the user clicks on "buy" a "swimwear" product, increasing its profile score for products belonging to "swimwear". The page then will sort the page showing more prominently the products belonging to "swimwear".

Preparing our bucket

The first thing we'll do is prepare our Cosmic JS bucket. We have to create an empty bucket and three object types:

Categories
Products
Users

Each user will store a sessionID and a JSON object for interests.
Each product will have a price, a collection of categories and an image.
Categories won't need any metadata, we will just use its title.

If you are as lazy as I am, you can always replicate the demo bucket by installing the app.

Preparing the site

The first thing we need to do is create a new Angular site (I always recommend using the CLI for that). Now, let's create a HTTP interceptor that will handle the authentication against the Cosmic JS API, so we don't need to add this in every call. It will append the read_key parameter for the GET requests and the write_key for everything else.

@Injectable({ providedIn: 'root' })
export class CosmicInterceptor implements HttpInterceptor {
  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);

        req = req.clone({
          params: params
        });
      } else {
        let payload = JSON.parse(req.body);
        payload.write_key = environment.write_key;

        req = req.clone({
          body: payload
        });
      }
    }
    return next.handle(req);
  }
}

The product listing will be our only page, so after creating the component, our routes should look like this:

const routes: Routes = [{ path: '', component: ProductListingComponent }];

The product listing page

We need to show the products, so let's define our model:

import { Category } from './category';

export class Product {
  _id: string;
  slug: string;
  title: string;
  price: string;
  categories: Category[];
  image: string;

  constructor(obj) {
    this._id = obj._id;
    this.slug = obj.slug;
    this.title = obj.title;
    this.price = obj.metadata.price;
    this.image = obj.metadata.image.url;
    this.categories = [];

    if (obj.metadata && obj.metadata.categories) {
      obj.metadata.categories.map(category => this.categories.push(new Category(category)));
    }
  }
}

*We'll talk about the Category there later.

Now let's begin populating our service with methods. First of all, we need a getProducts() method:

private products$: Observable<Product[]>;

getProducts(): Observable<Product[]> {
    if (!this.products$) {
      this.products$ = this.http.get<Product[]>(this.productsUrl).pipe(
        tap(_ => console.log('fetched products')),
        map(_ => {
          return _['objects'].map(element => new Product(element));
        }),
        shareReplay(1),
        catchError(this.handleError('getProducts', []))
      );
    }
    return this.products$;
  }

*We are caching the response, our products won't change that often and we are going to call this method A LOT...

The component itself will be quite simple. For now, it will only have the call two calls to our service:

import { Component, OnInit } from '@angular/core';
import { CosmicService } from 'src/app/core/_services/cosmic.service';
import { Product } from '@models/product';
import { UserService } from 'src/app/core/_services/user.service';
import { User } from '@models/user';

@Component({
  selector: 'app-product-listing',
  templateUrl: './product-listing.component.html',
  styleUrls: ['./product-listing.component.scss']
})
export class ProductListingComponent implements OnInit {
  public productList: Product[];
  public user: User;

  constructor(private cosmicService: CosmicService, private userService: UserService) {}

  ngOnInit() {
    this.userService.user$.subscribe(user => {
      this.user = user;
    });
    this.cosmicService.getProducts().subscribe(products => (this.productList = products));
  }
}

And this is the HTML:

<div class="columns" *ngIf="productList && user">
  <ng-container *ngFor="let product of (productList | customSort:user.interests)">
          <div class="product-tile column is-one-third">
            <img src="{{ product.image }}" class="image"/>
            <div class="level is-size-4 is-uppercase">
                <span class="level-item">{{product.title}}</span>
                <span class="level-item has-text-weight-bold">${{product.price}}</span>
            </div>
            <app-actions [product]="product"></app-actions>
          </div>
  </ng-container>
</div>

Have you noticed that app-actions component? It will take care of the actions the user will perform over each product. But let's talk about the user before that...

Everything about the user

Our user model will be the most "complex" of all. As we will be creating users from the site and retrieving them from Cosmic JS, we need a more flexible constructor. We also added methods to build a payload object for posting to Cosmic JS and another one for managing the interests.

import { Category } from './category';

export class User {
  _id: string;
  slug: string;
  interests: JSON;

  constructor(obj?) {
    this._id = obj ? obj._id : '';
    this.slug = obj ? obj.slug : '';
    this.interests = obj ? JSON.parse(obj.metadata.interests) : {};
  }

  postBody() {
    return {
      title: this.slug,
      type_slug: 'users',
      metafields: [
        {
          key: 'interests',
          value: JSON.stringify(this.interests)
        }
      ]
    };
  }

  putBody() {
    return {
      title: this.slug,
      slug: this.slug,
      metafields: [
        {
          key: 'interests',
          value: JSON.stringify(this.interests)
        }
      ]
    };
  }

  increaseInterest(category: Category, weight: number) {
    if (!this.interests[category.title]) {
      this.interests[category.title] = weight;
    } else {
      this.interests[category.title] += weight;
    }
  }
}

We won't build a proper authentication journey for our example. Each user will have a sessionID on the browser's local storage, and we will use that to create and identify users. We'll keep the user instance on session storage for convenience. In order to keep things tidy, let's create a user service:

import { Injectable } from '@angular/core';
import { User } from '@models/user';
import { CosmicService } from './cosmic.service';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private userSource = new BehaviorSubject<User>(new User());
  public user$ = this.userSource.asObservable();

  constructor(private cosmicService: CosmicService) {}

  init() {
    let sessionID = localStorage.getItem('sessionID');

    if (!sessionID) {
      const user = new User();

      sessionID = Math.random()
        .toString(36)
        .substr(2, 9);

      localStorage.setItem('sessionID', sessionID);
      user.slug = sessionID;

      this.cosmicService.setUser(user).subscribe(user => {
        this.setSessionUser(user);
      });
    } else if (!sessionStorage.getItem('user')) {
      this.cosmicService.getUser(sessionID).subscribe(user => this.setSessionUser(user));
    }
  }

  setSessionUser(user: User) {
    sessionStorage.setItem('user', JSON.stringify(user));
    this.userSource.next(user);
  }

  getSessionUser(): User {
    const user = sessionStorage.getItem('user');

    if (user) {
      return Object.assign(new User(), JSON.parse(user));
    } else {
      return null;
    }
  }
}

The init() method will be used on our app.component.ts:

constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.init();
  }

We will also need a way of setting and getting the user, let's extend our cosmic.service with the following methods:

  getUser(slug: string): Observable<User> {
    const url = `${this.singleObjectUrl}/${slug}`;
    return this.http.get<User>(url).pipe(
      tap(_ => console.log(`fetched user: ${slug}`)),
      map(_ => {
        return new User(_['object']);
      }),
      catchError(this.handleError<User>(`getUser: ${slug}`))
    );
  }

  setUser(user: User) {
    return this.http.post<User>(this.addObjectPath, JSON.stringify(user.postBody())).pipe(
      map(_ => {
        return new User(_['object']);
      }),
      catchError(this.handleError<User>())
    );
  }

Also note that we created an observable user$ that emits every time we set (or update) the user in session, you already saw the subscription on the product listing. More on this at the end of the article.

Back to the actions.component. It is a set of three buttons, as follows:

<div class="buttons has-addons is-centered">
  <a class="button is-primary" (click)="viewProduct()">
    <span class="icon is-small">
      <i class="fa fa-eye"></i>
    </span>
    <span>View</span>
  </a>
  <a class="button is-warning" (click)="addProductToCart()">
    <span class="icon is-small">
      <i class="fa fa-shopping-cart"></i>
    </span>
    <span>Add to cart</span>
  </a>
  <a class="button is-success" (click)="buyProduct()">
    <span class="icon is-small">
      <i class="fa fa-dollar"></i>
    </span>
    <span>Buy!</span>
  </a>
</div>

And the methods look like this:

  @Input() product: Product;

  viewProduct() {
    this.increaseInterest(1);
  }

  addProductToCart() {
    this.increaseInterest(2);
  }

  buyProduct() {
    this.increaseInterest(3);
  }

  increaseInterest(weight: number) {
    const user: User = this.userService.getSessionUser();
    this.product.categories.forEach((category: Category) => {
      user.increaseInterest(category, weight);
    }, this);

    this.userService.setSessionUser(user);
    this.cosmicService.updateUser(user).subscribe();
  }

When updating the interests, we also refresh the user in session and we also update the user in Cosmic JS, we never know when or how the user will leave the site! Let's go back to our cosmic.service and add this method:

updateUser(user: User) {
    return this.http.put<User>(this.editObjectPath, JSON.stringify(user.putBody())).pipe(
      map(_ => {
        return new User(_['object']);
      }),
      catchError(this.handleError<User>())
    );
  }

Wrapping everything up

We have now a way to show products, create users and their interests, update them and store them. That's it... almost. How does the product listing page change based on all this? There is one last thing we haven't go through yet: the customSort pipe on product-listing.component. Here is how it looks like:

@Pipe({
  name: 'customSort'
})
export class CustomSortPipe implements PipeTransform {
  transform(value: Product[], interests: JSON): Product[] {
    value.sort((a: Product, b: Product) => {
      const aWeight = this.getWeight(a.categories, interests);
      const bWeight = this.getWeight(b.categories, interests);

      if (aWeight < bWeight) {
        return 1;
      } else if (aWeight > bWeight) {
        return -1;
      } else {
        return 0;
      }
    });
    return value;
  }

  getWeight(categories: Category[], interests: JSON) {
    let weight = 0;
    categories.forEach(category => {
      weight += interests[category.title] || 0;
    });
    return weight;
  }
}

This pipe will take the product list and order it by weight, based on the user's interests provided via arguments...

... And that's the magic: the product listing page is subscribed to the changes in the session user, so every time the user performs an action, the user changes and the sorting re-executes with the changes.

That's all, I hope this would have demonstrated how to offer a customized experience for your users with the help of Angular and Cosmic JS.

Google Cloud Functions: Sending emails using Gmail SMTP and Nodemailer

Diego Perez — Fri, 12 Apr 2019 16:16:52 +0000

I have a very simple website hosted on a GCP storage segment and now I need to make it slightly less simple by adding a contact form. Then I realized that the easiest was to use everything I already have more or less in place: I could write a Function using the Google Cloud Platform that would send the emails using the GSuite account I use for the same domain. Let's see how everything goes!

The set-up

We need to use the OAuth2 authentication method, and for that to work we first need to go to the gcp console and select (or create!) a service account. Once this is done, click on the More button (the three dots) and then click Create key, this will take you to the process of creating a service key and will download a JSON file with all the data we need.

Now, we have to go to the GSuite control panel and enable de API for the service account. Go to Security -> Advanced security -> Manage API client access and enter your client_id and https://mail.google.com/ for the API scope. You can find your client_id in the JSON file.

The Google Cloud Function

To create a Google Cloud Function, we have to go to the Functions Overview page in the gcp console, click on Create function and give it a name. Then we need to select the HTTP Trigger and the Node runtime. You would also probably want to select the lower memory allocation possible. For now, we will use the inline editor, so we will later need to paste the contents of our index.js and package.json there. We need to set the Function to execute, sendMail in my case; and then we can click on more to set some environment variables. Our code will use the following:

GMAIL_ADDRESS: This is the user that we will use for authenticating, bear in mind it has to be a real user and not an alias.
CLIENT_ID: found in the JSON file.
PRIVATE_KEY: found in the JSON file.

We will also set MAIL_FROM, MAIL_TO and MAIL_BCC; these can be sent in the request but we want to have a fallback as they won't be mandatory.

The code

The only dependency we are going to have is Nodemailer, so:
npm i --S nodemailer

Now, let's take a look at the code:

exports.sendMail = (req, res) => {}

For this function to work, our sendMail method will provide two arguments: the request and the response.

  if (!req.body.subject || !req.body.text) {
    res.status(422).send({
      error: {
        code: 422,
        message: "Missing arguments"
      }
    });
    return;
  }

First thing we do is check if we have everything we need to carry on, in my case I only care if I have an actual email to send, other parameters like from or to are optional as I will store environment variables for them, but you can check for whatever you need to!

const nodeMailer = require("nodemailer");

const transporter = nodeMailer.createTransport({
  host: "smtp.gmail.com",
  port: 465,
  secure: true,
  auth: {
    type: "OAuth2",
    user: process.env.GMAIL_ADDRESS,
    serviceClient: process.env.CLIENT_ID,
    privateKey: process.env.PRIVATE_KEY.replace(/\\n/g, "\n")
  }
});

Now we create a transport with our configuration. It will take the values from the environment variables we previously defined. Note that we are doing a string replacement as the platform would have escaped the \n in our key, if we don't do this the private key won't be valid.

const mailOptions = {
  from: req.body.from || process.env.MAIL_FROM,
  to: req.body.to || process.env.MAIL_TO,
  bcc: req.body.bcc || process.env.MAIL_BCC,
  subject: req.body.subject,
  text: req.body.text
};

Now we define our mail options, again, these may be different from what you need, you can check the documentation for more detail on what's available.

transporter
    .sendMail(mailOptions)
    .then(() => {
      res.status(200).send({
        data: {
          code: 200,
          message: "Mail sent"
        }
      });
    })
    .catch(e => {
      res.status(500).send({
        error: {
          code: 500,
          message: e.toString()
        }
      });
    });

Finally, we try to send the email and return the appropriate response. You can check the full code on github

Syncing your repo

You probably noticed that there are several options to upload the code to your Function, one of them is attaching a Cloud Source repository... and that's great because then you can maintain your function just by pushing your code to the repo. My problem is I like to use GitHub, and that's not an option here... But we can mirror our repos!

We need to add a new Cloud Source repository on Google Source Repositories. Click on Add repository and select Connect external repository. Then, select the project where you have your Function and choose your connector (GitHub or Bitbucket). Next thing to do is authorize Cloud Source Repository to store your credentials, follow the steps to connect with your account and select the repo you want to associate with your Cloud Source repo. The name of the repository will have github_ or bitbucket added to the beginning of its name, and will automatically in sync with your original repository.

Once we have our Cloud Source repository ready, we can go back to our Function, click edit and select Cloud Source Repository as source: fill in the repository name and the branch or tag you want to link, and you are ready to go!

How to create a simple company website with Cosmic JS and Angular

Diego Perez — Tue, 09 Apr 2019 15:02:37 +0000

* This article will assume some basic knowledge of Angular so it can focus on the specific task of requesting and showing data from Cosmic JS

TL; DR

Take a look at the repository and install the app

What is this app about?

A typical company website is just a set of pages structured in a more or less simple navigation. We want to create a website that allows the user to create any number of pages and decide the structure for the navigation, without the need to wait for a code release. For that, we are going to rely on Cosmic JS and create the structure to hold this project. On this example, our bucket will have the following object types:

Pages. This is a simple object, with no additional metafields.
Navigation. It will hold a collection of Pages.
Presets. This is a configuration object with a list of attributes that will help us start our app. It will hold the value for the homepage and the main navigation that we will use for the menu of our site.

Using the API

Now that we defined the structure of our data, we need to create our Angular app (I recommend using the Angular CLI) and create a service to make our calls to the Cosmic JS API. See how simple is to request a single page object from 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);
  }

get a single page and save it to the stream to keep it cached for the session

Note that, for nested objects, Cosmic JS will not return the full tree, so sometimes you will need to concatenate calls to make the most of our service, e.g.: When fetching the main presets, you would probably want to include the navigation pages.

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);
    }
  }

this call will combine the result of getNavigation into the result of getPreset

Our api calls need to be authenticated with a read key, we can include that on each method, but the easiest may be to create an interceptor. This will intercept all http requests, so we check if it's a Cosmic JS request and append the read key where necessary.

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);
  }

intercept and append the read or write parameters

Routing to the pages

At this point, our website does nothing, the first thing it needs to do is to know how to load its first page. We need to create a routed module for the Pages, and set it to load on the root. Once inside the module, on its own routing, we will set a route for the parameter :slug to load the Page Component. And what happens when there is no route specified? This will be our most common scenario, for that, we set an empty route with a Guard.

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

A guard will be executing when matching a route and before loading the component, so we will use it to fetch the main presets from Cosmic JS, and redirect the app to the homepage we stablished.

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

from Angular 7.1, canActivate can return either a boolean or an UrlTree

Components

Now we have a route configuration that will load the Page component, and this is the way to load a page using the slug from the parameter list:

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

now we can use the page object on our template

With this, we have a way to navigate via url, but we should also load a menu so the user can see the pages available. For that, we will add a menu component on the core module, as it will be shared throughout the app. Our menu will be composed of a navigation list, a logo and the company name; all of this is defined on the presets, so the menu will have a call like this:

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

note that we specifically ask to include the navigation by adding "true" as a parameter to the method

All of this would allow you to quickly create a website using Angular and Cosmic JS, all that is left to do is to create the templates and extend the configuration to meet your needs.