Hva du skal skape

Har du noen gang blitt begeistret av ideen om et webprosjekt, men fant det elendig å få det til å løpe og jobbe på en server? Med Parse.js kan alle som forstår grunnleggende om HTML, CSS og JavaScript, skape dynamiske nettsteder og arbeide med webapps med letthet. 

I denne opplæringen vil jeg ta deg gjennom hele prosessen med å lage et bloggsystem med Parse.js fra grunnen av. Du vil benytte alle bootstrapping verktøy, og virkelig trene ideen om rask prototyping, refactoring og MVC rammeverk. Ved slutten av denne serien bør du selv kunne lage et CMS-nettsted.

Selv om du prøver å være så detaljert som mulig, tar denne opplæringen grunnleggende kunnskap om HTML, CSS, JavaScript / jQuery og GitHub. Hvis du ikke er kjent med de nevnte verktøyene, er det mange gode opplæringsprogrammer her på Tuts + som du kan sjekke ut.

Oppsett utviklingsmiljøet

La oss starte med å sette opp utviklingsmiljøet vårt. Du trenger en lokal testserver, en webserver, en dataserver og versjonskontroll på plass. Som nevnt tidligere krever denne opplæringen ingen tidligere kunnskap om backend. Jeg vil ta deg gjennom trinnvis. Du er velkommen til å hoppe over denne delen hvis du allerede har de på plass.

Trinn 1: Installer XAMPP

Etter å ha prøvd flere forskjellige løsninger, er XAMPP fortsatt den enkleste måten å sette opp en lokal testserver jeg fant. Derfor vil jeg bruke XAMPP som den lokale testserveren i denne opplæringen.

Hvis du ikke allerede har det, start med å laste ned XAMPP her. Velg den som passer ditt system og installer det.

Jeg bruker Mac her, så jeg vil bruke det som eksempel fra nå av. Hvis du bruker annet operativsystem, bør prosessen være ganske lik.

Etter at du har installert det, start XAMPP, og start "Apache Web Server".

Nå, hvis du besøker http: // localhost / i nettleseren din, bør du se denne standard XAMPP-siden. Det betyr at det er oppe og i gang!

Trinn 2: Opprett en ny GitHub-side

Fortsett, la oss lage en ny git repo på GitHub. Jeg kaller det blog bare så det er kort og tydelig for meg. For å få det til å fungere som en web, må vi sette den som en GitHub-side.

Først legg til en ny avdeling, GH-sider.

Deretter går du til innstillinger, sett GH-sider som standardgren.

Flott. La oss nå komme inn i kommandolinjene, og klone den grenen på GitHub til XAMPP htdocs mappe.

$ cd / Programmer / XAMPP / xamppfiles / htdocs $ git klone https: // din-git-HTTPS-klon-URL-her

Naviger inn i Git repo-mappen du bare klonet, lag en enkel index.html fil, og skriv bare Hei Verden i det.

$ cd blogg $ echo 'hei verden'> index.html

Sjekk ditt lokalehost og sørg for at det fungerer.

Flott. La oss da skyve den til GitHub.

$ git legg til index.html $ git commit -am "Legg til index.html" $ git push

Gå til http://yourusername.github.io/reponame, gi det noen minutter, og du vil se din index.html er nå live :)

Trinn 3: Få din konto på Parse.com

Det er veldig enkelt å være vert for statisk innhold på GitHub Page, men når det kommer til backend, kan ting bli vanskelig med GitHub Page. Heldigvis har vi nå Parse.js. Vi kan bruke Parse.com som vår dataserver og kommunisere med det JavaScript. På den måten behøver vi bare å være vert for HTML, CSS og JavaScript-filer på GitHub.

Gå videre og registrer deg hos Parse.com hvis du ikke har gjort det. 

Nå har du dataserveren din i skyen.

Statisk HTML-mal for oppstartsstrøm

La oss nå lage en statisk versjon av bloggsystemet vi skal lage. For å vise deg hvor fort du kan starte opp gjennom dette, vil jeg bare benytte eksempelbloggen fra Bootstrap. Igjen, hvis du allerede er ganske kjent med Bootstrap, eller du har et statisk nettsted designet allerede, kan du gjerne gjøre det på din måte. Hvis du er ny på Bootstrap, følg med.

Trinn 1: Last ned Bootstrap

Først last ned Bootstrap (for tiden bruker vi versjon 3.2.0 her), pakker den ut og legger innholdet i din XAMPP / xamppfiles / htdocs / blogg mappe. 

Trinn 2: Start med Bootstraps grunnleggende mal

Deretter redigerer du index.html å ha grunnleggende mal av Bootstrap. Den gir en grunnleggende HTML-struktur med lenker til bootstrap.min.css, bootstrap.min.js, og jquery.min.js. Å starte med en mal som dette vil spare deg for mye tid.

              
Hei Verden!
      

Oppdater og sørg for at den fungerer.

Trinn 3: Kopier eksempelbloggmalen over

Nå, gå videre og åpne eksempelblogg fra Bootstrap: http://getbootstrap.com/examples/blog/

På nettsiden, høyreklikk og velg "Se kilde"Vi vil kopiere alt innholdet i  over til vår index.html og erstatt 

Hei Verden!

i grunnleggende mal.

Ikke kopier

Trinn 3: Test Parse SDK

Fortsett å skape en blog.js under din blogg / js mappe med program-ID og JavaScript-nøkkel, og noen testkode. De er alle i Quickstart Guide:

$ (funksjon () Parse. $ = jQuery; // Erstatt denne linjen med den på Quickstart Guide Page Parse.initialize ("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ"); Var TestObject = Parse.Object.extend ("TestObject" ); var testObject = ny TestObject (); testObject.save (foo: "bar"). deretter (funksjon (objekt) alarm ("yay! det fungerte");););

Lagre det, og knytt denne JavaScript-filen i din index.html, under bootstrap.min.js.

Nå, oppdater index.html på ditt lokalehost igjen, og du bør kunne se denne varslingsmeldingen:

Det betyr at du nå er koblet til bloggen din i skyen :)

Hvis du sjekker din "Data Browser"på Parse.com nå, vil du se TestObject du nettopp opprettet.

Konklusjon

I dag har vi satt opp alle serverne vi trenger: XAMPP som vår lokale testserver, GitHub Pages som vår webserver og Parse.com som vår dataserver. Vi har også en grunnleggende bloggmal på plass, og den er nå koblet til databasen.

I neste sesjon vil jeg lære deg hvordan du legger til blogginnlegg fra Parses datavinduer, hent det med JavaScript, og gjør det på forsiden.

Sjekk kildefilen hvis du sitter fast. Og vær så snill å legge igjen en kommentar hvis du møter eventuelle problemer som følger med.

Kode