AKO NASTAVIŤ, VYTVORIŤ A NASADIŤ NATÍVNE APLIKÁCIE POMOCOU VUE

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Vue-Native je rámec napísaný spoločnosťou GeekyAnts, je to rámec vytvorený na poskytovanie mobilných natívnych aplikácií pre rôzne platformy. Inšpiruje sa natívnym rozhraním API React, a preto vývojárovi dáva možnosť vytvárať multiplatformové aplikácie vo Vue.js pomocou robustného systému React Native.

previesť aplikáciu reakcie na strojopis

Obsah

Predpoklady
Začíname
Testovanie na mobile
Vytvorenie aplikácie Giphy
Komponent aplikácie
Vytvorenie komponentu položky gif
Hlavičkový komponent
Nasadenie aplikácie
Zhrnutie

Vue Native bol pôvodne vidlica z Reagovať-vue , kompilátor, ktorý vývojárom dal možnosť písať Vue a React na rovnakú kódovú základňu. V tomto článku vytvoríme jednoduchú aplikáciu na predstavenie rozhraní API a komponentov dostupných v natívnom jazyku Vue.

Vytvoríme jednoduchú aplikáciu, v ktorej sa budú načítať trendy Gify Giphy , pomocou rozhrania Giphy API. Gif a podrobnosti o ňom tiež zobrazíme pomocou komponentov, ako sú ScrollView, text, obrázok atď.

Predpoklady

Ak chcete postupovať podľa tohto tutoriálu, musíte mať Uzol > 6.0 nainštalovaný. Budete tiež potrebovať niektorého z manažérov balíkov, NPM (dodáva sa s Node) alebo Yarn.

Vyžadujú sa tiež základné znalosti jazyka Javascript a Vue. Môžete sa riadiť oficiálnou dokumentáciou Vue tu dostať sa do tempa.

Začíname

Predtým, ako začneme, budeme musieť nastaviť projekt a nainštalovať závislosti od projektu. Na zavedenie našej aplikácie použijeme natívne rozhranie CLI Vue. Existuje aj možnosť inštalácie pomocou aplikácie Create React Native App, táto možnosť je dlhšia, ale pokyny nájdete tu .

Najprv nainštalujte Vue Native CLI spustením nasledujúceho príkazu:

yarn global add vue-native-cli // or npm install -g vue-native-cli

Potom inicializujte nový projekt spustením nasledujúceho príkazu:

vue-native init vue-gifs

Spustením tohto príkazu spustíte aplikáciu Create React Native App pomocou rozhrania Expo CLI.

V čase písania článku Vue Native CLI potrebuje verziu React Native_ 0.55.4_ a expo. 29.0.0 , tak aktualizujte svoje package.json nastaviť tieto verzie. Pridáme tiež príkazy, pre ktoré sa má vytvárať ios a Android platformy aktualizáciou skripty predmet.

//package.json { 'name': 'vue-gifs', 'main': 'node_modules/expo/AppEntry.js', 'private': true, 'scripts': { ... 'build:ios': 'expo build:ios', 'build:android': 'expo build:android', }, 'dependencies': { 'expo': '^29.0.0', ... 'react-native': '0.55.4', ... }, 'devDependencies': { 'babel-preset-expo': '^4.0.0', ... } }

Potom aktualizujte súbor sdkVersion v app.json súbor, ktorý zodpovedá verzii expo. Otvor app.json súbor a aktualizujte ho ako úryvok nižšie:

{ 'expo': { 'name': 'vue-gifs', 'description': 'This project is really great.', ... 'sdkVersion': '29.0.0', ... } }

Všetko ostatné zostane po starom. Po vykonaní týchto zmien spustite npm nainštalovať alebo priadza nainštalovať požadované verzie pre aplikáciu. Keď je to hotové, spustite štart nad morom na spustenie aplikácie.

Na zostavenie a spustenie našej aplikácie použijeme Expo. Expo je reťazec nástrojov s otvoreným zdrojovým kódom postavený na platforme React-native na vytváranie aplikácií pre Android a iOS. Poskytuje prístup k funkciám systému, ako je fotoaparát, úložisko atď.

Testovanie na mobile

Na testovanie aplikácie v mobile poskytuje expo-cli rôzne metódy na testovanie aplikácie. Prvým je použitie adresy URL vygenerovanej po spustení aplikácie. Túto adresu URL je možné navštíviť v mobilnom prehliadači a testovať aplikáciu.

Spustite súbor npm spustiť štart-natívny príkaz v priečinku projektu na spustenie aplikácie pomocou expo. expo zvyčajne spustí vašu aplikáciu na porte 19002 , navštívte http: // localhost: 19002 zobraziť nástroje pre vývojárov expo. V rámci nástrojov pre vývojárov môžete na svoj mobilný telefón odoslať odkaz na náhľad ako SMS alebo e -mail.

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Môžete si vybrať ktorúkoľvek z troch možností pripojenia. Externý tunel, LAN alebo lokálne pripojenie. Na lokálne pripojenie musí byť váš mobilný telefón a pracovný počítač pripojené k rovnakej sieti, ale tunel funguje bez ohľadu na to.

Ďalšou najľahšou metódou je stiahnutie mobilnej aplikácie Expo, ktorú nájdete v obchode Apple App Store aj v obchode Android Play. V systéme iOS po inštalácii aplikácie otvorte fotoaparát a naskenujte čiarový kód vyššie, čím spustíte aplikáciu. V systéme Android môžete na skenovanie čiarového kódu a spustenie aplikácie použiť aplikáciu Expo.

Spustite ktorýkoľvek z nasledujúcich príkazov na testovanie na oboch platformách:

npm start

Po spustení aplikácie naskenujte čiarový kód a zobrazte aplikáciu v aplikácii expo. Mali by ste vidieť zobrazenie podobné obrázku nižšie:

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Pozrime sa na ďalšie metódy, ktorými môžeme aplikáciu otestovať na mobile. Ďalšou možnosťou testovania na mobilnom zariadení je použitie emulátora alebo simulátora. Použitím Štúdio Android alebo Xcode , môžete spustiť emulátory alebo simulátory pre ich príslušné platformy. Stiahnite si a nainštalujte nástroj pre zvolenú platformu, Xcode pre iOS a Android studio pre Android. Po inštalácii spustite aplikáciu niektorým z nasledujúcich príkazov:

npm run ios # OR npm run android

Vytvorenie aplikácie Giphy

Ak chcete začať používať Giphy API, budete sa musieť prihlásiť do svojho Giphy účet , vytvorte si ho, ak ste to ešte neurobili. Ďalším krokom je vytvorenie aplikácie na serveri vývojár plošina. Na hlavnom paneli vášho účtu vývojára je a Vytvoriť aplikáciu kliknite naň a vyplňte údaje o svojej žiadosti.

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Po vytvorení aplikácie by sa mala vaša nová aplikácia zobraziť na vašom paneli s kľúčom API, tento kľúč sa použije pri odosielaní žiadostí spoločnosti Giphy

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Aby sme mohli požiadať o službu Giphy, použijeme ich Javascript SDK . Balík nainštalujete spustením nasledujúceho príkazu:

npm install --save giphy-js-sdk-core

Teraz môžeme pokračovať a používať rozhrania API pomocou tejto súpravy SDK.

Komponent aplikácie

Naša aplikácia je jednoduchá a zobrazuje trendové gify na platforme Giphy. Pomocou Giphy API , zo vrátených údajov získame príslušný obrázok gif, názov a typ. Údaje sa zobrazia pomocou niektorých komponentov poskytnutých vue-native. Otvor App.view súbor v koreňovom priečinku a aktualizujte ho ako úryvok nižšie:

 //Todo: Create gif item and header 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; }, }; .scroll-view { padding-top: 20px; padding-bottom: 30px; } .loading-container { height: 600px; }

V úryvku vyššie je súbor Aplikácia vykresľuje komponenty a scrollview komponent, v ktorom sú umiestnené prvky komponentov. Zobrazuje iba indikátor aktivity , bude po dokončení volania rozhrania API nahradený zoznamom gif.

Tiež vytvoríme inštanciu klienta Giphy pomocou kľúča API získaného z hlavného panela vývojárov a nahradíme zástupný reťazec kľúčom API. Volá sa trendové metóda zavolá na trendový koncový bod Giphy. Prvým poskytnutým parametrom je gify , toto označuje, ktoré trendové položky by mali byť vrátené, gify alebo nálepky . Druhý parameter je objekt poskytujúci voliteľné parametre ako limit , ofset , hodnotenie a fmt (formát).

Iba poskytneme a limit parameter obmedzujúci výsledky na 20 položiek. Tento hovor sa uskutoční v vytvorený životný cyklus súčiastky. Ďalej vytvoríme položku gif na vykreslenie vrátených výsledkov.

Po opätovnom načítaní by mala aplikácia zobraziť indikátor aktivity:

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Vytvorenie komponentu položky gif

Každá položka gif sa zobrazí pomocou a vyhliadka komponent, vyhliadka komponent je dôležitým stavebným prvkom, podporuje rozloženie pomocou flexboxu, štýl a prístupnosť. Každá položka zobrazí gif, názov a typ. Vytvorte priečinok komponentov v koreňovom priečinku. V rámci komponentov adresár, vytvorte pomenovaný GifItem.vue a aktualizujte ho pomocou nižšie uvedeného kódu:

// GifItem.vue {{titleCase(gif.title)}} 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(' '); } } }; .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; }

Pomocou Obrázok komponentu, môžeme zobraziť zdroj každého gifu a súboru Text komponent na zobrazenie názvu gifu. Komponent Image potrebuje a zdroj rekvizita, ktorá je predmetom s a nenávisť nehnuteľnosť.

The titleCase metóda prevezme názov každého gifu a vráti text v prípade veľkých písmen, pričom prvé písmeno každého slova v texte bude veľké. The GifItem komponent bude potrebovať jednu rekvizitu gif .

Aktualizujme App.view súbor zahrnúť nový GifItem . Aktualizujte súbor pomocou nižšie uvedeného úryvku:

 import Giphy from 'giphy-js-sdk-core'; const client = 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} }; .scroll-view { padding-top: 20px; padding-bottom: 30px; } .loading-container { height: 600px; }

Keď aplikáciu otvoríte v aplikácii expo, zobrazí sa vám niečo podobné, ako na obrázku nižšie:

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Ak sa vám gify nezobrazujú, znova si prečítajte tutoriál a zistite, čo ste na ceste zmeškali.

Hlavičkový komponent

Po úspešnom zadaní dopytu po trendových gifoch a ich zobrazení pomocou natívnych komponentov vložíme hlavičku, ktorá poskytne kontextu aplikácie. Pomocou komponentu Zobraziť vytvoríme oblasť, ktorá bude fungovať ako hlavička našej aplikácie. Vytvorte súbor s názvom header.vue v rámci komponentov adresár a aktualizujte ho pomocou nižšie uvedeného kódu:

// /components/header.vue Trending export default { name: 'header.vue' }; .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; }

Teraz pridáme hlavička komponent do Aplikácia zložka. V hornej časti aplikácie sa zobrazí jednoduchá hlavička. Aktualizujte | _+_ | súbor obsahujúci príponu Hlavička komponent:

App.vue

Keď sa aplikácia obnoví, hlavička sa pridá do hornej časti aplikácie.

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue

Podarilo sa nám dosiahnuť veľa funkcií zobrazovania pomocou komponentov poskytovaných Vue-native.

Nasadenie aplikácie

Aplikáciu nasadíme do obchodu Android Play. Aby sme to dosiahli, budeme musieť aktualizovať app.json zahrnúť Android špecifické vlastnosti. Otvor app.json súbor a aktualizujte súbor tak, aby obsahoval | _+_ | lúka:

 ... import Giphy from 'giphy-js-sdk-core'; const client = Giphy('TxuQbNU1nyDBwpqrcib61LxmOzsXTPEk'); import GifItem from './components/GifItem'; import Header from './components/header'; export default { name: 'App', data() { ... }, async created() { ... }, components: {GifItem, Header} }; ...

The balík Android pole je jedinečná hodnota, ktorá bude predstavovať váš balík v obchode s aplikáciami. Prečítajte si viac o konvencii pomenovania balíkov tu . Po aktualizácii súboru spustite súbor npm run build: android príkaz.

json návod pre začiatočníkov

Tento príkaz vám zobrazí výzvu so žiadosťou o poskytnutie súboru sklad kľúčov alebo vygenerovať nový. Ak máte existujúce úložisko kľúčov, môžete vybrať túto možnosť alebo nechať expo vygenerovať ho pre vašu aplikáciu.

Po dokončení bude pre vašu aplikáciu vygenerovaný odkaz na stiahnutie. Po kliknutí na tento odkaz sa spustí sťahovanie súboru APK.

Ak chcete stiahnuť stiahnutý súbor APK do Obchodu Android Play, navštívte stránku Play Console na vytvorenie účtu, potom budete musieť zaplatiť registračný poplatok vo výške 25 dolárov, než budete pokračovať. Po dokončení registrácie navštívte táto strana a podľa týchto pokynov nahrajte svoju aplikáciu do Obchodu Play.

Zhrnutie

Vue native poskytol riešenie na zostavenie pre mobilné platformy pomocou Vuejs. Kompiluje sa do React a používa komponenty poskytnuté React Native. Pokiaľ ide o čas písania, niektoré z nich komponentov vyžadujú, aby ste písali JSX so skutočnými komponentami React Native. Pretože Vue native pracuje s React native, môžete sa riadiť oficiálnou dokumentáciou React native. Vue native je stále v počiatočných fázach a má veľký potenciál. Je to príležitosť pre vývojárov Vue.js vytvárať multiplatformové mobilné aplikácie. Môžete si pozrieť zdrojový kód ukážky tu .

#Vuejs #Reagovať #Api

Ako nastaviť, vytvoriť a nasadiť natívne aplikácie pomocou Vue