3. Data model.
Tags: webdev, javascript, beginners, tutorial
Published: 2022-08-18 05:39:58

---
published: true
title: 3. Data model.
tags: webdev, javascript, beginners, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--2Ycgb9E_--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7manuew9dwi5jlrf8p5.png
series: keyboard-learning-app
published_at: '2022-08-18T05:39:58Z'
---

- [Definition](#definition)
- [Keyboard](#keyboard)
- [Row](#row)
- [Key](#key)
- [`keyboardData/en.js`](#keyboarddataenjs)
- [Data source](#data-source)
- [Conclusion](#conclusion)

## Definition

**A data model** is a set of JS objects that describes all data inside an app and covers all its logic.

In the previous chapter we made an HTML/CSS mockup of our app.

The mockup with a clear HTML element structure is a basis to design the data model, because we can see there:

- element nesting
- repetitive patterns

You can see, that our mockup is build from repetitive rows. And inside each row there are repetitive keys. So we need a data structure with repetitive rows with nested repetitive keys.

## Keyboard

Keyboard is an array [^array] of rows.

```javascript
const keyboard = [row1, row2, row3]
```

## Row

Row is an array with keys.

```javascript
const row1 = [key1, key2, key3, ...]
```

## Key

Key is an object [^object] with the structure:

```javascript
const key = {
	code,
	label,
	main,
	shifted
}
```

Only `code` is required. Other properties are optional.

`code` identifies a key position on a physical keyboard. This code is the same for keyboards in all languages.

`label` is the text on the key if it doesn't match with `main` or `code`. For “Escape” `label` is “Esc”, for “Space” it is an empty string.

`main` is the value returned after key pressed: `1`, `2`, `q`.

`shifted` is the value returned after key pressed while holding shift key `!`, `@`, `Q`.

We don't always specify all these props, because we don’t need them, or we can get them from other props. E.g. `Tab` has only `code`, because it doesn’t have a returned value `main` or `shifted`, and its label are the same as the code. `Escape` has `label: Esc` because we want to display on the key shorter version of the `code: 'Escape'`. And it hasn’t also `main` and `shifted`.

## `keyboardData/en.js`

Inside root project folder make a new folder `keyboardData` and create there a file [^es6module] `en.js`:

keyboardData/en.js

```javascript
const keyboard = [
	[
		{ code: 'Escape', label: 'Esc' },
		{ code: 'F1' },
		{ code: 'F2' },
		{ code: 'F3' },
		{ code: 'F4' },
		{ code: 'F5' }
	],
	[
		{
			code: 'Backquote',
			main: '`',
			shifted: '~'
		},
		{
			code: 'Digit1',
			main: '1',
			shifted: '!'
		},
		{
			code: 'Digit2',
			main: '2',
			shifted: '@'
		},
		{
			code: 'Digit3',
			main: '3',
			shifted: '#'
		},
		{
			code: 'Digit4',
			main: '4',
			shifted: '$'
		},
		{
			code: 'Digit5',
			main: '5',
			shifted: '%'
		}
	],
	[
		{ code: 'Tab' },
		{
			code: 'KeyQ',
			main: 'q',
			shifted: 'Q'
		},
		{
			code: 'KeyW',
			main: 'w',
			shifted: 'W'
		},
		{
			code: 'KeyE',
			main: 'e',
			shifted: 'E'
		},
		{
			code: 'KeyR',
			main: 'r',
			shifted: 'R'
		}
	]
]

export default keyboard
```

The whole `keyboard` data model is a 2 dimensional array.

You can get any row from keyboard by index:

```js
const row = keyboard[rowIndex]
//rowIndex is 0, 1, ..., 6
```

You can get any key from keyboard by 2 indexes

```js
const key = keyboard[rowIndex][keyIndex]
//keyIndex is 0, 1, .., 16
```

## Data source

Where to get the data from?

`main`, `shifted` and `label` are written on keys on physical keyboard.

How to get `code` will be explained in the chapter 8: "`keydown` event handling".

## Conclusion

We need to have this data model in front of our eyes as well as HTML/CSS mockup to design the app in a modular way. We will create small components that are responsible for each logical part of the app. And before we do that, it's important to know which data will be passed to these components.

[Differences between old code and new code](https://github.com/ApayRus/keyboard/commit/a1d574bf9e584c9770d3bfb5adf8e4860049b00b)

[Entire code after the chapter 3](https://github.com/ApayRus/keyboard/tree/3.-Data-model)

[^es6module]: A file with extension `*.js` and keyword `export` in it is called ES6 module, or just module. You can import its code from another `*.js` file with keyword `import`.
[^array]: Array is a collection of similar data elements.
[^object]: An object is like a code description of a real life objects, e.g. `employee = { age: 30, name: 'John Doe', position: 'driver' }`. `age` is a property. `30` is a value of property `age`. So object is a `property-value` set. We can read properties by dot `employee.age` (30), or brackets `employee["name"]` (John Doe).