In-app Task Management

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 secure file sharing 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

To get started, you will need a JWT token for authentication. Now, there are various ways by which you can create JWT token and get your weavy app up and running. Let us explore the various ways one by one!

Way 01) Manually Creating JWT Token

You can use online websites like https://jwt.io/ to manually create JWT token and place them in your code. This can be used to quickly test the integration and is the recommended way for beginners or someone who is trying to get started. Please go through this article for learning how to move forward with this approach.

Way 02) Creating an Endpoint at your end

Now, if you are not a .NET developer or you want separation of concerns, you can choose to create an API endpoint at your backend and use that to get JWT token to move forward. 

Way 03) Creating an Endpoint at Weavy Server SDK 

The last option is to modify/add code inside your weavy backend. If you are a .NET developer, you can easily make an API at weavy backend, but if you are not a .NET developer, still you can follow this tutorial to learn how to create an API from weavy backend and use that API to fetch JWT token and complete the auth process.

We will follow the last option throughout this tutorial.

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 task management app 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 Tasks Management Feature

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

<div id='tasks-management-container'></div>

Now that we have created the container, let us instantiate a weavy client and tell weavy to place the tasks management app 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: "tasks-management", type: "tasks", container: "#tasks-management-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 tasks management app integrated inside your app!
So simple, right? Feel free to visit our developer portal to look at more tutorials.