Cosa starai creando

Ti sei mai emozionato dell'idea di un progetto web, ma hai trovato infelice farlo girare e lavorare su un server? Con Parse.js, chiunque comprenda le basi di HTML, CSS e JavaScript può creare facilmente siti web dinamici e applicazioni web funzionanti. 

In questo tutorial, ti illustrerò tutto il processo di creazione di un sistema di blogging con Parse.js da zero. Utilizzerai tutti gli strumenti di bootstrap e praticherai concretamente l'idea di prototipazione rapida, refactoring e framework MVC. Entro la fine di questa serie, dovresti essere in grado di creare qualsiasi sito CMS da solo.

Pur cercando di essere il più dettagliato possibile, questo tutorial presuppone conoscenze di base su HTML, CSS, JavaScript / jQuery e GitHub. Se non hai familiarità con gli strumenti di cui sopra, ci sono un sacco di fantastici tutorial qui su Tuts + che puoi controllare.

Imposta l'ambiente di sviluppo

Iniziamo impostando il nostro ambiente di sviluppo. Avrete bisogno di un server di test locale, un server Web, un server di dati e il controllo della versione sul posto. Come accennato prima, questo tutorial non richiede conoscenze precedenti sul back-end. Ti guiderò passo dopo passo. Sentiti libero di saltare questa parte se ne hai già a disposizione.

Passaggio 1: installare XAMPP

Dopo aver provato diverse soluzioni, XAMPP è ancora il modo più semplice per configurare un server di test locale che ho trovato. Pertanto, userò XAMPP come server di test locale in questo tutorial.

Se non lo hai già fatto, inizia a scaricare XAMPP qui. Scegli quello che si adatta al tuo sistema e installalo.

Io uso Mac qui, quindi lo userò come esempio da ora in poi. Se si utilizza un altro sistema operativo, il processo dovrebbe essere abbastanza simile.

Dopo averlo installato, avvia XAMPP e avvia "Apache Web Server".

Ora se visiti http: // localhost / nel tuo browser, dovresti vedere questa pagina XAMPP predefinita. Ciò significa che è attivo e funzionante!

Passaggio 2: crea una nuova pagina GitHub

Andando avanti, creiamo un nuovo repository git su GitHub. Lo chiamo blog solo così è breve e chiaro per me. Per farlo funzionare come web sever, dobbiamo impostarlo come una pagina GitHub.

Innanzitutto, aggiungi un nuovo ramo, GH-pagine.

Quindi vai alle impostazioni, imposta GH-pagine come il ramo predefinito.

Grande. Ora entriamo nelle linee di comando e cloniamo quel ramo su GitHub in XAMPP htdocs cartella.

$ cd / Applicazioni / XAMPP / xamppfiles / htdocs $ git clone https: // your-git-HTTPS-clone-URL-qui

Accedi alla cartella dei repository Git che hai appena clonato, crea un semplice index.html file e basta scrivere Ciao mondo dentro.

$ cd blog $ echo 'ciao mondo'> index.html

Controlla il tuo host locale e assicurati che funzioni.

Grande. Quindi passiamo a GitHub.

$ git add index.html $ git commit -am "Aggiungi index.html" $ git push

Vai a http://yourusername.github.io/reponame, dagli un paio di minuti e vedrai il tuo index.html è ora dal vivo :)

Passaggio 3: Ottieni il tuo account su Parse.com

È molto facile ospitare contenuti statici su GitHub Page, ma quando si tratta del back-end, le cose possono diventare complicate con GitHub Page. Fortunatamente, ora abbiamo Parse.js. Possiamo usare Parse.com come nostro server di dati e comunicare con esso JavaScript. In questo modo, abbiamo solo bisogno di ospitare file HTML, CSS e JavaScript su GitHub.

Vai avanti e registrati su Parse.com se non l'hai fatto. 

Ora hai il tuo server dati nel cloud.

Bootstrap Modello HTML statico

Ora prepariamo una versione statica del sistema di blog che stiamo per realizzare. Per mostrarti quanto velocemente puoi eseguire il bootstrap attraverso questo, userò semplicemente il modello del blog di esempio di Bootstrap. Di nuovo, se hai già familiarità con Bootstrap o hai già un sito web statico progettato, sentiti libero di farlo a modo tuo. Se sei nuovo a Bootstrap, segui.

Passaggio 1: scarica Bootstrap

Innanzitutto, scarica Bootstrap (al momento utilizziamo la versione 3.2.0 qui), decomprimilo e inserisci il suo contenuto nel tuo XAMPP / xamppfiles / htdocs / blog cartella. 

Passaggio 2: iniziare con il modello di base di Bootstrap

Quindi, modifica index.html avere il modello base di Bootstrap. Fornisce una struttura HTML di base con collegamenti a bootstrap.min.css, bootstrap.min.js, e jquery.min.js. Iniziare con un modello come questo ti farà risparmiare un sacco di tempo.

              
Ciao mondo!
      

Aggiorna e assicurati che funzioni.

Passaggio 3: copia il modello di blog di esempio

Ora spostati su un blog di esempio da Bootstrap: http://getbootstrap.com/examples/blog/

Nella pagina web, fai clic con il tasto destro e scegli "Vedi la fonte". Vogliamo copiare tutti i contenuti in  oltre al nostro index.html e sostituire il 

Ciao mondo!

nel modello base.

Non copiare il

Passaggio 3: test Parse SDK

Andando avanti, crea un blog.js sotto il tuo Blog / js cartella con l'ID dell'applicazione e la chiave JavaScript e un codice di prova. Tutti possono essere trovati nella Guida rapida:

$ (function () Parse. $ = jQuery; // Sostituisci questa riga con quella nella pagina Guida rapida. Parse.initialize ("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ"); var TestObject = Parse.Object.extend ("TestObject" ) var testObject = new TestObject (); testObject.save (foo: "bar"). then (function (object) alert ("yay! ha funzionato");););

Salvalo e collega questo file JavaScript nel tuo index.html, sotto bootstrap.min.js.

Ora, aggiorna index.html sul tuo localhost di nuovo, e dovresti essere in grado di vedere questo messaggio di avviso:

Ciò significa che ora sei connesso al tuo database del blog nel cloud :)

Se controlli il tuo "Browser dati"su Parse.com ora vedrai il TestObject appena creato.

Conclusione

Oggi abbiamo configurato tutti i server di cui abbiamo bisogno: XAMPP come nostro server di test locale, GitHub Pages come nostro server web e Parse.com come nostro server di dati. Abbiamo anche un modello di blog di base sul posto, ed è ora collegato al database.

Nella prossima sessione, ti insegnerò come aggiungere post del blog dal browser dati di Parse, recuperarlo con JavaScript e renderlo sul front-end.

Controlla il file sorgente se ti sei bloccato. E per favore lascia un commento se incontri qualche difficoltà dopo.

Codice