14881 views

Clean and professional. A great template for your project

 

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 is no ordinary hello world!

In this example we will create a rich web frontend. It is clean and professional.

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!  It will have a login page, register page, a menu, a splash home screen with a grid and pages with CRUD operations !

The frontend is built with Angular 4 and bootstrap as the CSS framework. The main screens are:

 

Register

Login

 

 

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/rmello4d/InspiniaBootstrapWakandaCRUD

 

Create your solution

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

 

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 ”Angular 4 Inspinia Company Employee” 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:

 

 

 

 

Here a great thing about the Wakanda Templates … the backend template already created a user and password for us (check the /backend/Workers/initData.js file). Type as user and password:

demo@wakanda.io

123

 

You should be able to connect to the web App and play around. You can pick a company, check its employees, delete or edit some of their fields ! Go ahead, have fun!

 

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