1645 views

The power from Wakanda Templates

Português

 

We have already seen a first example of one of the best features of the Wakanda 2: Templates 

Now, let’s explore a complete example with a backend and frontend templates. Our goal is to build an Angular/Ionic frontend that will use data coming from the Wakanda backend to feed your mobile App.

You should be able to have this example up and running in less than 15 mins!  It will have a login page, a menu, profile, settings and a splash home screen with photos and information from your Wakanda database !

Login with Wakanda, Angular and Ionic

 

 

 

 

 

 

 

 

 

 

Installation

In Wakanda, to install a template is a straight forward  procedure.  For this example, we need a template for the backend and another template for the frontend.

Please install the backend template from github:

https://github.com/rmello4d/EmployeeCompanyLogin

Please install the mobile template from github:

https://github.com/rmello4d/MobileLoginWakandaExample

 

Start your project

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

 

Please note the following regarding the above dialog:

  • the ‘web’ option was left unchecked.
  • select the ‘Login + Emp-Comp Gen’ for the backend
  • select the ‘Login with a List (Cards) for the frontend

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

 

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 /mobile/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 passwordfor us (check the /backend/Workers/initData.js file). Type as user and password:

demo@wakanda.io

123

You should see the following splash screen for your app:

 

 

You can also click the menu and see some options related to the demo profile. Wow! that is ready for you to start to change and customise !

 

 

 

 

 

 

 

 

 

 

Now, I want to load all the employees created by my backend template into my home screen ! So far I had just one card called demo in the splash screen BUT I want to be able to see my employees:

 

 

 

 

We have the data already created into the database (via the backend template). All I need to do is to tell the Angular/Ionic frontend where to find that information.

Open the file /mobile/src/pages/_home/home.ts

That is the TypeScript file responsible for the home page.

The template already defined the environment for you by :

1. importing the Wakanda service

import { Wakanda } from ‘../../app/wakanda.service’

2. defining the Wakanda provider

@Component({ selector: ‘page-home’, templateUrl: ‘home.html’, providers:[Wakanda] })

3. adding the  Wakanda to the constructor

constructor( public navCtrl: NavController, public wakanda: Wakanda, public menuCtrl: MenuController, public modalCtrl: ModalController

So, your home.ts file “knows” how to find and user the Wakanda backend !

On the first time you run this template, you see a ‘demo’ card on the home page, right ?  In the constructor, the variable cards  will be used by Angular to update the content in your home screen. Go ahead and delete these lines, we no longer need them (we will after bring the real data!)

delete these lines

 

 

 

 

 

Now, we need to updated the variable cards to hold an array of values coming from our database. First, uncomment this code also located in the constructor:

click in the image to see full

 

 

 

 

 

 

Lets now change this code:

1. this.wakanda.getCatalog()

Do not change this line, this is just to inform you that we are requesting the database catalog to Wakanda via a promise

2. Change the line: ds.Table.query() ==> ds.Employee.query()

The template is generic (you can use it in other projects), as a result, you have to specify the table you want to get the information. In our case (check the Wakanda model) we would like to query the table Employee

3.Change the line:  imageUrl: entity[”].uri  ==> imageUrl: entity[‘photo’].uri

In the table Employee we have the attribute ‘photo’, lets load our card array with the photo!

4.Change the line:  title: entity[”]  ==>title: entity[‘title’]

In the table Employee we have the attribute ‘title’, lets load our card array with the title!

5.Change the line:  description: entity[”]  ==>description: entity[‘fullName’]

In the table Employee we have the attribute ‘fullName’, lets load our card array with the fullName!

 

Here the final code:

Click the image to see the full code

 

Now click the save button and the live-reload functions of the Studio will show you this complete Example! There are links on each photo that will show more information and graphs (these are there for you to extend and implement your own!).

 

 

Need more help ?

 

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