DEV Community: Patrick Stolc

What’s next: JavaScript Generation

Patrick Stolc — Sat, 29 Aug 2020 11:50:41 +0000

When creating a no-code tool, you quickly realize that the users’ skill set and training differ very much. You see anything from no coding experience to very skilled programmers. Our vision at Busywork has always been to allow designers and frontend developers to make web apps without programming, recognizing that web apps’ backend is the most time-consuming and challenging to make.

As the Busywork platform has evolved, it has been apparent to us that while users find the node-based editor intuitive and easy to use, integrating the backend with their frontend is hard. The fact that users know how to build but lose their way when needing to integrate their work in their frontend is a critical problem to solve.

What do we mean by integration? A web-based frontend usually consists of HTML and CSS. Python or JavaScript are often used to write backends. The integration of the two is the glue that ties everything together and turns a static site into an app. The glue is JavaScript.

While tools like Webflow take the code out of making a frontend, we at Busywork take the code out of making a backend; there are very few tools that allow you to connect the two easily.

Busywork will also generate your glue (JavaScript).

How will we solve "Integration"?

The problem of integrating our Busywork backend into any frontend isn’t new. We’ve shown off a demo that solves this problem visually and intuitively. But it has felt too disconnected from our platform.

Patrick Stolc

@patrickstolc

Just a quick demo: Connect your @busyworkhq backend to @webflow without writing any code.

youtu.be/NSBLT491vEU

@c_spags this one is for you 👊

08:33 AM - 21 Feb 2020

4 30

When planning for a new feature, we are always thinking about the long term viability and how it should support higher complexity than we can imagine at the moment. We’ve realized that there’s only so much you can do using forms (check the previous demo) before you lose track — especially with conditional logic. Also, embedding the integration tool directly into a hosted static site creates a big assumption: you have a deployed version of your static site.

To solve the issues arising from a form-based integration tool, we’ve decided to move everything into our node-based editor. The move to the node-based editor will allow users to keep better track of their integration-flows, and the way of working is more cohesive with how you already use Busywork. With this way of creating integration-flows, we also introduce new building blocks. You will exclusively use these for connecting your backend to your frontend.

Backend workflows get executed when a frontend or server sends an HTTP request to the URL of the workflow. The execution of integration-flows is different. Integration-flows get triggered by user interactions, such as the click of a button, or changes in the app state.

Suppose you want to let a user add a new record to your database, it could be a new job post. In this simple case, your frontend would have a form that allows the user to fill in the job post’s details. On the backend side, you would insert the data into the database. To connect the frontend and backend, the objective would be to execute the backend workflow when the user has filled and submitted the form. From the result of the workflow, successful or failed, you can close the loop and give the user feedback with something like a message.

How it Works

Busywork revolves around the concept of workspaces: one workspace per project. The goal is to separate concerns and isolate workflows, databases, and user management. A new idea that we introduce is Triggers. Triggers are what you need to set up to connect your front and backend, and are a part of a workspace.

Our goal is to take the most popular paradigms from programming and make them accessible to people with little or no programming experience. The Busywork platform itself uses components, and we are confident that this is the best way to build an app.

A component is a reusable element in your web app with precisely defined behavior and optional data-binding. If we look at the simple example of a todo-list, it consists of a list of tasks and a form that allows you to create a new task. Applying the paradigm of components to this example, we would have a component representing the list and a component that represents the form.

A task list component has to present the tasks from the database. For the frontend to show the tasks, you need to establish a way of communicating with the backend and defining one or more functions that change your frontend. Traditionally.

With Busywork, you make one or more flows on a per-component basis that connects the specific fields from the database that you want to display on your frontend.

The new task component has to send the user input to the backend, which then adds a new record to the database. Breaking this component down reveals a longer chain of actions: user clicks form button -> add the task to database -> return a successful or failed message to the user.

As the users create a new task, the list of tasks needs to be updated. You don’t need to extend your “new task flow” to do this. Busywork detects any changes that are bound to your frontend and updates it automatically.

The above is just a short teaser of what we are working on to make integration easier. We will reveal more details, examples, and videos very soon.

Our Long Term Goal

What we’ve done up until this point has laid the ground for letting users connect their Busywork backend to any web-based frontend. We’ve focused very much on Webflow, but we are also able to support other frontend platforms. The current limitation is still the need for a static site to connect front and backend.

We want to give designers the power of full-stack developers and accept that web-builders might not be their goto tool. To accommodate more design-oriented tools, we will be working on direct integration with Figma. The Figma integration will allow designers to generate static sites from their design, export the frontend code or deploy it to Netlify, and finally connect their app with Busywork.

Synchronizing design with deployment without the additional step of rebuilding on the frontend removes a lot of repetitive work. It will enable designers to ship the product they design. It allows designers to show working products to customers while iterating on the design. Ultimately designers will be able to handoff working apps to their customers.

Originally published at https://blog.busywork.co.

Feature Release: Field Rules | Busywork

Patrick Stolc — Thu, 26 Mar 2020 09:23:40 +0000

Following the addition of roles and permissions, we’ve just released field rules. Field rules allow you to set up validation rules for fields in your database.

Field Rules

The Busywork platform is database-centric, which means that many of the major feature releases lately have revolved around the database API and view. Our latest release introduces field rules. This allows you to set up validation for individual fields, visually, from within Busywork.

For starters the following rules have been implemented:

Text Rules

Maximum length
Minimum length
Equal To
Not Equal To

Number Rules

Equal To
Not Equal To
Greater Than
Greater Than or Equal To
Less Than
Less Than or Equal To

These rules are in addition to the schematic rules already available, such as required , unique and data type.

You can add multiple rules to each field, like in the example above. This allows you to set lower and upper limits to the length of a text field, for instance.

Examples

This example requires you to set up a new database table. The first step is to create the new table, let’s call it Projects. The table should contain the following fields:

In addition to specifying the type for the fields, now add a set of rules to the Lines of Code field. Specifically, add a rule that doesn't allow values less than 0 and greater than 100.000.

Now you can test that the rules validate queries correctly. Make a POST request according to the tables API docs. Pass data that should be valid according to the rules you've set up.

{
    "name": "SaaS Corp",
    "shipped": false,
    "owner": "Busywork",
    "lines of code": 1000
}

This results in a response similar to this:

{
    "id": "5e79d3ef26d01e05bbcc0138",
    "status_code": 201,
    "status_descr": "created"
}

Now we can try to make the query fail by changing lines of code to a value less than 0 or greater than 100.000.

{
    "name": "SaaS Corp",
    "shipped": false,
    "owner": "Busywork",
    "lines of code": 100001
}

This should give you the following response:

{
    "status_code": 400,
    "status_descr": "lines of code must be less than or equal to 100000"
}

Confirming that the insert operation isn’t valid because of the lines of code value we're trying to pass.

What’s next?

The next item on the roadmap will allow you to link storage items, such as images, videos or documents to fields in your database. This will allow you to implement user uploads and reference their files directly in your database.

Feature Release: Roles & Permissions | Busywork

Patrick Stolc — Thu, 12 Mar 2020 14:42:53 +0000

Time for another important release to the Busywork platform. This year has already brought some great improvements to the platform with cloneable workflows, an improved database view, and new integrations.

This release solves two important problems:

Easily securing data
Less work when building workflows

Roles

This one has been on the top of the list for some time and now it’s here. We’ve added Roles to the system, allowing you to define data access permissions for tables in your database on CRUD-level.

With this feature, we’ve predefined some workspace roles (that you can’t delete, but you can edit) that could come in handy. This also simplifies the workflow with Busywork. The roles that we’ve defined are:

Administrator

This role has full access to all operations on all tables, by default. Administrator access is granted by an API token. You’re allowed to restrict the permissions for the administrator as you like.

Guest

Is the default role, if no access token is passed to the Busywork API. This role can be used for publically readable data if you use parts of Busywork for e.g. CMS.

Signed in User

The “Signed In User” is a role that’s coupled with the user management system of your workspace (if you’re using one). Any query that creates a new database object is contributed to the authorized user, that has made the API call.

Now when that user needs to read objects from the database, and the design states that a user can only access their own objects, giving this role read access will ensure that no other user is able to read that user’s data.

Permissions

This release of roles and permissions is just a start. On our roadmap, we are already planning on supporting more complex types of roles. For now, role permissions are specified for create, read, update and delete operations.

The next release of enhancements to our role and permissions module will allow for more fine-grained control of resource permissions, allowing you to define CRUD access down to the table field.

Tokens

For each role, it’s possible to generate multiple access tokens. You can, for instance, generate an administrator token for each member of your team, to have a finer-grained view of who’s editing what.

Examples

This example assumes you already have set up user authentication and authorization in your workspace. Authentication and authorization are cloned to your first workspace: Your Workspace.

In this example, we’ll show how to create the backend of a web app where a user can create and manage e.g. projects. First, we’ll create a table for storing all user’s projects and then use the roles and permissions feature to manage read and write permissions.

Projects Table

First, we create a new table in the table database view. The table will contain the following fields:

Creating a User

Now we need to create a new user in order to add projects for this user. In the workflow called Sample Sign Up we copy the workflow webhook that allows us to execute the workflow.

Running the following curl in your command line will create a user with username yourusername and password astrongpassword.

fetch("https://gracious-lamport-58c4db.busywork.ai/sample-sign-up",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(
      {
        username: "yourusername",
        password: "astrongpassword"
      }
    )
  }
)
.then(
  userSignUpSuccess
)
.catch(
  userSignUpFailure
);

This will sign up a new user if the username is available.

Sign In

In order to create a user project we first need an authorized user. This means we have to sign in. Now copy the workflow webhook from the Sample Sign In workflow.

fetch("https://gracious-lamport-58c4db.busywork.ai/sample-sign-in",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(
      {
        username: "yourusername",
        password: "astrongpassword"
      }
    )
  }
)
.then(
  userSignInSuccess
)
.catch(
  userSignInFailure
);

The above script will return a response similar to this:

{
    "status": "success",
    "data": {
        "access_token": "eyJ0eXAiOiAiSldUIiwgImFsZyI6ICJIUzI1NiJ9.eyJyb2xlIjogIkNSRUFUT1IiLCAidXNlcl9pZCI6ICI1ZTVmYjkxOWFhZmViNWE5YzE2YzNhOGMiLCAiZXhwIjogMTU4MzM0MDk0My41ODk5NTZ9.WzwIEQ0eNLZgJIlLUjq2ZITzH\_dfWN\_MFlSRY1CvzkU"
    },
    "status_code": "200",
    "message": "user signed in"
}

Save the access_token from the server response.

Creating Projects

From the database table view, click the API button.

This will show you the generated documentation for the tables CRUD operations.

In the Roles & Permissions section, you can see that the signed-in user has full privileges.

Now you want to copy the code snippet for the POST method of the API, the one that creates a new project.

fetch("https://musing-lumiere-9f4d9f.busywork.ai/db/Projects/" + id, {
method: "POST",
    headers: {
"Authorization": "Bearer eyJ0eXAiOiAiSldUIiwgImFsZyI6ICJIUzI1NiJ9.eyJyb2xlIjogIkNSRUFUT1IiLCAidXNlcl9pZCI6ICI1ZTVmYjkxOWFhZmViNWE5YzE2YzNhOGMiLCAiZXhwIjogMTU4MzM0MDk0My41ODk5NTZ9.WzwIEQ0eNLZgJIlLUjq2ZITzH\_dfWN\_MFlSRY1CvzkU",
    "Content-Type": "application/json"
    },
    body: JSON.stringify(
{
    "name": "Client Project 1",
    "shipped": true,
    "owner": "CRM Systems Inc.",
    "lines of code": 4400
}
    )
}).then(response => response.json())

We need to add some headers to the request because we want to make an authorized request. Add a Authorization header to the request and the access_token as the value. This means the request is performed by the signed-in user.

Getting Projects

By default signed in users can read objects they’ve created. If we copy the snippet from the API for reading all projects, we should get the projects created by the current user.

fetch("https://musing-lumiere-9f4d9f.busywork.ai/db/Projects?offset=0&limit=100", {
method: "GET",
    headers: {
"Authorization": "Bearer eyJ0eXAiOiAiSldUIiwgImFsZyI6ICJIUzI1NiJ9.eyJyb2xlIjogIkNSRUFUT1IiLCAidXNlcl9pZCI6ICI1ZTVmYjkxOWFhZmViNWE5YzE2YzNhOGMiLCAiZXhwIjogMTU4MzM0MDk0My41ODk5NTZ9.WzwIEQ0eNLZgJIlLUjq2ZITzH\_dfWN\_MFlSRY1CvzkU",
    "Content-Type": "application/json"
    },
body: {}
}).then(response => response.json())

Again we perform the request as an authorized user and get the following data back:

{
    "results": [
        {
            "id": "5e68966f26d01e5bd059f494",
            "name": "Client Project 1",
            "shipped": true,
            "owner": "CRM Systems Inc.",
            "lines of code": 4400
        }
    ]
}

If you try to perform the same request without being authorized, you get the following response:

{
    "status_code": 403,
    "status_descr": "caller is not allowed to read"
}

In this way, we’ve restricted user-created resources to only be readable by the user that has created the record.

What’s next?

The next set of features that we plan on releasing will allow you to visually create validators for fields in your database. This will allow you to set up rules, such as minimum length and the maximum length of a string. While completing this next set of features we’ll be releasing a tutorial series on building a complete web app using Busywork.

Originally published at https://blog.busywork.co.

Sign-up with SMS Confirmation using Twilio & Busywork

Patrick Stolc — Thu, 20 Feb 2020 09:24:27 +0000

Hey everyone 👋

Just made the first in a series of weekly videos on how to accelerate your backend development using busywork.co.

This week: Sign-up with SMS confirmation. Check it out!

Youtube

https://www.youtube.com/channel/UC79ohbrBS7FGJgGeTiEgZjQ/

Follow me

https://twitter.com/patrickstolc

Follow Busywork

https://twitter.com/busyworkhq

Angular User Registration & Login using Busywork as a Backend

Patrick Stolc — Thu, 06 Feb 2020 19:06:51 +0000

Busywork is a backend-as-a-service that allows you to assemble the backend functions you need for your web app, in minutes. Busywork comes with a fully-managed database and storage. Within Busywork you can add already built modules to your backend or build from scratch.

In this tutorial, I will show you how to use Busywork to create:

User Sign Up
User Sign In
User Sign Out

Setting up Busywork
Setting up Angular 8
User Authentication Service
Setting the Access Token
Guarding Content
Sign Up Component
Sign In Component
Profile Component
Conclusion

Step 1: Setting Up Busywork

Go to https://busywork.co/sign-up/ and register. It has a free plan that contains all the features that we need for this tutorial.

Once signed in, go to Builds where you'll see all of the backend functions we need for this tutorial.

The already created functions serve as simple examples of what you can make in Busywork. Feel free to discover other and more complex flow that for instance allow you to send a welcome email, add a user to your CRM system and ...

Step 2: Setup an Angular 8 Project

To get started we need to create a new Angular project. We'll be using the Angular CLI tool to create the new project. Run the following command:

ng new busywork-user-authentication

Which will prompt you about routing and which styling you want to use:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]

Now we have to change the directory to our newly created Angular project.

cd busywork-user-authentication

For this tutorial, we'll need to create a few components:

Sign Up Component
Sign In Component
Profile Component

Create the components by running the following commands.

ng g c user/sign-up
ng g c user/sign-in
ng g c user/profile

Finally, we will be using Bootstrap 4 to provide some styling to our components and elements. Add it to your project by running this command.

npm i bootstrap

Add the Bootstrap style to your project by adding the following line in the angular.json file.

"styles": [          
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
]

Now you are ready to start your app.

ng serve

Step 3: User Authentication Service

We now create a service that we will use as an abstraction for our Busywork functions. Inside the user folder we create a service called authentication.

ng g s user/authentication

We are consuming the Busywork API using AJAX calls, so we need to make the HttpClientModule available within the service. In app.module.ts import the module.

import { HttpClientModule } from "@angular/common/http";

And add it to the imports section of the module declaration.

imports: [
  .
  .
  HttpClientModule,
  .
  .
],

First, we initialize some variables that we'll be using throughout the methods in the service.

// your busywork workspace URL
workspace = 'http://gracious-lamport-58c4db.busywork.ai';
// JSON header
jsonHeader = {headers: new HttpHeaders({'Content-Type':  'application/json'})};

Next, we create methods for:

Getting the users access token
Signing up the user
Signing in the user
Signing out the user
Authenticating the user

Get Access Token

We'll be using the local storage for storing the user's access token once obtained. We need to access the token later, so we make a handy helper function inside the authentication service.

getAccessToken(){
  return localStorage.getItem('user_access_token');
}

Sign Up User

To sign up a user we need to invoke the appropriate Busywork function: this.workspace + '/sample-sign-up'. Inside Busywork you can see the required arguments of the function. We need a username and password to sign up a user.

signUp(username:string, password:string){
  return this.http.post(
    this.workspace + '/sample-sign-up',
    // body content - required args can be seen in the Busywork function
    {
      'username': username,
      'password': password
    },
    this.jsonHeader
  );
}

When we get a response from the Busywork API we can choose what to do if the user has been signed up or if the sign up failed.

Sign In User

Signing in the user is done in the same way - we send username and password to the Busywork function. But with this function, we want to store the user's access token if the sign-in is successful.

signIn(username:string, password:string){
  return this.http.post(
    this.workspace + '/sample-sign-in',
    // body args
    {
      'username': username,
      'password': password
    },
    this.jsonHeader
  ).subscribe(
    (result:any) => {
      // save the access token in local storage
      localStorage.setItem('user_access_token', result['access_token']);
      // save the user id in local storage
      localStorage.setItem('user_id', result['user_id']);
      // change route to the profile component
      this.router.navigate(['profile']);
    }
  )
}

Finally, if the user has signed in we redirect the user to the profile page.

Sign Out User

For sign-out, we don't need to send any data to the function. The function only needs the access token, which will be included in the request header.

signOut(){
  return this.http.post(
    this.workspace + '/sample-sign-out',
    {},
    this.jsonHeader
  ).subscribe(
    (result:any) => {
      this.router.navigate(['sign-in']);
    }
  )
}

Authenticating the User

This service method is used to check with the Busywork API if the user's access token is valid. A user's access token is invalid if it has either expired or been revoked on sign-out.

authenticate(){
  return this.http.post(
    this.workspace + '/sample-authenticate',
    {},
    this.jsonHeader
  );
}

Step 4: Setting the Access Token

All authentication in Busywork uses JWT tokens to determine whether a user is signed in or not. This also allows you to gate content and query data belonging to this particular user.

Using JWT tokens requires us to pass this token with every request we make to Busywork. We pass the token in the header of the request. We could set it manually every time we make a request or use a HttpInterceptor that can do it for us.

In the user folder create a new Typescript file and call it user.request.interceptor.ts. This will hold the HttpInterceptor.

import {Injectable} from "@angular/core";
import {HttpInterceptor, HttpRequest, HttpHandler} from "@angular/common/http";
import {AuthenticationService} from "./authentication.service";
import {isNullOrUndefined} from "util";

@Injectable()
export class UserRequestInterceptor implements HttpInterceptor {
  constructor(private authService: AuthenticationService){

  }

  // interceptor transforms an outgoing request before passing it to the next interceptor
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // get the users access token using our helper function
    const accessToken = this.authService.getAccessToken();

    // in case it isn't set
    if(isNullOrUndefined(accessToken))
      return next.handle(req);

    // set the header
    req = req.clone({
      setHeaders: {
        Authorization: "Bearer " + accessToken
      }
    });
    return next.handle(req);
  }
}

To use the HttpInterceptor we have to provide it in our app module.

@NgModule({
  declarations: [
    AppComponent,
    SignUpComponent,
    SignInComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UserRequestInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

Step 5: Guarding Content

Implementing user authentication means that we most likely want to guard private content from the public. We will guard certain routes in our app by placing a guard. This guard uses a Busywork function to check if an access token is valid.

We create the guard using the following command:

ng g guard user/auth

In the auth.guard.ts file, that you've just created, the class AuthGuard implements an interface CanActivate. It requires us to return one of the following types:

The response from the Busywork function is a JSON object. In order to implement the interface correctly, we need to map the response we get from Busywork.

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.authService.authenticate().pipe(
    map(
      active => {
        return active['status'] == 'success';
      }
    )
  );
}

The canActivate function is used to determine if a route can be accessed by a user.

Now we can set up the routes of the app, in app-routing.module.ts, and protect the profile using our AuthGuard.

const routes: Routes = [
  {path: '', redirectTo: '/sign-in', pathMatch: 'full'},
  {path: 'sign-in', component: SignInComponent},
  {path: 'sign-up', component: SignUpComponent},
  {path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]}
];

Step 6: Sign Up Component

In the sign-up component, we need to create a sign-up form. This is a very simple example, so we only want a username and password. We'll use Reactive Forms to build the form validation. This requires us to import the following modules:

import { ReactiveFormsModule, FormsModule } from "@angular/forms";

And adding them to the import section of the module declaration in the app.module.ts file.

imports: [
  BrowserModule,
  AppRoutingModule,
  ReactiveFormsModule,
  FormsModule,
  HttpClientModule
]

In the sign-up component, we will first create a form group with a username and password field.

form: FormGroup;
constructor(private fb: FormBuilder, private authService: AuthenticationService, private router: Router) {
  this.form = this.fb.group({
    username: new FormControl('', Validators.compose([Validators.required, Validators.minLength(3)])),
    password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)]))
  });
}

Next, we create a method that is called when the form is submitted. The method will use the Authentication Service to send a request to your Busywork API.

signUpUser(){
  this.authService.signUp(
    this.form.get('username').value,
    this.form.get('password').value
  ).subscribe(
    (result:any) => {
      if(result['status'] == 'success'){
        this.form.reset();
        this.router.navigate(['sign-in']);
      }
    }
  )
}

The HTML part of the component looks like this:

<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Sign Up</h1>
    </div>
    <div class="col-12">
      <form [formGroup]="form" (ngSubmit)="signUpUser()">
        <div class="form-group">
          <label>Username</label>
          <input type="text" class="form-control" formControlName="username" placeholder="Enter a username" required>
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" formControlName="password" placeholder="Enter a password" required>
        </div>
        <button type="submit" class="btn btn-success">Sign Up</button>
      </form>
    </div>
  </div>
</div>

Step 7: Sign In Component

The sign-in component is very similar to the sign-in component. The contents of sign-in.component.ts is:

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {AuthenticationService} from "../authentication.service";

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent implements OnInit {

  form: FormGroup;
  constructor(private fb: FormBuilder, private authService: AuthenticationService) {
    this.form = this.fb.group({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
  }

  ngOnInit() {
  }

  private signInUser(){
    this.authService.signIn(
      this.form.get('username').value,
      this.form.get('password').value
    );
  }

}

And sign-in.component.html:

<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Sign In</h1>
    </div>
    <div class="col-12">
      <form [formGroup]="form" (ngSubmit)="signInUser()">
        <div class="form-group">
          <label>Username</label>
          <input type="text" class="form-control" formControlName="username" placeholder="Enter a username" required>
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control" formControlName="password" placeholder="Enter a password" required>
        </div>
        <button type="submit" class="btn btn-success">Sign In</button>
      </form>
    </div>
  </div>
</div>

Step 8: Profile

Now users are able to both sign-up and sign-in, meaning they can access the Profile-page. We haven't collected any information besides the username and password of the user - so we don't have that much to display. But we can allow the user to sign out again.

In profile.component.ts put:

import { Component, OnInit } from '@angular/core';
import {AuthenticationService} from "../authentication.service";

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  constructor(private authService: AuthenticationService) { }

  ngOnInit() {
  }

  signOutUser(){
    this.authService.signOut();
  }

}

And in profile.component.html:

<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>You're in!</h1>
      <button type="button" class="btn btn-danger" (click)="signOutUser()">
        Click here to sign-out
      </button>
    </div>
  </div>
</div>

Conclusion

This concludes this entry-level tutorial on how you can implement user authentication into your app, using Busywork as a backend. In this tutorial, I've shown a minimal example. In Busywork you'll be able to expand the sign-up process to send welcome emails and add a user to your CRM system.

I'm going to post more tutorials on how you can build the backend of your web app using Busywork. Please let me know what topics you would like me to cover.

The tutorial code can be found in this repository.
Check out a demo of the app here

User Authentication in Webflow using Busywork. Part 1: Setup & User Sign Up

Patrick Stolc — Wed, 22 Jan 2020 13:52:03 +0000

Do you know how to add user authentication to Webflow? If not, find out how you can do it using Busywork.

This tutorial is the first in a series of tutorials showing how you can use Busywork to do user authentication in Webflow. The series consists of the following parts:

Part 1 — Setup & User Sign Up

Part 2 — User Sign In & Sign Out (Coming soon)

Part 3 — Authentication & User Page Guarding (Coming soonish)

Outline

Introduction to Busywork
Setting up Busywork
User Sign Up
Setting up Webflow
Webflow, meet Busywork
Demo
Conclusion

Introduction

Busywork is a no-code tool that allows you to make backend functions for any app using a visual development interface. Deploying backends in Busywork is easy; you have to click a button.

Busywork comes with a fully managed database and core services such as user management, which we will be using for this tutorial. The database and core services will allow us to easily create an entire workflow around the user sign up process by connecting it to our favorite third-party apps.

For more information on the concepts of Busywork, please have a look at the documentation.

Setting up Busywork

Go to https://busywork.co/sign-up/ and register. It has a free tier that contains all the features needed.
Once signed in, please create a new build, name it, and save it. We are using this for the sign-up process.

Create a new Build

Everything in Busywork ready for the next part, which will be building the sign-up function. Click the new Build to open the editor.

User Sign Up

When a user signs up for our app, we need to save the credentials so that we can authenticate the user on sign-in. Usually, the sign-up process also involves a transactional email with some welcome and possibly an activation link. I’ll show how you can add a transactional email to your sign-up function.

Outline

Create a new Table
Function Arguments
Connecting the Blocks
Adding Transactional Emails using Postmark (Optional)

Create a new table

Inside the Build editor, we have to navigate to the database view, by clicking the “Database” button in the upper right corner.

Once inside the database view, we have to click the “New Table” button and name our new table, which could be “App Users”.

Now press “Enter” to save the table. Now go back to the Build editor.

Function Arguments

In Busywork, we can manipulate data, observe the data, and take actions based on what we find. For us to make a function, we first need to define the data that we expect the function to receive. We call these function arguments.

Inside the build editor, you see one block, the Test Data block. We use this to define the function arguments, using JSON. To register a user, we need at least a username and password. But, if we have a more detailed sign-up form we could also require:

Email
First name
Last name
Address
Phone
…

We are not going for a long form, so the JSON that we have to put in the Test Data block is the following:

{
 "username": "some_user_name",
 "password": "some_password",
 "email": "you@example.com"
}

The values can be anything as long as they are of the correct type. This is just for Busywork to infer what we can work on, inside the function.

Copy & paste the JSON data

Now, save the block.

Connecting the Blocks

Busywork comes with user management as a core service, meaning the process of signing up a user comes in the form of a building block. All we need to do now is drag the Sign Up block onto the canvas and set it up.

Drag & drop the block and connect it to Test Data

To set up the block, we need to:

Pick the table that we will use to store the user information
Which function argument that is the username
Which function argument that is the password
And if we want the user to sign in immediately after signing up.

Click the input field icon to the right to show fields in the function

Above, you can see how the block is set up for this tutorial. If you’ve named the function arguments differently, your set up will look different from this.

We cannot be sure that the user will register successfully. For instance, the username might be taken. The sign-up block will return the status of the registration, which we can use to decide whether to send a welcome email or not. Now we add an If/Else block to the canvas.

The sign-up block indicates if the user has registered

The condition that we are trying to match is whether the user has signed up or not.

In the event where the user registration fails, we want to send back that information to our frontend. We do that by adding an HTTP Response block. The block allows us to send information about the function status, a message, and optionally data.

Postmark integration is optional but allows you to send a welcome email

Now in the event where the user is registered, we want to send a welcome email using Postmark send back that information. The Postmark integration is optional, and you can skip it if you wish.

The completed function

And now, we can deploy our sign-up function by clicking the Deploy button.

Deploy with a single click

Setting up Webflow

First off, we need to create a new project in Webflow. We want to start with a blank project for this tutorial.

I won’t focus too much on the aesthetics of the “app” that we are making, but rather on how we integrate Busywork in Webflow. I’m making a very simple design, with a navbar and multiple pages — one page for each of the navbar elements.

Minimalistic (read: empty)

For the “Sign Up”-page, we need a form. This form will take user input and send it to our Busywork function, which in turn registers the user with the provided credentials.

Form elements corresponding to our sign up function arguments

As shown, the form asks the user for a username, password, and email. Each of the form elements and the form itself needs to have an ID. IDs are required for us to read the value from the form when it is submitted.

Username input settings

The same rules apply when making the “Sign-In”-page for our app. On this page, we only need the username and password, though.

Unfortunately, Webflow won't allow us to submit password fields. This means that we need to use a regular button for submitting the form.

Give the button a unique id — we will need this later

Finally, we want to give the user some feedback when signing up. There are two possible outcomes: successful registration or failure. For both cases, we want to display a message.

Simple div with text and display option set to None

The messages are represented by two divs inside the section that holds the sign up form. Initially, the page shouldn’t show any message. We want to toggle one or the other when we know if the user has been signed up. In order to do this, we set the display option to None for both divs. This ensures that nothing is displayed when the page is loaded.

This concludes the setup of our very basic sign up page in Webflow. Feel free to add more fields to your form.

Webflow, meet Busywork

For now, this is where no-code ends, and we need to do some light Javascript. We need to bind the actions of the UI elements to the functions in Busywork.

Your Webflow project will have a Custom Code section in the Site Settings. Navigate to that.

In the Head Code , we want to load a small Javascript library that easily allows us to call Busywork functions. In this particular case, we only need to load the Auth module.

<script src="http://cdn.busywork.co/busywork-js-sdk/latest/auth.min.js"></script>

In the Footer Code, we put the front end logic of our application. I’ll show the code in snippets and post the complete code in its entirety at the end of this section.

First off, the library we’ve just imported needs to first be initialized.

You have to change the URLs in the config object to the ones from your Busywork Builds. The URLs can be copied from the Busywork dashboard.

Click the URL to copy it to your clipboard

Or inside each of the Builds.

Now we are ready to connect the Javascript library to the form elements in Webflow. Our goal is to execute the function in Busywork that signs up a user when the form is submitted.

First, we create a function that is executed when our sign up form is submitted. Webflow doesn’t allow password fields to be submitted, so we need to use a regular button for our form. In this case, the ID of our button is btn-sign-up. When the form is submitted we read the values of the form input.

var username = document.getElementById('username').value; 
var password = document.getElementById('password').value; 
var email = document.getElementById('email').value;

Now is when the small library, which we’ve loaded previously, comes in handy. It simplifies what we need to do in order to call the Busywork function that we’ve created.

In the above snippet, we call the signUp method of the authentication object that started by creating. This takes care of sending data to our Busywork function and checks if the user has been registered. The method returns a Promise, that contains either true or false depending on the outcome of the sign-up. Based on the result of the signUp method we either show one or the other message.

And the complete Footer Code:

Demo

You can see and try a demo of what we’ve built here: http://busywork-authentication-tutorial.webflow.io/

Conclusion

In this first part of the series, I’ve introduced Busywork, its concepts and how it can be used with Webflow. A goal of this tutorial was to have a low code to no-code ratio, which I think we’ve achieved.

Stay tuned for the next parts in the series, and feel free to leave a comment or post suggestions to future tutorials.

DEV Community: Patrick Stolc

What’s next: JavaScript Generation

How will we solve "Integration"?

How it Works

Our Long Term Goal

Feature Release: Field Rules | Busywork

Field Rules

Text Rules

Number Rules

Examples

What’s next?

Feature Release: Roles & Permissions | Busywork

Roles

Administrator

Guest

Signed in User

Permissions

Tokens

Examples

Projects Table

Creating a User

Sign In

Creating Projects

Getting Projects

What’s next?

Sign-up with SMS Confirmation using Twilio & Busywork

Youtube

Follow me

Follow Busywork

Angular User Registration & Login using Busywork as a Backend

Table of Contents

Step 1: Setting Up Busywork

Step 2: Setup an Angular 8 Project

Step 3: User Authentication Service

Get Access Token

Sign Up User

Sign In User

Sign Out User

Authenticating the User

Step 4: Setting the Access Token

Step 5: Guarding Content

Step 6: Sign Up Component

Step 7: Sign In Component

Step 8: Profile

Conclusion

User Authentication in Webflow using Busywork. Part 1: Setup & User Sign Up

Outline

Introduction

Setting up Busywork

User Sign Up

Outline

Create a new table

Function Arguments

Connecting the Blocks

Setting up Webflow

Webflow, meet Busywork

Demo

Conclusion