Cái nhìn đầu tiên

Cho dù bạn là lập trình viên di động hay lập trình viên web, hay ứng dụng máy tính thì cái nhìn đầu tiên một cách tổng quát về môi trường mà mình muốn dấn thân vào có khả quan không, có tiến xa được không? Đó là điều rất quan trọng mà mình muốn chia sẽ với bạn trong bài viết này.

Qua phần 1, hi vọng bạn cũng có cảm giác phấn khích như mình khi xây dựng ứng dụng Native dễ dàng, nhưng nếu bạn chưa đọc bài “React Native là tương lai của ứng dụng di động?” thì hãy dành thời gian để đọc trước nhé, chỉ mất 5 phút thôi, rồi hãy đọc tiếp bài này nhé.

Như vậy là bạn đã có cái nhìn sơ bộ về React Native rồi, bản thân React Native tồn tại một số vấn đề nhưng dần dần đang được khắc phục, nên mình tin là những khuyết điểm trên không là gì cả nếu bạn tiếp tục phát triển ứng dụng bằng React Native. Tuy nhiên, nếu bạn muốn lập trình trò chơi 2D, 3D thì React Native không phù hợp, hoàn toàn không phù hợp, nên bạn hãy dừng lại tại đây!

Hướng dẫn lập trình ứng dụng di động Smartnews

Trên đây là hình ảnh của ứng dụng mà mình sẽ hướng dẫn lập trình ứng dụng di động đọc tin Smartnews. Smartnews là ứng dụng đọc tin rất tuyệt hiện nay, được dùng phổ biến ở Nhật, đi tàu điện cứ thấy người ta dùng Smartnews không ah.

Ứng dụng có các chức năng sau:

• Đọc file xml và chuyển đổi ra json từ chuẩn Smartnews
• Hiển thị các bài viết theo các layout: block 4 tin, block 3 tin, block 2 tin và 1 tin
• Đọc file json và hiển thị nội dung web bằng webview
• Sử dụng Tab, Navigation

Mặc dù ứng dụng đọc xml chuẩn Smarnews, tuy nhiên phần parser chỉ là phần phụ, bạn có thể sử dụng phần hiển thị từ bất kỳ nguồn json, xml. Sau loạt bài này, bạn có thể xây dựng ứng dụng tương tự Smartnews, có thể đọc tin bằng webview, hoặc chỉ bằng nội dung cơ bản của một bài viết.

Thời gian để đọc loạt bài viết này chắc lâu hơn thời gian bạn lập trình ứng dụng này đó, mình sẽ public mã nguồn của toàn bộ source code sau khi hoàn thành seri này, ứng dụng sẽ giúp cho bạn hiểu rõ ràng về React Native.

The post Hướng dẫn React Native – Phần 2: Xây dựng ứng dụng đọc tin Smartnews appeared first on Fullstack Station.

Yêu cầu

• Mac OS X: để biên dịch iOS, nếu bạn chỉ xây dựng ứng dụng cho Android thì có thể dùng Win hoặc Linux
• XCode 7.0+
• Android Studio
• JDK 1.8
• Node.js 4.0+
• Khác:
  • watchman: brew install watchman
  • flow: brew install flow

Cài đặt

Bước 1: Cài đặt command line

Cài đặt react native cli dùng để thao tác command line

$ npm install -g react-native-cli

Bước 2: Khởi tạo dự án

Khởi tạo dự án

$ react-native init AwesomeProject

Đợi 1 lúc cho npm tải các gói cần thiết.

Bước 3: Chạy ứng dụng

iOS

$ cd AwesomeProject
$ react-native run-ios

Bạn cũng có thể mở ios/AwesomeProject.xcodeproj từ XCode và thực hiện build

Android

$ cd AwesomeProject
$ react-native run-android

Rất đơn giản, bạn đã khởi chạy được ứng dụng di động trong vòng 15 phút.

Lập trình

Sau khi bạn khởi chạy được ứng dụng từ bước cài đặt trên, bạn hãy mở file index.ios.js đối với iOS hoặc index.android.js thử thay đổi các chữ phía trong <Text></Text>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
 //...
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var AwesomeProject = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  //...
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Sau đó, với iOS nhấn ⌘-R, bạn sẽ thấy kết quả thay đổi ngay, tương tự với Android bạn nhấn F2 và chọn “Reload JS”. Đối với bạn nào đã từng lập trình iOS hay Android, việc thay đổi chỉ đơn giản là Refresh là một sự kinh ngạc! Bởi vì khi xây dựng ứng dụng bằng ObjectiveC hay Java bạn phải build lại bất kể chỉ thay đổi 1 chữ nào đó trong ứng dụng, và điều này là không cần thiết đối khi xây dựng bằng React Native.

Tham khảo

React Native là gì?

ES6/ES2015 là gì? Đây là bài viết hướng dẫn về ES6/ES2015, mặc dù bạn có thể dùng Javascript thuần, tuy nhiên sẽ rất “hợp thời” nếu bạn làm quen với ES2015 ngay từ đầu.

https://facebook.github.io/react-native/docs/getting-started.html

The post Hướng dẫn React Native – Phần 1: Cài đặt môi trường appeared first on Fullstack Station.

React Native là framework xây dựng ứng dụng di động native sử dụng Javascript do Facebook phát hành. Sử dụng React Native để xây dựng ứng dụng iOS và AndroidAndroid chỉ cần 1 ngôn ngữ javascript duy nhất. Để hiểu rõ về React Native là gì, chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.

Trang chủ của React Native: https://facebook.github.io/react-native/

Phân biệt ứng dụng hybrid và native

Ứng dụng Hybrid là gì

Ứng dung hybrid là chương trình phần mềm  trên điện thoại di động được viết dựa trên nền tảng web (html5, css3, javascript), bản chất hoàn toàn là ứng dụng web nhưng có thêm được các tính năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh, GPS hoặc các cảm biến như con quay hồi chuyển, gia tốc kế…Toàn bộ những thứ này đều được bao bọc bởi một lớp ứng dụng Native mà nổi bật là Phonegap/Cordova.

Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API. Ứng dụng gọi hàm bằng Javascript thông qua API thì chương trình Phonegap/Cordova bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành. Bằng cách này, ứng dụng web có thêm những tính năng cao cấp của ứng dụng Native, và do được tính hợp mã nguồn sẵn nên tốc độ của ứng dụng hybrid nhanh hơn ứng dụng web.

Ứng dụng Native là gì

Ứng dụng native là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ với iOS là Objective-C, Swift và Android là Java, Window phone là C++ hoặc C#. Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp. Do là ngôn ngữ trực tiếp cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất.

Tốc độ ở đây bao gồm tốc độ hiển thị (độ mượt), và tốc độ xử lý. Nếu để ý kỹ bạn sẽ thấy các thao tác của ứng dụng native như chuyển trang, điều hướng, cuộn trang đều rất mượt. Với việc hơn hẳn về tốc độ xử lý, nên ứng dụng hybrid khó có thể làm được ứng dụng nặng đồ hoạ như game, mặc dù vẫn có thể làm được nhưng không mượt mà nên hầu như hiếm ai dùng hybrid cho lập trình game cho điện thoại di động (ngoại trừ một số game đơn giản như xếp hình, giải câu đố, 2048…)

Qua 2 định nghĩa trên bạn đã hiểu về native và hybrid rồi, tuy nhiên React Native lại là một thứ điên rồ khác!

Cách hoạt động của React Native

Ứng dụng viết bằng React Native được chia làm 2 phần: phần view(hiển thị) và phần xử lý.

Phần hiển thị được biên dịch từ javascript sẽ map với những component của hệ thống ví dụ: điều hướng, tab, touch…Phần view này được lấy cảm hứng từ Virtual DOM của React JS, mọi xử lý view được thực hiện trên một cây DOM ảo, sau đó được React Native render lại bằng native view.

Phần xử lý vẫn được thực hiện trực tiếp bằng ngôn ngữ javascript: ví dụ “1+1=2” :)), biểu thức này được xử lý dưới bộ core thực thi Javascript, không phải thông dịch qua Java hay Swift/Objective-C rồi mới làm phép tính đâu nhé.

Ưu điểm của React Native

React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript. Đúng vậy, chỉ đơn giản là Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở đoạn trên.

React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrid. Chỉ với một lập trình viên thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là mobile. Điều này không những có lợi cho lập trình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn.

Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload, Hot Reload – tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android.

React Native có thể được sử dụng cho việc phát triển ứng dụng trên Windows với React Native Windows được hỗ trợ chính thức bởi Microsoft. Bạn có thể sử dụng React Native Windows để phát triển cho toàn bộ hệ sinh thái của Microsoft: desktop, tablet, xbox

Khuyết điểm của React Native

React Native là một giải pháp tuyệt vời cho phát triển ứng dụng trên điện thoại di động, tuy nhiên đến thời điểm hiện tại, vẫn còn tồn tại một số khuyết điểm:

• Vẫn còn thiếu các component view cho Android: Map, Modal, Slider, Spinner hoặc các module như Camera Roll, Media, PushNotificationIOS.
• Không hỗ trợ Window Phone: đây sẽ là điểm trừ lớn nếu so với ứng dụng hybrid. Tuy nhiên, nếu bạn chỉ tập trung cho iOS và Android thì tất nhiên đây không phải là vấn đề lớn.
• Không build được ứng dụng iOS trên Window và Linux: tất nhiên đây không phải là điểm yếu kém của bản thân React Native, mà đó là do yêu cầu từ Apple.
• React Native không thể build được ứng dụng “quá phức tạp” nếu bạn không biết Swift/Objecive-C, Java – tính phức tạp ở đây là ứng dụng của bạn cần phải chỉnh sửa các component. Bạn nên nhớ là để viết được 1 ứng dụng native bằng javascript “luôn luôn” có sẵn các component đã được viết từ Swift/Objective-C (iOS) và Java (Android) với tính chất 1-1. Trường hợp bạn muốn chỉnh sửa 1 component nào đó: thay đổi thành phần hoặc thêm API thì bạn phải “tự viết” bằng chính ngôn ngữ tương ứng của iOS hoặc Android. Tin vui cho bạn là cũng nhiều lập trình viên khác đã viết nhiều component cần thiết cho hầu hết ứng dụng (đây cũng là lý do vì sao Facebook biến React Native thành mã nguồn mở)
• Không nên dùng để viết game có tính đồ họa và cách chơi phức tạp (Xem thêm Flutter là gì nếu muốn lập trình game)
• Dùng ES2015/ES6 (bạn đọc thêm ở bài ES2015 là gì): đây là cấu trúc mới cho Javascript từ 2015, vì khá là mới nên những cấu trúc của nó có thể bạn chưa quen, dẫn tới việc khó khăn trong việc tiếp cận.
• Bạn có thể phải mất nhiều thời gian để theo hết hệ sinh thái của React, tuy nhiên tất cả là để làm cho đời lập trình viên fullstack đẹp đẽ và những sản phẩm chất lượng hơn, bao gồm: React Js, React Native, Flux, Relay, GraphQL. Bạn không cần phải quan tâm những thứ này chỉ để viết ứng dụng với React native

Kết luận

27,000  84000 sao tại Github, đây là con số nói lên độ hot của React Native. Với phương châm “Học một lần sử dụng mọi nơi”, React Native và React JS sẽ là bộ đôi lý tưởng cho lập trình viên fullstack. Đừng chần chờ gì nữa, Javascript sẽ là mảnh đất màu mỡ chờ bạn khai phá với những công nghệ thời thượng, đó là một thực tế đã và đang đúng!

Cập nhật 1: Hiện tại đã đạt 32,000 sao tại Github

Cập nhật 2 (12/2019): Phiên bản mới nhất đã là 0.61  với 84k sao

The post React Native là tương lai của ứng dụng di động? appeared first on Fullstack Station.