Getting Started With GetStream Feeds in Angular

Recently, I have been playing around with the concept of creating a social media app. The essential part of a social media app is the feed that allows users from around the world view what is going on with the people and places they view as important.

One SaaS company that makes this relatively easy to set up and manage is GetStream.

After playing around with it a little while and realizing there isn’t much documentation for Feeds in Angular, I have decided to create my own to help with others going down the same rabbit hole as I did.

Getting Started

To get started with building your very own social media feed (Feed as we will be using from here own out), you will need a few things:

• GetStream Account (you can sign up by clicking here)
• An Angular App that you would like to build the Feed in (to see how to get one set up, click here)

Once you have those two items ✅, open the Angular App in your favorite IDE (my favorite is PHPStorm), and run the following command in the terminal:

npm i getstream

if you are using Yarn, you would instead type:

yarn add getstream

Adding the Feed Interfaces

To better understand the values we will be receiving back from the Feeds, we need to add the Interfaces.

First, create a folder in the app directory and call it types.ts . This is where we will store the Interfaces.

Inside that file, place the following:

export interface FeedResponse<T> {
  duration: string;
  results: T[];
  next?: string;
}

export interface FeedActivity<T = string> {
  id: string;
  message?: string;
  origin: string;
  target: string;
  time: T;
  attachments: FeedAttachment[] | null;
  actor: FeedUser;
  verb: string;
  object: string;
  course: string;
  participants?: string[];
  latest_reactions?: FeedReaction;
  started_at: T;
  foreign_id: string;
  own_reactions?: FeedReaction,
  location: FeedLocation;
  reactions: [];
  name?: string;
}

export interface FeedUser<T = string> {
  created_at: string;
  data: { name: string };
  id: string;
  updated_at: string;
}

export interface FeedLocation {
  type: string;
  coordinates: number[],
}

export interface FeedReaction {
  comment: FeedComment[];
  like: FeedComment[];
}

export interface FeedCommentData {
  text: string;
}

export interface FeedComment {
  created_at: string,
  updated_at: string,
  id: string;
  user_id: string;
  data: FeedCommentData;
  user: FeedUser;
  children_counts: { like: number };
  latest_children: FeedReaction;
  own_children: FeedReaction;
  kind: string;
  activity_id: string;
}

Creating the Feed Service

Now that we have added the correct package, next we need to create a Service that will store all the actions we would like to use with GetStream Feeds.

To create this Service, create a new folder named services and inside the folder create two files: feed.service.ts , and feed.service.spec.ts

Inside of feed.service.ts put:

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {StreamClient} from "getstream";
import {FeedActivity, FeedResponse} from "../types";

const stream = require('getstream');

@Injectable({
  providedIn: 'root'
})
export class FeedService {
  client;

  constructor(
    private http: HttpClient,
  ) { }

  retrieveFeed(feed_id: string, account_id: string, offset = 0, limit = 10): Promise<FeedResponse<FeedActivity[]>> {
    return this.client.feed(feed_id, account_id)
      .get({offset, limit});
  }

  retrieveClient(): StreamClient {
    return stream.connect(
      SAFE_REF_TO_FEED_API_KEY,
      TOKEN_RECEIVED_FROM_SERVER, // Will be expanded on in next article
      SAFE_REF_TO_FEED_APP_ID,
      {browser: false});
  }

  retrieveToken(): string {
    // Add in call to your Back-end to retrieve the token
    // For the specified user
  }
}

Now we have the base layer of what we need to get started with GetStream Feeds!

Next few articles I will be going over how to set up the back-end services to communicate with the app as well as how to use the functions we defined in the Service to display the Feed for the User.

Quick Note:

The main route the GetStream library uses to send data is through Promises.

If you would like a refresher course on Observables vs. Promises in Angular, Monsterlessons Academy has a great video on this!

In the next few articles, I’ll go over the process of re-creating social media feeds like Twitter, Facebook, and Tumblr!

If you would like to view my previously written articles or connect with me, visit my website by clicking here!