Készítsen egy Instagram feed-alkalmazást csak javascript-tel (az Expo és a React Native használatával)

Már egy ideje bele akarok lépni a mobil fejlesztésbe, de minden alkalommal, amikor elkezdek valami oldalt építeni, ugyanazokkal a bosszantó problémákkal foglalkozom:

• Időt pazarolok unalmas dolgokra. A hello world alkalmazás létrehozásához egy csomó kazánlemez-kód és véletlenszerű telepítés szükséges
• Az internetes tudásom egyikét sem továbbítom. Az Android teljesen különbözik az iOS-től, és mindkettő teljesen különbözik az internetről.

Néhány internetes böngészés után úgy tűnt, hogy a Facebook megoldotta ezt a problémát a React Native (a React.js alapú natív alkalmazások készítésére szolgáló könyvtár) segítségével, de kipróbálás után azt találtam, hogy a beállítás ugyanolyan unalmas, mint korábban. A fő probléma továbbra is fennállt: el kellett írni egy csomó kazánlemez Java / C # kódot.

Készen voltam ahhoz, hogy mobiltelefonon felépüljön, de találtam valamit, amit Expo-nak hívtak. Az Expo-nak van néhány könyvtára és eszköze, amelyek néhány értelmes módon épülnek a React Native sikeréhez:

• Azonnal felállhat és fut, anélkül, hogy bármit letöltené
• Az önálló alkalmazások 100% -ig készíthetőek javascript-ben
• A csomaghoz mellékelt apis, amely leegyszerűsíti az alkalmazások általános feladatait

Legutóbbi alkotásaim egy Instagram feed alkalmazás, amelyet készíteni fogunk. Követheti az expo snack-t (webes felület az expo-val való játékhoz). Megnézheti a forrást a githubon, vagy megnézheti a video bemutatóomat. Kezdjük el.

Magas szinten láthatjuk, hogy az alkalmazás áll hozzászólások listáját, a bejegyzés metaadatait és végül a hozzászólásokat. Az Instagram api-t kell felhasználnunk ennek az információnak a beszerzésére, majd listás formátumban megjeleníteni.

Állítsunk be egy Instagram kliens alkalmazást, hogy api kéréseket tehessünk.

Az ügyfélalkalmazás létrehozásához szükséges információk kitöltése után törölje a jelölőnégyzetet a implicit OAuth letiltásához. Demó alkalmazásunk egyszerűsége érdekében szerver oldali kód nélkül megkapjuk a hozzáférési jogkivonatot.

Most kattintson az Ügyfelek kezelése elemre, és kezeli az újonnan létrehozott ügyfelet. Kattintson a Biztonság elemre, és írjon be minden URL-t az 'érvényes átirányítás' mezőbe (én megtettem a http://www.google.com címet).

Majdnem kész. A hozzáférési jogkivonat megszerzéséhez api hívást kezdeményezünk az Instagram hitelesítési API segítségével. Az api átirányít minket a megadott url-hez, de a hozzáférési jogkivonatunkkal, mint url-paraméterrel. Íme, amit be kell illesztenie a böngészőbe:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token&scope=public_content

Ahol a CLIENT-ID és az REDIRECT-URI a megfelelő értékek. Miután jóváhagyta az alkalmazások hozzáférését Instagram-fiókjához, átirányítani kell. Itt megragadom a hozzáférési jogkivonatomat (kérjük, hozzon létre egy egyedi alkalmazást az alkalmazásához).

Szép. Végül megkezdhetjük a kódolást.

Íme a váz minden Expo projekthez:

importálja a React, {Component} elemet a 'react' -ből; {Szöveg, nézet, stíluslap} importálása a „reagált natívból”;

export alapértelmezett osztály App kiterjeszti a {render () {return ( Szia )}}

const stílusok = StyleSheet.create ({})

A html stílusú címkéket JSX-nek hívják, a React egyik jellemzője. Ezt felhasználhatjuk az elrendezés meghatározására és a javascript logika beágyazására.

Importálhat néhány további komponenst a React Native és az Expo-ból.

• A FlatList összetevő lesz a felhasználói felület fő építőeleme, mivel az egyes elemeket a listában renderItem függvény meghívásával jeleníti meg.
• Az AppLoading arra szolgál, hogy megmutatja a felhasználónak egy betöltési ikont, miközben alkalmazásunk részeit ábrázoljuk (különben egy üres képernyő jelenik meg, amely villogni kezd, és a betöltött tartalmat megmutatja).
• A StyleSheet úgy működik, mint egy css fájl, ahol stílusokat alkalmazhatunk az alkalmazások nézeteihez

Szükségünk lesz továbbá hozzáférési tokenre és valahol az egyes bejegyzésekre vonatkozó adatok tárolására. A React Natívban ezt valami állapotnak nevezzük. Az UI-hez hozzáférni kívánt adatokat itt kell tárolni. Ez kényelmes, mert amikor az állapot megváltozik, alkalmazásunkat újratervezzük.

import React, {Component} az 'react' importálásból {Szöveg, Nézet, StyleSheet, Kép, Méretek, FlatList,} az 'react-native' importálásból {Constants, AppLoading} az 'expo'

access_token = '6626870867.cbba754.83fa37c865314df8be5c52347e3e4987'

állapot = {betöltve: hamis, adatok: null, megjegyzések: [],}

export alapértelmezett osztály App kiterjeszti a {render () {return ( this.createPost (elem, index)} keyExtractor = {(elem) => item.id} /> )}}

const stílusok = StyleSheet.create ({tároló: {flex: 1, alignItems: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '# ecf0f1',}})

A FlatList adatprofilja egy tömb, ahol minden elem paraméterként kerül továbbításra a renderItem függvényre. Ebben a tömbben tároljuk Instagram-üzenetünket.

Tehát használjuk az access_token használatával a postai adatok beszerzéséhez. A fetch api segítségével GET kérést küldünk az Instagram api végpontjára. Ezután tároljuk az értékeket alkalmazásunk állapotában.

async fetchFeed () {hadd válasz = várjon letöltést ('https://api.instagram.com/v1/users/self' + '/ media / Recent /? access_token =' + this.access_token) hadd posts = várjanak a választ. json () hagyja megjegyzéseit = várja meg ezt.makeCommentsList (posts.data)

this.setState ({adatok: posts.data, kommentárok: kommentárok, betöltve: true})}

Megvan a legutóbbi hozzászólásaink listája, de minden hozzászóláshoz meg kell szereznünk a megjegyzések és a kapcsolódó metaadatok listáját. Ez azt jelenti, hogy egy sor hálózati kérést készítünk, amelyek helytelen sorrendben térhetnek vissza. A terv ennek kezelése egy olyan ígéret-sorozat visszaadása, amely megoldódik, amikor a hozzászólások megjegyzéseit lekérik. Takaríthatunk meg bizonyos töltési időt azáltal is, hogy nem kérünk, amikor a bejegyzés nem rendelkezik megjegyzésekkel, és egyszerűen megmutatjuk a "Nincs hozzászólás!"

async makeCommentsList (hozzászólások) {hagyjuk postsArray = posts.map (async (post) => {hagyjuk postId = post.id

if (post.comments.count === 0) {return ( Nincs hozzászólás! ) } más {

        hadd válasz = várjon lekérést ('https://api.instagram.com/v1/media/' + postId + '/ megjegyzések? access_token =' + this.access_token)

hagyjuk kommentárok = várjunk válasz.json () hagyjuk kommentárokArray = comments.data hagyjuk kommentárokList = commentsArray.map (commentInfo => {visszatérés ( {CommentInfo.from.username} {CommentInfo.text} )})

        return commentsList}

    })

    postsArray = várja meg az Promise.all (postsArray) return postsArray}

Hozzáadtunk némi stílust, hogy a megjegyzések szépnek tűnjenek:

const stílusok = StyleSheet.create ({tartály: {flex: 1, alignItems: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '# ecf0f1',}, megjegyzés: {flexDirection: 'row', padding: 10, paddingLeft : 15, borderBottomWidth: 1, borderColor: '# d8d8d8',}, commentText: {paddingRight: 15, fontWeight: 'bold',}})

Most, hogy megkaptuk az összes megjegyzésünket és adatainkat, el kell készítenünk az ütemtervet és feltöltenünk azt a kapott adatokkal. A createPost funkció ezeket az értékeket használja a hozzászólás, metaadatok és megjegyzések megjelenítésére.

createPost (postInfo, index) {let imageUri = postInfo.images.standard_resolution.url let username = postInfo.user.username felhasználónév let numLikes = postInfo.likes.count

Visszatérés ( 

{felhasználónév} {numLikes + (numLikes! == 1? 'szereti': 'tetszik')}

{This.state.comments [index]} )}

A imageUri, a felhasználónév és a numLikes mind a visszaadott JSON-ból származnak, a letöltési kérésünkről az Instagram api-re. Példák a visszatérési értékekre az Instagram fejlesztői dokumentumokban találhatók.

Még egyszer hozzáadunk némi stílussal a stíluslapunkat, hogy üzenetünk megjelenése díszes legyen.

  kép: {szélesség: Dimensions.get ('ablak'). szélesség, magasság: Dimensions.get ('ablak'). szélesség,}, info: {flexDirection: 'sor', SelgitusContent: 'térköz', padding: 10, paddingLeft: 15, paddingRight: 15, borderBottomWidth: 1, borderColor: '# d8d8d8',}, infoText: {fontSize: 16, fontWeight: 'bold',}

Néhány befejező elem hozzáadásához engedje le az Instagram indulási információinkat, amikor az alkalmazás elindul, és megmutatja a betöltési ikont az optimális felhasználói élmény érdekében.

komponentDidMount () {this.fetchFeed ()}

render () {if (! this.state.loaded) {return ( )}

Visszatérés ( this.createPost (elem, index)} keyExtractor = {(elem) => item.id} /> )}

És éppen így van! Egy mobil Instagram feed-néző ~ 150 sorban. Itt megtekintheti a teljes, működő snack-példát.

Mivel ezt az oktatást telepítés nélkül tervezték, úgy nem fejeztük be az önálló Android vagy iOS alkalmazás létrehozásának folyamatát. Szerencsére csak pár lépésre vagy.

1. Győződjön meg arról, hogy van Apple Developer és Google Play fiókja.
2. Töltse le az Expo XDE eszközét, és kattintson a Snack 'exportálás XDE-re' elemére.
3. Kövesse az Expo önálló alkalmazásoldalán található építkezési utasításokat (főleg metaadatok hozzáadása az alkalmazáshoz)
4. Gratulálunk! Ön készített egy natív alkalmazást iOS és Android számára