Începeți să construiți blogul dvs. cu Parse.js Migrarea la propriul server de parse

Ce veți crea

Din păcate, Parse.com se închide la 28 ianuarie 2017. În seria anterioară, te-am urmărit prin toată călătoria de a construi un sistem blog de la zero. Dar totul sa bazat pe Parse.com, și dacă utilizați în continuare acele tehnici, site-ul dvs. va înceta, din păcate, până atunci.

Dacă tot mai doriți Parse.js (așa cum am și eu) și doriți să continuați să o utilizați, există vesti bune. Oamenii minunați de acolo au făcut-o open source pentru a putea rula propria noastră copie pe toate serviciile de găzduire web populare. Acest tutorial vizează să vă ajute să faceți această schimbare și să migrați de la Parse.com la propriul server parse pe Heroku.

Nu sunt un expert în spate, dar acesta este cel mai simplu mod pe care l-am găsit că a funcționat. Dacă vedeți vreun defect și aveți metode mai bune de partajat, lăsați cu siguranță un comentariu de mai jos.

Dacă urmați acest episod, migrarea serverului de la sine nu va fi prea complicată. Cu Docker, este chiar ușor de configurat un tablou de bord Parse local, astfel încât să puteți vedea în continuare și să vă jucați cu datele dvs. cu ușurință.

Cu toate acestea, această serie de tutorial a fost făcută pe baza versiunii 1.2.19 a Parse.js; pentru a vă conecta la un server autonom Parse, trebuie să actualizăm aplicația pentru a rula versiunea 1.9.2. Prin versiunea 1.5.0, Parse a scos sprijinul pentru Backbone, ceea ce înseamnă că avem nevoie de câteva modificări majore în cod. Vom adăuga Backbone înapoi la pagină și folosind un amestec de Parse și Backbone acolo.

Acesta este un intro lung, dar nu fi prea speriat. S-ar putea să aveți nevoie să depanați aici și în timpul migrației, dar ar trebui să fiți bine. Puteți să verificați întotdeauna codul sursă sau să lăsați un comentariu de mai jos - eu și această comunitate fantastică aici va încerca tot posibilul pentru a vă ajuta.

Configurați și migrați la serverul de parse

Mai întâi, mai întâi, să începem să realizăm un server Parse. Parse a făcut deja acest lucru foarte ușor, cu un ghid detaliat de migrare și o listă lungă de aplicații eșantion pe toate platformele populare precum Heroku, AWS și Azure.

Te voi trece prin cea mai usoara pe care o cunosc: combo-ul cu lapte Heroku +. Este gratuit pentru început, și puteți plăti întotdeauna pentru hardware mai bun și mai mult spațiu de stocare în același sistem. Singurul avertisment este că versiunea gratuită a lui Heroku ar "dormi" după ce a fost inactiv timp de 30 de minute. Deci, dacă utilizatorii vizitează site-ul când serverul "dorm", este posibil să fie nevoiți să aștepte câteva secunde pentru ca serverul să se trezească înainte de a putea vedea datele. (Dacă verificați pagina demo pentru acest proiect și nu face nici un conținut de blog, de aceea. Dați-i un minut și reîmprospătați.)

Această parte se bazează în mare parte pe ghidul lui Heroku pentru implementarea unui server de parse și pe ghidul de migrare al lui Parse. Tocmai am ales calea cea mai simplă, cea mai ușoară acolo.

Pasul 1: Înscrieți-vă și creați o aplicație nouă pe Heroku

Dacă nu aveți încă un cont de Heroku, continuați și faceți una. Este o platformă foarte populară pentru dezvoltarea și găzduirea de aplicații web mici.

După ce vă înregistrați, accesați tabloul de bord Heroku și creați o aplicație nouă - care va fi serverul dvs..

Dați-i un nume dacă doriți:

Pasul 2: Adăugați MangoDB din mlab

Acum aveți nevoie de o bază de date pentru stocarea datelor. Și să adăugăm mLab ca un add-on.

Mergi la Resurse> Add-on-uri, căutați "mLab" și adăugați-l:

Sandbox-ul este suficient pentru dezvoltare - puteți oricând să faceți upgrade și să plătiți mai mult pentru a obține mai mult spațiu de stocare acolo.

Odată ce ați adăugat mLab, puteți să-l luați pe URI-ul MongoDB al acestuia.

Mergi la Setări> Configurați variabilele în tabloul de bord Heroku și faceți clic pe Dezvălui Config Vars.

Acolo puteți vedea URI-ul MongoDB pentru baza de date. Copiați-l și acum putem începe migrarea bazei de date.

Pasul 3: Migrarea bazei de date

Accesați Parse.com și găsiți aplicația pe care doriți să o migrați. Versiunea open-source a serverului Parse suportă doar o aplicație per server, deci dacă doriți să aveți mai multe aplicații, trebuie să repetați acest proces și să creați mai multe servere. Acum alegeți unul.

În cadrul acelei aplicații, mergeți la Setări aplicație> General> Managementul aplicațiilor, și faceți clic pe Migra.

Apoi lipiți în URI-ul MongoDB pe care tocmai l-ați copiat și începeți migrarea.

În curând ar trebui să vedeți acest ecran:

Asta inseamna ca ar trebui sa ai toate datele in MongoDB. Destul de ușor, corect?

Dar nu finalizați aplicația dvs. încă - așteptați până când vom putea vedea și juca cu aceleași date din tabloul de bord Parse local, apoi vom reveni și vom finaliza.

Pasul 4: Implementați serverul de parse

Acum, cu baza de date deja migrat, putem implementa serverul Parse.

Dacă nu aveți încă un cont GitHub, continuați și faceți unul. Este probabil cel mai popular loc unde oamenii își împărtășesc și gestionează codul.

Cu ajutorul contului dvs. GitHub, introduceți exemplul repo oficial al serverului Parse Server.

Apoi, reveniți la tabloul de bord Heroku. Sub Deploy> Metoda de implementare, alege GitHub și conectați-vă la contul dvs. GitHub.

După aceea, căutați parse și găsiți-vă analiza-server exemplu repo și conectați-vă.

Dacă totul funcționează, ar trebui să vedeți că este conectat astfel:

Acum, derulați în jos în partea de jos a paginii. Sub Implementare manuală, clic Depuneți sucursala.

Veți vedea că serverul dvs. de parse este implementat și în curând veți vedea acest ecran:

Faceți clic pe Vedere și veți vedea această pagină:

Asta înseamnă că serverul dvs. este acum fericit! Iar adresa URL pe care o vedeți este adresa URL a serverului dvs. Veți avea nevoie mai târziu.

Știu că este ireală să vezi această linie simplă și să știi că serverul este în desfășurare. Dar crede-mă, puterea e acolo. Și aplicația dvs. poate citi și scrie deja de la ea.

Dacă doriți să verificați dublu, puteți rula astfel:

$ curl -X POST \ -H "X-Parse-Application-Id: myAppId" \ -H "Tip de conținut: aplicație / json" \ -d '' \ https://example.herokuapp.com/parse / funcții / salut ... "rezultat": "Hi"%

Configurați un tablou de bord Parse local

Dacă sunteți un ninja de linie de comandă, probabil că veți fi bine de aici. Dar dacă sunteți ca mine și vă bucurați de interfața prietenoasă a tabloului de bord Parse, urmați această parte pentru a vă configura propriul tablou de bord Parse pe mașina dvs. locală, astfel încât să puteți vizualiza vizual și să vă puteți juca cu datele dvs. Parse așa cum vă obișnuiți.

Din nou, puteți instala tabloul de bord într-o manieră foarte mică. Voiam să vă arăt cel mai simplu mod din experiența mea, folosind Docker.

Pasul 1: Instalați Docker

Dacă nu aveți Docker, instalați-l mai întâi (Mac | Windows).

Acesta pune un întreg mediu într-o cutie, deci nu trebuie să urmați tutorialul destul de complicat de instalare locală și să sarăți prin cercuri în Terminal.

Pasul 2: Construiți imaginea tabloului de bord Parse

Cu docker-ul dvs. care rulează, clonați repo Parse Dashboard repo pe computer și intrați în repo.

$ git clone https://github.com/ParsePlatform/parse-dashboard.git Clonarea în 'parse-dashboard' ... remote: Numără obiecte: 3355, terminat. la distanță: Total 3355 (delta 0), refolosit 0 (delta 0), ambalat reutilizat 3354 Obiecte primite: 100% (3355/3355), 2,75 MiB | 2.17 MiB / s, terminat. Rezolvarea deltas: 100% (1971/1971), terminat. $ cd parse-dashboard /

Pentru absolut absolut noul GitHub, descărcați-l doar ca fișier zip.

Dezarhivați-l și puneți-l într-o locație pe care o puteți aminti. Deschideți aplicația terminală dacă sunteți pe Mac, tastați CD  (aveți nevoie de un spațiu după cd acolo) și trageți dosarul în.

Apoi a lovit introduce.

Ar trebui să vezi ceva de genul ăsta, și asta înseamnă că ești în locul potrivit.

~ $ cd / Utilizatori / moyicat / temp / parse-dashboard-master ~ / temp / parse-dashboard-master $ 

Acum, puteți verifica rapid dacă Docker-ul dvs. este instalat corect prin adăugarea în această comandă:

docker -v

Dacă afișează versiunea pe care vă aflați, cum ar fi:

Docker versiunea 1.12.5, construi 7392c3b

Este instalat și puteți continua.

Dacă, în schimb, se spune:

-bash: docer: comanda nu a fost găsită

Trebuie să verificați dacă ați instalat corect Docker.

Cu Docker instalat corect, lipiți-l în această comandă și loviți-l introduce:

docker build -t parse-dashboard .

Acest lucru vă va crea o imagine locală (nu ezitați să ignorați jargonul docherilor) pentru Parse Dashboard.

Veți vedea multe linii derulante. Nu intră în panică - dă-i o vreme și vei vedea că se termină cu ceva de genul:

Construit cu succes eda023ee596d

Asta înseamnă că ați terminat - imaginea a fost construită cu succes.

Dacă rulați portocale imagini comanda, veți vedea acolo:

REPOSITORY TAG ID IMAGE CREATED SIZE parse-dashboard Ultimele eda023ee596d Despre un minut în urmă 778.1 MB

Pasul 3: Conectați tabloul de bord Parse la serverul de parse

Acum, aceasta este doar o imagine și încă nu este un server care rulează. Când rulează, vrem să fie conectat la serverul Parse și la MongoDB pe care tocmai l-am construit.

Pentru a face acest lucru, trebuie mai întâi să creați câteva chei în Heroku, astfel încât să poată spune cine să permită accesul la date.

Du-te la tabloul de bord Heroku și du-te la Setări > Configurați variabilele din nou. De data aceasta, trebuie să adăugăm două variabile: APP_ID și CHEIA PRINCIPALA. APP_ID poate fi ceva ușor de reținut, în timp ce CHEIA PRINCIPALA ar fi trebuit să fie o parolă foarte lungă și complicată.

Acum, cu aceste chei, putem scrie un simplu fișier de configurare în directorul rădăcină al dosarului Tabloul de bord Parse. Puteți folosi totul de la sevă la TextEdit sau Notepad-Scopul este de a face un text simplu config.json fișier cu acest conținut:

"apps": ["serverURL": "app-url / parse", "appId": "app-id-id", "masterKey" numele dvs. de aplicație "]," utilizatori ": [" user ":" utilizator "," pass ":" pass "]

Și bineînțeles, înlocuiți-vă dvs. de-app-url cu URL-ul de link "Vizualizare" (pagina care spune "Visez că sunt un site web"), dar păstrează /analiza acolo la sfârșit; a inlocui dvs.-app-id și dvs. de master-cheie cu variabilele config pe care tocmai le-ați adăugat; și dați aplicației dvs. un nume și înlocuiți-o dvs.-app-name Cu acesta.

Salvați fișierul și executați ls comandă în Terminal pentru a vă asigura că ați pus config.json în locul corect.

~ / temp / parse-dashboard-master $ ls CHANGELOG.md Dockerfile PIG / Procfile bin / package.json src / webpack / CONTRIBUTING.md LICENȚĂ Parse-Dashboard / README.md script-uri config.json /

Dacă vezi config.json în această listă, sunteți bine să mergeți mai departe.

Acum rulați PWD comanda pentru a obține locul în care vă aflați:

$ pwd / Utilizatori / moyicat / temp / parse-dashboard-master

Copiați acea cale.

Apoi lipiți în această comandă pentru a crea un container Docker (din nou, puteți ignora acest jargon) și executați Parse Dashboard. Nu uitați să vă înlocuiți calea cu calea pe care tocmai ați primit-o.

docker rulați -d \ -p 8080: 4040 \ -v /Users/moyicat/temp/parse-dashboard-master/config.json:/src/Parse-Dashboard/parse-dashboard-config.json \ -e PARSE_DASHBOARD_ALLOW_INSECURE_HTTP = 1 \ --name parse-dashboard \ parse-dashboard

De sus în jos, această comandă face aceste lucruri (pe care, de asemenea, le puteți ignora):

L1: Spuneți Docker pentru a porni un container L2: Faceți-l să ruleze pe portul 8080, îl puteți schimba la orice port doriți L3: Obțineți config.json pe care tocmai l-ați făcut folosind configurația L4: Activați HTTPS pe local ( altfel veți întâlni un mesaj de eroare) L5: Dați-i un nume pe care îl puteți aminti. Puteți să-l schimbați și la orice doriți. L6: Spuneți Docker imaginea pe care doriți să o utilizați. parser-dashboard este numele pe care l-am folosit mai devreme în comanda de creare a docker-ului.

În cazul în care totul trece prin, acesta va returna un șir lung pentru a vă fără nici un mesaj de eroare. Asa:

4599aab0363d64373524cfa199dc0013a74955c9e35c1a43f7c5176363a45e1e

Și acum, tabloul dvs. de bord Parse rulează! Verificați-l la adresa http: // localhost: 8080 /.

S-ar putea să fie lentă și să arate inițial o pagină goală, dar să-i dați doar câteva minute și veți vedea un ecran de conectare:

Acum te poți conecta utilizator ca nume de utilizator și trece ca parolă - este definită în config.json în cazul în care nu v-ați dat seama mai devreme. Le puteți schimba și la ceea ce doriți.

Și veți vedea această interfață familiară de la mașina dvs. locală și vă puteți juca cu datele dvs. (acum în MabloMb), așa cum faceți mereu.

Câteva note finale pe acest tablou de bord local:

În primul rând, puteți să opriți și să porniți acest container de acum încolo cu aceste două comenzi:

docker stop parse-bord tablou de bord de start parse-bord

Deci, când reporniți computerul, nu trebuie să urmați din nou pașii anteriori, ci să-i spuneți să înceapă din nou.

În al doilea rând, dacă aveți mai multe servere Parse, nu este nevoie să creați mai multe tablouri de bord Parse. Trebuie doar să adăugați mai multe aplicații în config.json asa:

"apps": [// informații pentru primul server "serverURL": "", "appId": "", "masterKey" serverURL ":" "," appId ":" "," masterKey ":" "," appName ":"

De fiecare dată când efectuați modificări config.json, trebuie să reporniți containerul Docker:

docker reporniți parser-bord

Și apoi veți vedea schimbările pe care le-ați făcut.

Pasul 4: Finalizați migrarea

Acum jucați cu noul dvs. Tablou de bord Parse și, dacă totul funcționează, puteți reveni acum la Parse.com și puteți finaliza migrarea.

Apoi, dacă vă verificați aplicațiile și tabloul de bord, veți descoperi că toate acestea vă îndreaptă cu magie către noul server fără probleme.

Actualizați codul pentru a rula pe paragraful 1.9.2

Asta e super! Aș vrea să rămână în acest fel și am putea termina acest tutorial devreme. Dar, după cum am menționat, vechea aplicație Parse.js se bazează încă pe serverele Parse.com pentru a-l îndrepta spre noul server corect. Și va înceta să lucreze după 28 ianuarie 2017.

Pentru al face să ruleze pentru totdeauna (cu degetul încrucișat), trebuie să oprim cheile JavaScript pentru a indica aplicația (care se bazează pe Parse.com pentru a afla ce bază de date să îndrepte) și direcționați direct către serverul nostru de parse.

Pasul 1: Actualizați librăriile JavaScript

Mai întâi, să actualizăm fișierul Parse.js pe care îl folosim index.html.

În loc de a utiliza versiunea 1.2.19:

Treceți la cea mai nouă versiune:

De asemenea, hai să adăugăm lodash și Backbone. Acum că Parse a încetat să susțină Backbone, trebuie să-l includem pentru a continua să folosim Vizualizările și Router-ul.

   

Pasul 2: Accesați serverul de parse

Apoi, să intrăm site.js.

Primul lucru pe care trebuie să îl actualizați Parse.initialize () astfel încât acesta să indice către propriul server de parse.

Anterior, acesta ar putea arăta astfel:

Parse.initialize ("HC87tn6aA7c3sYx9X0vwwLVXeqHDRMYYmrUBK5zv", "3piNGGnRMhvWo8u9pKD9TDc1MJlWhlvK78Vr3fHo");

Acum, îndreptați-o spre serverul dvs. de parse.

Parse.initialize ( "moyicat-analiza-blog-git"); // Numele aplicației dvs. Parse.serverURL = 'https://moyicat-parse-blog-git.herokuapp.com/parse'; // Adresa URL a serverului

Pasul 3: De la reacție la coloana vertebrală

Mergând mai departe, să facem o actualizare rapidă pentru a schimba toate Parse.View, Parse.Router, și Parse.history la Backbone.View, Backbone.Router, și Backbone.history. Acestea nu mai sunt susținute de Parse, așa că trebuie să avem o schimbare.

Nu este cel mai plăcut lucru din lume să se amestece și să se potrivească Clasă dar dacă doriți să faceți cele mai mici modificări ale codului dvs. și să îl rulați, acesta ar putea fi cel mai simplu mod.

Pasul 4: De la colecție la întrebare; Din aduce la găsi

Un alt lucru pe care la oprit sprijinul lui Parse este Colectie. Și este mult mai spinoasă decât celelalte trei. Trecerea de la Parse.Collection la Backbone.Collection nu va funcționa. Trebuie să rescriem logica utilizând interogările Parse.

Eu voi folosi Blog-uri colecție ca exemplu pentru a vă arăta cum putem actualiza blogul nostru pentru a lucra cu noul Parse.js.

Anterior, am definit mai întâi a Clasă pentru Blog-uri:

Blogs = Parse.Collection.extend (model: Blog, interogare: (Parse.Query (Blog)) descendent ('createdAt'));

Și apoi în BlogRouter.start () am creat o instanță a acelei clase pentru a conține colecția de blocuri.

this.blogs = Bloguri noi ();

După aceea, sunăm fetch () pe această colecție pentru a obține date despre bloguri. Ca și în BlogRouter.index ():

this.blogs.fetch (succes: function (blogs) ..., eroare: functie (bloguri, eroare) ...);

Acum, putem să ștergem declarația de clasă și să facem asta BlogRouter.blogs o interogare Parse:

this.blogs = Parse.Query nou (Blog) .descend ('createdAt');

Și când o numim, în loc de fetch () folosim găsi().

this.blogs.find (succes: function (blogs) ..., eroare: functie (bloguri, eroare) ...);

Această parte poate dura ceva timp, deoarece avem destul de puține cazuri diferite de utilizare în această serie. Este posibil să aveți nevoie să depanați puțin - în acest moment, chiar dacă datele se prelucrează corect, pagina nu se va afișa corect încă. Dacă preferați să vedeți lucrurile când le reparați, citiți-le până la sfârșit, apoi începeți să vă modificați codul și depanarea.

Pasul 5: Verificați obiectele de vizualizare

Când toate datele sunt preluate corect, următorul lucru pe care trebuie să-l verificați este datele pe care le transmiteți Vedere obiecte.

Anterior, am putea trece tot ceea ce ne-am dorit într-un obiect View. În acest exemplu, am trecut nume de utilizator direct în blogsAdminView astfel încât să putem saluta utilizatorii prin numele de utilizator.

var blogsAdminView = nou BlogsAdminView (username: currentUser.get ('username'), colecție: bloguri);

Acest lucru ar înceta, de asemenea, de lucru atunci când vom schimba Vedere care urmează să fie extins de la Backbone.View obiect. Nu putem intra decât model și Colectie acum.

Așa că trebuie să trecem la utilizator curent ca model:

var blogsAdminView = nou BlogsAdminView (model: currentUser, colecție: bloguri);

Și schimbați BlogsAdminView în consecinţă.

Din nou, este posibil să trebuiască să testați și să depanați un pic pentru a face ca totul să funcționeze.

Pasul 6: Actualizați șabloanele de mânere pentru a se adapta la noua structură de date

Și, în final, între modificările versiunii, structura de date Parse Object sa schimbat puțin.

Înainte, fiecare obiect a arătat astfel:

objectId: ", titlu:", ...,

Acum, aceasta este noua structură:

id: "/ / objectId, atribute: title:", ...,, ...,

Aceasta înseamnă că trebuie să actualizăm și șabloanele Handlebar pentru a face corect noile date:

De exemplu, anterior pentru categoriile din bara laterală am scris următorul șablon:

Acum trebuie să ne actualizăm ObjectId a fi Id și Nume a fi Attributes.name.

Acum, pagina dvs. va reda.

Din nou, dacă nu vă amintiți complet logica logicii site-ului, este posibil să trebuiască să treceți prin câteva cercuri puțin aici. Dacă rămâneți blocat, puteți oricând să verificați codul sursă.

Concluzie

Acolo îl aveți. Sperăm că vă poate ajuta să vă salvați datele înainte ca Parse.com să se închidă - sau să vă reînvieți codul atunci când aveți nevoie de el. Veți pierde toate datele după 28 ianuarie 2017, dar dacă actualizați codul, acesta va funcționa din nou.

Din nou, sunt incredibil de trist că Parse.com nu va mai funcționa și această serie de tutori nu va funcționa pentru noii veniți (cu excepția cazului în care aceștia continuă să se refere la această parte finală). Dar sperăm că a ajutat câțiva oameni să învețe cum să codifice un site web. 

Din acest punct, indiferent dacă alegeți să migrați sau să învățați o nouă limbă, este în totalitate la dvs. Sper că va fi ceva mai ușor pentru că ați învățat câteva concepte utile aici.

Cele mai bune gânduri! Și lăsați-mi un comentariu dacă veți găsi această serie de ajutor.

Cod