Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native
Code

Početak Rada s React Native App Predloškom

by
Difficulty:BeginnerLength:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Dizajniranje React Native aplikacije iz samog temelja često je težak proces - naročito dio koji se odnosi na dizajniranje, jer morate planirati za Android i iOS uređaje. I ne samo to, već morate provjeriti izgleda li vaša aplikacija dobro na različitim veličinama zaslona.

U ovakvim situacijama, predlošci su veoma korisni. Oni umjesto vas rješavaju početni dizajn kako bi aplikacija dobro izgledala uz vaš minimalno uloženi trud u dizaniranje. Postoji pregršt takvih predložaka na CodeCanyonu, tržištu za predloške i dodatke. Tamo možete pronaći različite vrste predložaka prilagođenih određenoj vrsti aplikacije koju želite kreirati.

U ovom tutorialu ćemo pogledati kako koristiti predložak BeoStore. Kao što samo ime sugerira, BeoStore je e-commerce predložak aplikacije za React Native.

Preuzimanje Predloška s Marketplacea

Predložak možete preuzeti posjetivši stranicu BeoStore proizvoda na CodeCanyonu. Predložak je dostupan uz plaćanje, ali investicija se svakako isplati pošto ima većinu značajki potrebnih za e-commerce aplikaciju. Sve što trebate učiniti jest konfigurirati predložak i prilagoditi ga po vlastitoj želji. Kako biste dobili ideju o onome što ćete dobiti s predloškom, evo nekih njegovih najbitnijih značajki:

  • Potpuna integracija s WooCommerce: ako imate WooCommerce web stranicu, aplikacija može prikazati iste artikle koje imate na postojećoj stranici.
  • Podrška za iOS i Android: aplikacija radi i odlično izgleda na Android i iOS platformama.
  • Prijava Putem Računa Društvenih Mreža: korisnici se mogu prijaviti koristeći svoj Facebook ili Google račun.
  • Jednostavno Prilagođavanje: sve je podijeljeno u komponente. To omogućuje jednostavno prilagođavanje predloška ovisno o vašem brandu.
  • Push obavijesti: ovo automatski obavještava vaše korisnike kada se pojavi novi status vezan za njihovu narudžbu. Također možete slati proslijeđene obavijesti za promocije proizvoda. Proslijeđene obavijesti su implementirane sa Firebaseom.
  • Višejezična podrška: kao glavni jezik podešen je Engleski jezik.  Kao druga opcija postoji Vijetnamski jezik, ali možete također dodati i vlastiti jezik.
  • Sigurno plaćanje: uplate se vrše putem PayPal servisa.

Ako još nemate Envato račun, možete se registrirati ovdje.  Nakon toga, prijavite se u svoj novi račun. Zatim se vratite nazad na BeoStore stranicu i kliknite Buy Now gumb.

Podešavanje Projekta

Nakon što ste kupili predložak, dobiti ćete link za preuzimanje arhivirane datoteke predloška. Otpakirajte ga i dobiti ćete CodeCanyon mapu koja sadrži MStore 2.2.

MStore 2.2 je direktorij za projektni predložak.  Nastavite i otvorite novi terminalni prozor unutar tog direktorija i izvršite sljedeću naredbu:

To će instalirati sve zavisnosti. To može potrajati neko vrijeme, ovisno o brzini preuzimanja, jer mora preuzeti mnogo ovisnosti. Pogledajte package.json ako želite vidjeti pakete koje je potrebno preuzeti. 

Nakon što to učinite, postoji dodatan korak ako želite graditi za iOS uređaje. Idite na mapu iOS i izvršite sljedeće:

Zatim, za Anroid, spojite svoj mobilni uređaj na računalo i izvršite:

To će ispisati sve Android uređaje spojene na vaše računalo. Ako je ovo prvi puta da instalirate uređaj, trebao bi se pojaviti upit želite li dozvoliti računalu USB debugging. Samo dodirnite "yes" nakon što dobijete taj upit. 

Sada možete pokrenuti aplikaciju na Android uređaju:

Za iOS:

Ako se nisu pojavile nikakve greške, trebali biste vidjeti sljedeću stranicu:

MStore Template Home page

Evo nekoliko screenshotova kako biste imali uvid u različite stranice koje su dostupne u ovom predlošku:

MStore Template Cart
MStore Template Checkout
MStore Template Login
MStore Template Product Page

Problemi Kod Podešavanja Projekta

U ovom dijelu sam sastavio popis najčešćih grešaka koje se pojavljuju kod podešavanja projekta i njihova rješenja.

Nije se Pokrenuo Razvojni Poslužitelj:

Ako se razvojni poslužitelj nije automatski pokrenuo kada ste izvršili react-native run-android ili react-native run-ios, možete ga ručno pokrenuti izvršavajući:

Watch se Predugo Učitavao

Ako vam se pojavi greška slična sljedećem:

To je zbog toga što već postoji Watchman instanca koja je pokrenuta. To je komponenta React Native razvojnog poslužitelja. Ovu grešku možete riješiti i isključiti Watchman izvršavajući sljedeće naredbe:

Nemogućnost Pokretanja ADB Reverse

Ako se pojavljuje sljedeća greška:

To znači da Android uređaj ima verziju straiju od 5.0 (Lollipop). Ovo zapravo i nije greška. Jednostavno znači da vaš Android uređaj ne podržava adb reverse, koji se koristi za spajanje razvojong poslužitelja s vašim uređajem putem USB debugginga. Ako je to nedostupno, React Native se vraća nazad debugging koristeći Wi-Fi. Više informacija o tome možete pronaći ovdje: Pokretanje na Uređaju.

Nešto drugo moglo bi također uzrokovati pad. Mođete skrolati sve do terminala da vidite jesu li se već prije toga desile kakve greške.

Nemogućnost Pronalska Varijable _fbBatchedBridge

Ako vam se pojavljuje sljedeća greška i razvojni poslužitelj je pokrenut u Wi-Fi načinu, to znači da niste podesili IP svojeg računala na Android uređaju. (Ovo se obično dešava samo s Android uređajima koji imaju verziju straiju od 5.0).

Možete izvršiti sljedeće da prikažete React Native razvojne mogućnosti na svojem uređaju:

Odaberite Dev Settings na izborniku koji će se pojaviti. Pod Debugging, dodirnite Debug server host & port of device. Unesite interni IP dodijeljen od strane vašeg kućnog rutera zajedno s portom u kojem je pokrenut razvoni poslužitelj i pritisnite OK:

Vratite se nazad na početni ekran aplikacije i opet izvršite adb shell input keyevent 82. Ovaj puta odaberite Reload da ponovno učitate aplikaciju.

Nemogućnost Pronalaska Firebase, App Compat ili GMS Play Usluga

Ako vam se pojavljuju "could not find" greške, to znači da niste instalirali odgovrajući paket koristeći Android SDK Manager.

Ovo su paketi koji moraju biti instalirani:

  • Android Support Repository
  • Android Support Library
  • Google Play Services
  • Google Repository

Pobrinite se da svakako ažurirate postojeće pakete ukoliko je ažuriranje dostupno.

Ostali Problemi

Ako vaš problem nije naveden iznad, možete pokušati sljedeće:

  • Provjerite dokumentaciju za rješavanje problema.
  • Pogledajte komentare o predlošku.  Možete potražiti pogrešku koja vam se pojavljuje. Ipak, pokušajte generalizirati i skratiti poruku o grešci - nemojte samo pretraživati cijelu poruku greške. Ako ne možete pronaći grešku, možete pokušati postaviti svoje pitanje u komentarima. Tim za podršku najčešće odgovara vrlo brzo.
  • Pokušajte potražiti grešku na Googleu. Čak i ako rezultat koji pronađete ne uključuje upotrebu predloška, dati će vam ideju o tome kako riješiti problem.
  • Pretražite StackOverflow ili postavite novo pitanje.  Svakako uključite sve potrebne detalje (npr. poruku greške, korake koje ste već poduzeli). Postoji dobar članak o tome kako postaviti pitanje na StackOverflowu.

Prilagođavanje Predloška

Dobro mjesto da počnete učiti kako nešto učiniti u predlošku je njegova dokumentacija:

  • Project Layout: pokazuje gdje da potražite različite datoteke u predlošku i za što se koriste.
  • Migrate WooCommerce: pokazuje kako možete spojiti postojeću WooCommerce web stranicu na aplikaciju. Spajanje aplikacije na vaš WooCommerce znači da će moći dohvatiti sve kategorije artikla i artikle u vašoj WooCommerce trgovini.
  • Migrate Services: pokazuje kako konfigurirati ime aplikacije, Firebase (za proslijeđene obavijesti) i prijavu putem društvenih medija.
  • Customize: pokazuje kako prilagoditi jezik i teme.

Svakako ih pogledajte! Neću ponavljati što je objašnjeno u dokumentaciji. Umjesto toga, u ovom dijelu ćemo zaista prilagoditi predložak tako da izgeda onako kako želimo.

Većina postavki za konfiguraciju projekta pohranjena je u app/Constants.js datoteci. Ovdje imamo nekoliko primjera onoga što možemo promjeniti iz ove datoteke:

Woocomerce Integracija: URL WooCommerce trgovine koju koristi aplikacija. Po zadanoj postavci, koristi mstore.io.

Prijave Putem Društvenih Medija: Ovo je implementirano koristeći Auth0, autentifikacijsku platformu.  Po zadanim postavkama, predložak samo podržava Google i Facebook prijave. Ali trebali biste imati mogućnost dodavanja bilo koje usluge koju Auth0 podržava.

Ikone: Možete koristiti bilo koju ikonu s Fontawesome, ali biste na imenu trebali upotrijebiti prefiks ios-.

Tema: Boje za različite komponente koje čine svaku stranicu također se mogu ažurirati. Na primjer, želite li promijeniti boju pozadine zaglavlja, možete ažurirati vrijednost za TopBar:

Slike: Splash screen i druge slike također se mogu ažurirati odrežujući novu putanju za svaki od sljedećeg:

Ove slike su pohranjene u app/images direktoriju, možete ih jednostavno zamijeniti ako ne želite zadržati stare slike.

  • Također, u ovoj datoteci možete promijeniti PayPal opcije. Svakako kreirajte vlastiti PayPal Developer Account da dobijete clientID i secretKey.  Ne zaboravite ažurirati sandBoxMode u false kada implementirate aplikaciju u produkciju, jer prema zadanim postavkama sandbox način kako se na transakcijama ne bi trošio stvarni novac.
  • Za prilagođavanje individualnih stranica, morate ići na app/containers direktorij. Ovdje ćete pronaći datoteke za svaku stranicu. Na primjer, ako želite prilagoditi početnu stranicu, idite na home mapu i otvorite index.js datoteku. Kada je otvorite, vidjeti ćete stranica koristi <ImageCard> komponentu da renderira svaku kategoriju proizvoda. Stoga, ako želite dodati osnovni stil za <imageCard> komponentu, morate ažurirati app/Components/ImageCrad/index.js datoteku. U suprotnom, možete samo ažurirati stilove unutar same stranice:

Zaključak

Ovaj tutorial ni u kom slučaju nije vodič za upotrebu BeoStore predloška. Ali pokrili smo prilično mnogo toga, naročito probleme kod podešavanja, koji nedostaju u službenoj dokumentaciji.

Sljedeći korak je spajanje ovog predloška s vašom WooCommerce web stranicom ili čak njezona prenamjena kako biste je mogli koristiti za druge vrste aplikacija.

Preuzmite predložak sada, ili, ako želite naučiti više o njemu, možete pogledati dokumentaciju ovdje. Također možete pronaći mnoge druge React Native app predloške na CodeCanyonu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.