Introduzione a un modello di app nativo di React

Progettare un'applicazione React Native da zero è spesso un processo ingombrante, specialmente la parte di progettazione, perché devi pianificare sia dispositivi Android che iOS. Non solo, ma devi anche assicurarti che la tua app sia bella su diverse dimensioni dello schermo. 

Questo è dove i modelli sono utili. Gestiscono il design iniziale per te in modo che la tua app sia piacevole con il minimo sforzo di progettazione da parte tua. Ci sono una manciata di tali modelli su CodeCanyon, un mercato per modelli e plugin. Qui puoi trovare diversi tipi di modelli adatti al tipo specifico di app che desideri creare.

In questo tutorial, daremo un'occhiata a come utilizzare il modello di BeoStore. Come suggerisce il nome, BeoStore è un modello di app di e-commerce per React Native. 

Ottenere il modello dal Marketplace

È possibile scaricare il modello andando alla pagina del prodotto BeoStore su CodeCanyon. È un modello a pagamento, ma vale la pena investire, perché ha la maggior parte delle funzionalità necessarie in un'applicazione di e-commerce. Tutto quello che devi fare è configurare il modello e personalizzarlo a tuo piacimento. Per avere un'idea di ciò che offre fuori dalla scatola, ecco alcune delle sue caratteristiche salienti:

• Piena integrazione con WooCommerce: se stai utilizzando un sito web WooCommerce, l'app può visualizzare gli stessi prodotti che hai sul tuo sito web esistente.
• Supporto per iOS e Android: l'app funziona e ha un bell'aspetto su entrambe le piattaforme Android e iOS.
• Login sociali: i clienti possono accedere utilizzando il proprio account Facebook o Google.
• Facile personalizzazione: tutto è suddiviso in componenti. Ciò garantisce che puoi facilmente personalizzare il modello in base al tuo marchio.
• Le notifiche push: questo avvisa automaticamente i tuoi clienti quando c'è un aggiornamento allo stato del loro ordine. Puoi anche inviare notifiche push per promozioni di prodotti. Le notifiche push sono implementate con Firebase.  
• Supporto multilingue: puoi usare l'inglese come lingua principale. Il vietnamita esiste come seconda opzione, ma puoi anche aggiungere la tua lingua.
• Integrazione sicura dei pagamenti: i pagamenti sono effettuati con PayPal.

Se non hai ancora un account Envato, puoi registrarti qui. Una volta fatto, accedi al tuo account appena creato. Quindi è possibile tornare alla pagina di BeoStore e fare clic su Acquista ora pulsante. 

Impostazione del progetto

Una volta acquistato il modello, riceverai un link per il download del file di archivio del modello. Estrai quello e otterrai un CodeCanyon cartella che contiene mStore 2.2.

MStore 2.2 è la directory per il progetto del modello. Vai avanti e apri una nuova finestra di terminale all'interno di quella directory ed esegui il seguente comando:

installazione di npm

Questo installerà tutte le dipendenze del progetto. Questo potrebbe richiedere del tempo a seconda della velocità di download, poiché deve scaricare molte dipendenze. Dare un'occhiata al package.json se vuoi vedere i pacchetti che deve scaricare.

Una volta fatto, c'è un ulteriore passaggio se vuoi costruire per dispositivi iOS. Vai al iOS cartella ed eseguire quanto segue:

installazione pod

Successivamente, per Android, collega il tuo dispositivo mobile al computer ed esegui:

dispositivi adb

Questo elencherà tutti i dispositivi Android collegati al tuo computer. Se è la prima volta che colleghi il dispositivo, dovresti ricevere una richiesta che ti chiede se vuoi consentire al computer di eseguire il debug USB. Basta toccare sì una volta ottenuto questo prompt.

Ora puoi eseguire l'app sul tuo dispositivo Android:

react-native run-android

Per iOS:

react-native run-ios

Se non hai riscontrato errori, dovresti essere accolto con la seguente pagina:

Per darti un'idea delle diverse pagine disponibili nel modello, qui ci sono alcuni altri screenshot:

Risoluzione dei problemi di installazione del progetto

In questa sezione, ho compilato un elenco di errori comuni di impostazione del progetto e relative soluzioni. 

Il server di sviluppo non è stato avviato

Se il server di sviluppo non si avvia automaticamente quando viene eseguito react-native run-android o react-native run-ios, puoi eseguirlo manualmente eseguendo:

inizio reattivo

Guarda Took Too Long to Load

Se si verifica un errore simile al seguente:

Errore durante la creazione di DependencyGraph: Errore: Watcher ha impiegato troppo tempo per caricare Provare a eseguire la 'versione watchman' dal terminale https://facebook.github.io/watchman/docs/troubleshooting.html in [oggetto Object] ._ onTimeout (index.js: 103: 16) su Timer.listOnTimeout (timers.js: 89: 15)

Questo perché è in esecuzione un'istanza di Watchman esistente. Questo è un componente del server di sviluppo React Native. È possibile risolvere questo errore e arrestare Watchman eseguendo i seguenti comandi:

sudo sysctl fs.inotify.max_user_instances = 99999 sudo sysctl fs.inotify.max_user_watches = 99999 sudo sysctl fs.inotify.max_queued_events = 99999 watchman shutdown-server

Impossibile eseguire ADB reverse

Se ricevi il seguente errore:

errore: chiuso Impossibile eseguire adb reverse: comando non riuscito: / percorso / a / android-sdk-linux / sdk / piattaforma-tools / adb -s 300494a80ea22200 reverse tcp: 8081 tcp: 8081

Significa che il tuo dispositivo Android è in esecuzione su una versione inferiore a 5.0 (Lollipop). Questo non è in realtà un errore. Significa semplicemente che il tuo dispositivo Android non supporta adb reverse, che viene utilizzato per connettere il server di sviluppo al dispositivo tramite debug USB. Se questo non è disponibile, React Native torna al debug usando il Wi-Fi. Puoi trovare ulteriori informazioni a riguardo qui: Running on Device.

Qualcos'altro potrebbe causare il fallimento della tua build. È possibile scorrere verso l'alto il terminale per vedere se ci sono degli errori verificatisi prima.

Can not Find Variable _fbBatchedBridge

Se ricevi il seguente errore e il server di sviluppo è in esecuzione in modalità Wi-Fi, significa che non hai configurato l'IP del tuo computer nel tuo dispositivo Android. (Questo di solito arriva solo con dispositivi Android sotto la versione 5.0.)

ReferenceError: Impossibile trovare la variabile: _fbBatchedBridge (riga 1 nel pacchetto generato)

È possibile eseguire quanto segue per mostrare le opzioni dello sviluppatore React Native sul dispositivo:

adb shell input keyevent 82

Selezionare Impostazioni Dev dal menu che appare. Sotto il Debug sezione, toccare Debug server host e porta per dispositivo. Immettere l'IP interno assegnato dal router di casa insieme alla porta in cui è in esecuzione il server di sviluppo e premere OK:

YOUR_INTERNAL_IP: 8081

Torna alla schermata iniziale dell'app ed esegui adb shell input keyevent 82 ancora. Questa volta selezionare Ricaricare per ricaricare l'app.

Impossibile trovare Firebase, App Compat o GMS Play Services

Se ricevi errori di "impossibile trovare", significa che non hai installato il pacchetto corrispondente utilizzando Android SDK Manager.

Ecco i pacchetti che devono essere installati:

• Repository supporto Android
• Libreria di supporto Android
• Google Play Services
• Google Repository

Assicurati di aggiornare anche i pacchetti esistenti se c'è un aggiornamento disponibile.

Altri problemi

Se il tuo problema non coinvolge nessuno dei precedenti, puoi provare quanto segue:

• Controlla la documentazione sulla risoluzione dei problemi.
• Dai un'occhiata ai commenti del prodotto del modello. Puoi cercare l'errore che stai ricevendo. Cerca di generalizzare e abbreviare il messaggio di errore, però non cercare l'intero messaggio di errore. Se non riesci a trovare l'errore, puoi provare a porre la tua domanda nella discussione dei commenti. Il team di supporto di solito risponde prontamente.
• Prova a cercare l'errore su Google. Anche se i risultati che trovi non implicano l'uso del modello, ti daranno un'idea su come risolvere il problema.
• Cerca su StackOverflow o fai una nuova domanda. Assicurati di includere tutti i dettagli necessari (ad esempio, messaggio di errore, passaggi che hai seguito). C'è un buon articolo su come fare domande su StackOverflow.

Personalizzazione del modello

Un buon punto di partenza per imparare a fare cose nel modello è la sua documentazione:

• Layout del progetto: mostra dove trovare i diversi file nel modello e per cosa sono utilizzati.
• Migrazione di WooCommerce: mostra come puoi collegare il tuo sito web WooCommerce esistente all'app. Collegando l'app al tuo WooCommerce significa che sarà in grado di recuperare tutte le categorie di prodotti e prodotti nel tuo negozio WooCommerce. 
• Migrazione dei servizi: mostra come configurare il nome dell'app, Firebase (per le notifiche push) e accesso social.
• Personalizza: mostra come personalizzare la lingua e i temi.

Assicurati di controllare quelli fuori! Non ho intenzione di ripetere ciò che è stato menzionato nella documentazione. Invece, quello che faremo in questa sezione è di personalizzare effettivamente il modello in modo che appaia come vogliamo.

La maggior parte delle impostazioni di configurazione del progetto sono memorizzate all'interno di app / Constants.js file. Ecco alcuni esempi di cose che puoi modificare da questo file:

Integrazione WooCommerce: L'URL del negozio WooCommerce utilizzato dall'app. Per impostazione predefinita, utilizza mstore.io.

WordPress: Indirizzo: 'http://mstore.io/api',, WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: true, version: 'wc / v1 ', timeout: 10, // richiesta timeout RootCategoryId: 0, prodotto: Display: ProductThumbnails: width: 180, height: 216,, CatalogImages: width: 300, height: 360,, SingleProductImage: larghezza: 600, altezza: 720,,,

Login sociali: Questo è implementato usando Auth0, una piattaforma di autenticazione. Per impostazione predefinita, il modello supporta solo gli accessi a Google e Facebook. Ma dovresti essere in grado di aggiungere qualsiasi servizio supportato da Auth0.

Auth0: clientId: ", dominio:",,

Icone: Puoi usare qualsiasi icona di Fontawesome, ma dovresti anteporre il nome a ios-.

Icona: // Icone dell'app. Leggi http://fontawesome.io/icons/ per altre icone. Menu: 'ios-menu', Home: 'ios-home', Indietro: 'ios-arrow-back', Avanti: 'ios-arrow-forward', Config: 'ios-settings', Altro: 'ios-more ', SignIn:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-outline ', Ordina:' ios-funnel ', Filtro: 'ios-funnel-outline', ShowItem: 'ios-arrow-dropright', HideItem: 'ios-arrow-dropup', ListMode: 'ios-list-box', GridMode: 'ios-grid', RatingFull: 'ios -star ', RatingEmpty:' ios-star-outline ', Lista dei desideri:' ios-heart ', WishlistEmpty:' ios-heart-outline ', Elimina:' ios-trash ', AddToCart:' ios-cart ', MyOrder: 'ios-cube', Notizie: 'ios-paper', Mail: 'ios-mail', RatioOff: 'ios-radio-button-off', RatioOn: 'ios-radio-button-on', Cerca: 'ios -search ', Close:' ios-close ', HappyFace:' ios-happy-outline ', SadFace:' ios-sad-outline ',,

Tema: Anche i colori per i diversi componenti che compongono ciascuna pagina possono essere aggiornati. Ad esempio, se si desidera modificare il colore di sfondo dell'intestazione, è possibile aggiornare il valore per topbar:

Colore: TopBar: 'white', TopBarIcon: '# 283747',

Immagini: La schermata iniziale e altre immagini possono anche essere aggiornate specificando un nuovo percorso per ciascuno dei seguenti elementi:

Immagine: Logo: require ('./ images / logo.png'), SplashScreen: richiede ('./ images / splash_screen.png'), CategoryPlaceholder: require ('./ images / category_placehodler.png'), DefaultAvatar: require ('./ images / default_avatar.jpg'), AvatarBackground: require ('./ images / avatar_background.jpg'), CheckoutStep1: require ('./ images / line-1.png'), CheckoutStep2: require (' ./images/line-2.png '), CheckoutStep3: require (' ./ images / line-3.png '), Stripe: richiede (' ./ images / stripe.png '), PayPal: require ('. /images/PayPal.png '), CashOnDelivery: require (' ./ images / cash_on_delivery.png '), PlaceHolder: require (' ./ images / placeholderImage.png '),,

Queste immagini sono memorizzate nel app / immagini directory, puoi semplicemente sostituirli se non vuoi conservare le vecchie immagini.

• Puoi anche modificare le opzioni di PayPal da questo file. Assicurati di creare il tuo account sviluppatore PayPal per ottenere il Identificativo cliente e chiave segreta. Non dimenticare di aggiornare Modalità Sandbox a falso quando si distribuisce l'app in produzione, perché per impostazione predefinita utilizza la modalità sandbox in modo che non vengano spesi soldi effettivi sulle transazioni.

PayPal: clientID: ", secretKey:", sandBoxMode: true, // cambia in false in produzione,

• Per personalizzare le singole pagine, devi andare al app / contenitori directory. Qui è dove troverai i file per ogni pagina. Ad esempio, se si desidera personalizzare la pagina iniziale, accedere a casa cartella e apri il index.js file. Una volta aperto, vedrai che la pagina usa il  componente per rendere ogni categoria di prodotto. Quindi se vuoi aggiungere uno stile generale per il  componente, devi aggiornare il app / Componenti / Image Card / index.js file. Altrimenti, puoi semplicemente aggiornare gli stili all'interno della pagina stessa:

this.styles = container: flex: 1, imageCard: width: Constants.Dimension.ScreenWidth (1), height: 200,, mainCategoryText: color: 'white', // cambia il colore della categoria text fontDimensione: 40 // ingrandisci il testo della categoria, numberOfProductsText: color: 'white', fontSize: 15

Conclusione

Questo tutorial non è affatto una guida completa su come utilizzare il modello di BeoStore. Ma abbiamo coperto un bel po 'di terreno, specialmente sulla risoluzione dei problemi di installazione, che manca nella documentazione ufficiale. 

Il prossimo passo è quello di collegare questo modello con il tuo sito web WooCommerce o addirittura riutilizzarlo in modo che possa essere utilizzato per altri tipi di app.

Scarica il modello ora o se vuoi saperne di più, puoi consultare la documentazione qui. Puoi anche trovare molti altri modelli di app nativi di React su CodeCanyon.