3598 views

The concept behind the “Angular Store” is a new way to develop influenced by the Redux architecture.

 

 

 

Javascript state management is something very useful, it makes your development  much more reliable from debugging to final product. Add to your Angular Store async data management via “Observables” and you will get the perfect steamroller for your development.

 

The ngrx Store is a great library for you to understand the concepts behind REDUX and Observables. Is not our intent to explain these concepts in detail on this blog post BUT – if after looking the code source you think “I cannot understand what this thing is doing but the code is so clean and minimalist that I just want to learn more …”  –  then contact us and we will help you along the way.

In this example we will create a team builder. It will use the concept of ‘Store’ to manage the state of your application (plus: debugging a redux/store project is also incredible! check some of the chrome extensions that will let you to access the “Store” and go back and forth in time!).

If you are not familiar with Redux/Stores/Observables , you will probably have to learn a few concepts related to it. Here the a great video for you to get into all these concepts (actually,  we have used the source code in this video to start our  Wakanda template example on this post):

The Wakanda templates are the best way for you to start a new project. They are fast, direct and they provide you with a complete example.  This template is no ordinary hello world!

The Backend

You may have seen the backend template in other posts. Here the link to the github page (backend template). It comes with a rich example of data (ps. do not worry, the data will be loaded automatically at first time you run the server, check the bootstrap.js file at the /backend folder and follow the workers and modules to understand how we create lots of random data for you).

Also, the data is already modelled with the powerful Wakanda Model Editor:

 

Click to enlarge

 

This rich backend comes with data relationships and recursive data (check the manager attribute at the Employee table). It is an excellent display of the flexibility from the Wakanda database.

The Frontend

You should be able to have this example up and running in less than 15 mins!  

The menu has 2 options to see your team or to browse new candidates.

 

You can search for employees to be added to your team

 

You can see the details of that employee and add them to your team

You can then access your team via main menu to see all the users in your team (and you can also delete them from your team)

The detail here is… we are using a local storage to save your team data, so, you can turn off your wifi and still get your team data !

 

 

How do I get all this ? Quick Installation!

Now you can install the templates and execute your solution to see the results. In Wakanda,  installing a template is direct.  You will just copy a folder into your local machine. Please access the following github repositories and install accordingly with their READ.me files:

To install the Backend template from github:

https://github.com/rmello4d/EmployeeCompanyLogin

To install the frontend with Angular 4  from github:

https://github.com/liuxiang625/ngrx-wakanda-example-employee

 

Create your solution

After installing your templates,  you can simply start a new solution by choosing the recently added templates on the Studio dialog:

ps. Create a name that is relevant for you.

Please note the following regarding the above dialog:

  • the ‘mobile’ option should be  left unchecked.
  • select the ‘Login + Emp-Comp Gen’ for the backend
  • select the ”Employees (Store)” for the frontend

Once you click the Create, you should see in your Wakanda Studio the following Solution:

Click to see the full image

 

 

 

Running the Solution

You are ready to Run your project. The templates give you the power to have a backend ready for action and a frontend that will be changed as we progress our example.

After clicking on the button ‘Run’,  the backend template will generate a data model based on a classical Employee-Company relationship (it will use some files stored in backend/modules/fakedata folder to add pictures as well !).

Check your console, you should see the following message:

Please noticed that the template will generate 2000 employees, 117 companies and 11 countries. You can check this data structure in the Model editor:

 

 

You will also see that in the dialog related to the forntend development, your ‘Tasks’ will install all the libraries you need to your Angular and Ionic project. If you need more info about all the libraries being installed, please check your /web/package.json file

The first time you run your solution, Wakanda will take a few minutes to download all the libraries needed (just once). After a few minutes, you should see the following in your screen with an empty team. Now go to your menu, search new employees and add them to your team.

 

 

What is next ?

You can now start to inspect the code at the /web/source/app folder !

Check the app routing, configs and components. Also, go ahead and change the code, you will see that Wakanda will  live reload the page for you!

 

Need help understanding this example ?

If you have any doubts after installing and using these templates, you can book a one-on-one time with me here.

In the video call, I will answer all your questions and dissect all the details of this post

PS. booking takes less than 1 minute!

 

 

 

 

Go ahead and start a project with these templates!

Now … we are bringing more templates next week for you

Stay tuned, a new post is coming soon