[MUSIC]

Its time for the very first assignment in this NativeScript course.

So what do we do in this assignment?

We have learned about NativeScript applications and

NativeScript navigation in this module.

So that is what we will concentrate in the very first assignment.

We will add two new pages or components to

our NativeScript application, we will integrate them into our app.

We will design the appropriate navigation to these pages, and

then also we will design the templates for these pages, and

the corresponding code in TypeScript to support these two pages.

Let's look at the various tasks in this assignment in more detail, next.

This assignment consists of three tasks.

Let me illustrate the three tasks that you will complete in this assignment,

by showing you the completed application at the end of the first assignment.

The first and foremost thing that you notice is that,

when you now bring up the navigation drawer, the side drawer,

you will see two additional links in the side drawer.

To the About Us, and the Contact Us pages here.

So you will add these two components into your NativeScript application.

Let's visit each of these two pages, and

then take a look at what is involved in designing these two pages.

So, going to that Contact Us page, this is your first task in this assignment.

So you will create this contact page in your very first task.

The details of the address for

this Contact Us page that you create is given in the assignment.txt

file that is provided as the assignment resources in the instructions.

So download that, and then you'll have access to

this information that is showed in that Contact Us page here.

So having obtained this information you will design the Contact Us page.

You will create a folder called Contact and in there,

you will add contact.component.ts file.

The TypeScript file where you will create the Angular component to support

the Contact Us page.

And then, you will create the contact.component.html.

The template file using the NativeScript template approach

to design this card here, where you're showing the contact information.

And the address of the restaurant as shown in this view here.

Your second task is to create the About page.

So, when you navigate to the About page, you will notice that,

you will show the history of the restaurant here.

And below that, you will show the Corporate Leadership of the restaurant.

And then you will first show a card with the history of the restaurant here,

with the Our History shown to the side here.

And then, two paragraphs of the history of the restaurant being displayed here.

Below that, you will have a title here called Corporate Leadership,

and then you will show the four corporate leaders of this

restaurant here using a ListView here.

Inside the ListView as you can see, you are showing an image to the left here and

some text here to the right.

You have seen this way of designing the template already when we designed

the media component.

The image here, uses the image circle class, image-circle,

img-circle class, in order to obtain the rounded image that you see here.

And you see that details of the various corporate leaders being shown here.

These details, obviously, I remember we obtained from that server site.

Now, that is where the third task in your assignment's tasks.

In the third task in your assignment, when you create the corresponding component

there aboutcomponent.ts file in the about folder what

you will create for storing the files for this particular component.

So, to create the template you will create the about.component.html file and

that is where you will design the template.

And then the corresponding about.component.ts file

is the third task in your assignment.

So that is where you will create the corresponding component.

Within there, you will inject the leader service, and

then you will use the get leaders method of the leaders service in order

to obtain the data to render the four component leaders in this template here.

And of course finally, when you have designed both these pages, the About page

and the Contact Us page, then you will integrate them into your application.

Make sure that you also update the side drawer to

include the links to be able to navigate to the About Us page,

and the Contact Us page, as shown here.

This completes your first assignment.

As I mentioned, three tasks in this assignment.

At the completion of this assignment,

make sure that you do a git commit with the message assignment one solution.

[MUSIC]

Assignment 1 Requirements (Video): Introduction to NativeScript

Multiplatform Mobile App Development with NativeScript

Rencontrer les enseignants