Web Developer đi làm Mobile App, dễ hay khó?

0
263

Một bài chia sẻ lan man, ngăn ngắn, nhẹ nhàng đầu xuân về những gì một năm qua mình đã vọc và làm được. Bài viết đầu tiên trong Series làm App với Cordova.

BẮT ĐẦU TỪ ĐÂU NHỈ?

Hãy nói về chuyện nhiều năm về trước, bắt đầu từ việc đến với lập trình. Ngày xưa, chắc các bậc 8x, 9x đều biết về Wapego – một trong những Online tool hỗ trợ việc phát triển Web cho “gà mờ”. Các websites sau khi xuất ra đều là chuẩn WAP, thích hợp cho các màn hình mobile “đời Tống” cỡ nhỏ (Như các dòng Nokia bàn phím).

Hồi tiểu học, mình có dịp vọc vạch cái vụ này. Thời đấy chưa biết gì, chỉ đơn giản làm được 1 con web, người ta vào thấy cái tên mình ở đấy, thế là oai nhất xóm rồi =))

Dần theo thời gian, cũng 3 năm trôi qua kể từ lần đầu biết tới Web là gì và làm Web là gì, mình mới đụng tay vào dòng code đầu tiên. Hãy nói qua về lí do mình làm Web:

  • Dễ phân phối (PHP thì code -> run, nhanh gọn lẹ).
  • Dễ học (Đầy Templates, thậm chí lười code thì lên codepen.io copy cho nhanh :v), tài liệu rất phong phú, StackOverflow support rất tốt vụ này 😎
  • Kiếm được cái Hosting trên Hostinger :V

Alright, hồi đấy mình đang làm cái phần mềm bằng AutoIT để đi thi cuộc thi Khoa học Kỹ thuật, vậy nên sẽ cần 1 cái Landing Page và Intro Page để giới thiệu, dẫn dắt lượt tải,… Thế rồi mò mẫm 1 tháng mình cũng làm xong nốt cái Landing. Nó xấu, phải nói là thế! Anyway, mình cũng không trông chờ quá nhiều :v

Chính vì khả năng phát triển của Web nên gặp ai hỏi nên bắt đầu bằng việc học gì, biết là sẽ phải vừa học Backend vừa học Frontend nhưng mình vẫn sẽ khuyên học Web 😐 Sau này thích code gì cũng đỡ mệt.

ĐÃ 5 NĂM

Hãy nói về Công nghệ, 5 năm là một thời gian không ngắn nhưng cũng chưa phải là dài, nhưng đủ để biến 1 tượng đài như Nokia sụp đổ và đẩy Apple từ quả táo cắn dở lên đỉnh vinh quang. 5 năm trụ vững với một cái gì đó liên quan tới công nghệ quả là điều vừa vô lí, vừa phi thường. Vô lí ở việc theo dòng chảy phát triển thì chừng đấy thời gian là quá đủ để biến sự tân tiến trở thành tối cổ lỗi thời. Phi thường ở việc nó vượt trên sự phi lí.

Đấy, giờ hãy nhìn lại chiếc Nokia bàn phím và chiêm nghiệm một chút… Có phải thực sự Web là một công nghệ sống dai hay thực sự là chúng ta chưa khai thác hết sức mạnh của nó? Theo mình nghĩ là vế thứ hai.

Web có rất nhiều ưu điểm mà lập trình Hệ thống không có. Thứ nhất, đó chính là về khả năng phát triển và triển khai. Sau nhiều năm làm web mình nhận ra một điều rằng sẽ chẳng có một WYSIWYG (What you see is what you get) Tool – Công cụ chỉnh sửa trực quan, dành cho Windows Software lại chạy được trên cả Android lẫn iOS ngon lành. Trong khi đó, một cái Web có thể hiển thị rất ổn với một cái Browser cài trên thiết bị.

Fact nho nhỏ: Bạn có biết một số biển báo trong game, ví dụ như GTA-V thực ra là một trang Web được nhúng bằng CEF (Chrome Embedded Framework)?

CROSS PLATFORM TECHNOLOGIES

Nếu ai từng đi code Mobile sẽ biết, ngày trước nỗi ác mộng của đội ngũ Dev là phải đi code chuyên biệt một cái app hoàn toàn mới khi công ty giao cho hỗ trợ một platform mới. Quá trình phát triển này xem như là x2 thời gian, chưa kể có những sự khác biệt giữa những nền tảng khiến công cuộc này có thể ngưng trệ chưa biết tới lúc nào. Với cái bất cập đó, những bộ óc thống trị Internet đã đẻ ra những ý tưởng thiên tài: Web App -> Hybrid App

WEB APP

Nếu một cái Web bình thường trông sẽ “rất bình thường”, thì một cái Web App trông cũng sẽ rất giống một cái App :v OK, để mình giải thích một tí về kỹ thuật.

Thời nay nếu bạn học qua về code web sẽ biết 1 thuật ngữ vô cùng phổ biến: Responsive. Nói nôm na, responsive chỉ khả năng thích ứng của trang web với các kích cỡ màn hình khác nhau (tập trung chú trọng chiều rộng).

Các loại màn hình bây giờ rất đa dạng, có loại rộng bằng cái mảng tường, có loại bé trong lòng bàn tay. Nhưng đó không phải là tất cả!

Bạn nghĩ cái màn hình máy tính của bạn với cái màn hình iPhone X cái nào có độ phân giải to hơn?

Câu trả lời là TUỲ. Thứ nhất là tuỳ vào thiết lập của bạn. Hiện tại với một màn hình phổ thông thì độ phân giải sẽ là 1920×1080, nhưng bạn có thể tuỳ chỉnh được con số này thành 1600×900, 1024×768, … Còn với iPhone X thì mình nhớ là 2436×1125. Vậy, nếu ở Normal Setting thì iPhone X thậm chí còn hiển thị được nhiều hơn cả cái màn hình của bạn!

Tuy nhiên, nếu như hiện thị hệt như trên máy tính thì ai cũng biết rằng chữ nó sẽ bé như một đàn kiến siêu nhỏ 😐 Và rồi, chúng ta phải có Web Responsive để đáp ứng nhu cầu hiển thị thích ứng này.

Quay lại Web App, điều gì sẽ diễn ra nếu 1 cái web có quá nhiều thứ cần phải tương thích với nền tảng Mobile? Hãy lấy ví dụ là Facebook: Đập bỏ xây cái khác.

Đập bỏ xây cái khác ở đây chính là từ bỏ việc phát triển cái web Facebook.com trở thành một con quái vật có thể tương thích tốt cả Mobile lẫn Desktop. Họ sẽ chia ra, Desktop sẽ hiển thị phiên bản tiêu chuẩn còn Mobile sẽ hiển thị phiên bản Mobile (chuyển hướng qua https://m.facebook.com). Điều này sẽ mang lại những lợi ích sau:

  • Tối ưu được việc phát triển, không cần quá chú tâm tới cách hiển thị trên nền tảng khác.
  • Tối ưu cho thiết bị của client, không phải load các components dư thừa.
  • Tối ưu SEO, page rank, load speed, …

Vâng, đó chính là Web App.

Hãy tóm gọn Web App lại trong một định nghĩa ngắn gọn:

Web App là một dạng Web có thể hoạt động và cung cấp đầy đủ các tính năng của Web, có nghĩa là chạy trên nền tảng Web, hiển thị tốt, phù hợp và thích ứng với các thiết bị di động. Các dữ liệu sẽ được lưu trữ Online.

HYBRID APP

App là bố, Web là mẹ, đẻ Hybrid App là con. Ngắn gọn là thế!!

Vậy Hybrid App thực tế là gì? Nôm na cái định nghĩa mà mình hiểu:

Hybrid App là một dạng ứng dụng nửa Native và nửa Web, tức là có thể tác động, tương tác với hệ thống nhưng được phát triển dựa trên công nghệ Web.

Note: Native App là các App được viết và dịch mã về dạng mã máy (C++, Java, …).

CÁCH HYBRID APP HOẠT ĐỘNG?

Đầu tiên, hãy nhớ bố của nó là Native App. Vậy thì Native App sẽ nhú lên một cái Webview. Cái Webview này chính là một cái trình duyệt được nhúng trong Native App. Ok, giờ bố sẽ đón mẹ về bằng cách load tới 1 URL hoặc là 1 file nằm trong lưu trữ tài nguyên của app(nhân đây cũng nói luôn, khi đổi đuôi các file apk thành zip, giải nén file zip ta sẽ có App Assets – các tài nguyên của App). Load xong làm sao để bố tương tác được với mẹ mà đẻ ra con? Hãy nhờ tới các Frameworks, một công cụ nổi tiếng mà mình sẽ đề cập nhiều đó là Cordova/Ionic (mình sẽ thiên về Cordova vì không rành nhiều về Ionic và Angular). Cordova sẽ mở các API kết nối với Frontend và giúp bạn tương tác với hệ thống thông qua JavaScript. Kết nối này mình sẽ có thể giải thích kỹ hơn ở các phần sau nếu có thể. Vậy, Hybrid App thông qua các API có thể tương tác ngon lành với các hệ thống.

Về bản chất, hãy cứ hiểu Hybrid App là hổ mọc thêm cánh, như 1 cái Website bây giờ có thể đọc ghi tới các file trong hệ thống máy tính của bạn. Vào cái Web là có thể quét virus cho máy tính, có thể xoá bất kỳ file nào, blah blah…

MẶT MẠNH VÀ MẶT YẾU CỦA HYBRID APP

Mặt mạnh:

  • Phát triển nhanh, thích hợp cho các nhu cầu phân phối gấp.
  • Khả năng thiết kế UI/UX sẽ tốt hơn do CSS hỗ trợ tốt các Components và Animations.
  • Chi phí thấp do code-one-run-all, build 1 phát deploy tốt trên bất kỳ nền tảng nào: Windows UWP, Android, iOS, Tizen, …
  • Dễ học, dễ tiếp thu, đặc biệt quá dễ nếu từng code Web rồi.
  • Tương tác ngon lành với các tính năng Hệ thống (cần Plugins).
  • Mã nguồn mở (Apache License).
  • Cộng đồng rất lớn (Search Cordova trên StackOverflow là rõ).

Mặt yếu:

  • Tài liệu còn rất nghèo nàn (thậm chí có thể nói bọn Apache nó chả ghi cái quái gì trong tài liệu luôn).
  • Chậm hơn Native (thực chất Webview là HTML5 Application nên nếu code các hệ thống phức tạp, chắc là nên từ bỏ việc sử dụng Cordova, hãy thử ReactNative và Flutter).
  • Plugins đầy lỗi, phải nói là khắm thôi rồi. Nhiều lúc cài một số Plugin có file structure conflict với các plugin khác là phải xoá hết toàn bộ plugins rồi cài lại và config lại từ đầu.
  • Sự khác biệt giữa các nền tảng, cái này khá phức tạp. Có một số plugin sẽ phải thiết lập, tuỳ chỉnh dựa theo thiết bị, nền tảng riêng.

TRY IT NOW

Nãy giờ nói nhiều rồi, có lẽ sẽ nhảy qua một chút cái Hello World! bằng Cordova nhé!!

Hướng dẫn cách cài đặt:

Trước tiên, hãy cài NodeJs + NPM. Link cài ở bên dưới:

Windows: Download for x86 | Download for x64
MacOS: Download for Mac

Other: Download

Mình sẽ không nói về việc cài đặt NodeJs vì nó dễ quá :v

Khi đã hoàn tất quá trình cài đặt, vào Start -> gõ cmd -> Chuột phải -> Run as Admin.

Ở cửa sổ cmd vừa mở ra, gõ:

npm i cordova@8.1.2 -g

Tại sao lại phiên bản 8.1.2? Ở phiên bản 9.0.0, có một lỗi xảy ra với module loader của cordova. Cụ thể, cordova đã thay đổi phương thức load module ở phiên bản mới. Chính vì vậy, các plugin của phiên bản cũ sẽ không thể sử dụng được.

Chờ cái command hoàn tất, vậy là bạn đã cài xong Cordova.

Quay lại Command Prompt, , tiếp tục gõ:

cordova create helloWorld com.studio.helloworld

Cú pháp:

cordova create <App Name> <Package ID>

Hãy khoan quan tâm tới Package ID mà tập trung vào App Name. App Name chính là tên hiển thị của App bạn trên các platforms. Ở ví dụ này mình sẽ lấy tên là helloWorld.

OK, giờ thì nhấn Enter rồi gõ tiếp lệnh các lệnh sau:

cordova platform add browser
cordova run browser –port=8080

Trình duyệt sẽ tự mở ra hoặc bạn có thể truy cập vào link: https://localhost:8080 trong trình duyệt bất kỳ.

Done, chúng ta đã hoàn tất bước đầu tiên.

Trong bài viết tới, mình sẽ hướng dẫn các bạn cách setup môi trường Android và làm cái App Android đầu tay cho riêng mình 😉

Original Post: https://www.facebook.com/notes/nguy%E1%BB%85n-anh-nh%C3%A2n/web-developer-%C4%91i-l%C3%A0m-mobile-app-d%E1%BB%85-hay-kh%C3%B3/278664479763022/

Written by @MonokaiJs

All copies without approval from the author are not permitted.

Link post: https://www.facebook.com/groups/j2team.community/permalink/1176217302710388/

LEAVE A REPLY

Please enter your comment!
Please enter your name here