Ce veți crea

Ați fost vreodată încântat de ideea unui proiect web, dar ați găsit că este mizerabil să îl executați și să lucrați pe un server? Cu Parse.js, oricine înțelege elementele de bază ale codului HTML, CSS și JavaScript, poate crea cu ușurință site-uri dinamice și aplicații web de lucru. 

În acest tutorial, vă voi trece prin întregul proces de creare a unui sistem de bloguri cu Parse.js de la zero. Veți utiliza toate instrumentele de încărcare și practicați cu adevărat ideea prototipării rapide, refactorizării și a cadrului MVC. Până la sfârșitul acestei serii, ar trebui să puteți crea singur un singur site CMS.

Deși încearcă să fie cât mai detaliat posibil, acest tutorial își asumă cunoștințe de bază despre HTML, CSS, JavaScript / jQuery și GitHub. Dacă nu sunteți familiarizat cu instrumentele menționate mai sus, există o mulțime de tutoriale excelente aici pe Tuts + pe care le puteți verifica.

Configurați mediul de dezvoltare

Să începem prin stabilirea mediului de dezvoltare. Veți avea nevoie de un server local de testare, un server web, un server de date și un control al versiunii. După cum am menționat mai sus, acest tutorial nu necesită cunoștințe anterioare despre backend. Te voi duce treptat. Simțiți-vă liber să renunțați la această parte dacă aveți deja acelea pe care le aveți.

Pasul 1: Instalați XAMPP

După ce am încercat mai multe soluții diferite, XAMPP este încă cel mai simplu mod de a configura un server local de testare pe care l-am găsit. Prin urmare, voi folosi XAMPP ca server local de testare în acest tutorial.

Dacă nu ați făcut-o deja, începeți prin descărcarea XAMPP aici. Alegeți unul care se potrivește sistemului dvs. și instalați-l.

Eu folosesc Mac aici, așa că o să folosesc asta ca exemplu de acum încolo. Dacă utilizați un alt sistem de operare, procesul ar trebui să fie destul de similar.

După ce îl instalați, lansați XAMPP și porniți "Apache Web Server".

Acum, dacă vizitați http: // localhost / în browserul dvs., ar trebui să vedeți această pagină implicită XAMPP. Asta înseamnă că e în regulă!

Pasul 2: Creați o nouă pagină GitHub

Mergând mai departe, să creăm un nou GIT repo la GitHub. O numesc blogul așa că este scurt și clar pentru mine. Pentru ca acest lucru să funcționeze ca un web sever, trebuie să îl setăm ca pe o pagină GitHub.

Mai întâi, adăugați o nouă ramură, GH-pagini.

Apoi treceți la setări, setați GH-pagini ca ramură implicită.

Grozav. Acum, să intrăm în liniile de comandă și să clonăm ramura pe GitHub în XAMPP htdocs pliant.

$ cd / Applications / XAMPP / xamppfiles / htdocs $ clone clone https: // your-git-HTTPS-clone-URL-aici

Navigați în dosarul de replici Git pe care tocmai l-ați clonat, creați un simplu index.html fișier, și doar scrie Salut Lume în ea.

$ cd blog $ echo 'hello world'> index.html

Verificați-vă localhost și asigurați-vă că funcționează.

Grozav. Apoi să o împingem la GitHub.

$ git adăugați index.html $ git commit -am "Adăugați index.html" $ git push

Mergeți la http://yourusername.github.io/reponame, dați-i câteva minute și veți vedea dvs. index.html este acum live :)

Pasul 3: Obțineți contul dvs. pe Parse.com

Este foarte ușor să găzduiți conținut static pe pagina GitHub, dar când vine vorba de backend, lucrurile se pot complica cu pagina GitHub. Din fericire, avem acum Parse.js. Putem folosi Parse.com ca server de date și comunicăm cu acesta JavaScript. În acest fel, trebuie doar să găzduim fișiere HTML, CSS și JavaScript pe GitHub.

Continuați și înregistrați-vă la Parse.com dacă nu ați făcut acest lucru. 

Acum, aveți serverul de date în cloud.

Bootstrap Format HTML static

Acum, să pregătim o versiune statică a sistemului de blog pe care îl vom face. Pentru a vă arăta cât de repede puteți bootstrap prin acest lucru, voi folosi doar exemplul de blog din Bootstrap. Din nou, dacă sunteți deja destul de familiarizat cu Bootstrap sau dacă aveți deja un site static proiectat, nu ezitați să faceți acest lucru. Dacă sunteți nou la Bootstrap, urmați-l.

Pasul 1: Descărcați Bootstrap

Mai întâi, descărcați Bootstrap (în prezent, folosim versiunea 3.2.0 aici), dezarhivează-l și puneți conținutul în fișierul dvs. XAMPP / xamppfiles / htdocs / blog pliant. 

Pasul 2: Începeți cu șablonul de bază al Bootstrap

Apoi, editați index.html pentru a avea șablonul de bază al Bootstrap. Acesta oferă o structură HTML de bază cu link-uri către bootstrap.min.css, bootstrap.min.js, și jquery.min.js. Începând cu un șablon de acest fel vă veți economisi mult timp.

              
Salut Lume!
      

Actualizați-vă și asigurați-vă că funcționează.

Pasul 3: copiați exemplul de exemplu Blog Blog

Acum, treceți pe un blog de exemplu din Bootstrap: http://getbootstrap.com/examples/blog/

Pe pagina web, faceți clic dreapta și alegeți "Vizualizare sursă"Vrem să copiem tot conținutul  peste la noi index.html și înlocuiți 

Salut Lume!

în șablonul de bază.

Nu copiați

Pasul 3: Testarea parcelei SDK

Deplasați-vă, creați o blog.js sub dumneavoastră blog / js dosar cu ID-ul dvs. de aplicație și cheia JavaScript și un anumit cod de test. Toate acestea pot fi găsite în Ghidul dvs. rapid de pornire:

$ (functie () Parse. $ = jQuery; // Inlocuieste aceasta linie cu cea de pe pagina dvs. de pornire rapida Parse.initialize ("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ"); var TestObject = Parse.Object.extend ) var testObject = new TestObject (); testObject.save (foo: "bar") atunci funcția (obiect) alert ("yay!

Salvați-l și conectați-l la acest fișier JavaScript index.html, de mai jos bootstrap.min.js.

Acum, reîmprospătați index.html pe localhost din nou, și ar trebui să puteți vedea acest mesaj de avertizare:

Aceasta înseamnă că acum sunteți conectat la baza dvs. de date Blog în cloud :)

Dacă verificați "Browser de date"pe Parse.com acum, veți vedea TestObject pe care tocmai l-ați creat.

Concluzie

Astăzi, am creat toate serverele de care avem nevoie: XAMPP ca server de testare local, pagini GitHub ca server web și Parse.com ca server de date. Avem, de asemenea, un șablon de blog de bază, iar acum este conectat la baza de date.

În următoarea sesiune, vă voi învăța cum să adăugați postări de blog din browserul de date al Parse, să îl recuperați cu JavaScript și să îl redați pe front.

Verificați fișierul sursă dacă ați blocat. Și vă rugăm să lăsați un comentariu dacă întâmpinați dificultăți de urmat.

Cod