Integrate In-app Activity Feeds

Reading time: 5 mins

The best way to get started with Weavy is to make sure you have a local development instance of the Weavy backend up and running.

Introduction

This tutorial will show you how to quickly add the activity feeds inside of your application in minimal lines of code. Make sure you have your Weavy URL where you deploy your weavy backend and we are all set to go!

Loading the Weavy Client

In order to start using the weavy client SDK, we have to instantiate the weavy client. To instantiate the client, we need to authenticate the signed in user. The authentication is fairly simple and managed on the go using the jwt token. You can read more about ways to setup authentication

Setting up Authentication

Creating your Weavy Client

Head over to {your-weavy-url}/manage/clients and create a new client as described in below image.

You can use your existing clients if available. Note down the client id and client secret, it will be used for authentication. 

Creating the JWT Token

To create JWT Token for the logged in user, we need to create an endpoint on the server-side which can give us the token. Head over to the backend directory and open up the controllers, here is the nested path - /src/Areas/Api/Controllers. We will create new controller and expose the endpoint /account/token for GET request. Create a new controller AccountController.cs and paste this code. To know more about the fields inside payload, read them here.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Jose;

 

namespace Weavy.Areas.Api.Controllers

{

    /// <summary>

    /// Simple controller for getting user token.

    /// </summary>

    [RoutePrefix("account")]

    public class AccountController : Controller

    {

        [HttpGet]

        [Route("token")]

        public ContentResult Token()

        {

            var payload = new Dictionary<string, object>()

            {

                { "iss", "83c66547-0514-49c3-a63b-eb70433b5075"},

                { "sub", "rony" },

                { "exp", 1300819380 }

            };

            string token = Jose.JWT.Encode(payload, null, JwsAlgorithm.none);

            return Content(token, "text/html");

        }

 

    }

}

Using the JWT Token

Your application can now use the {your-weavy-url}/account/token endpoint to get the JWT token. You should pass additional user data like user_id, email, etc. to create user specific token, the above is just for demo purpose.

Now, we are all set to launch activity feeds inside the application. Locate the HTML of the page on which you want to add activity feeds. Place this inside the <head> tag.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="{your-weavy-url}/javascript/weavy.jquery.js"></script>

Adding the Activity Feeds Feature

So far, we have successfully integrated weavy inside of your app. Next, we will add the activity feeds into the page. To do so, place this container inside of your HTML where you want to add the activity feeds. Our UI is responsive, so it will automatically adapt if you render it full-screen or embedded into a smaller widget.

<div id='activity-feeds-container'></div>

Now that we have created the container, let us instantiate a weavy client and tell weavy to place the activity feeds inside this container. To do so,  add this script to your code which creates a weavy instance using the JWT token we created and create a weavy space and add an app to that space. Feel free to learn more about spaces and apps.

<script>

    jQuery.noConflict();

    var getToken = function () {

        return new Promise(function (resolve, reject) {

            $.ajax({

                url: "/account/token",

                method: "GET",

                success: function (token) {

                    resolve(token);

                },

                error: function (result) {

                    reject("Failed to retrieve token");

                }

            });

        });

    var weavy = new Weavy({ jwt: getToken });

    

    weavy.space({ key: "global" }).app({ key: "feeds", type: "posts", container: "#activity-feeds-container" });  

  </script>

PLEASE NOTE! This is just for demo purpose. In real-world application, you will need to authenticate your signed-in user and use your own weavy backend.

Reload the page and you will be able to see the activity feeds integrated inside your app!
So simple, right? Feel free to visit our developer portal to look at more tutorials.