Hướng dẫn viết ứng dụng mobile với react native cơ bản (P1)

Chào mọi người, như mọi người đã biết react-native ra đời cũng đã được gần hai năm rồi. Không biết đã ai thử viết app bằng react-native chưa? Mình cũng mò mò tập tành viết sơ sơ (hiện tại cũng đang viết một app, ý tưởng thì hôm nào khác mình chia sẻ nhé). Hôm nay rảnh rỗi, ngồi soạn bài này, hy vọng sẽ giúp cho những người mới bắt đầu tìm hiểu đỡ vất vả hơn một chút, mình cũng muốn đóng góp chút cho cộng đồng react native việt, mong muốn cộng đồng ở việt nam sẽ lớn mạnh để có gì cùng trao đổi cho xôm tụ.

Ok. Đầu tiên để bắt đầu thì mình phải tiến hành setup môi trường làm việc đã. Cho nên việc thứ nhất sẽ là “Cài đặt react-native”. Mọi người cứ theo hướng dẫn tại trang Hướng dẫn cài đặt react-native này nhé. Cứ làm theo hướng dẫn để cài đặt tùy theo môi trường window hay mac nhé. Mình liệt kê sẵn một vài hướng dẫn khác phòng trường hợp cần (cho window) (hồi đó mình cũng mò thấy mẹ mới ra)

  1. Trong window, thư mục android sdk thường nằm trong thư mục sau C:\Users\TOY1HC\AppData\Local\Android\android-sdk
  2. Thư mục JDK thường nằm trong thư mục C:\Program Files\Java\jdk1.7.0_79 (x64)
  3. Có một vài trường hợp sẽ báo lỗi proxy khi bạn update android, do đó bạn phải cấu hình proxy trước khi tiến hành update.

Menu tools/options

android-proxy-setup

 

4. Setup biến môi trường JAVA_HOME, ANDROID_HOME:

– Mở My computer bằng window explorer, right click chọn properties.-> Advanced system settings -> click button Environment Variables…

– Trong phần system variables, chọn new

set-java_home-variable

– Tương tự cho các biến môi trường khác (nếu cần)

5. Cài đặt Genymotion (mình khuyên dùng cái này vì đơn giản, dễ cài đặt), tuy nhiên các bạn có thể sử dụng cái khác tùy vào sở thích cá nhân nhé 🙂

Rồi, nhiêu đây chắc đủ để bắt tay vô cài đặt môi trường rồi nhỉ. Bài tiếp theo mình sẽ hướng dẫn các bạn tạo một project với react native. Hẹn gặp lại các bạn ở bài tiếp theo.

Lập trình Mobile App với React Native

React native là gì ? 

React native là một framework cho phép các lập trình viên xây dựng các ứng dụng native mà chỉ sử dụng ngôn ngữ lập trình javascript. React native cho phép bạn xây dựng các ứng dụng trên android và ios chỉ với một ngôn ngữ thống nhất là javascript nhưng mang lại trải nghiệm native app thực sự. Không như các framework hybrid khác (viết một lần triển khai nhiều nơi), React native tập trung vào việc một lập trình viên làm việc hiệu quả trên môi trường đa nền tảng như thế nào.

“Học một lần, sử dụng nhiều nơi”.

Một lập trình viên có thể lập trình tốt cho cả hai nền tảng android và ios chỉ với một ngôn ngữ duy nhất là javascript. Nghe hay đấy chứ ! Nhiều bạn sẽ đặt câu hỏi là tại sao các framework hybrid chỉ cần viết một lần mà có thể triển khai nhiều nơi, nghe có vẻ tốt và tiết kiệm thời gian chi phí hơn nhiều so với React native. Nhưng chúng ta cần phải chú ý đến mặt hạn chế của các framework này tại thời điểm hiện tại. Hạn chế lớn nhất đó là về vấn đề về performance. So sánh giữa hai ứng dụng hybrid và native ( vd như android hay ios), chúng ta sẽ thấy ngay được sự khác biệt rất lớn giữa hai ứng dụng về performance.

Cách đây vài năm, các thiết bị di động chưa phát triển như bây giờ, các ứng dụng chủ yếu được viết trên nền tảng form và web. Sẽ không có gì phải bàn nếu chúng ta chỉ sử dụng web trên máy tính, vấn đề chỉ thực sự đáng nói tới khi chúng ta sử dụng web trên các thiết bị di động, trải nghiệm của người dùng sẽ thực sự bị hạn chế đi rất nhiều, đó là lý do các ứng dụng trên thiết bị di động lần lượt ra đời để mang lại trải nghiệm tốt hơn cho người dùng. Các lập trình viên android và ios lần lượt xuất hiện để phục vụ cho nhu cầu viết ứng dụng trên thiết bị di động ngày càng lớn. Nguồn nhân lực này khá khan hiếm, vì vậy họ được trả lương khá cao, khá là hấp dẫn. Vậy các lập trình viên web sẽ làm gì? Một số muốn học ngôn ngữ ios, một số muốn học android để tìm cách đổi đời, nâng lương, một số vẫn tiếp tục theo đuổi niềm đam mê với web của mình. Tất nhiên có nhiều framework hybrid ra đời ngay sau đó để phục vụ cho việc viết ứng dụng bằng ngôn ngữ web nhưng còn nhiều hạn chế như chúng ta đã đề cập ở trên.

React native ra đời vì lý do này, nó giúp cho các lập trình viên vốn đã quen thuộc với ngôn ngữ web, đặc biệt là javascript có thể viết được các ứng dụng trên android và ios với trải nghiệm native app thực sự. Vậy so với việc phải học một lúc hai ngôn ngữ android và ios, bạn chỉ cần bỏ ra một ít thời gian làm quen với react-native là bạn đã có thể viết được các ứng dụng một cách dễ dàng trên cả hai nền tảng. Rất “cool” phải không nào? “Học một lần, sử dụng nhiều nơi”.

Vậy còn chần chừ gì nữa, hãy bắt đầu ngay hôm nay với việc tìm hiểu và sử dụng react native để viết cho mình những ứng dụng mình thực sự yêu thích và quan trọng nhất là biết đâu bạn sẽ trở nên giàu có với việc viết app như Nguyễn Hà Đông thì sao. Thường xuyên lên react native để theo dõi các bài viết mới nhất và cùng nhau trao đổi về react native nhé.

Lý do react native ra đời ?

Để bắt đầu với React Native, Bạn cần biết một số kiến thức cơ bản về React, nếu bạn chưa có khái niệm nào về React thì bạn có thể đọc thêm tại đây

Bắt đầu với React.

Khoảng hai năm trước, React được facebook giới thiệu tới cộng đồng lập trình viên, từ thời điểm đó cho đến nay, React đã phát triển một cách nhanh chóng không chỉ trong nội bộ facebook mà còn cả cộng đồng bên ngoài. Hiện nay, rất nhiều dự án đã được xây dựng dựa trên React, tỷ lệ các lập trình viên chọn và sử dụng React ngày càng nhiều vì nó giúp tiết kiệm thời gian “chiến đấu” với framework và tập trung hơn vào sản phẩm của mình hơn.

React tập trung vào việc chia nhỏ ứng dụng ra thành nhiều thành phần nhỏ, mỗi thành phần thể hiện một view tương ứng. Những thành phần này có thể dễ dàng được sử dụng lại trong hệ thống, khi có yêu cầu thay đổi chúng ta không cần phải thay đổi toàn bộ hệ thống nữa mà thay vào đó chỉ cần thay đổi một phần nhỏ trong đó. Quan trọng hơn React đóng gói các thẻ DOM, API chỉ cần khai báo một lần, giúp tăng tính trừu tượng và đơn giản hóa mô hình lập trình. Xây dựng app với react giúp code của chúng ta sẽ dễ hình dung hơn, dễ đoán hơn. Tính dễ đoán này giúp chúng ta có thể tự tin sử dụng lại và ứng dụng đáng tin cậy hơn. Ngoài ra, xây dựng ứng dụng với react không những giúp ứng dụng có khả năng mở rộng mà còn giúp chúng ta dễ dàng mở rộng qui mô của nhóm hơn.

Với công nghệ web và react chúng ta có thể xây dựng rất nhiều ứng dụng tuyệt vời, Ví dụ như Facebook. Tuy nhiên web chỉ là một phần của câu chuyện dài. Với những hạn chế hiện tại của web, các ứng dụng android và ios đang dần dần lên ngôi, tuy nhiên không phải ai cũng có thể xây dựng được một ứng dụng android hay ios một cách dễ dàng, chúng ta sẽ tìm hiểu tại sao việc xây dựng một ứng dụng native lại khó khăn ngay sau đây.

Tại sao phát triển native app lại khó khăn

Có rất nhiều lý do khiến cho việc xây dựng một ứng dụng native trên thiết bị di động lại khó khăn hơn trên web. Khó khăn đầu tiên đó là việc sắp xếp các thành phần trên màn hình, chúng ta luôn luôn phải tính toán kích thước, vị trí của tất cả các view. Một phần khó khăn nhất là giai đoạn chuyển đổi sang mobile, thử nghĩ mà xem, tốc độ phát triển ứng dụng của lập trình viên sẽ giảm xuống như thế nào?

Để xây dựng website, khi thay đổi một đoạn code nào đó, chúng ta chỉ cần lưu file và reload lại trang web để xem kết quả. Tuy nhiên với native, chúng ta cần phải recompile sau mỗi lần thay đổi, ngay cả khi chúng ta chỉ muốn dịch text lên một vài pixel. Do đó, tốc độ hoàn thành công việc của các lập trình viên sẽ bị chậm lại, đặc biệt nếu codebase lớn, sẽ mất thời gian hơn khi re-complie. Xây dựng native app cũng làm cho việc kiểm thử các chức năng mới trở nên khó khăn hơn. Tại Facebook, khi deliver một version mới của website, chỉ mất có hai ngày để testing team có thể test và feedback lại kết quả ngay sau đó. Với mobile, thường phải mất tới một tuần hoặc một tháng để test và nhận feedback từ testing team. Như vậy ở facebook, thời gian phát triển một chức năng trên web luôn luôn nhanh hơn thời gian phát triển cùng chức năng đó trên mobile, vậy tại sao họ lại muốn chuyển đổi từ web sang app cho mất thời gian ?

Lý do rất đơn giản,  các ứng dụng native mang lại trải nghiệm tốt hơn cho người dùng.

Tại sao native là cần thiết

Mặc dù phát triển ứng dụng native tốn nhiều thời gian hơn, có rất nhiều lý do lý giải tại sao chúng ta có thể mang lại cho người dùng trải nghiệm trên mobile tốt hơn trên web. Điều đầu tiên, chúng ta có thể sử dụng các thành phần đặc biệt của platform như map, date pickers, switches và navigation stacks. Chúng ta cũng có thể phát triển lại các thành phần này trên web nhưng các nổ lực xây dựng lại của chúng ta không bao giờ có thể mang lại trải nghiệm native thực sự như trên mobile được, và chúng cũng không bao giờ được cập nhật một cách tự động với những thay đổi từ platform khi cần. Chúng ta cũng không có bất cứ thứ gì hoạt động y chang như native app được công nhận trên web, và chúng ta chưa có công cụ hoặc các phương pháp nào chính xác cần thiết để xây dựng một hệ thống chuẩn xác.

Trên web, chúng ta cũng không có một mô hình thread hoàn chỉnh, vì vậy chúng ta không thể làm việc song song trên nhiều thread. Chúng ta có thể cố gắng sử dụng web workers để thực thi một vài logic ứng dụng trên background nhưng chúng ta chưa thể thực thi tính toán phức tạp như image decoding hay đo lường văn bản hiệu quả trên thread chính của browser. Đây chính là thách thức lớn nhất đổi với việc xây dựng một ứng dụng web apps có performance tốt và responsive.

Những gì Facebook thực sư muốn đạt được đó là trải nghiệm của người dùng trên ứng dụng native, kết hợp với kinh nghiệm có sẵn của các lập trình viên khi xây dựng ứng dụng web bằng react. Họ đã thử một vài cách để đạt được điều này:

1.Sử dụng webviews:

Sử dụng WebViews để load ứng dựng. Facebook đã thử cách này vài năm trước, và lúc đầu họ thực sự nghĩ đó là một ý kiến tuyệt vời. Nhưng quá trình thực hiện đã không mang lại hiệu suất tốt và tính co giãn mà họ muốn. Cách này có ưu điểm là tận dụng lại được các lập trình viên có kinh nghiệm trên web để tiếp tục phát triển các ứng dụng của facebook trên android và ios. Nhưng không may là việc render đang sử dụng công nghệ web nên không thể mang lại trải nghiệm native thực sự cho người dùng.

2.Scripting native

3.Chuyển react sang native

Chuyển đổi react sang native là một ý tưởng tuyệt vời của facebook và sự thực họ đã xây dựng thành công trên ios. Họ tạo ra một component gọi là ComponenKit, với nó họ đã tận dụng lại được các lợi ích của react, đồng thời sử dụng được sức mạnh của môi trường native.

Tuy nhiên có một số hạn chế với cách tiếp cận này. Đầu tiên, chỉ hỗ trợ cho IOS, vì vậy nếu muốn xây dựng ứng dụng trên android, họ phải tạo ra bản build riêng và train cho các lập trình viên cách sử dụng component đó. Ngoài ra, họ không thể sử dụng lại bất kì các stuff nào mà họ đã xây dựng cho web bằng react như relay. Quan trọng nhất vẫn là nền tảng này chưa giúp họ giảm được thời gian phát triển ứng dụng, vẫn phải recompile sau mỗi lần thay đổi.

React Native ra đời

Cũng sử dụng javascript để phát triển nhưng sự khác biệt duy nhất trên môi trường mobile là thay vì react sử dụng trên browser và render ra divs và spans, trên react native, javascript được nhúng vào một instance của javascript core bên trong app và render tới platform cụ thể ở mức độ cao hơn.