Assignment 1 Requirements (Video): Introduction to NativeScript

Loading...

來自 The Hong Kong University of Science and Technology 的課程

Multiplatform Mobile App Development with NativeScript

117 個評分

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with NativeScript

117 個評分

課程 4（共 5 門，Specialization Full Stack Web and Multiplatform Mobile App Development）

This course focuses on developing truly cross-platform, native iOS and Android apps using NativeScript (Ver 3.x). The framework uses Angular, TypeScript or modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with NativeScript UI and layout support and access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your Angular, TypeScript and Javascript skills, and (c) Use various features of the NativeScript framework to build truly cross-platform mobile applications

從本節課中

Hybrid Mobile App Development Frameworks: NativeScript: An Introduction

This module introduces you to hybrid mobile application development. You will learn about the NativeScript framework and explore some of the features of the NativeScript framework to implement a mobile app based on the Angular application that was implemented in the previous course on Angular.

Assignment 1 Requirements (Video): Introduction to NativeScript6:02

與講師見面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[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]

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2019 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取