Crowdbotics Dating App Blueprint este o aplicatie de creare a meciurilor construita in stilul Tinder sau Bumble. Utilizatorii pot crea profiluri, gasi potriviri, comunica in timp real si multe altele.
Crowdbotics Blueprints sunt aplicatii „incluse in baterii”: UI / UX, gazduire, securitate, actualizari, asistenta pentru dezvoltatori experti – tot ceea ce aveti nevoie pentru a lansa si creste aplicatia de la inceput. Modelele crowdbotics contin fiecare un set fix de caracteristici „minime viabile” care pot fi utilizate ca un tramp pentru o dezvoltare ulterioara. Modelele sunt disponibile pentru achizitie in combinatie cu un abonament Crowdbotics.
Crowdbotics este o platforma completa de construire de aplicatii care permite oricui are o idee sa treaca de la „zero la unu” (idee la MVP) mai repede ca niciodata. Cu produsul dvs. viabil minim implementat, puteti apoi sa reglati, sa iterati, sa testati si sa faceti scara la milioane de utilizatori – nu este nevoie sa comutati platformele pe masura ce cresti.
Majoritatea utilizatorilor Crowdbotics aleg sa implementeze planuri cu ajutorul dezvoltatorilor experti. Cand achizitionati un model Crowdbotics, o aplicatie de coordonate Crowdbotics PM a fost creata cu ajutorul unui dezvoltator expert. Cu toate acestea, unii utilizatori Crowdbotics aleg inca sa configureze planuri de unul singur. La fel ca in cazul tuturor aplicatiilor Crowdbotics, aveti acces direct la codul de baza care alimenteaza aplicatia dvs. full-stack.
Urmatoarea etapa arata utilizatorilor tehnici cum sa configureze sa implementeze aplicatia Crowdbotics Dating App Blueprint de la sol.
cerinte
- Node.js (> = 8.xx) cu npm / fire instalate.
- expo-cli (> = 3.0.4), cunoscuta anterior drept app create-react-native-native.
- Contul platformei Crowdbotics Builder App (de preferinta conectati-va cu ID-ul dvs. Github valid)
- Cont Firebase si Firestore
Dating App Blueprint T echnology Stack: Redux, NativeBase, React Navigation, CRNA, Expo, iOS si Android
Configurati aplicatia dvs. de intalnire personalizata pe GitHub
Dupa ce ati achizitionat aplicatia personalizata pentru programul de intalnire, conectati-va la contul dvs. Crowdbotics Conectati contul dvs. Crowdbotics la GitHub daca nu ati facut-o deja.
Faceti clic pe programul pentru aplicatii de intalnire din tabloul de bord Crowdbotics. In pagina Detalii despre aplicatia Dating App Blueprint, faceti clic pe butonul GitHub si veti fi directionat catre depozitul dvs. de aplicatii.
Structura depozitului va arata astfel:
Echipa de dezvoltare a Crowdbotics mentine si gestioneaza in mod activ planurile pentru a le mentine prietenoase si cu dependente actualizate. Va puteti conecta cu echipa de dezvoltare a echipei Crowdbotics si puteti pune intrebari specifice aplicatiei Dating App Blueprint la discuss.crowdbotics.com.
Aplicatia de datare personalizata se bazeaza pe cele mai recente versiuni React Native si Expo.
Unele dintre caracteristicile si functionalitatile comune pe care le veti gasi in acest model sunt:
- Autentificare
- Favorit, Like, Dislike
- Glisati UX
- Cautare
- Chibrituri
- conversatie
- Profil cu fotografii
- Setari
- Bio
- Si altele
Blueprint este livrat si cu o API-ul backend scris in Django, care poate fi utilizat in versiunile web ale aplicatiei. Iata un grafic care arata cum arata in browserul web.
Pentru a continua procesul de configurare a acestei aplicatii in mediul de dezvoltare locala, asigurati-va ca ati instalat cea mai recenta editie de expo-cli.
Dupa aceea, deschideti o fereastra de terminal si navigati in directorul de proiect pe care tocmai l-ati clonat. Executati urmatoarea comanda pentru instalarea dependentelor. Puteti alege fie manager de pachete, fire sau npm.
# navigati in directorul de proiectare a aplicatiei de datare CD # instalarea dependentelor fire add
Dupa instalarea tuturor dependentelor, puteti arunca o privire asupra fisierului package.json pentru a afla lista completa a modulelor care sunt utilizate in acest sablon.
“dependencies”: {“axios”: “^ 0.19.0”, “babel-preset-expo”: “5.0.0”, “color”: “3.1.0”, “expo”: “^ 33.0.0” , “firebase”: “^ 6.2.2”, “jest-cli”: “23.5.0”, “lodash”: “4.17.11”, “moment”: “2.22.2”, “baza nativa”: “2.8.1”, “reactioneaza”: “16.8.3”, “reactioneaza-nativ”: “https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz”, “react-native-camera-roll-picker”: “1.2.3”, “react-native-gifted-chat”: “0.5.0”, “react-native-multi-slider”: “0.3.6”, “react-native-scrollable-tab-view”: “0.10.0”, “react-native-swiper”: “1.5.14”, “react-navigation “:” 2.17.0 “,” react-redux “:” 5.1.1 “,” redux “:” 4.0.1 “,” forma redux “:” 7.4.2 “,” redux-persist ” : “5.10.0”, “redux-promit”: “^ 0.6.0”, “redux-thunk”: “2.3.0”, “remote-redux-devtools”: “0.5.13”, “remote-redux -devtools-on-debugger “:” ^ 0.8.0 “,” superagent “:” ^ 5.1.0 “,” whatwg-fetch “:” 2.0.4 “}13 “,” remote-redux-devtools-on-debugger “:” ^ 0.8.0 “,” superagent “:” ^ 5.1.0 “,” whatwg-fetch “:” 2.0.4 “}13 “,” remote-redux-devtools-on-debugger “:” ^ 0.8.0 “,” superagent “:” ^ 5.1.0 “,” whatwg-fetch “:” 2.0.4 “}
Din fragmentul de mai sus, veti observa ca acest sablon personalizat utilizeaza Redux pentru a gestiona starea aplicatiei. Cand vine vorba de aplicatii mai mari in React sau React Native, poate fi complicat sa urmariti ce componenta actioneaza ca furnizor de nivel de nivel superior si care componenta este scrisa doar pentru utilizare prezentativa. Modelul Dating asigura integrarea Redux ca biblioteca de management de stat cu actiuni si reduceri predefinite.
Pentru a va ajuta sa creati sau sa modificati componentele UI de prezentare existente, sablonul de aplicatie de intalnire utilizeaza Native-base. Din nou, Native-base este bine intretinuta si una dintre cele mai populare biblioteci care ofera un set urias de componente predefinite pentru a construi o interfata de utilizare incrucisata si placuta pentru aplicatiile mobile care folosesc React Native. Vom arunca o privire asupra unora dintre ele mai tarziu.
Rularea aplicatiei de intalniri personalizate
Deocamdata, sa rulam si sa vedem cum functioneaza aceasta aplicatie in modul implicit. Rulati urmatoarea comanda din fereastra terminalului si asigurati-va ca aveti un simulator sau dispozitiv cu clientul Expo instalat conectat pentru a vedea aceasta demonstratie.
firul incepe
Urmati instructiunile de pe interfata liniei de comanda expo cu privire la care sunt urmatorii pasi pentru a deschide aceasta aplicatie pe un simulator sau pe un dispozitiv real folosind un client Expo. La rularea aplicatiei, veti fi intampinat de un ecran splash pana cand toate activele sunt incarcate.
Apoi trece la primul set de ecrane care ofera o experienta la bord impreuna cu un buton de conectare Facebook.
Daca utilizati aplicatia pentru prima data, aplicatia solicita permisiunea de a accesa un cont Facebook folosind un mesaj de caseta de alerta.
Odata conectat cu succes, utilizatorul aplicatiei va fi primit de Ecranul de pornire cu un navigator cu file in partea de jos. Pentru a edita modul in care un utilizator se conecteaza la aplicatia dvs., adaugati un alt furnizor social sau modificati ecranele de bord, puteti vizita intotdeauna fisierul care contine logica de afaceri din spatele lor la src / screens / Login.
Activati Facebook Auth si adaugati Firebase Config
Pentru a va asigura ca utilizatorul se conecteaza cu succes, va trebui mai intai sa activati serviciul Firebase. Pentru a va inscrie sau a va conecta la unul, vizitati console.firebase.com. Dupa ce ati luat cunostinta de conectare, veti fi intampinat de un ecran de mai jos.
Faceti clic pe butonul Adaugati proiect. Aceasta duce la un alt ecran care contine un formular care trebuie indeplinit pentru a crea un nou proiect Firebase.
Completati numele proiectului, bifati ambele casete deocamdata si faceti clic pe butonul Creare proiect. Acest lucru va dura cateva momente. Odata ce proiectul Firebase este creat, veti fi intampinat de ecranul de start ca mai jos.
Aruncati o privire la bara de meniu din stanga. Aceasta este principala navigatie in orice proiect Firebase. Pentru a conecta Firebase cu aplicatia React Native, aveti nevoie de cheia API si stocati in aplicatia din partea clientului din interiorul fisierului src / constants / database.js. Toata configuratia pentru a activa si rula instanta aplicatiei dvs. Firebase este deja scrisa, asa cum se arata mai jos. Nu trebuie decat sa schimbi valorile obiectului de configurare. Trebuie sa adaugati al tau pentru ca acesta sa functioneze.
import firebase de la „firebase” import „@ firebase / firestore” import {Constants} din „expo” // Initializati Firebase var config = {apiKey: ‘XXXX’, authDomain: ‘XXXX’, databaseURL: ‘XXXX’, projectId: ‘ XXXX ‘, storageBucket:’ XXXX ‘, messagingSenderId:’ XXXX ‘, appId:’ XXXX ‘} firebase.initializeApp (config) const store = firebase.firestore () const auth = firebase.auth () export {store, auth, firebase }
Faceti clic pe setarile ⚙️ din meniul barei laterale si mergeti la Setari proiect. Acolo veti vedea in sectiunea Aplicatii dvs. toate platformele disponibile, cum ar fi iOS si web. Faceti clic pe Web asa cum se arata mai jos. In continuare, copiati doar variabila de configurare intr-un fisier nou numit database.js asa cum se arata mai sus.
Din fragmentul de mai sus, puteti observa ca initializarea Firebase SDK in aplicatia expo s-a facut deja folosind modulul npm firebase.
Firebase foloseste, de asemenea, stocarea in cloud Firestore pentru a stoca datele de autentificare si detaliile utilizatorului atunci cand utilizatorul se conecteaza la intalnirea pentru prima data. In sectiunea Baza de date din bara laterala, alegeti Firestore-ul din cloud si mergi la a doua fila numita Reguli. Daca activati Firestore pentru prima data, este posibil sa fiti necesar sa setati regulile de securitate a bazei de date in modul de testare. Aici SDK-ul pentru firebase va permite oricui (unul care are acces la tastele de configurare) sa citeasca si sa scrie in baza de date. Acestea fiind spuse, aceasta sectiune ar trebui sa arate ca mai jos.
service cloud.firestore {match / bases de date / {database} / documents {match / {document = **} {permite citirea, scrierea; }}}
Din nou, configuratia pentru a utiliza instanta Firestore in codul sursa al aplicatiei noastre este deja scrisa.
Pentru a utiliza conectarea pe Facebook, va trebui sa creati o aplicatie si sa generati o aplicatie folosind https://developers.facebook.com/apps/. Aceasta informatie trebuie adaugata la doua fisiere: unul este app.json si altul este src / constants / config.js.
export default {facebook: {appId: ‘XXXX’}}
Puteti gasi fisierele secrete ale aplicatiei si ale aplicatiei in Setari> Sectiune de baza din bara laterala.
In sfarsit, vi se cere sa activati aceste jetoane in consola Firebase si sa activati metoda de conectare Facebook, dupa cum se arata mai jos.
Acum, daca incercati sa va conectati la aplicatie ca utilizator nou, detaliile utilizatorului vor fi reflectate in consola bazei de foc.
Folosind acelasi utilizator UID este asa cum se arata in imaginea de mai sus, puteti gasi detalii complete despre utilizator in interiorul utilizatorilor de colectare a bazelor de date Firestore. UID-ul utilizatorului este utilizat ca identificator pentru fiecare document individual care contine campuri de date, asa cum se arata mai jos.
Navigare prin file
Dupa ce utilizatorul este conectat, este primit de ecranul initial redat printr-o componenta personalizata numita PhotoCard.
Aplicatia de intalnire foloseste componenta de navigare a filei care este creata cu ajutorul bibliotecii de navigare cu reactie. Aceasta navigare in fila de jos este realizata din trei ecrane, PhotoCard, care este ruta initiala a aplicatiei, ecranul Profil si ecranul Chat. Iata fragmentul de creare a navigatiei cu file cu biblioteca de navigare.
const HomeTabNavigation = createBottomTabNavigator ({Profil: {ecran: Profil}, PhotoCard: {ecran: PhotoCard}, Chat: {ecran: ChatList}}, {initialRouteName: ‘PhotoCard’, lenes: adevarat, // restul codului}
Obiectul de configurare al HomeTabNavigation descrie doua proprietati. Primul, intialRouteName indica ce ruta sau ecranul care trebuie redat mai intai la incarcarea aplicatiei. A doua proprietate descrisa aici este lenesa. Acest lucru este adesea definit in cazul in care doriti sa incarcati fila speciala doar atunci cand acestea sunt active pentru prima data.
Puteti gasi codul complet pentru a modifica sau adauga mai multe file la aplicatia dvs. in src / screens / Home / tabNavigation.js. fisier. De exemplu, ce se intampla daca doriti sa schimbati culoarea navigatorului de pe fila de jos de la culoarea alba curenta la cea gri?
TabBarComponent este o alta proprietate de configurare care inlocuieste aspectul si aspectul implicit al unui navigator cu file care vine cu biblioteca de navigare cu reactie. In prezent, aplicatia de intalnire personalizata foloseste una pentru a crea un navigator cu fila de jos cu elemente externe din nativ-baza si pictograme personalizate.
tabBarComponent: props => {return (<Header> <FooterTab> <Button onPress = {() => props.navigation.navigate (‘Profile’)}> <Name icon = “md-person” size = {20} style = {props.navigation.state.index === 0? styles.activeIcon: styles.inActiveIcon} /> </Button> <Button onPress = {() => props.navigation.
scooby doo porno http://hitsongs.com/__media__/js/netsoltrademark.php?d=adult69.ro/
litle girls porno http://nirvanam.com/__media__/js/netsoltrademark.php?d=adult69.ro/
filmre porno http://rozmarin-club.com/go.php?adult69.ro/
filme rominesti porno http://ultraresource.net/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/amatori
alat porno http://johnfcampbell.com/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/anal
filme porno cu obeze http://termappraisal.biz/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/asiatice
xxx porno incest http://intervalpurchasing.com/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/beeg
szexi porno gifek http://a1z.rmpenn.com/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/blonde
porno janet mason http://mercuryinsurancesucks.biz/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/brazzers
cougar porno http://thedead.net/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/brunete
filme porno cu bataie http://utnecast.net/__media__/js/netsoltrademark.php?d=adult69.ro/filme-porno/chaturbate
porno in romaneste https://lugansktoday.net/go.php?adult69.ro/picioarele-surioarei-sunt-in-aer-ca-sa-intre-pula-bine
porno xxxxxx http://justchairsandtables.com/__media__/js/netsoltrademark.php?d=adult69.ro/liceanca-stie-cum-sa-i-faca-pofta-pulei-prin-telefon
pula porno http://fnbhuntsvilletx.net/__media__/js/netsoltrademark.php?d=adult69.ro/doctorul-ii-baga-pula-in-pizda-fara-s-o-mai-scoata
porno cu hermafroditi http://www.walnutinsurance.biz/__media__/js/netsoltrademark.php?d=adult69.ro/gemetele-tarfei-umezesc-pizdele-vecinelor
flme porno romanesti http://elitetransportinc.com/__media__/js/netsoltrademark.php?d=adult69.ro/mama-si-fiul-isi-fac-de-cap-in-uscatorie
porno italia 2018 http://gixawchat.com/__media__/js/netsoltrademark.php?d=adult69.ro/isi-aduce-prietenii-sa-si-futa-prietena-pentru-razbunare
viol filme porno http://lawyerescrow.net/__media__/js/netsoltrademark.php?d=adult69.ro/fute-ma-pe-masa-chiar-acum
porno car http://tutorialcadet.com/__media__/js/netsoltrademark.php?d=adult69.ro/pizda-matura-este-gustata-de-o-adolescenta-amatoare
yang porno http://vbi.insideucs.com/__media__/js/netsoltrademark.php?d=adult69.ro/si-legata-la-ochi-stie-unde-i-pula
navigate (‘PhotoCard’)}> < Miniatura sursa mica = {props.navigation.state.index === 1? Necesita (‘../../../ active / logo.png’): necesita (‘../../../ active /logo1.png ‘)} /> </Button> <Button onPress = {() => props.navigation.navigate (‘ Chat ‘)}> <Icon name = “md-chatboxes” style = {props.navigation. state.index === 2? styles.activeIcon: styles.inActiveIcon} /> </Button> </FooterTab> </Header>)}
Acum, inapoi la intrebarea initiala, cum sa schimbati culoarea navigatorului cu file actual? Modificati urmatoarea linie, furnizand o valoare de stil inline elementului de baza nativ FooterTab.
<FooterTab style = {{backgroundColor: ‘gray’}}>
Veti obtine urmatorul rezultat.
Pentru mai multe informatii despre modul de configurare a unui navigator cu file, va recomandam sa parcurgeti documentatia oficiala a bibliotecii de navigare cu reactie aici.
Ecran de profil
Urmatorul ecran disponibil cu sablonul este ecranul Profil. In mod implicit, acest ecran are doua actiuni care se pot face clic pe care va vor naviga in continuare catre ecrane diferite. In primul rand, aruncati o privire la modul in care este afisat pe dispozitiv.
Dupa cum puteti vedea din imaginea de mai sus, acesta afiseaza un marcator pentru imaginea avatarului utilizatorului si dedesubt acel loc de afisare afiseaza numele de utilizator. Alaturi de numele de utilizator este valoarea de 0. Aceasta valoare este varsta utilizatorului afisat implicit. De asemenea, exista o coloana de setari referitoare la setarile din aplicatie. Daca faceti clic pe miniatura utilizatorului, aceasta va deschide pagina de profil care contine detalii despre profilul utilizatorului.
Pentru a edita profilul utilizatorului, puteti adauga o imagine de profil si cateva detalii despre utilizator. Uita-te la ecranul de mai jos.
Nu uitati salvarea oricaror detalii introduse aici ca utilizator. Din nou, aplicatia foloseste Firebase Firestore pentru a stoca imaginea, precum si detaliile profilului utilizatorului aplicatiei. Aceasta actualizeaza acelasi document de utilizator din Firestore pe care am aruncat o privire in sectiunea anterioara. Daca faceti clic pe butonul de salvare, apare un mesaj de alerta si, revenind la ecranul Profil, veti observa ca avatarul utilizatorului este afisat in loc de imaginea de la locator si varsta corecta a utilizatorului.
Iata cum arata un obiect de utilizator individual in baza de date Firestore.
Ecran Setari
Urmatorul ecran este despre setarile disponibile in aplicatie. In mod implicit, acest model ofera urmatorul ecran cu setari. Utilizeaza elemente de baza native pentru a crea butoane de comutare si elemente de gama pe care le uitati la ecranul de mai jos.
Din nou, toate setarile modificate sunt salvate in acelasi document de utilizator din Firestore. Pastrarea tuturor datelor referitoare la un utilizator individual in interiorul unui document este benefic de gestionat si de scara.
Componenta de setari vine cu o serie de setari care sunt scrise in fisierul src / screens / Settings / index.js. De exemplu, daca decideti sa adaugati asistenta de notificari la aplicatia pe care o construiti folosind acest sablon, trebuie doar sa accesati locatia fisierului componenta Setari si puteti dezcomanda urmatorul cod.
<Card style = {{borderRadius: 5}}> <CardItem style = {{borderRadius: 5}}> <Text style = {styles.redText}> Notificari </Text> </CardItem> <CardItem> <Left> < Text style = {styles.cardItemText}> Noile potriviri </Text> </Left> <Right> <Comutati onValueChange = {value => this.setState ({notSwitch1: value})} onTintColor = {commonColor.brandPrimary} thumbTintColor = {Platform.OS === ‘Android’? ‘#ededed’: undefined} value = {this.state.notSwitch1} /> </Right> </CardItem> <CardItem> <Left> <Text style = {styles.cardItemText}> Messages </Text> </ Left > <Right> <Switch onValueChange = {value => this.setState ({notSwitch2: value})} onTintColor = {commonColor.brandPrimary} thumbTintColor = {Platform.OS === ‘android’? ‘#Ededed’ : undefined} value = {this.state.notSwitch2} /> </Right> </CardItem> <CardItem> <Left> <Text style = {styles.cardItemText}> Like-uri </Text> </Left> <Right > <Switch onValueChange = {value => this.setState ({notSwitch3: value})} onTintColor = {commonColor.brandPrimary} thumbTintColor = {Platform.OS === ‘android’? ‘#ededed’: undefined} value = {this.state.notSwitch3} /> </Right> </CardItem> <CardItem> <Left> <Text style = {styles.cardItemText}> Super Like-uri </Text> <// Stanga> <Right> <Comuta onValueChange = {value => this.setState ({notSwitch4: value})} onTintColor = {commonColor.brandPrimary} thumbTintColor = {Platform.OS === ‘android’? ‘#ededed’: undefined} value = {this.state.notSwitch4} /> </Right> <
Aceasta va produce urmatorul rezultat pe ecranul Setari.
Concluzie
Chiar si cu configurarea personalizata, utilizarea unui model ca acesta are beneficiile sale. Economiseste mult timp si efort pentru a scrie componente de la zero, mai degraba decat pentru a le modifica pe cele incorporate. Sabloane de acest fel sunt construite cu module utilizate in mod obisnuit, cum ar fi re-navigare, redux, baza nativa si asa mai departe, economisesc o gramada de timp cand creezi o aplicatie pentru propria ta afacere.
In planul Crowdbotics Advanced, pasii de mai sus sunt ingrijiti pentru dumneavoastra.
Puteti gasi aplicatia completa Dating App Blueprint aici.
