05.-Data-Framework

Search…
05.-Data-Framework
Data plays an important role in data-centric applications. In this type of applications, you usually retrieve data from remote-server, work with it inside the application, display it in UI components, and finally send data to the remote server. Sometimes you need to store some data on local storage and other storages like that, invalidate it on the specific condition and...
Narik Data Service has two main concepts.
Data Provider
Data Storage
Data Provider
Data Provider is a class that provides data for the system. It must inherit DataProvider interface. You can have a lot of DataProvider in your application that each of then provides data in a different way.
Currently, there are six DataProviders in Narik.
1.RemoteDataProvider
2.LocalStorageDataProvider
3.SessionStorageDataProvider
4.MemoryDataProvider
5.StaticDataProvider
6.ClientStorageDataProvider
Data Storage
Data Storage is a class that can store data for the system. It must inherit DataStorage interface. You can have a lot of dataStorage  in your application that each of then stores data in a different way and different location. Every DataStorage is also DataProvider, because DataStorage interface extends DataProvider interface.
Currently, there are four DataStorages in Narik.
1.LocalStorageDataProvider
2.SessionStorageDataProvider
3.MemoryDataProvider
4.ClientStorageDataProvider
These four classes concurrently are DataProvider and DataStorage but other two classes (RemoteDataProvider and StaticDataProvider) are only dataProvider because they don't store data.
Data Provider Service
DataProviderServices acts as a manager for all DataProviders. it collects all DataProviders and manages them. Many times it's better you work with DataProviderServices rather than with DataProvider.
Data Storage Service
DataStorageServices acts as a manager for all DataStorages. it collects all DataStorages and manages them. Many times it's better you work with DataStorageServices rather than with DataStorage.
How It Works
As said before Narik provides some DataProvider and DataStorage. But you can add new DataProviders and DataStorages.
Add New DataProvider
1. Create a class that implements DataProvider. 2. Provide it in your module providers as DATA_PROVIDER.
Example:
```typescript import {DataProvider,DataInfo} from "@narik/infrastructure";
1
  @Injectable()
2
  export class MyDataProvider implements DataProvider {
3
      key="MyDataProvider";
4
      order: number;
5
      belongsInChain: boolean;
6
​
7
      getData(dataInfo: DataInfo): Observable<any>;
8
      getData<T>(dataInfo: DataInfo): Observable<T>;
9
      getData<T>(dataInfo: DataInfo): Observable<T> {
10
          ...
11
      }
Copied!
1
        getDataStream(dataInfo: DataInfo): Observable<any>;
2
        getDataStream<T>(dataInfo: DataInfo): Observable<T>;
3
        getDataStream<T>(dataInfo: DataInfo): Observable<T> {
4
            ...
5
        }
6
​
7
        dataChanged(dataInfo: DataInfo | DataInfo[]): any{
8
            ...
9
        }
10
    }
11
```
12
​
13
```typescript
14
    {
15
        provide: DATA_PROVIDER,
16
        useClass: MyDataProvider,
17
        multi: true
18
    }
19
```
Copied!
Add New DataStorage
1. Create a class that implements DataStorage. 2. Provide it in your module providers as DATA_STORAGE.
Example:
```typescript import {DataStorage,DataInfo} from "@narik/infrastructure";
1
  @Injectable()
2
  export class MyDataStorage implements DataPStorage {
3
      key="MyDataStorage";
4
      order: number;
5
      belongsInChain: boolean;
6
​
7
      getData(dataInfo: DataInfo): Observable<any>;
8
      getData<T>(dataInfo: DataInfo): Observable<T>;
9
      getData<T>(dataInfo: DataInfo): Observable<T> {
10
          ...
11
      }
Copied!
1
        getDataStream(dataInfo: DataInfo): Observable<any>;
2
        getDataStream<T>(dataInfo: DataInfo): Observable<T>;
3
        getDataStream<T>(dataInfo: DataInfo): Observable<T> {
4
            ...
5
        }
6
​
7
        dataChanged(dataInfo: DataInfo | DataInfo[]): any{
8
            ...
9
        }
10
​
11
        clear(): Observable<any>{
12
            ...
13
        }
14
​
15
        removeItems(items: DataInfo[]): Observable<any>
16
        {
17
            ...
18
        }
19
​
20
        applyValidity(dataItems: { dataInfo: DataInfo; validDate: Date }[])
21
        {
22
            ...
23
        }
24
​
25
        addItem(dataItmes: { dataInfo: DataInfo; data: any }[]): Observable<any>
26
        {
27
            ...
28
        }
29
    }
30
```
31
​
32
```typescript
33
    {
34
        provide: DATA_STORAGE,
35
        useClass: MyDataStorage,
36
        multi: true
37
    }
38
```
39
​
40
If you want to provide your class as **DATA_STORAGE** and **DATA_PROVIDER** be careful to provide
41
it with **useExisting** to have one instance for them.
42
​
43
 ```typescript
44
    {
45
        provide: MyDataStorage,
46
        useClass: MyDataStorage
47
    },
48
    {
49
        provide: DATA_STORAGE,
50
        useExisting: MyDataStorage,
51
        multi: true
52
    },
53
    {
54
        provide: DATA_PROVIDER,
55
        useExisting: MyDataStorage,
56
        multi: true
57
    }
58
```
Copied!
Use Data Provider To Use DataProvider, you can work with specified DataProvider or use DataProviderService. Narik suggests you use DataProviderService.
Example 1:
1
  import {
2
      DataInfo,
3
      DataProviderService,
4
      DataOption
5
  } from "@narik/infrastructure";
6
​
7
  export  class TestData
8
  {
9
      constructor(private dataProviderService: DataProviderService) {
10
      }
11
​
12
      SomeMethod()
13
      {
14
          // It emits only once
15
          this.dataProviderService.getData(
16
              {
17
                  "datakey":"some-data-key",
18
                  "dataProviderKey":"MyDataProvider"
19
              }
20
          ).subscribe(...);
21
​
22
          // It emits whenever data changed
23
          this.dataProviderService.getDataStream(
24
              {
25
                  "datakey":"some-data-key",
26
                  "dataProviderKey":"MyDataProvider"
27
              }
28
          ).subscribe(...);
29
      }
30
  }
Copied!
Example 1:
1
  <narik-select label="{{ 'font' | translate }}" [dataKey]="'fonts'" [(ngModel)]="model.font"
2
  name="font" required></narik-select>
Copied!
Use Data Storage
To Use DataStorage, you can work with specified DataStorage or use DataStorageService. Narik suggest you to use DataStorageService.
Don't forget every DataStorage is also DataProvider and can be used like DataProvider.
Example
1
 import {
2
      DataInfo,
3
      DataStorageService,
4
      DataOption
5
  } from "@narik/infrastructure";
6
​
7
  export  class TestData
8
  {
9
​
10
      @Input()
11
      tokenStorage:sting="localStorage";
12
​
13
      constructor(private dataStorageService: DataStorageService) {
14
      }
15
​
16
      init()
17
      {
18
          this.dataStorageService
19
          .getData(this.tokenStorage, {
20
              dataKey: "auth-token"
21
          })
22
          .subscribe(token => {
23
              if (token) {
24
                  this._token = token;
25
                  this.dataStorageService
26
                      .getData(this.tokenStorage, {
27
                          dataKey: "current-user"
28
                      })
29
                      .subscribe(result => {
30
                          this._currentUserValue = result;
31
                          this._currentUserSubject.next(this._currentUserValue);
32
                      });
33
              }
34
          });
35
      }
36
​
37
      login ()
38
      {
39
          .....
40
          ....
41
          this.dataStorageService
42
          .addData(this.tokenStorage, [
43
              {
44
                  dataInfo: {
45
                      dataKey: "auth-token"
46
                  },
47
                  data: result.token
48
              },
49
              {
50
                  dataInfo: {
51
                      dataKey: "current-user"
52
                  },
53
                  data: result.loginedUser
54
              }
55
          ]).subscribe(() => {
56
              resolve(result);
57
          });
58
​
59
      }
60
  }
Copied!
04.-UI-Layout
06.-Query-Service
Last modified 7mo ago
Copy link
Contents
Data Provider
Data Storage
Data Provider Service
Data Storage Service
How It Works