Guida introduttiva ad un modello di applicazione nativa con React

() translation by (you can also view the original English article)

Progettare un'app nativa con React da zero è spesso un processo ingombrante — soprattutto la parte di design, perché è necessario pianificare per dispositivi Android e iOS. Non solo quello, ma è anche necessario assicurarsi che l'app sia visualizzata bene su schermi di dimensioni diverse.

Questo è dove modelli di vengono in aiuto. Gestiscono il progetto iniziale per voi affinché l'app sia bella con minimo sforzo di progettazione da parte vostra. Ci sono una manciata di tali modelli su CodeCanyon, un marketplace per modelli e plugin. Vi si possono trovare diversi tipi di modelli orientati al tipo specifico di applicazione che si desidera creare.

In questo tutorial, daremo un'occhiata a come utilizzare il modello BeoStore. Come suggerisce il nome, BeoStore è un modello di applicazione di ecommerce 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 l'investimento, perché ha la maggior parte delle funzionalità necessarie in un'applicazione di e-commerce. Tutto quello che dovete fare è configurare il modello e personalizzarlo a vostro piacimento. Per avere un'idea di ciò che offre, qui si sono alcune delle sue caratteristiche evidenziate:

Piena integrazione con WooCommerce: se si possiede 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 su piattaforme Android e iOS.
Social logins: i clienti possono accedere utilizzando il proprio account Facebook o Google.
Facile personalizzazione: tutto è ripartito in componenti. Questo assicura che si può facilmente personalizzare il modello col tuo brand.
Notifiche push: avvisa automaticamente i clienti quando c'è un aggiornamento per lo stato del loro ordine. È anche possibile inviare le notifiche push per promozioni di prodotti. Le notifiche push vengono implementate con Firebase.
Supporto multi-lingua: inglese come lingua principale. Lingua vietnamita come una seconda opzione, ma è anche possibile aggiungere la propria lingua.
Integrazione di pagamento sicura: i pagamenti sono effettuati con PayPal.

Se non avete ancora un account di Envato, è possibile iscriversi qui. Una volta fatto ciò, accedi al tuo account appena creato. Poi si può tornare indietro alla pagina BeoStore e fare clic sul pulsante Acquista ora.

Impostazione del progetto

Una volta che hai acquistato il modello, si otterrà un link per il download di file di archivio del modello. Una volta estratto si otterrà una cartella CodeCanyon che contiene MStore 2.2.

MStore 2.2 è la directory per il progetto del modello. Apri una nuova finestra di terminale all'interno di tale directory ed esegui il comando seguente:

1	npm install

Questo installerà tutte le dipendenze del progetto. Questo potrebbe richiedere un po' di tempo a seconda della vostra velocità di download, perché deve scaricare un sacco di dipendenze. Se volete vedere i pacchetti che è necessario scaricare, date un'occhiata a package.json.

Una volta che è stato fatto, c'è un passaggio aggiuntivo se si vuole costruire un'app per dispositivi iOS. Passare alla cartella iOS ed eseguire le seguenti operazioni:

1	pod install

Successivamente, per Android, collegare il dispositivo mobile al computer ed eseguire:

1	adb devices

Questo elencherà tutti i dispositivi Android collegati al computer. Se questa è la prima volta che si connette il dispositivo, si dovrebbe ricevere un messaggio che chiede se si desidera consentire al computer il debug dell'USB. Clicca Sì una volta che si riceve quel prompt.

Ora è possibile eseguire l'app sul tuo dispositivo Android:

1	react-native run-android

Per iOS:

1	react-native run-ios

Se non si verificano errori, si dovrebbe essere accolti con la seguente pagina:

Per darti un'idea delle diverse pagine disponibili nel modello, ecco alcuni screenshots:

Risoluzione dei problemi di configurazione di un progetto

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

Il Server di sviluppo non si avvia

Se il server di sviluppo non si avvia automaticamente quando viene eseguito react-native run-android or react-native run-ios, è possibile avviarlo manualmente eseguendo:

1	react-native start

Watch ha impiegato troppo tempo per caricarsi

Se ottenete un errore simile al seguente:

Error building DependencyGraph:
 Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
    at [object Object]._onTimeout (index.js:103:16)
    at Timer.listOnTimeout (timers.js:89:15)

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

1	sudo sysctl fs.inotify.max_user_instances=99999
2	sudo sysctl fs.inotify.max_user_watches=99999
3	sudo sysctl fs.inotify.max_queued_events=99999
4	watchman shutdown-server

Non si avvia ADB Reverse

Se stai ricevendo il seguente errore:

1	error: closed Could not run adb reverse:
2	Command failed: /path/to/android-sdk-linux/sdk/platform-tools/adb -s
3	300494a80ea22200 reverse tcp:8081 tcp:8081

Vuol dire che sul tuo dispositivo Android è in esecuzione una versione che è inferiore a 5.0 (Lollipop). Questo non è effettivamente un errore. Significa semplicemente che il tuo dispositivo Android non supporta adb reverse, che viene utilizzato per connettere al server di sviluppo al dispositivo tramite il debug USB. Se questo non è disponibile, react native ricorre al debug tramite Wi-Fi. Troverete maggiori informazioni al riguardo qui: Running on Device.

Qualcos'altro potrebbe causare la generazione di un errore. È possibile scorrere il terminale per vedere se ci sono errori che sono occorsi prima.

Impossibile trovare la variabile `_fbBatchedBridge`

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

1	ReferenceError: Can't find variable: _fbBatchedBridge (line 1 in the generated bundle)

È possibile eseguire le operazioni seguenti per visualizzare le opzioni sviluppatore React Native sul tuo dispositivo:

1	adb shell input keyevent 82

Selezionare Dev Settings dal menu che compare. Sotto la sezione di Debugging, clicca su Debug server host & port for device. Immettere l'indirizzo IP interno assegnato dal router di casa insieme alla porta in cui il server di sviluppo è in esecuzione e premere OK:

1	YOUR_INTERNAL_IP:8081

Tornare alla schermata principale dell'app e riesegui adb shell input keyevent 82. Questa volta selezionare Reload per ricaricare l'applicazione.

Could Not Find Firebase, App Compat, or GMS Play Services

Se stai ricevendo errori "could not find", ciò significa che non hai installato il pacchetto corrispondente utilizzando l'Android SDK Manager.

Qui ci sono i pacchetti che devono essere installati:

Android Support Repository
Android Support Repository
Google Play Services
Google Repository

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

Altri problemi

Se il tuo problema non è tra quelli elencati sopra, si può provare il seguente:

Consultare la documentazione sulla risoluzione dei problemi.
Controlla i commenti sul prodotto. È possibile cercare l'errore che stai ricevendo. Provare a generalizzare e accorciare il messaggio di errore anche se — non cercare solo il messaggio di errore intero. Se non trovate l'errore, si può provare a porre una domanda nel thread di commenti. Il team di supporto generalmente risponde prontamente.
Prova a cercare l'errore su Google. Anche se i risultati che troverete non prevedono l'utilizzo del modello, vi daranno un'idea su come risolvere il problema.
Cerca su StackOverflow o fai una nuova domanda. Assicurarsi di includere tutti i dettagli necessari (ad es. messaggio di errore, cose che hai fatto). C'è un buon articolo su come fare domande su StackOverflow.

Personalizzazione del modello

Un buon posto per iniziare ad imparare come fare le cose nel modello è la documentazione:

Layout di progetto: mostra dove trovare i diversi file nel modello e a cosa servonoi.
Eseguire la migrazione di WooCommerce: viene illustrato come è possibile collegare il vostro sito WooCommerce all'app. Agganciando l'app per il tuo WooCommerce significa che sarà in grado di recuperare tutte le categorie di prodotto e prodotti nel tuo negozio WooCommerce.
Migrazione di servizi: viene illustrato come configurare il nome dell'app, il social login, Firebase (per le notifiche push).
Personalizzare: viene illustrato come personalizzare i temi e il linguaggio.

Assicuratevi di controllarli! Non ripeterò ciò che è spiegato nella documentazione. Invece, quello che faremo in questa sezione è effettivamente personalizzare il modello in modo che appaia come che vogliamo.

La maggior parte delle impostazioni di configurazione di progetto vengono memorizzate all'interno del file app/Constants.js. Ecco alcuni esempi di cose che è possibile modificare con questo file:

Integrazione WooCommerce: L'URL del negozio WooCommerce che viene utilizzato dall'applicazione. Per impostazione predefinita, questo utilizza mstore.io.

WordPress: {
    Address: 'http://mstore.io/api',
},
WooCommerce: {
    url: 'http://mstore.io',
    consumerKey: '',
    consumerSecret: '',
    wp_api: true,
    version: 'wc/v1',
    timeout: 10, //request timeout
    RootCategoryId: 0,
    Product: {
        Display: {
            ProductThumbnails: {width: 180, height: 216,},
            CatalogImages: {width: 300, height: 360,},
            SingleProductImage: {width: 600, height: 720,}
        }
    },
},

Social Login: questo viene implementato utilizzando Auth0, una piattaforma di autenticazione. Per impostazione predefinita, il modello supporta solo accessi Google e Facebook. Ma si dovrebbe essere in grado di aggiungere qualsiasi servizio che supporta Auth0.

1	Auth0: {
2	clientId: '',
3	domain: '',
4	},

Icone: È possibile utilizzare qualsiasi icona da Fontawesome, ma è necessario anteporre al nome ios-.

Icon: { //App's icons. Checkout http://fontawesome.io/icons/ for more icons.
    Menu: 'ios-menu',
    Home: 'ios-home',
    Back: 'ios-arrow-back',
    Forward: 'ios-arrow-forward',
    Config: 'ios-settings',
    More: 'ios-more',
    SignIn: 'ios-log-in',
    SignOut: 'ios-log-out',
    ShoppingCart: 'ios-cart',
    ShoppingCartEmpty: 'ios-cart-outline',
    Sort: 'ios-funnel',
    Filter: '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',
    Wishlist: 'ios-heart',
    WishlistEmpty: 'ios-heart-outline',
    Delete: 'ios-trash',
    AddToCart: 'ios-cart',
    MyOrder: 'ios-cube',
    News: 'ios-paper',
    Mail: 'ios-mail',
    RatioOff: 'ios-radio-button-off',
    RatioOn: 'ios-radio-button-on',
    Search: 'ios-search',
    Close: 'ios-close',
    HappyFace:'ios-happy-outline',
    SadFace: 'ios-sad-outline',
},

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

1	Color: {
2	TopBar: 'white',
3	TopBarIcon: '#283747',
4	}

Immagini: La schermata iniziale e altre immagini possono essere aggiornati anche specificando un nuovo percorso per ciascuna delle seguenti operazioni:

Image: {
    Logo: require('./images/logo.png'),
    SplashScreen: require('./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: require('./images/stripe.png'),
    PayPal: require('./images/PayPal.png'),
    CashOnDelivery: require('./images/cash_on_delivery.png'),
    PlaceHolder: require('./images/placeholderImage.png'),
},

Queste immagini sono memorizzate nella directory app/images, si può semplicemente sostituire se non si desidera mantenere le vecchie immagini.

È anche possibile modificare le opzioni di PayPal da questo file. Assicurarsi di creare il proprio Account di sviluppatore di PayPal per ottenere il clientID e secretKey. Non dimenticate di aggiornare sandBoxMode su false quando distribuite l'applicazione in produzione, poiché per impostazione predefinita utilizza la modalità sandbox in modo che non saranno spesi soldi reali sulle transazioni.

PayPal: {
    clientID: '',
    secretKey: '',
    sandBoxMode: true, //change to false on production
},

Per personalizzare le singole pagine, devi andare nella directory app/containers. Questo è dove si trovano i file per ogni pagina. Ad esempio, se si desidera personalizzare la home page, passare alla cartella home e aprire il file index.js. Una volta aperto, vedrai che la pagina utilizza il componente <ImageCard> per eseguire il rendering di ogni categoria di prodotto. Quindi, se si desidera aggiungere uno stile generale per il componente <Imagecard>, è necessario aggiornare il file app/Components/ImageCard/index.js. In caso contrario, è possibile 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', //change the color of the category text
        fontSize: 40 //make the category text bigger
    },
    numberOfProductsText: {
        color: 'white',
        fontSize: 15
    }
}

Conclusione

Questo tutorial non è una guida completa su come utilizzare il modello BeoStore. Ma abbiamo coperto molti argomenti, soprattutto la risoluzione dei problemi durante l'installazione, che manca la documentazione ufficiale.

Il passo successivo è quello di collegare questo modello con il tuo sito Web WooCommerce o addirittura modificarlo e quindi utilizzarlo per altri tipi di applicazioni.

Scarica il modello ora, o se vuoi saperne di più, è possibile controllare la documentazione qui. Si possono anche trovare molti più modelli di app React Native su CodeCanyon.