Egghead Instructor Bram Borggreve

Bram Borggreve

Hedonist, traveler, software developer. I have a great passion for JavaScript and work every day with LoopBack and Angular. Other passions are music, beer and traveling.



Unlock all of Bram's PRO Lessons
click for instant access!

Browse Bram Borggreve's lessons.

showing 20 lessons...

Use dynamic data in a GlimmerJS component

Use template variables in a GlimmerJS component

Create a new GlimmerJS component

Filter model data in LoopBack

P

Deploy a LoopBack API project using now.sh

P

Create a free database on MongoDB Atlas

P

Create a MongoDB DataSource in LoopBack

P

Define a remote method on a LoopBack model

P

Create a boot script to run code at the start of a LoopBack API

P

Configure ACL’s to protect the LoopBack API

P

Add Operation Hooks to a LoopBack model

P

Add unit tests to a LoopBack API project

P

Add validation rules to a model in LoopBack API

P

Create a relation between two LoopBack models

P

Setup a development mode in LoopBack API using nodemon

P

Initialize a project using Glimmer.js

P

Use create-react-native-app to Set Up a Simple React Native App

P

Persist in-memory data to a file when developing Node.js LoopBack API's

P

Create a model to persist data in a Node.js LoopBack API

Initialize a LoopBack Node.js Project through the CLI

Use dynamic data in a GlimmerJS component

2:08 js

In this lesson we will create an updateContent method that sets the value of our content property to the current epoch timestamp. We need to call toString() on the Date.now() method in order to make TypeScript happy.

updateContent() {
  this.content = Date.now().toString()
}

We create a constructor that takes the options parameter, call super(options) and call into our this.updateContent() method.

constructor(options) {
  super(options)
  this.updateContent()
}

When we refresh our page we can see that the value of content is set to the epoch timestamp.

To make the content really dynamic we use setInterval() to call into updateContent each second: setInterval(() => this.updateContent(), 1000).

When we save our file we see that our content does not get updated anymore and when we check the console we see that we get an error telling us that: The 'content' property on the my-component component was changed after it had been rendered. The error also informs us that we should Use the @tracked decorator to mark this as a tracked property.

We add the @tracked decorator to our property, we import tracked from @glimmer/component and we refresh the page. We verify that content gets updated each second.

We change our updateContent to add our the timestamp to the array. When we use this.items.push(this.content) to achieve this we see that the list does not get updated. This is because the @tracked decorator only tracks the re-assignment of properties.

The way to get this working is by re-assigning our items array inside updateContent. We assign a new array, de-structure the current items array and add the new content.

this.items = [...this.items, this.content]

Use template variables in a GlimmerJS component

1:22 js

In this lesson we will add a variable called content to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handlebars expression for expressions, { {content }}.

After this we create a new class variable called items, initialize it as an array with strings. To display this list in our template we add a <ul></ul> and inside this unordered list we use the handlebars each helper to display the list items.

And inside our each statement we will print a <li> tag and render {{ item}} inside it.

<ul>
  {{#each items key="@index" as |item| }}
    <li>{{item}}</li> 
  {{/each}}
</ul>

Create a new GlimmerJS component

0:32 js

In this lesson we will use the ember cli to generate a new component. Running ember g glimmer-component my-component generates the template and component class. We change the content of our component and add it to the main template in order to show it on the page.

node tutorial about Filter model data in LoopBack

Filter model data in LoopBack

1:16 node PRO

In this lesson we will look at the filters that can be used to retrieve and manipulate the data stored in LoopBack.

We will use Postman to interact with the /Categories and /Products endpoints.

Using the URL parameters we will apply at the various filters LoopBack has to offer: include, order, where, fields, limit and offset.

node tutorial about Deploy a LoopBack API project using now.sh

Deploy a LoopBack API project using now.sh

2:41 node PRO

In this lesson we will look at how to deploy our LoopBack API project using now.

We will install the now client, create an account and deploy our app.

Using now secrets features we will store our database connection url which we get by creating a free MongoDB Atlas database.

In order to simplify following deployments we will add a now key to our package.json where we use the name, alias and env parameters to configure our deployments. We will add some npm scripts so we can deploy our app in the desired way using npm run now.

node tutorial about Create a free database on MongoDB Atlas

Create a free database on MongoDB Atlas

1:20 node PRO

In this lesson we will create a free account on monogdb.com. After the account has been created we will create a group in MongoDB Atlas and in that group we create a free cluster. In order to create the cluster we need to provide a username and password. We create our user called admin and have the site generate our password for use. Once the cluster is created we look at where we can find the connection string.

node tutorial about Create a MongoDB DataSource in LoopBack

Create a MongoDB DataSource in LoopBack

1:44 node PRO

In this lesson we will create a dynamic datasource in LoopBack. If the API is started with the environment variable MONGODB_URL it will use this url and the loopback-connector-mongodb package to store the data in MongoDB.

In the course we will use a local MongoDB instance. If you don't have MongoDB running locally you can always create a free MongoDB Atlas database.

node tutorial about Define a remote method on a LoopBack model

Define a remote method on a LoopBack model

2:18 node PRO

In this lesson we look at extending the functionality of LoopBack models by defining a remote method.

A remote method is a method on a model exposed over a custom REST endpoint.

Using the lb remote-method command we will create the remote method meta-data in product.json. We will verify that this got created and that we see the new REST endpoint got added. Then we will create the actual method in product.js and enhance it so that the API will return an error if we want to buy a negative amount of products.

node tutorial about Create a boot script to run code at the start of a LoopBack API

Create a boot script to run code at the start of a LoopBack API

2:37 node PRO

In this lesson we will learn how to create a boot script.

We will use a boot script to create or update a predefined admin user, and give that user an Access Token. That way we don't have to log in to the API each time we want to use it as an authenticated user.

node tutorial about Configure ACL’s to protect the LoopBack API

Configure ACL’s to protect the LoopBack API

2:59 node PRO

In this lesson we will learn how to protect our API using ACL’s.

ACL stands for Access Control List and it's function is to control permissions of resources in the API. It does this by keeping a mapping between an API resource and a principal. An API resource as an API endpoint like a remote method or a whole model. A principal in LoopBack are users or applications that can be grouped in a role.

In order to get the API production ready we will protect a selection of our REST endpoints with ACL’s. We will look at how we can obtain an access token and how we can use that in our requests.

Finally we will write some unit tests to make sure that the ACL does what we expect. We enhance our test setup by exporting request with is provided by the supertest library.

In our tests we use request to verify that our endpoints return the correct HTTP status code.

node tutorial about Add Operation Hooks to a LoopBack model

Add Operation Hooks to a LoopBack model

2:39 node PRO

In this lesson we will learn how to add operation hooks to our models. In the Product model we will create a before safe observer that will check if the category we want to add the product to exists.

In our Category model we will create a before delete observer to prevent categories from being deleted when they have products.

We will create a unit test to verify that both of these operation hooks work as expected.

Add unit tests to a LoopBack API project

3:21 node PRO

In this lesson we will learn how to add tests to the project to make sure our API behaves as we expect.

After installing mocha and chai as devDependencies we will add test and test:watch scripts to our package.json. We will create a different datasource what we will use when running the tests by copying datasources.json to datasources.test.json and prefixing our test command with NODE_ENV=test.

We will verify that our tests run against an empty datasource. We’ll also add various tests to verify that our remote method and validation on the Product model behave as expected.

node tutorial about Add validation rules to a model in LoopBack API

Add validation rules to a model in LoopBack API

2:08 node PRO

We can add validation rules to our models to make sure the data we store in our API is how we want it.

In this lesson we will add validation rules to the Product model.

We will make sure the product name has a minimal length using the validatesLengthOf rule and that it is unique using the validatesUniquenessOf rule.

For the price property we will add a custom validation to make sure that the value entered is not a negative integer. Additionally we will show how to do an async validation using validateAsync . This can for instance be useful if you want the validation to depend on a value in the database or a remote system.

node tutorial about Create a relation between two LoopBack models

Create a relation between two LoopBack models

3:00 node PRO

A relation in LoopBack is a way to associate the data from multiple models with each other. LoopBack supports various types of relations each with a different use case.

In this lesson we will create a second model called Category and create a relation between the Category and the Product models. To do this we will first add a property to the Product model called categoryId. This will allow us to store for each Product the category it belongs to. We then move on to create the actual relationships.

Our first relationship defines that a Category hasMany Products and the second one that a Product belongsTo a Category.

After defining these relations we will use the API Explorer to see how we can interact with this related data.

Setup a development mode in LoopBack API using nodemon

0:29 node PRO

In this lesson we will learn to create a development mode for our server. We do this by installing nodemon as a dev dependency and creating a script tag called 'dev'.

This script tag will execute the command nodemon server/server.js --watch common --watch server.

We can execute this command by running npm run dev.

When running in development mode the server will be automatically restarted when there are changes detected in the common and server directories.

js tutorial about Initialize a project using Glimmer.js

Initialize a project using Glimmer.js

0:37 js PRO

GlimmerJS is a UI component library built by the Ember.js team. It is fast and lightweight and uses a combination of TypeScript and Handlebars to build the components.

In this lesson we will use the Ember CLI to initialize a new GlimmerJS project.

We will start by installing Ember CLI globally by running npm install -g ember-cli/ember-cli.

Next we will use the ember command to create our new project by running ember new egghead-glimmer -b @glimmer/blueprint .

When our project is created we cd into the project directory and start the development server. We will view the page in the browser and change the base template.

react tutorial about Use create-react-native-app to Set Up a Simple React Native App

Use create-react-native-app to Set Up a Simple React Native App

0:55 react PRO

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globally and create a new project.

After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called Expo Client on our mobile phone and use it to scan the QR code.

This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use console.log the messages will be printed in our terminal.

Download the Expo Client from App Store or Google Play

node tutorial about Persist in-memory data to a file when developing Node.js LoopBack API's

Persist in-memory data to a file when developing Node.js LoopBack API's

0:43 node PRO

In this lesson you will learn how to persist the data from the memory connector. As the name suggests, the memory connector stores the data in memory. This means that if you restart the server, the data is gone. In development mode it can be useful to store this data in a file, so it gets persisted between server restarts, and it can be easily inspected.

node tutorial about Create a model to persist data in a Node.js LoopBack API

Create a model to persist data in a Node.js LoopBack API

3:01 node

In this lesson you will learn what a LoopBack model is, you will create a Product model using the LoopbBack CLI. The product model will be based off the built-in PersistedModel which gives it basic functionality like Create, Ready, Update, Delete and some more. Using the API Explorer you can interact with the new model, store, retrieve, edit and delete the product data.

node tutorial about Initialize a LoopBack Node.js Project through the CLI

Initialize a LoopBack Node.js Project through the CLI

1:17 node

LoopBack is a framework built on top of Express for creating APIs. It allows you to create end-to-end REST APIs that can access data from many data sources such as MondoDB, PostgreSQL, MySQL or other REST APIs.

In this lesson you will learn how to install loopback-cli and create a new LoopBack API project. After creating the basic LoopBack project through the CLI, running the server will give us access to the project and API Explorer urls. The user model will be available to us because user authentication was enabled.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?