Cách thiết lập, xây dựng và triển khai ứng dụng gốc với Vue
Vue Native là một khuôn khổ Javascript được thiết kế để cung cấp các ứng dụng root dành cho thiết bị di động đa nền tảng. Nó được lấy cảm hứng từ dự án React Native .Vue Native ban đầu là một nhánh của React-Vue , một trình biên dịch cung cấp cho các nhà phát triển khả năng viết Vue và React trong cùng một cơ sở mã.
Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng để tìm hiểu về các API và các thành phần có sẵn trong Vue Native.
Ứng dụng bạn xây dựng sẽ hiển thị các ảnh gif thịnh hành trên nền tảng Giphy. API Giphy sẽ được sử dụng để lấy hình ảnh gif, tiêu đề và kiểu liên quan cho mỗi gif thịnh hành. Hình ảnh và chi tiết sẽ được hiển thị bằng cách sử dụng các thành phần Vue Native như ScrollView , Text và Image .
Lưu ý: Quá trình triển khai được ghi lại ở cuối hướng dẫn này là dành riêng cho Android. Tuy nhiên, quá trình này vẫn có thể mang tính giáo dục cho những người quan tâm đến việc triển khai iOS.
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần :
- Node.js được cài đặt local mà bạn có thể thực hiện theo Cách cài đặt Node.js và Tạo môi trường phát triển local . Hướng dẫn này yêu cầu Node 6.0.0 trở lên.
- Trình quản lý gói Node như
npm(được đóng gói với Node) hoặc Yarn . Hướng dẫn này sẽ sử dụngnpm. Nếu bạn muốn sử dụngyarn, bạn cần phải thay thế các bước đó. - Một số kiến thức về JavaScript và Vue cũng hữu ích. Bạn có thể theo dõi tài liệu Vue chính thức để làm quen với một số khái niệm và thành phần cốt lõi của Vue.
- Để sử dụng API Giphy, bạn cần tạo hoặc đăng nhập vào tài khoản Giphy .
Expo sẽ được sử dụng để xây dựng và chạy ứng dụng mới. Expo là một chuỗi công cụ open-souce được xây dựng xung quanh React Native để xây dựng các ứng dụng Android và iOS. Nó cung cấp quyền truy cập vào chức năng của hệ thống như Máy ảnh và Bộ nhớ.
Nếu bạn chưa cài đặt expo-cli trên phạm vi global , bạn có thể chạy các bước sau trong terminal của bạn :
- npm install --global expo-cli@3.20.1
Lưu ý: Tài khoản Expo sẽ được yêu cầu nếu bạn muốn triển khai ứng dụng của bạn sau này.
Bước 1 - Cài đặt dự án
Đầu tiên, bạn cần cài đặt một dự án và cài đặt một số phụ thuộc. Vue Native CLI sẽ được sử dụng để khởi động ứng dụng.
Khởi tạo một dự án mới cho vue-gifs bằng cách chạy phần sau trong terminal với npx :
- npx vue-native-cli@0.1.1 init vue-gifs
Chạy lệnh này sẽ khởi động một ứng dụng cho dự án này bằng Expo CLI.
Để xây dựng cho nền tảng iOS và Android, hãy cập nhật đối tượng scripts trong file package.json :
{ "name": "vue-gifs", "main": "node_modules/expo/AppEntry.js", "private": true, "scripts": { ... "build:ios": "expo build:ios", "build:android": "expo build:android", }, ... } Sau đó cập nhật sdkVersion trong file app.json để trùng với version Expo trong package.json của bạn. Mở file app.json và cập nhật nó như đoạn mã bên dưới:
{ "expo": { "name": "vue-gifs", "description": "This project is really great.", ... "sdkVersion": "37.0.3", ... } } Lưu ý: Tại thời điểm kiểm tra hướng dẫn này, Vue Native CLI cần React Native version 37.0.1 và version Expo 37.0.3 . Vào một ngày sau đó, bạn có thể cần phải sửa đổi thủ công các app.json và package.json và chạy npm install . Tham khảo tài liệu Expo để nâng cấp SDK .
Đến đây bạn đã cài đặt dự án, bạn đã sẵn sàng để bắt đầu thử nghiệm ứng dụng.
Bước 2 - Thử nghiệm trên thiết bị di động
Để kiểm tra ứng dụng trên thiết bị di động, Expo CLI cung cấp nhiều phương pháp khác nhau để kiểm tra ứng dụng. Đầu tiên là sử dụng URL được tạo sau khi chạy ứng dụng. URL này có thể được truy cập trên trình duyệt di động của bạn để kiểm tra ứng dụng.
Đảm bảo rằng bạn đang ở trong folder dự án vue-gifs và chạy npm start để khởi động ứng dụng:
- npm start
Expo thường bắt đầu ứng dụng của bạn vào :19002 vì vậy hãy truy cập http://localhost:19002 để xem các Công cụ dành cho nhà phát triển Expo trong trình duyệt của bạn. Trong Công cụ phát triển, bạn có thể gửi liên kết xem trước dưới dạng SMS hoặc email đến điện thoại di động của bạn :
Bạn có thể chọn bất kỳ tùy chọn kết nối nào trong số ba tùy chọn kết nối: tunnel bên ngoài, mạng LAN hoặc kết nối local . Đối với kết nối local , điện thoại di động và PC cơ quan của bạn phải được kết nối với cùng một mạng, nhưng tunnel sẽ hoạt động trong mọi trường hợp.
Phương pháp thử nghiệm tiếp theo mà bạn có thể sử dụng là download Ứng dụng di động Expo . Nó có thể được tìm thấy trên cả Apple App Store và Android Play Store. Trên iOS, sau khi cài đặt ứng dụng, hãy mở máy ảnh của bạn và quét mã QR từ version trình duyệt của ứng dụng để chạy trên điện thoại của bạn. Trên Android, bạn có thể sử dụng ứng dụng Expo trực tiếp để quét mã QR và chạy ứng dụng. Ứng dụng của bạn sau đó sẽ hiển thị trên thiết bị di động của bạn.
Một tùy chọn khác để thử nghiệm trên thiết bị di động là sử dụng trình giả lập hoặc giả lập. Sử dụng Android Studio hoặc Xcode trên macOS, bạn có thể khởi động trình giả lập hoặc trình mô phỏng cho các nền tảng tương ứng của chúng. Download và cài đặt công cụ cho nền tảng bạn chọn: Xcode cho iOS và Android studio cho Android. Sau khi cài đặt, hãy chạy lệnh để khởi động ứng dụng:
Đối với iOS, hãy chạy:
- npm run ios
Đối với Android, hãy chạy:
- npm run android
Đến đây bạn đã khám phá các tùy chọn khác nhau để thử nghiệm ứng dụng, bạn đã sẵn sàng để xây dựng ứng dụng.
Bước 3 - Tạo ứng dụng Giphy
Bước tiếp theo là tạo một ứng dụng trên nền tảng Giphy Developer .
Trên trang tổng quan account nhà phát triển của bạn, có nút Tạo ứng dụng . Nhấp vào nút và bạn sẽ được lựa chọn giữa SDK hoặc API. Đối với các mục đích của hướng dẫn này, API là đủ.
Sau đó, nhấp vào Bước tiếp theo và sau đó nhấp vào Tạo ứng dụng . Điền thông tin chi tiết về ứng dụng của bạn.
Sau khi tạo ứng dụng, ứng dụng mới của bạn sẽ được hiển thị trên trang tổng quan với khóa API. Phím này sẽ được sử dụng khi đưa ra yêu cầu với Giphy.
SDK Javascript của Giphy sẽ được sử dụng để thực hiện các yêu cầu đến chính dịch vụ Giphy. Chạy lệnh này từ folder vue-gifs để cài đặt gói:
- npm install --save giphy-js-sdk-core@1.0.6
Bây giờ, dự án của bạn đã sẵn sàng sử dụng các API Giphy với sự trợ giúp của SDK này.
Bước 4 - Xây dựng thành phần ứng dụng
Trong bước này, bạn sẽ xây dựng thành phần ứng dụng. Mở file App.vue trong folder root và cập nhật nó như đoạn mã bên dưới:
<template> <view> <scroll-view class="scroll-view"> <!-- TODO: Create gif item and header --> <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading"> <activity-indicator size="large" color="#0000ff"></activity-indicator> </view> </scroll-view> </view> </template> <script> import Giphy from 'giphy-js-sdk-core'; const client = Giphy('GIPHY_API_KEY'); export default { name: 'App', data() { return { gifs: [], loading: true, }; }, async created() { const response = await client.trending('gifs', {limit: 20}); this.gifs = response.data; }, }; </script> <style> .scroll-view { padding-top: 20px; padding-bottom: 30px; } .loading-container { height: 600px; } </style> Trong đoạn mã trên, Thành phần App hiển thị thành phần scrollview chứa các thành phần của thành phần đó. Nó chỉ hiển thị một chỉ báo activityindicator ; điều này sẽ được thay thế bằng danh sách các gif khi lệnh gọi tới API hoàn tất.
Ứng dụng khách Giphy được khởi tạo bằng cách sử dụng khóa API thu được từ console dành cho nhà phát triển. Đảm bảo thay thế chuỗi trình giữ chỗ bằng khóa API. Việc gọi phương thức trending thực hiện lệnh gọi đến điểm cuối xu hướng Giphy. Tham số được cung cấp đầu tiên là gifs : điều này cho biết những mặt hàng thịnh hành nào sẽ được trả lại, gifs hoặc stickers . Tham số thứ hai là một đối tượng cung cấp các tham số tùy chọn như limit , offset , rating và fmt (định dạng).
Tham số duy nhất được sử dụng trong mã này là tham số limit , giới hạn kết quả ở 20 mục. Cuộc gọi này được thực hiện trong vòng đời created của thành phần. Cuối cùng, danh sách gif được sử dụng để hiển thị kết quả trả về.
Sau khi reload , ứng dụng sẽ hiển thị chỉ báo hoạt động:
Đến đây bạn đã xây dựng thành phần ứng dụng, bạn đã sẵn sàng để xây dựng thành phần mục gif.
Bước 5 - Xây dựng thành phần mục Gif
Mỗi mục gif sẽ được hiển thị bằng cách sử dụng một thành phần View . Thành phần View là một khối xây dựng quan trọng trong khuôn khổ. Nó hỗ trợ bố cục bằng cách sử dụng flexbox, tạo kiểu và khả năng truy cập. Mỗi mục sẽ hiển thị gif, tiêu đề và loại.
Tạo một folder có tên components trong folder root . Trong folder components , tạo file có tên GifItem.vue và thêm mã sau:
<template> <view class="container"> <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/> <text class="title">{{titleCase(gif.title)}}</text> </view> </template> <script> export default { name: "GifItem", props: ["gif"], methods: { titleCase(text) { const textArray = text.split(" "); return textArray .map(text => { const trimmedText = text.trim(); return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`; }) .join(" "); } } }; </script> <style> .container { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; position: relative; } .img { height: 200px; width: 300px; } .title { font-size: 14px; font-weight: 500; margin-top: 7px; } </style> Thành phần Image sẽ được sử dụng để hiển thị nguồn của mỗi gif và thành phần Text sẽ được sử dụng để hiển thị tiêu đề gif. Thành phần Image lấy một source hỗ trợ, là một đối tượng có thuộc tính uri .
Phương thức titleCase lấy tiêu đề của mỗi gif và trả về văn bản trong trường hợp tiêu đề, viết hoa chữ cái đầu tiên của mỗi từ trong văn bản. Thành phần GifItem sẽ nhận một gif hỗ trợ duy nhất.
Cập nhật file App.vue để bao gồm GifItem mới bằng cách sử dụng đoạn mã bên dưới:
<template> <view> <scroll-view class="scroll-view"> <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/> <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading"> <activity-indicator size="large" color="#0000ff"></activity-indicator> </view> </scroll-view> </view> </template> <script> import Giphy from 'giphy-js-sdk-core'; const client = Giphy('GIPHY_API_KEY'); import GifItem from './components/GifItem'; export default { name: 'App', data() { return { gifs: [], loading: true }; }, async created() { const response = await client.trending('gifs', {limit: 20}); this.gifs = response.data; this.loading = false; }, components: {GifItem} }; </script> <style> .scroll-view { padding-top: 20px; padding-bottom: 30px; } .loading-container { height: 600px; } </style> Khi bạn mở ứng dụng trong ứng dụng Expo, ứng dụng sẽ hiển thị các ảnh gif xếp chồng lên nhau trong một danh sách.
Nếu ứng dụng local của bạn không hiển thị danh sách gif, hãy đảm bảo mã của bạn trùng với các đoạn mã trong hướng dẫn này và khóa API Giphy của bạn là hợp lệ.
Bước 6 - Xây dựng thành phần tiêu đề
Bây giờ ứng dụng có thể truy xuất và hiển thị danh sách các gif thịnh hành, hãy bao gồm tiêu đề để cung cấp ngữ cảnh cho ứng dụng. Thành phần View sẽ được sử dụng để tạo một vùng sẽ hoạt động như phần đầu của ứng dụng.
Tạo một file có tên là header.vue trong folder components và cập nhật nó bằng mã bên dưới:
<template> <view class="header-container"> <text class="header">Trending</text> </view> </template> <script> export default { name: 'header.vue' }; </script> <style scoped> .header-container { background-color: rgba(0, 0, 0, 0.05); display: flex; justify-content: center; padding-top: 15px; padding-bottom: 15px; border-bottom-color: aquamarine; border-bottom-width: 1px; margin-top: 20px; } .header { font-size: 16px; color: black; opacity: 0.8; font-weight: 600; text-align: center; } </style> Bây giờ hãy thêm thành phần header thành phần App . Điều này sẽ hiển thị tiêu đề ở đầu ứng dụng. Cập nhật file App.vue để bao gồm thành phần Header :
<template> <view> <header/> <scroll-view class="scroll-view"> ... </scroll-view> </view> </template> <script> import Giphy from 'giphy-js-sdk-core'; const client = Giphy('GIPHY_API_KEY'); import GifItem from './components/GifItem'; import Header from './components/header'; export default { name: 'App', data() { ... }, async created() { ... }, components: {GifItem, Header} }; </script> <style> ... </style> Sau khi ứng dụng làm mới, tiêu đề sẽ được thêm vào đầu ứng dụng.
Các thành phần được cung cấp bởi Vue Native đã thực hiện tất cả các công việc cần thiết để kết xuất, sắp xếp và hiển thị danh sách các gif thịnh hành.
Bước 7 - Triển khai ứng dụng trên Android (Tùy chọn)
Lưu ý: Đây là bước tùy chọn không bắt buộc để hoàn thành hướng dẫn. Điều này nên được xem xét cho các mục đích giáo dục về quy trình làm việc từ khi tạo dự án cho đến gửi cửa hàng ứng dụng.
Bước cuối cùng trong hướng dẫn này là triển khai ứng dụng vào cửa hàng Android Play.
Trước tiên, bạn cần cập nhật app.json để bao gồm các thuộc tính cụ thể của Android . Mở file app.json và cập nhật file để bao gồm trường android :
{ "expo": { ... "android": { "package": "com.vue.gifs" } } } Trường android.package là một giá trị duy nhất sẽ đại diện cho gói của bạn trong cửa hàng ứng dụng. Bạn có thể đọc thêm về quy ước đặt tên gói tại đây .
Sau khi cập nhật file , hãy chạy lệnh này trong cửa sổ terminal của bạn từ folder vue-gifs :
- npm run build:android
Lệnh này sẽ hiển thị cho bạn một dấu nhắc , yêu cầu bạn cung cấp kho khóa hoặc tạo một kho khóa mới. Nếu bạn có một kho khóa hiện có, bạn có thể chọn tùy chọn này hoặc để Expo tạo một kho khóa cho ứng dụng của bạn.
Sau khi hoàn tất, một liên kết download sẽ được tạo cho ứng dụng của bạn, nhấp vào liên kết này sẽ kích hoạt download APK của bạn.
Để triển khai APK đã download tới Cửa hàng Play của Android, hãy truy cập Play Console để tạo account . Bạn cần phải trả phí đăng ký trước khi tiếp tục. Khi đăng ký xong, hãy truy cập trang này và làm theo các bước để tải ứng dụng của bạn lên Cửa hàng Play.
Kết luận
Vue Native là một khuôn khổ hữu ích để xây dựng các ứng dụng cho nền tảng di động bằng cách sử dụng Vue.js. Vue Native biên dịch sang React và sử dụng các thành phần do React Native cung cấp. Tại thời điểm viết bài, một số thành phần của nó yêu cầu bạn viết JSX với các thành phần React Native thực tế. Vì Vue Native hoạt động với React Native, bạn có thể theo dõi tài liệu chính thức về React Native để tìm hiểu thêm về nó.
Các tin liên quan
