1099 views

With this template, you can start your Web App now!

 

click to see the full image

The Wakanda templates are the best way for you to start a new project, as well to help you learn the powerful Angular 4 framework.

In this example we will create a rich web frontend with real data coming from a backend template. It has a menu system, grids with pagination, CRUD operations and more.

By the way, the ability to combine both frontend with backend is one of the great features from Wakanda!

The Backend

The backend template 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, a menu, a splash home screen with a grid with pagination and linked pages with CRUD operations !

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

 

Click to see the full image

Login Page

 

Click to see full image

Home Page with Companies

 

 

click to see the full image

List of Employees

click to see the full image

Employee Details with delete and edit capabilities

Installation

Now you can install the templates and execute your solution to see the results. In Wakanda,  installing a template is a straight forward  procedure.  Please access the following github repositories and install accordingly with the READ.me:

Backend template from github:

https://github.com/rmello4d/EmployeeCompanyLogin

Angular 4, web template from github:

https://github.com/rmello4d/WakandaWebAppCRUD

 

Start your project

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

 

click to see the full image

 

 

 

Please note the following regarding the above dialog:

  • the ‘mobile’ option was left unchecked.
  • select the ‘Login + Emp-Comp Gen’ for the backend
  • select the ”CRUD Angular 4 Company” 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, if you change anything, just look at your browser to see the live reload in action.

 

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 … Wouldn’t be awesome to create a web version ? 

Stay tuned, a new post is coming soon