https://codelearn.io/Media/Default/Users/PhanhTrinh2706/MobileAppDevelopment/lo-trinh-lap-trinh-vien-ung-dung-di-dong-2020-1.png

Sinh viên ngành Web lập trình ứng dụng di động được không ?

Lập trình di động là gì?

Là dân công nghệ, được học tập và rèn luyện với niềm đam mê trở thành một lập trình viên. Hẳn là các thuật ngữ như Web Developer, Mobile Developer không còn xa lạ với các bạn phải không. Chúng là những cái tên được sinh ra trong thế giới công nghệ thông tin và thường gọi chung là “coder”. Có điều hai coder này thực hiện các công việc phát triển phần phần mềm trên hai nền tảng khác nhau. 

Nếu như Web Developer xây dựng và kiến tạo các ứng dụng trên nền tảng Web thì Mobile Developer là những nhà phát triển ứng dụng trên nền tảng các thiết bị di động. Những sản phẩm của Mobile Developer là những ứng dụng chạy trên nền tảng di động – Mobile app.

Các phương pháp lập trình di động thông thường

Để theo đuổi con đường của các lập trình viên di động, có 3 nhánh mà bạn có thể chọn:

https://codelearn.io/Media/Default/Users/PhanhTrinh2706/MobileAppDevelopment/lo-trinh-lap-trinh-vien-ung-dung-di-dong-2020-1.png

  • Phát triển nền tảng đơn (Single Platform Development)

https://codelearn.io/Media/Default/Users/PhanhTrinh2706/MobileAppDevelopment/lo-trinh-lap-trinh-vien-ung-dung-di-dong-2020-2.png

Ở đây chúng ta sẽ nói về việc phát triển các ứng dụng cho từng hệ điều hành di động bằng cách sử dụng các công cụ riêng của chúng.Các hệ điều hành hàng đầu cho thiết bị di động là: Android, iOS và Windows Phone.

  • Phát triển đa nền tảng (Cross-Platform Development)

Nếu bạn đang có kế hoạch phát triển một ứng dụng di động duy nhất trên hai hoặc nhiều nền tảng, thì các công cụ phát triển đa nền tảng chắc chắn sẽ hữu ích. Hai loại kỹ thuật phát triển đa nền tảng là: Hybrid Applications and Native Applications.

https://codelearn.io/Media/Default/Users/PhanhTrinh2706/MobileAppDevelopment/lo-trinh-lap-trinh-vien-ung-dung-di-dong-2020-6.png https://codelearn.io/Media/Default/Users/PhanhTrinh2706/MobileAppDevelopment/lo-trinh-lap-trinh-vien-ung-dung-di-dong-2020-7.png

Sinh viên học ngành web thì lập trình di động như thế nào?

Với nền tảng kiến thức của sinh viên ngành web thì Hybrid Applications là sự lựa chọn tốt. Các công cụ phát triển Hybrid Applications được tạo ra để giúp các nhà phát triển Web dễ dàng phát triển và triển khai các ứng dụng lên nền tảng di động. Phát triển Hybrid Applications thực sự là đang phát triển một ứng dụng HTML5 cho nền tảng di động.

Ionic Framework

Là Framework mã nguồn mở hỗ trợ thiết kế giao diện ứng dụng di động với kỹ thuật web (HTML,CSS) rất hiệu quả và tích hợp lập trình Front end với các framework hiện đại như Angular, Vue, React. Sau đây là các bước xây dựng ứng dụng di động với ionic

Cài đặt

npm install -g @ionic/cli

Tạo ứng dụng

ionic start PoLyApp option

Thực thi ứng dụng

ionic serve

Chỉ cần có như vậy thôi là chúng ta đã có được một ứng dụng di động và có thể deploy trên nền tảng nào cũng được, như iOS, Android

Ví dụ ứng dụng di động với hai màn hình như sau:

Hình : Màn hình home Hình 2: Màn hình contact

Thực hiện thiết kế và lập trình xử lý

  1. Thiết kế

Để thiết kế giao diện cho ứng dụng, ionic cung cấp các Component, là các thành phần được định nghĩa sẵn hay là các thẻ mở rộng. Các component cho phép tạo giao diện người dùng cho ứng dụng một cách nhanh chóng. Ionic có sẵn rất nhiều component. Như tab, list, card…

Để thiết kế, bạn tìm component phù hợp cho màn hình ứng dụng tại https://ionicframework.com/docs/components, sau đó thực hiện thiết kế giao diện tại template của component ứng dụng (ở đây dùng Framework Angular nên giao diện được thiết kế tại file html và code xử lý là class kèm theo dạng Typescript)

Màn hình home được thiết kế như sau, hoàn toàn bằng các thẻ html và component ionic-cart

<ion-header [translucent]=”true”>

<ion-toolbar>

<ion-title>

Home

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content [fullscreen]=”true”>

<ion-card>

<ion-img src=”./assets/images/hcm.jpeg”></ion-img>

<ion-card-header>

<ion-card-subtitle>Cao Đẳng</ion-card-subtitle>

<ion-card-title>FPT POLY TECHNIC</ion-card-title>

</ion-card-header>

<ion-card-content>

Với triết lý đào tạo “Thực học – Thực nghiệp”, Cao đẳng FPT Polytechnic

hướng tới đào tạo nguồn nhân lực chất lượng cao với phương pháp qua dự án thật.

</ion-card-content>

</ion-card>

</ion-content>

  1. Lập trình xử lý

Màn hình contact list được thiết kế với component list, đồng thời được thực hiện lập trình giao diện với Angular2+ (có thể code bằng các Framework khác như React hay VueJS), một Framework mà sinh viên của ngành thiết kế trang web đã được học

<ion-header [translucent]=”true”>

<ion-toolbar>

<ion-title>

Contact us

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content [fullscreen]=”true”>

<ion-list>

<ion-list-header>

HỆ THỐNG VĂN PHÒNG

</ion-list-header>

<ion-item *ngFor=”let contact of contacts”>

<ion-avatar slot=”start”>

<img src=”./assets/images/{{contact.imageUrl}}”>

</ion-avatar>

<ion-label>

<h2>{{contact.name}}</h2>

<h3>

<ion-icon name=”navigate-circle-outline”></ion-icon>

{{contact.address}}

</h3>

<p>

<ion-icon name=”call-outline”></ion-icon>

{{contact.phone}}

</p>

</ion-label>

</ion-item>

</ion-list>

</ion-content>

Với dữ liệu xử lý được thực hiện tại file Typescript như sau:

export class ContactPage {

contacts=[

{

name:”Cơ sở Hà Nội”,

address:”Tòa nhà FPT Polytechnic, Phố Trịnh Văn Bô, Nam Từ Liêm, Hà Nội”,

phone:”(024) 7300 1955″,

imageUrl:”hn.jpeg”

},

{

name:”Cơ sở Hồ Chí Minh”,

address:”778/B1 Nguyễn Kiệm, P.4, Q. Phú Nhuận, TP. Hồ Chí Minh”,

phone:”028 62523434/0901 660 002″,

imageUrl:”hcm.jpeg”

},

{

name:”Cơ sở Đà Nẵng”,

address:”137 Nguyễn Thị Thập, Phường Hòa Minh, Quận Liên Chiểu, TP. Đà Nẵng”,

phone:”(0236) 3710 999″,

imageUrl:”dn.jpeg”

},

{

name:”Cơ sở Cần Thơ”,

address:”Số 288, Nguyễn Văn Linh, phường An Khánh, quận Ninh Kiều, Tp. Cần Thơ”,

phone:”(0292) 7300 468″,

imageUrl:”ct.jpeg”

},

{

name:”Cơ sở Tây Nguyên”,

address:”Tổ dân phố 8, phường Tân An, TP. Buôn Mê Thuột, Đắk Lắk”,

phone:”0262) 355 5678″,

imageUrl:”tn.jpeg”

}

]

constructor() {}

}

Vậy là các bạn đã có được ứng dụng mobile với hai màn hình như trên rồi đó, thật đơn giản phải không nào. Chỉ có phần thiết kế giao diện là dựa trên các thẻ mở rộng hay còn gọi là component của framework Ionic, còn phần lập trình xử lý frond end thì giống hoàn toàn các môn học bên ngành thiết kế trang web.

Như vậy sinh viên nghành Web hoàn toàn có thể xây dựng tạo các ứng dụng mobile một cách nhanh chóng. Còn chần chừ gì nữa các bạn hãy lận lưng thêm một món nghề có tên Ionic nhé.

Tác giả: Thy Đào Quốc - Ngày viết: 22/03/2023

Danh mục: Chương trình đào tạo, CNTT - Thiết kế Website, CNTT - Ứng dụng phần mềm, Ngành Công nghệ thông tin - Ứng dụng phần mềm, NHÓM NGÀNH CÔNG NGHỆ THÔNG TIN

ĐỂ LẠI CÂU HỎI NẾU BẠN CÓ THẮC MẮC

GỬI BÌNH LUẬN

Hãy bình luận/đặt câu hỏi cùng Cao Đẳng Việt Mỹ ngay nhé.
Thông tin của bạn sẽ không được hiển thị công khai.
Các trường bắt buộc được đánh dấu *