Kom deg i gang med å bygge bloggen din med Parse.js Overføring til din egen personserver

Hva du skal skape

Dessverre slår Parse.com seg ned 28. januar 2017. I den forrige serien gikk jeg deg gjennom hele reisen med å bygge et bloggsystem fra bunnen av. Men alt var basert på Parse.com, og hvis du fortsatt bruker disse teknikkene, vil nettstedet ditt dessverre slutte å fungere da.

Hvis du fortsatt liker Parse.js (som jeg), og vil fortsette å bruke den, er det gode nyheter. De herlige folkene gjorde det åpent, så vi kan kjøre vår egen kopi på alle populære web hosting-tjenester. Denne opplæringen tar sikte på å hjelpe deg med å gjøre den endringen og migrere fra Parse.com til din egen Parse Server på Heroku.

Jeg er ikke en ekspert på baksiden, men dette er den enkleste måten jeg fant som fungerte. Hvis du ser noen feil og har bedre metoder for å dele, må du definitivt legge igjen en kommentar nedenfor.

Hvis du følger denne episoden, vil servermigrasjonen i seg selv ikke være for komplisert. Med Docker er det enda ganske enkelt å sette opp et lokalt Parse Dashboard, slik at du fortsatt kan se og spille med dataene dine med letthet.

Denne opplæringsserien ble imidlertid laget basert på versjon 1.2.19 av Parse.js; For å kunne koble til en frittstående Parse-server, må vi oppdatere programmet for å kjøre versjon 1.9.2. Ved versjon 1.5.0 tok Parse support for Backbone, og det betyr at vi trenger noen store endringer i koden. Vi vil legge Backbone tilbake til siden, og bruke en blanding av Parse og Backbone der.

Det er ganske lang intro, men vær ikke så redd. Det kan hende du må feilsøke her og der under overføringen, men du burde ha det bra. Du kan alltid sjekke kildekoden min eller legge igjen en kommentar nedenfor. Jeg og dette fantastiske samfunnet her vil prøve vårt beste for å hjelpe deg.

Konfigurer og overfør til å analysere server

Første ting først, la oss begynne å lage en Parse Server. Parse har allerede gjort dette veldig enkelt med en detaljert overføringsveiledning og en lang liste over utvalgsprogrammer på alle populære plattformer som Heroku, AWS og Azure.

Jeg vil gå deg gjennom den enkleste som jeg vet: Heroku + mLab combo. Det er gratis å begynne med, og du kan alltid betale for bedre maskinvare og mer lagring i samme system. Den eneste advarselen er at den gratis versjonen av Heroku ville "sove" etter å ha vært ledig i 30 minutter. Så hvis brukere besøker nettstedet ditt når serveren er "sovende", må de kanskje vente i noen sekunder for at serveren skal våkne opp før de kan se dataene. (Hvis du sjekker demoversiden for dette prosjektet, og det gjør ikke noe blogginnhold, er det derfor. Gi det et øyeblikk og oppdater.)

Denne delen er i stor grad basert på Heroku's guide for distribusjon av en Parse Server og Parse egen migreringsveiledning. Jeg har nettopp valgt den enkleste, mest idiotsikker banen der.

Trinn 1: Registrer deg og opprett en ny app på Heroku

Hvis du ikke har en Heroku-konto enda, gå videre og lag en. Det er en veldig populær plattform for utvikling og hosting av små webapps.

Når du er registrert, gå til Heroku Dashboard og opprett en ny app - som vil være din server.

Gi det et navn hvis du vil:

Trinn 2: Legg til mLab MongoDB

Nå trenger du en database for å lagre dataene. Og la oss legge til mLab som tillegg.

Gå til Ressurser> Add-ons, søk etter "mLab", og legg til det:

Sandkasse er nok for utvikling - du kan alltid oppgradere og betale mer for å få mer lagringsplass der.

Når du har lagt til mLab, kan du hente MongoDB URI av den.

Gå til Innstillinger> Konfigvariabler i din Heroku Dashboard og klikk på Avsløre Config Vars.

Der kan du se MongoDB URI for databasen din. Kopier det, og nå kan vi begynne å migrere databasen.

Trinn 3: Databaseoverføring

Gå til Parse.com og finn appen du vil migrere. Open-source-versjonen av Parse Server støtter bare én app per server, så hvis du vil ha flere apper, må du gjenta denne prosessen og opprette flere servere. Bare velg en.

Innenfor denne appen, gå til Appinnstillinger> Generelt> Appbehandling, og klikk på migrere.

Og deretter lim inn i MongoDB URI du nettopp kopiert, og begynn migrasjon.

Snart bør du se denne skjermen:

Det betyr at du nå skal ha alle dataene dine i mLab MongoDB. Lett nok, rett?

Men ikke slutt på appen din - la oss vente til vi kan se og spille med de samme dataene fra vårt lokale Parse Dashboard, og deretter gå tilbake og fullføre det.

Trinn 4: Implementere Parse Server

Nå, med databasen som allerede er migrert, kan vi distribuere Parse Server.

Hvis du ikke har en GitHub-konto enda, gå videre og lag en. Det er trolig det mest populære stedet hvor folk deler og administrerer koden sin.

Med din GitHub-konto, gaffel den offisielle Parse Server-eksemplarrepetoen.

Deretter går du tilbake til Heroku Dashboard. Under Distribuere> Distribusjonsmetode, velge GitHub og koble til din GitHub-konto.

Etter det, søk etter analyse og finn din parse-server-eksemplet repo og koble til.

Hvis alt fungerer, bør du se at det er koblet slik:

Nå, bla ned til bunnen av siden. Under Manuell distribusjon, klikk Distribuer Branch.

Du vil se at din Parse Server blir distribuert, og snart vil du se denne skjermen:

Klikk på Utsikt knappen, og du vil se denne siden:

Det betyr at serveren din nå lykkes å kjøre! Og nettadressen du ser er nettadressen til serveren din. Du trenger det senere.

Jeg vet at det er uvirkelig å se denne enkle linjen og vet at serveren er oppe. Men tro meg, kraftverket kjører der. Og appen din kan lese og skrive fra den allerede.

Hvis du vil dobbeltsjekke, kan du kjøre noe slikt:

$ curl -X POST \ -H "X-Parse-Application-Id: myAppId" \ -H "Innholdstype: application / json" \ -d '' \ https://example.herokuapp.com/parse / funksjoner / hei ... "resultat": "Hei"%

Konfigurer et lokalparameterpanel

Hvis du er en kommandolinje ninja, vil du nok ha det bra herfra. Men hvis du er som meg og nyt det vennlige grensesnittet til Parse Dashboard, følg denne delen for å sette opp ditt eget Parse Dashboard på din lokale maskin, slik at du visuelt kan se og spille med Parse-data slik du er vant til.

Igjen kan du installere dashbordet ditt på en rekke måter. Jeg skal bare vise deg den enkleste måten i min erfaring, ved hjelp av Docker.

Trinn 1: Installer Docker

Hvis du ikke har Docker, må du installere den først (Mac | Windows).

Det setter et helt miljø i en boks, så du trenger ikke å følge den ganske kompliserte lokale installasjonsopplæringen og hoppe gjennom hoops i Terminal.

Trinn 2: Bygg Parse Dashboard Image

Med dockeren din kjører, klone Parse Dashboard-repoen til datamaskinen din og gå inn i den repoen.

$ git klon https://github.com/ParsePlatform/parse-dashboard.git Kloning i "parse-dashboard" ... fjernkontroll: Telle gjenstander: 3355, ferdig. fjernkontroll: Totalt 3355 (delta 0), gjenbrukt 0 (delta 0), gjenbruk av pakker 3354 Motta objekter: 100% (3355/3355), 2,75 MiB | 2,17 MiB / s, ferdig. Løse deltakere: 100% (1971/1971), ferdig. $ cd parse-dashboard /

For absolutt GitHub nybegynnere, bare last den ned som en zip-fil.

Unzip det og sett det på et sted du kan huske. Åpne din terminal app hvis du er på Mac, skriv inn cd  (du trenger en plass etter cd der) og dra mappen inn.

Deretter treffer du Tast inn.

Du bør se noe slikt, og det betyr at du er på riktig sted.

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

Nå kan du raskt sjekke om Docker er installert riktig ved å legge inn denne kommandoen:

docker -v

Hvis det viser versjonen du er på, slik:

Docker versjon 1.12.5, bygge 7392c3b

Den er installert, og du kan fortsette.

Hvis det står i stedet, står det:

-bash: docker: kommando ikke funnet

Du må sjekke om du har installert Docker riktig.

Med Docker riktig installert, lim inn i denne kommandoen og klikk Tast inn:

docker build -t-dashboard .

Det vil bygge deg et lokalt bilde (gjerne ignorere dockerjargong) for Parse Dashboard.

Du vil se mange linjer rulling. Ikke ta panikk - bare gi det en stund, og du vil se det ende med noe slikt:

Vellykket bygget eda023ee596d

Det betyr at du er ferdig-bildet har blitt bygget med suksess.

Hvis du kjører docker bilder kommando, du vil se det der:

REPOSITORY TAG IMAGE ID CREATED SIZE parse-dashboard siste eda023ee596d Omtrent et minutt siden 778,1 MB

Trinn 3: Koble Parse Dashboard til Parse Server

Nå er det bare et bilde, og det er ikke en løpende server ennå. Når den går, vil vi at den skal være koblet til Parse Server og MongoDB vi nettopp har bygget.

For å gjøre det, må vi først opprette noen få nøkler i Heroku, så det kan fortelle hvem som skal gi tilgang til dataene.

Gå til Heroku Dashboard og gå til innstillinger > Konfigvariabler en gang til. Denne gangen må vi legge til to variabler der: APP_ID og HOVEDNØKKEL. APP_ID kan være noe lett å huske, mens HOVEDNØKKEL hadde bedre vært et veldig langt og komplisert passord.

Nå med disse nøklene kan vi skrive en enkel config-fil i rotkatalogen i Parse Dashboard-mappen. Du kan bruke alt fra vim til TextEdit eller Notisblokk-Målet er å lage en ren tekst config.json fil med dette innholdet:

"apps": ["serverURL": "din app-url / parse", "appId": "din app-id", "masterKey": "din master-nøkkel", "appName" ditt-app-navn "]," brukere ": [" bruker ":" bruker "," pass ":" pass "]

Og selvfølgelig, erstatt your-app-url med "Vis" -lenkadressen (siden som sier "Jeg drømmer om å være et nettsted"), men hold den / analysere der på slutten; erstatte your-app-id og your-mester-key med config-variablene du nettopp har lagt til; og gi appen ditt navn og erstatt your-app-navn med det.

Lagre filen og kjør ls kommandoen i Terminal for å sørge for at du setter config.json på riktig sted.

~ / temp / parse-dashboard-mester $ ls CHANGELOG.md Dockerfile PIG / Procfile bin / package.json src / webpack / CONTRIBUTING.md LISENS Parse-Dashboard / README.md config.json scripts / testing /

Hvis du ser config.json I denne listen er du god til å gå videre.

Kjør nå pwd beordre å få stedet du er i:

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

Kopier den banen.

Lim deretter inn i denne kommandoen for å lage en Docker-beholder (igjen, du kan ignorere dette sjargonget) og kjøre Parse Dashboard. Husk å erstatte banen min med stien du nettopp har fått.

docker løp -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

Fra øverst til bunn gjør denne kommandoen disse tingene (som du også kan ignorere):

L1: Fortell Docker å starte en container L2: Gjør det kjørt på port 8080, du kan endre den til hvilken som helst port du vil L3: Få config.json du nettopp laget som bruk den som konfigurasjon L4: Aktiver HTTPS på din lokale ( Ellers vil du møte en feilmelding) L5: Gi det et navn du kan huske. Du kan endre det til alt du vil også. L6: Fortell Docker bildet du vil bruke. parse-dashboard er navnet vi brukte i Docker Build-kommandoen tidligere.

Hvis alt går gjennom, vil det returnere en lang streng til deg uten feilmelding. Som dette:

4599aab0363d64373524cfa199dc0013a74955c9e35c1a43f7c5176363a45e1e

Og nå kjører din Parse Dashboard! Sjekk det ut på http: // localhost: 8080 /.

Det kan være sakte og vise en tom side i utgangspunktet, men bare gi det et par minutter, og du vil se en påloggingsskjerm:

Nå kan du logge inn med bruker som brukernavn og passere som passord-det er definert i config.json i tilfelle du ikke skjønte tidligere. Du kan endre dem til hva du vil, også.

Og du vil se dette kjente grensesnittet fra din lokale maskin og kan spille med dataene dine (nå i mLab MongoDB) slik du alltid gjør.

Et par siste notater på dette lokale instrumentbrettet:

For det første kan du stoppe og starte denne beholderen fra nå av når som helst med disse to kommandoene:

dockerstopp parse-dashboard docker start parse-dashboard

Så når du starter datamaskinen på nytt, trenger du ikke å følge de forrige trinnene igjen, bare fortelle det å starte på nytt.

Og for det andre, hvis du har flere Parse-servere, trenger du ikke å opprette flere Parse-dashboards. Bare legg til flere apper i config.json som dette:

"apps": [// info for første server "serverURL": "", "appId": "", "masterKey": "", "appName": "", // info for andre server " serverURL ":" "," appId ":" "," masterKey ":" "," appName ":" "]," brukere ": [...],

Hver gang du gjør endringer i config.json, du må starte Docker-beholderen på nytt:

dokkingstart parse-dashbordet

Og så vil du se endringene du har gjort.

Trinn 4: Fullfør overføringen

Spill nå med det nye Parse Dashboard, og hvis alt fungerer, kan du nå gå tilbake til Parse.com og fullføre overføringen.

Deretter, hvis du sjekker dine applikasjoner og dashbord, vil du oppdage at de alle magisk peker på den nye serveren uten problem.

Oppdater koden for å kjøre på Parse 1.9.2

Dette er flott! Jeg skulle ønske det kunne bli slik og vi kunne avslutte denne opplæringen tidlig. Men som nevnt, stoler den gamle Parse.js-appen fortsatt på Parse.com-servere for å vise den til den riktige nye serveren. Og det vil slutte å fungere etter 28. januar 2017.

For å få det til å løpe for alltid (finger krysset) må vi slutte å bruke JavaScript-nøklene til å peke på appen (som er avhengig av Parse.com for å finne ut hvilken database som skal peke til), og rett til vår parse-server.

Trinn 1: Oppdater JavaScript-bibliotekene

La oss først oppdatere Parse.js-filen vi bruker i index.html.

I stedet for å bruke versjon 1.2.19:

Bytt til den nyeste versjonen:

La oss også legge til loddrett og ryggrad. Nå som Parse har sluttet å støtte Backbone, må vi inkludere den for å fortsette å bruke visninger og rutere.

   

Trinn 2: Pek på Parse-serveren din

Så la oss gå inn site.js.

Det første som er å oppdatere Parse.initialize () fungere slik at den peker til din egen Parse Server.

Tidligere kan det se slik ut:

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

Nå peker det på Parse-serveren din.

Parse.initialize ( "moyicat-analysere-blog-git"); // App-navnet ditt Parse.serverURL = 'https://moyicat-parse-blog-git.herokuapp.com/parse'; // Din server URL

Trinn 3: Fra React to Backbone

Fortsett, la oss gjøre en rask oppdatering for å endre alle Parse.View, Parse.Router, og Parse.history til Backbone.View, Backbone.Router, og Backbone.history. De støttes ikke lenger av Parse, så vi må ha en tilbakebetaling.

Det er ikke den hyggeligste tingen i verden å blande og matche Klasse Slik, men hvis du vil gjøre de minste endringene i koden din og få den til å kjøre, kan dette være den enkleste måten.

Trinn 4: Fra samling til forespørsel; Fra hente til finne

Nå er en annen ting som Parse sluttet å støtte Samling. Og det er mye mer tornet enn de andre tre. Bytter fra Parse.Collection til Backbone.Collection vil ikke fungere. Vi må omskrive logikken ved hjelp av Parse-spørringer.

Jeg vil bruke blogger samling som et eksempel for å vise deg hvordan vi kan oppdatere bloggen vår for å jobbe med den nye Parse.js.

Tidligere definerte vi først a Klasse til blogger:

Blogger = Parse.Collection.extend (modell: Blog, spørring: (ny Parse.Query (Blog)). Descending ('createdAt'));

Og så i BlogRouter.start () funksjon vi opprettet en forekomst av den klassen for å inneholde samlingen av blokker.

this.blogs = nye blogger ();

Etter det kaller vi hente () på samlingen for å få bloggdata. Som i BlogRouter.index ():

this.blogs.fetch (suksess: funksjon (blogger) ..., feil: funksjon (blogger, feil) ...);

Nå kan vi bare slette klassedeklarasjonen og lage BlogRouter.blogs et analyseperspektiv:

this.blogs = new Parse.Query (Blog) .descending ('createdAt');

Og når vi kaller det, i stedet for hente () vi bruker finne().

this.blogs.find (suksess: funksjon (blogger) ..., feil: funksjon (blogger, feil) ...);

Denne delen kan ta litt tid siden vi har ganske mange forskjellige brukssaker over denne serien. Du må kanskje feilsøke litt - på dette tidspunktet, selv om dataene henter riktig, blir ikke siden gjengitt riktig ennå. Hvis du foretrekker å se ting som gjøres når du retter dem, les gjennom til slutt, og start deretter med å endre koden og feilsøking.

Trinn 5: Sjekk visningsobjektene

Når alle dataene henter riktig, er den neste tingen å sjekke på dataene du sender inn i din Utsikt objekter.

Tidligere kunne vi passere alt vi ønsket i et visningsobjekt. I dette eksemplet passerte vi brukernavn direkte inn i blogsAdminView slik at vi kunne hilse på brukerne etter deres brukernavn.

var blogsAdminView = ny BlogsAdminView (brukernavn: currentUser.get ('brukernavn'), samling: blogger);

Dette vil også slutte å fungere når vi bytter Utsikt å bli utvidet fra Backbone.View gjenstand. Vi kan bare passere inn modell og samling nå.

Så vi må passere i nåværende bruker som en modell:

var blogsAdminView = ny BlogsAdminView (modell: currentUser, samling: blogger);

Og endre BlogsAdminView tilsvarende.

Igjen må du kanskje teste og feilsøke rundt litt for å få alt til å fungere.

Trinn 6: Oppdater håndteringsmalene for å tilpasse seg den nye datastrukturen

Og til slutt, mellom versjonen endres, endret Parse Object-datastrukturen også litt.

Før så så hvert objekt slik ut:

objectId: ", tittel:", ...,

Nå er dette den nye strukturen:

id: "// objektet, attributter: title:", ...,, ...,

Dette betyr at vi må oppdatere våre Handlebar-maler også for å gjengi de nye dataene riktig:

For eksempel, tidligere for kategoriene i sidefeltet, skrev vi følgende mal:

Nå må vi oppdatere ObjectId å være Id og Navn å være Attributes.name.

Nå blir siden din gjengitt.

Igjen, hvis du ikke husker logikken på nettstedet helt klart, kan det hende du må hoppe gjennom noen hoops litt her. Hvis du sitter fast, kan du alltid sjekke kildekoden min.

Konklusjon

Der har du det. Forhåpentligvis kan det hjelpe deg med å lagre dataene dine før Parse.com avsluttes eller gjenopplive koden når du trenger det. Du vil miste alle dataene etter 28. januar 2017, men hvis du oppdaterer koden, vil den fungere igjen.

Igjen, jeg er utrolig trist at Parse.com ikke kjører lenger, og denne opplæringsserien vil ikke fungere for nykommere (med mindre de fortsetter å henvise til denne siste delen). Men forhåpentligvis hjalp det noen få folk til å lære å kode et nettsted. 

Fra dette punktet, om du velger å migrere eller å lære et nytt språk, er det helt opp til deg. Jeg håper det blir litt lettere fordi du lærte noen nyttige konsepter her.

Beste hilsener! Og la meg kommentere hvis du finner denne serien nyttig.