Expo Devtools Is Running at Http://localhost:19002 Can't Read Json File:
Introduction
Vue Native is a Javascript framework that is designed to evangelize cantankerous-platform mobile native applications. It is inspired by the React Native projection.
Vue Native was originally a fork from React-Vue, a compiler that gave developers the ability to write Vue and React in the same codebase.
In this tutorial, you will build an application to larn about the APIs and components available in Vue Native.
The application that you build will display trending gifs on the Giphy platform. The Giphy API volition be used to get the associated gif image, title, and type for each trending gif. The image and details will be displayed using Vue Native components like ScrollView, Text, and Prototype.
Annotation: The deploy procedure documented at the end of this tutorial is Android-specific. Nevertheless, the process may still be educational for those interested in iOS deployment.
Prerequisites
To complete this tutorial, you will need:
- Node.js installed locally, which you lot can achieve past following How to Install Node.js and Create a Local Development Environment. This tutorial requires Node half dozen.0.0 or greater.
- A Node package manager like
npm(which comes packaged with Node) or Yarn. This tutorial will usenpm. If you prefer to useyarn, you lot will need to substitute those steps. - Some knowledge of JavaScript and Vue is as well helpful. Y'all can follow the official Vue documentation to become familiar with some fo the core Vue concepts and components.
- To utilise the Giphy API, you'll demand to create or log in to a Giphy account.
Expo will exist used to build and run the new application. Expo is an open-source tool-chain built effectually React Native for edifice Android and iOS applications. It provides admission to the system's functionality like the Camera and Storage.
If you don't already have expo-cli installed globally, you lot can run the following in your terminal:
- npm install --global expo-cli@3.20.1
Note: An Expo account will be required if y'all are interested in deploying your app later.
Step i — Setting Up the Projection
First, y'all will need to ready upwardly a projection and install some dependencies. The Vue Native CLI volition exist used to bootstrap the application.
Initialize a new projection for vue-gifs by running the following in your terminal with npx:
- npx vue-native-cli@0.1.1 init vue-gifs
Running this command volition bootstrap an application for this project using the Expo CLI.
To build for iOS and Android platforms, update the scripts object in the packet.json file:
packet.json
{ "proper noun" : "vue-gifs" , "main" : "node_modules/expo/AppEntry.js" , "private" : true , "scripts" : { ... "build:ios" : "expo build:ios" , "build:android" : "expo build:android" , } , ... } And then update the sdkVersion in the app.json file to match the Expo version in your bundle.json. Open up the app.json file and update information technology similar the snippet below:
app.json
{ "expo" : { "name" : "vue-gifs" , "description" : "This projection is really great." , ... "sdkVersion" : "37.0.three" , ... } } Notation: At the fourth dimension of testing this tutorial, the Vue Native CLI needs the React Native version 37.0.i and Expo version 37.0.3. At a later date, you may need to manually modify your app.json and package.json files and run npm install. Consult the Expo documentation for upgrading the SDK.
Now that you've set up the project, you're ready to start testing the application.
Pace two — Testing on Mobile
To test the application on mobile, the Expo CLI provides diverse methods to test the awarding. The kickoff is using a URL that is generated later running the awarding. This URL can be visited on your mobile browser to examination the application.
Ensure that you are in the vue-gifs projection directory and run npm kickoff to start the application:
- npm commencement
Expo typically starts your application on :19002 and then visit http://localhost:19002 to view the Expo Dev Tools in your browser. Within the Dev Tools you can transport the preview link as an SMS or email to your mobile phone:
Yous can select whatsoever of the three connection options: an external tunnel, LAN, or local connection. For the local connection, your mobile phone and piece of work PC take to be connected to the same network, simply the tunnel will work in all cases.
The adjacent testing method that you can employ is to download the Expo Mobile App. Information technology can be found on both the Apple App Store and the Android Play Store. On iOS, after installing the app open your camera and scan the QR code from the browser version of the application to run it on your phone. On Android, you lot can utilise the Expo app straight to scan the QR lawmaking and run the application. Your application volition so display on your mobile device.
Another option for testing on a mobile device is using an emulator or simulator. Using Android Studio or Xcode on macOS, you tin boot emulators or simulators for their respective platforms. Download and install the tool for the platform of choice: Xcode for iOS and Android studio for Android. After installation, run the control to start the awarding:
For iOS, run:
- npm run ios
For Android, run:
- npm run android
At present that you lot've explored different options for testing the app, you are ready to build the application.
Pace iii — Creating a Giphy Awarding
The side by side step is to create an app on the Giphy Developer platform.
On your developer business relationship dashboard, there is a Create App button. Click the button, and y'all volition be presented with a choice between an SDK or an API. For the purposes of this tutorial, API will suffice.
Then, click Next Step and then Create App. Fill up in the details nearly your application.
Afterwards creating the app, your new application will be displayed on your dashboard with an API primal. This key will be used when making requests to Giphy.
Giphy'south Javascript SDK volition be used to make requests to the Giphy service itself. Run this command from the vue-gifs directory to install the bundle:
- npm install --save giphy-js-sdk-core@1.0.6
Now, your projection is ready to consume the Giphy APIs with the assist of this SDK.
Pace 4 — Building the App Component
In this pace y'all will build the app component. Open up the App.vue file in the root folder and update it like the snippet below:
App.vue
<template> <view> <scroll-view class = "scroll-view" > < ! -- TODO : Create gif item and header -- > <view course = "loading-container" :style= "{flex: 1, justifyContent: 'middle'}" v- if = "loading" > <activity-indicator size= "large" colour= "#0000ff" > < /action-indicator> < /view> < /gyre-view> < /view> < /template> <script> import Giphy from 'giphy-js-sdk-core' ; const client = Giphy ( 'GIPHY_API_KEY' ) ; export default { name : 'App' , information ( ) { return { gifs : [ ] , loading : true , } ; } , async created ( ) { const response = await client. trending ( 'gifs' , { limit : 20 } ) ; this .gifs = response.data; } , } ; < /script> <way> .roll-view { padding-top: 20px; padding-bottom: 30px; } .loading-container { height : 600px; } < /way> In the snippet above, the App component renders a scrollview component that houses the component'due south elements. It just displays an activityindicator; this volition exist replaced past the list of gifs when the phone call to the API is consummate.
The Giphy client is instantiated using the API key obtained from the developers dashboard. Be sure to replace the placeholder string with the API primal. Calling the trending method makes a telephone call to the Giphy trending endpoint. The showtime provided parameter is gifs: this indicates which trending items should be returned, either gifs or stickers. The 2nd parameter is an object providing optional parameters like the limit, offset, rating, and fmt (format).
The only parameter used in this lawmaking is the limit parameter, which restricts the results to 20 items. This call is fabricated in the created lifecycle of the component. Finally, the gif listing is used to return the returned results.
Later reloading, the application should display the activity indicator:
Now that you've built the app component, you lot are set to build the gif detail component.
Step 5 — Building the Gif Particular Component
Each gif detail will be displayed using a View component. The View component is an of import building block in the framework. It supports layout using flexbox, styling, and accessibility. Each item volition display the gif, championship, and type.
Create a folder named components in the root folder. Within the components directory, create a file named GifItem.vue and add the following code:
components/GifItem.vue
<template> <view class = "container" > <image class = "img" :source= "{uri: `${gif.images.original.url}`}" style= "max-width:100%;" / > <text form = "title" > { { titleCase (gif.title) } } < /text> < /view> < /template> <script> export default { proper name : "GifItem" , props : [ "gif" ] , methods : { titleCase ( text ) { const textArray = text. dissever ( " " ) ; return textArray . map ( text => { const trimmedText = text. trim ( ) ; render ` ${trimmedText[ 0 ] . toUpperCase ( ) } ${trimmedText. piece ( one ) } ` ; } ) . bring together ( " " ) ; } } } ; < /script> <style> .container { display : flex; flex-management: column; align-items: middle; margin-bottom: 30px; position : relative; } .img { height : 200px; width : 300px; } .title { font-size: 14px; font-weight: 500 ; margin-top: 7px; } < /style> The Image component volition exist used to brandish the source of each gif, and the Text component will be used to brandish the gif championship. The Image component takes a source prop, which is an object with a uri property.
The titleCase method takes the title of each gif and returns the text in the title case, capitalizing the first letter of each word in the text. The GifItem component will take a single prop gif.
Update the App.vue file to include the new GifItem using the the snippet below:
App.vue
<template> <view> <scroll-view class = "scroll-view" > <gif-particular v- for = "gif in gifs" :gif= "gif" :key= "gif.id" v- if = "!loading" / > <view form = "loading-container" :way= "{flex: i, justifyContent: 'center'}" v- if = "loading" > <activeness-indicator size= "large" color= "#0000ff" > < /activeness-indicator> < /view> < /gyre-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 customer. 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> When yous open the awarding in the Expo app, the app will display gifs stacked in a list.
If your local awarding is not displaying a list of gifs, ensure that your code matches the snippets in this tutorial and that your Giphy API key is valid.
Step 6 — Building the Header Component
At present that the awarding can retrieve and display a list of trending gifs let's include a header to give the application context. The View component will be used to create an expanse that will act equally the header for the awarding.
Create a file called header.vue within the components directory and update it with the code below:
components/header.vue
<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 ) ; brandish : flex; justify-content: middle; padding-top: 15px; padding-bottom: 15px; edge-bottom-colour: aquamarine; border-bottom-width: 1px; margin-height: 20px; } .header { font-size: 16px; color : black; opacity : 0.8 ; font-weight: 600 ; text-align: eye; } < /style> At present add the header component to the App component. This will display a header at the peak of the application. Update the App.vue file to include the Header component:
App.vue
<template> <view> <header/ > <curlicue-view course = "curl-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 { proper name : 'App' , data ( ) { ... } , async created ( ) { ... } , components : {GifItem, Header} } ; < /script> <manner> ... < /manner> Afterwards the awarding refreshes, the header volition exist added to the top of the awarding.
The components provided past Vue Native accept done all of the piece of work required to return, order, and display the listing of trending gifs.
Step seven — Deploying the Application on Android (Optional)
Notation: This is an optional footstep that is not required for completing the tutorial. This should be considered for educational purposes on the workflow from projection creation to app store submission.
The last step in this tutorial is to deploy the application to the Android Play store.
First, you lot volition demand to update app.json to include Android specific backdrop. Open the app.json file and update the file to include the android field:
app.json
{ "expo": { ... "android": { "package": "com.vue.gifs" } } } The android.packet field is a unique value that will represent your package in the app store. You tin can read more on the bundle naming convention here.
After updating the file, run this command in your concluding window from the vue-gifs directory:
- npm run build:android
This command will present you with a prompt, asking you to provide a keystore or to generate a new 1. If you have an existing keystore, you tin can select this option or let Expo generate one for your application.
Afterwards completion, a download link will exist generated for your awarding, clicking on this link will trigger a download for your APK.
To deploy the downloaded APK to the Android Play Store, visit the Play Console to create an account. You will need to pay a registration fee before proceeding. When registration is complete, visit this page and follow the steps to upload your application to the Play Store.
Conclusion
Vue Native is a useful framework to build applications for mobile platforms using Vue.js. Vue Native compiles to React and uses components provided by React Native. At equally the fourth dimension of writing, some of its components require that you write JSX with the actual React Native components. Since Vue Native works with React Native, you tin follow the official React Native documentation to learn more than about information technology.
Source: https://www.digitalocean.com/community/tutorials/how-to-set-up-build-and-deploy-native-apps-with-vue
0 Response to "Expo Devtools Is Running at Http://localhost:19002 Can't Read Json File:"
Enregistrer un commentaire