Github có chức năng rất nay là giúp các bạn đưa trang web của mình lên hoàn toàn miễn phí. Hôm mình mình sẽ hướng dẫn các bạn cách deploy 1 trang web Flutter lên Github nhé. Cùng bắt đầu thôi nào!
Các bước thực hiện
Để deploy 1 trang web flutter lên github. Trước tiên chúng ta cần tạo 1 repository trên github, sau đó tạo 1 dự án flutter và đẩy nó lên github.
Tạo repository Github
Các bạn vào link github.com, đăng nhập vào và nhấn New nhé
Ở Repository name mình sẽ điền đại 1 tên là demo_flutter_web và nhấn Create repository
Sau đó mình sẽ được dẫn tới link repository https://github.com/tiendung01023/demo_flutter_web. Các bạn nhớ link github này nha, tý mình sẽ dùng tới
Xong phần khởi tạo repository git. Giờ mình đến phần flutter thôi.
Tạo dự án flutter
Các bạn mở Terminal lên và tạo 1 project nha. Ở đây mình sẽ đặt tên là demo_web
flutter create demo_web
Giờ tiếp tục tại terminal, mình cd vô dự án
cd demo_web
Vì giờ mình quan tâm đến web, tạm thời bỏ qua mobile. Nên mình sẽ chạy lệnh build trên chrome xem trang web chạy trên local sẽ như thế nào ha
Chạy demo xong các bạn nhấn Ctrl + C trên Windows hoặc control + C trên MacOS để dừng demo.
Lưu ý: khi bạn muốn deploy web của mình lên github. Bạn cần thêm tên repository vào file như sau:
-> Bạn mở file demo_web/web/index.html bằng bất kì trình chỉnh sửa nào
-> Dự án github mình đặt là demo_flutter_web. Tại thẻ base bạn sửa lại thành <base href="/demo_flutter_web/"> và nhấn lưu lại
Tiếp theo tại terminal mình sẽ chạy câu lệnh build flutter bản web
flutter build web
Sau khi lệnh chạy xong bạn sẽ thấy thêm thư mục demo_web/build/web. Bạn cd terminal đến thư mục này. Mình sẽ chỉ publish thư mục này lên git thôi nha.
cd build/web
Giờ mình upload thư mục này lên github. Các bạn mở lại link github repository sẽ có phần hướng dẫn nha, hoặc các bạn chạy từng dòng lệnh như mình làm dưới đây cũng được
Sau khi chạy hết các bạn lên repo github xem các file đã được upload lên chưa nha
Thế là đã xong phần tạo và upload dự án flutter_web lên github. Về sau khi bạn viết thêm chức năng cho dự án, bạn cần chạy lại câu lệnh build web và push data mới lên github nha.
Tạo page demo trang web trên github
Vào link github. Chọn tab Settings, xuống mục Pages
Trong Github Pages, bạn chọn nhánh mà muốn hiển thị trang web, hiện tại của mình thì chọn master nha. Sau đó nhấn Save
Như hình trên Github báo đã tạo thành công trang web Your site is published at https://tiendung01023.github.io/demo_flutter_web/. Bạn bấm vào link đó để xem thành quả nha
Kết thúc
Hi vọng qua bài viết của mình sẽ giúp bạn sáng tạo thêm 1 số trò với flutter web này nha
Ở bài trước mình đã giới thiệu về cách upload plugin lên pub.dev (Xem lại tại đây). Hôm nay mình sẽ nói về cách tăng điểm pub points trên pub.dev nhé. Cùng bắt đầu thôi nào!
Phân tích cách tính điểm trên pub.dev
Trên pub.dev sẽ có 6 mục lớn để tính điểm cho plugin của bạn
10 điểm: Có ví dụ. Pub.dev sẽ lấy file example/lib/main.dart để làm ví dụ cho người dùng. Bạn nên cung cấp ví dụ đầy đủ trong 1 file này. Vì người khác sẽ ngại việc lấy project của bạn để hiểu được plugin của bạn dùng như thế nào
10 điểm: Cung cấp hướng dẫn cho từng API. Theo yêu cầu của pub.dev thì bạn phải cung cấp ít nhất 20% các api. Tức ở mỗi biến, hàm, lớp được tạo ra, bạn phải thêm hướng dẫn bằng ///
Hỗ trợ nhiều nền tảng (20 điểm)
20 điểm: Pub.dev cần bạn hỗ trợ android, ios và web. Nếu chỉ hỗ trợ android và ios thôi thì bạn sẽ chỉ được 10 điểm. Sau khi code android và ios xong thì bạn nên nghiên cứu thêm cho cả bản web nữa nha
Vượt qua bộ phân tích (30 điểm)
30 điểm: Bạn cần fix hết các lỗi,cảnh báo, vấn đề. Hiện tại mình không chắc pub.dev dùng bộ check nào, hiện tại mình dùng bộ này và đã đạt được 30/30 điểm. Các bạn thử xem, nếu có bộ nào tốt hơn các bạn gợi ý cho mình dưới comment nha.
Các gói phụ thuộc phải được cập nhật (10 điểm)
10 điểm: Khi bạn thêm gói vào dependencies và dev-dependencies. Bạn cần cập nhật bản mới nhất cho những gói đó### Các gói phụ thuộc phải được cập nhật
Hỗ trợ null-safety (20 điểm)
20 điểm: Plugin của bạn cần nâng cấp lên hỗ trợ null-safety. Bởi vì từ bản flutter 2.12 trở về sau khi tạo dự án sẽ mặc định là có null-safety, thì những dự án này sẽ không thể thêm plugin của bạn nếu bạn có hỗ trợ null-safety
Công cụ kiểm tra điểm
Thật là khó chịu khi mà upload plugin xong mới biết bạn được bao nhiêu điểm đúng không?
Vậy thì sẽ có cách bạn tự kiểm tra trước xem mình được bao nhiêu điểm, và bị mất điểm ở phần nào luôn nha.
Ở bài trước mình đã giới thiệu về cách tạo plugin flutter và cách kết nối xuống native (Xem lại tại đây). Hôm nay mình sẽ nói về cách đưa plugin bạn đã viết lên trang chia sẻ của flutter là pub.dev. Cùng bắt đầu thôi nào!
Lưu ý: Khi bạn đã xuất bản plugin lên pub.dev rồi thì không thể gỡ xuống được nữa. Vậy nên các bạn hãy xuất bản những gói ít nhất là có thể sử dụng được, tránh việc xuất bản chơi/thử nghiệm.
Chuẩn bị plugin
Khi xuất bản plugin lên pub.dev sẽ cần có những tiêu chuẩn cần tuân theo:
LICENSE: file này mô tả giấy phép cho plugin của bạn, quy định cách người khác sử dụng plugin của bạn như thế nào. Một số giấy phép phổ biến như MIT, Apache, BSD. Bạn có thể tham khảo cách viết một số license tại đây.
Dung lượng plugin: dung lượng sau khi nén gzip của bạn phải nhỏ hơn 100MB. Nếu lớn hơn bạn có thể chia ra nhiều plugin hoặc giảm các thành phần không cần thiết trong thư mục example.
Phụ thuộc: phần dependencies chỉ được phụ thuộc vào các plugin có sẵn trên pub.dev
Tài khoản: bạn cần có 1 tài khoản google đăng nhập sẵn trên pub.dev
Tệp quan trọng
Trang pub.dev sẽ dùng 1 số file để tạo nội dung cho plugin của bạn, bạn nên chăm chút các file này để plugin trông đẹp hơn
README.md: Đây là file mô tả về nội dung plugin của bạn, cách người khác sử dụng plugin. File này theo định dạng markdown. Bạn có thể tham khảo cách viết README của pub.dev tại đây
CHANGELOG.md: File này mô tả sự thay đổi trong plugin của bạn, mỗi khi bạn cập nhật 1 bản mới, bạn cần viết mô tả rõ ràng về sự thay đổi đó. File này cũng định dạng markdown
pubspec.yaml: File này điền các thông tin chi tiết của plugin
name: Tên plugin
description: Mô tả của gói
version: phiên bản plugin
homepage: đường dẫn đến repository git
Chạy thử nghiệm
Việc này giúp bạn biết gói của mình đã đủ thông tin chưa, sẽ còn cần bổ sung thêm những gì.
Gọi lệnh trên terminal:
dart pub publish --dry-run
hoặc
flutter packages pub publish --dry-run
Sau khi chạy lệnh, nếu bạn thấy báo Package has 0 warnings. là đã ok rồi.
Xuất bản
Khi đã sẵn sàng cho việc xuất bản. Hãy gọi lệnh:
dart pub publish
hoặc
flutter packages pub publish
Flutter sẽ hỏi bạn có sẵn sàng để upload chưa, bạn điền y và nhấn Enter.
Tiếp đến nếu bạn chưa upload lần nào lên pub.dev, terminal sẽ hiện lên 1 link, bạn click vào link này để mở trình duyệt và chọn tài khoản google bạn muốn quản lý thư viện
Sau đó bạn trở về đợi terminal báo thành công thôi.
Sau khi upload thành công thì bạn đợi khoảng 1 tiếng để pub.dev quét plugin của bạn và tính điểm thì plugin của bạn mới được hiển thị với mọi người.
Kết thúc
Hi vọng qua bài viết của mình sẽ giúp được các bạn đang gặp khó khăn với việc upload plugin lên pub.dev nha.
Ghi chú: Bài viết này chỉ là một góc nhìn chủ quan của tác giả về mảng mobile app. vì vậy có gì không đúng mọi người có thể đóng góp ở phần comment nhé!! Thank.
Mở đầu: Ở thời điểm hiện tại việc xây dựng ứng dụng native không phải là lựa chọn duy nhất để tạo lên một một ứng dụng mobile app. Ngày nay chúng ta có thể dựa vào yêu cầu của khách hàng, các chức năng của sản phẩm để lựa chọn được hướng đi phù hợp hơn. Ta có thể dựa trên vào công nghệ web (HTML5, CSS3 và JavaScript) đang phát triển mạnh mẽ trên mobile. Hoặc tận hưởng những lợi ích của các công cụ phát triển đa nền tảng như React Native hoặc Flutter. Dưới đây, bạn sẽ tìm thấy chìa khóa để giải quyết vấn đề khó khăn này khi chọn phương pháp phát triển ứng dụng di động.
Native App
Native app hay còn được gọi là ứng dụng gốc. Vốn dĩ nó có cái tên này là bởi vì nó được viết bằng chính các ngôn ngữ lập trình gốc thần nhất dành riêng cho từng nền tảng cụ thể. Hai nền tảng di động phổ biến nhất hiện nay là Android và iOS (Windows Phone thì đã bị khai tử vào tháng 10/ 2017 ). Từ đó, các ngôn ngữ lập trình tương ứng được chính các công ty mẹ tạo ra phù hợp với từng nền tảng. Chẳng hạn như Apple đã có Swift, Objecive-C được dành cho lập trình ứng dụng trên nền tảng iOS. Lập trình trên Android thì dùng Java, mặc dù đây không phải ngôn ngữ do Google tạo ra.
Viết Native App nghĩa là lập trình viên sẽ sử dụng IDE, SDK mà nhà sản xuất cung cấp để lập trình ra một ứng dụng, build ứng dụng đó thành file cài và gửi lên App Store để kiểm duyệt. Người dùng sẽ phải tìm ứng dụng trên App Store, tải về máy và chạy.
Với những hệ thống lớn, cần đồng bộ, ta vẫn phải viết phần back-end trên server. Server sẽ đưa ra một số API. Native app lấy dữ liệu về máy, truyền dữ liệu lên server thông qua các API này.
Ưu điểm
Tận dụng được toàn bộ những tính năng của device: Chụp ảnh, nghiêng máy, rung, GPS, notification.
Có thể chạy được offline.
Performance rất nhanh vì code native sẽ được chạy trực tiếp.
UX phù hợp với từng nền tảng
Là lựa chọn duy nhất cho các ứng dụng game, xử lý hình ảnh hay video …
Khuyết điểm
Cần cài đặt nặng nề (Android Studio, XCode, Android SDK, …), khó tiếp cận.
Với mỗi hệ điều hành, ta phải viết một ứng dụng riêng. Khó đảm bảo sự đồng bộ giữa các ứng dụng (1 button trên Android sẽ khác 1 button trên iOS, pop cũng khác).
Cần phải submit app lên App Store, mỗi lần update phải thông báo người dùng.
Code mệt và lâu hơn so với Mobile Web dẫn đến một khuyết điểm là chi phí phát triển cao.
Kĩ năng cần có
Ngôn ngữ lập trình: Java / Kotlin cho Android, Objective-C / Swift cho iOS
Kiến thức chuyên sâu về ứng dụng: View, Action, Adapter trong Android …
Cách xây dựng Web Serivce, Restful API, cách gọi API từ device, …
Hybrid App kết hợp những ưu điểm của Mobile Web và Native App. Ta xây dựng một ứng dụng bằng HTML, CSS, Javascript, chạy trên WebView của mobile. Tuy nhiên, Hybrid App vẫn có thể tận dụng những tính năng của device: chụp hình, GPS, rung, ….
Hybrid App sẽ được viết dựa trên một cross-platform framework: Cordova, Phonegap, Ionic …. Ta sẽ gọi những chức năng của mobile thông qua API mà framework này cung cấp, dưới dạng Javascript. Bạn chỉ cần viết một lần, những framework này sẽ tự động dịch ứng dụng này ra các file cài đặt cho Android, iOS . Một số ứng dụng không quá nặng về xử lý, cần tận dụng chức năng của device sẽ chọn hướng phát triển này.
Ưu điểm
Chỉ cần biết HTML, CSS, JS .
Viết một lần, chạy được trên nhiều hệ điều hành
Tận dụng được các chức năng của device.
Khuyết điểm
Không ổn định, khó debug. Framework sẽ dịch code của bạn thành code native, việc sửa lỗi ứng dụng khá khó vì bạn không biết code sẽ được dịch ra như thế nào.
Performance chậm.
Cần cài đặt nhiều thứ (phải cài đặt SDK này nọ thì mới build ứng dụng được).
Kiến thức cần biết
HTML, CSS, Javscript cơ bản.
Cách dùng một số framework CSS, Javascript: jQuery Mobile, Ionic Framework, AngularJS, Bootstrap, …
Kiến thức về các cross-platform framework: Cordova, Phonegap…
Cách xây dựng Web Serivce, Restful API, cách gọi API từ device, … (Hybrid app cũng sẽ kết nối với server thông qua API như Native App).
Được sinh ra nhằm mục đích để giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động. Nhưng chúng ta lại hay nhầm lẫn giữa Hybrid App và Cross-Platform App, trên thực tế thì chúng khác hoàn toàn nhau. Có lẽ, đặc điểm chung duy nhất giữa chúng là khả năng chia sẻ source code. Lập trình viên chỉ cần lập trình một lần và biên dịch hoặc phiên dịch ra thành nhiều bản Native App tương ứng với từng nền tảng khác nhau.
Công cụ quan trọng nhất để thực hiện các dự án ứng dụng đa nền tảng (Cross Platform) chính là Frameworks đa nền tảng. Có rất nhiều Framework đa nền tảng. Mỗi loại sẽ có những điểm mạnh và điểm yếu khác nhau. Tùy vào mục tiêu xây dựng App mà lập trình viên sẽ lựa chọn Framework nào cho phù hợp.
Nổi tiếng và phổ biến nhất là Framework Xamarin. Ngôn ngữ lập trình chủ đạo trong Xamarin là C#, ngoài ra còn có Objective-C, Swift và Java. Ngoài ra, còn một số cái tên mà khá hot đó là React-Native (thằng này có ông bô là Facebook ), Flutter (thằng này có ông bác là Google)…
Ưu điểm
Tận dụng được những tính năng của device: Chụp ảnh, nghiêng máy, rung, GPS, notification.
Hiệu năng tương đối ổn định.
Tiết kiệm tiền.
Hiệu quả về mặt thời gian khi mà bạn muốn phát triển một ứng dụng nhanh chóng.
Trải nghiệm người dùng tốt hơn là hybrid app.
Nhược điểm
Hiệu năng sẽ thấp hơn với app native code.
Khó học vẫn đòi hỏi kiến thức native code.
Vẫn còn có hạn chế từ framework
Kĩ năng cần có
Kiến thức C# (đối với Xamarin ), JS (đối với React-Native ), Dart(đối với Flutter) Objective-C, Swift và Java cơ bản.
Kiến thức về một số framework React-Native, Xamarin …
Hướng Mobile Web thường được áp dụng khi các bạn đã có sẵn một website đang hoạt động. Ta sẽ tạo thêm 1 trang web riêng cho mobile, sử dụng HTML, CSS, một số framework hỗ trợ mobile và responsive (Bootstrap, jQuery Mobile, Materialize). Người dùng sẽ trang web dành cho mobile để dùng ứng dụng.
Các xử lý khác liên quan đến backend như database sẽ được thực hiện phía trên server. Với một số framework như Angular, VueJS … một trang web có thể giống y hệt một ứng dụng di động thật sự.
Ưu điểm
Chỉ cần có kiến thức về web là viết được
Viết một lần, chạy được trên mọi hệ điều hành
Người dùng không cần phải cài app, có thể vào thẳng trang web
Không cần phải thông qua App Store, tiết kiệm tiền
Dễ nâng cấp (Chỉ việc nâng cấp web là xong)
Nhược điểm
Với một số máy đời cũ, Web App sẽ bị bể giao diện, hiển thị sai, hoặc javascript không chạy.
Performance chậm
Không thể tận dụng được các tính năng của di động: Push notification, chụp hình, nghiêng máy, định vị GPS…
Kĩ năng cần có
Kiến thức HTML, CSS, Javascript cơ bản.
Kiến thức về một số framework responsive/mobile như: jQuery Mobile, Bootstrap, …
Một số framework javascript để viết Single Page Application: AngularJS, VueJS, …
Kết Bài
Sorry các bạn bài viết hơi dài, sau khi nhìn tổng quan về mobile app thì các bạn đã chọn cho mình hướng đi nào chưa? còn mình thì sẽ tiếp tục theo hướng Cross-Platform app. Cảm ơn các bạn đã đọc đến đây nhé.
Flutter là một mobile UI technology & SDK from Google, nó cho phép bạn build native apps đa nền tảng (Android & iOS) với hiệu suất và độ trung thực cao trong 1 thời gian ngắn, tiết kiệm chi phí.
Flutter hoạt động với những code có sẵn được sử dụng bởi các lập trình viên và tổ chức trên thế giới.
Tại sao lại là Flutter ?
Ưu điểm:
Dễ dàng cài đặt và sử dụng (cái này thì ăn đứt React-Native , sure win), bộ doc khá ngon và đầy đủ. Chỉ cần tải flutter từ git về, chạy command line “flutter doctor” nó sẽ báo cho bạn tất cả những vấn đề đang tồn tại trong hệ thống của bạn.
Phát triển cho cả iOS và Android trên cùng 1 codebase nên sẽ tiết kiệm được chi phí và thời gian.
Tuy là 1 cross-platform nhưng hiệu năng và giao diện đạt tới mức gần như native app.
Flutter hoàn toàn free và là open-source.
Ngôn ngữ Dart: Dart — OOP, những dev quen làm việc với Java và C# sẽ bắt nhịp rất nhanh với Dart.
Animation và trải nghiệm cài đặt của Flutter thực sự tốt và mượt mà như 1 native app.
Nhược điểm:
Animation: Rất khó để tạo ra 1 animation riêng biệt của mình.
Giới hạn về thư viện.
Framework còn khá “trẻ”, cần thêm thời gian để phát triển.
Đặc điểm nổi bật của Flutter
Fast Development
Hot reload: Mỗi khi update source, thay vì phải build lại app như native, thì chúng ta chỉ cần 1 phím “r” thần thánh (nếu dùng command line để build) là app sẽ được update ngay lập tức trong vòng 1–2s.
Flutter có cầu nối là Dart, kích thước ứng dụng lớn hơn, nhưng nó hoạt động nhanh hơn nhiều. Không giống như React Native với cầu nối là Javascript.
Hỗ trợ tốt cho các IDE (Android Studio ,IntelliJ ,VS Code).
Trình điều hướng được tích hợp sẵn.
Expressive & Flexible UI: Flutter có thể làm thoả mãn những người dùng khó tính nhất với các widget built-in đẹp mắt theo Material Design và Cupertino (iOS — flavor), scroll mượt mà, dễ dàng thao tác với các UI component.
Truy cập các tính năng và SDK native: Flutter cho phép bạn sử dụng lại code Java, Swift, Objective-C hiện tại của mình và truy cập các tính năng và SDK native trên iOS và Android.
Native performance.
Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và Android. Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp. Nếu bạn là một nhà phát triển iOS hoặc Android có kinh nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn.
![[Flutter] Xuất bản flutter web lên Github](https://s3.ap-southeast-1.amazonaws.com/techover.storage/wp-content/uploads/2021/08/28172241/flutter-for-web-development.jpg)
![[Flutter] Hướng dẫn tăng điểm trên pub.dev](https://s3.ap-southeast-1.amazonaws.com/techover.storage/wp-content/uploads/2021/08/27212007/Screen-Shot-2021-08-27-at-21.06.00.png)
![[Flutter] Hướng dẫn đưa plugin lên pub.dev](https://s3.ap-southeast-1.amazonaws.com/techover.storage/wp-content/uploads/2021/08/28225036/pub-dev-icon-cover-image.png){kind=icon}
