Wat je gaat creëren

Ben je ooit enthousiast geworden over het idee van een webproject, maar heb je het jammer gevonden om het op een server te laten draaien en ermee te werken? Met Parse.js kan iedereen die de basisprincipes van HTML, CSS en JavaScript begrijpt, met een gerust hart dynamische websites en webapp-apps maken. 

In deze zelfstudie zal ik je vanaf het begin door het hele proces van het maken van een blogsysteem met Parse.js heen leiden. Je maakt gebruik van alle bootstrappingtools en oefent echt het idee van rapid prototyping, refactoring en MVC framework. Aan het einde van deze serie zou je in staat moeten zijn om elke CMS-site zelf te creëren.

Hoewel het proberen zo gedetailleerd mogelijk te zijn, neemt deze tutorial wel basiskennis over HTML, CSS, JavaScript / jQuery en GitHub aan. Als je niet bekend bent met de bovengenoemde hulpmiddelen, zijn er veel leuke tutorials hier op Tuts + die je kunt bekijken.

Stel de ontwikkelomgeving in

Laten we aan de slag gaan door onze ontwikkelomgeving in te richten. U hebt een lokale testserver, een webserver, een dataserver en versiebeheer nodig. Zoals eerder vermeld, vereist deze zelfstudie geen voorkennis over de backend. Ik zal je stap voor stap helpen. Voel je vrij om dit deel over te slaan als je die al hebt geïnstalleerd.

Stap 1: XAMPP installeren

Na het uitproberen van verschillende oplossingen, is XAMPP nog steeds de gemakkelijkste manier om een ​​lokale testserver op te zetten die ik heb gevonden. Daarom zal ik XAMPP gebruiken als de lokale testserver in deze zelfstudie.

Als je dat nog niet hebt gedaan, begin dan met het downloaden van XAMPP hier. Kies degene die bij uw systeem past en installeer het.

Ik gebruik hier Mac, dus ik zal dat vanaf nu als voorbeeld gebruiken. Als u een ander besturingssysteem gebruikt, moet het proces vergelijkbaar zijn.

Nadat u het hebt geïnstalleerd, start u XAMPP en start u "Apache Web Server".

Als u nu http: // localhost / in uw browser bezoekt, zou u deze standaard XAMPP-pagina moeten zien. Dat betekent dat het werkt!

Stap 2: Maak een nieuwe GitHub-pagina

Ga verder, laten we een nieuwe git repo maken op GitHub. ik noem het blog Het is kort en duidelijk voor mij. Om het als een webserver te laten functioneren, moeten we het instellen als een GitHub-pagina.

Voeg eerst een nieuw filiaal toe, gh-pagina's.

Ga dan naar instellingen, stel in gh-pagina's als de standaardtak.

Super goed. Laten we nu naar de opdrachtregels gaan en die tak op GitHub in XAMPP's klonen htdocs map.

$ cd / Applications / XAMPP / xamppfiles / htdocs $ git clone https: // jouw-git-HTTPS-kloon-URL-hier

Navigeer naar de Git-repomap die u net hebt gekloond, maak een eenvoudige map index.html bestand en schrijf gewoon Hallo Wereld in het.

$ cd-blog $ echo 'hallo wereld'> index.html

Controleer uw localhost en zorg ervoor dat het werkt.

Super goed. Laten we het dan naar GitHub duwen.

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

Ga naar http://yusgebruikersnaam.github.io/reponame, geef het een paar minuten en je ziet je index.html is nu live :)

Stap 3: Zet uw account op Parse.com

Het is erg gemakkelijk om statische inhoud te hosten op de GitHub-pagina, maar als het gaat om de backend, kan het lastig worden met GitHub-pagina. Gelukkig hebben we nu Parse.js. We kunnen Parse.com als onze gegevensserver gebruiken en ermee communiceren JavaScript. Op die manier hoeven we alleen HTML-, CSS- en JavaScript-bestanden te hosten op GitHub.

Ga je gang en registreer je op Parse.com als je dit nog niet hebt gedaan. 

Nu hebt u uw dataserver in de cloud.

Bootstrap statische HTML-sjabloon

Laten we nu een statische versie van het blogsysteem maken dat we gaan maken. Om je te laten zien hoe snel je kunt bootstrap, gebruik ik de voorbeeldblogsjabloon van Bootstrap. Nogmaals, als je al bekend bent met Bootstrap of als je een statische website al hebt ontworpen, voel je dan vrij om het op jouw manier te doen. Als je nieuw bent bij Bootstrap, volg dan.

Stap 1: Download Bootstrap

Download eerst Bootstrap (momenteel gebruiken we hier versie 3.2.0), pak het uit en plaats de inhoud in uw XAMPP / xamppfiles / htdocs / blog map. 

Stap 2: Start met de basis-sjabloon van Bootstrap

Bewerk dan index.html om de basissjabloon van Bootstrap te hebben. Het biedt een eenvoudige HTML-structuur met links naar bootstrap.min.css, bootstrap.min.js, en jquery.min.js. Als u begint met een sjabloon als deze, bespaart u veel tijd.

              
Hallo Wereld!
      

Vernieuw en zorg ervoor dat het werkt.

Stap 3: Kopieer de voorbeeldblogsjabloon eroverheen

Ga nu verder en open het voorbeeldblog van Bootstrap: http://getbootstrap.com/examples/blog/

Klik op de webpagina met de rechtermuisknop en kies "Bekijk bron". We willen alle inhoud kopiëren  over naar onze index.html en vervang de 

Hallo Wereld!

in de basissjabloon.

Kopieer de niet

Stap 3: Test de SDK

Ga verder en maak een blog.js onder jouw blog / js map met uw applicatie-ID en JavaScript-sleutel, en een aantal testcode. Ze zijn allemaal te vinden in uw Quickstart-handleiding:

$ (function () Parse. $ = jQuery; // Vervang deze regel door die op je Quickstart Guide Pagina Parse.initialize ("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ"); var TestObject = Parse.Object.extend ("TestObject" ); var testObject = new TestObject (); testObject.save (foo: "bar") then (function (object) alert ("yay! it worked");););

Sla het op en koppel dit JavaScript-bestand in uw index.html, beneden bootstrap.min.js.

Nu, vernieuw index.html op uw localhost, en u zou dit waarschuwingsbericht moeten kunnen zien:

Dat betekent dat je nu verbonden bent met je Blog-database in de cloud :)

Als u uw "Gegevensbrowser"nu op Parse.com, ziet u het TestObject dat u zojuist hebt aangemaakt.

Conclusie

Vandaag hebben we alle servers geïnstalleerd die we nodig hebben: XAMPP als onze lokale testserver, GitHub Pages als onze webserver en Parse.com als onze gegevensserver. We hebben ook een standaardblogsjabloon en deze is nu verbonden met de database.

In de volgende sessie leer ik je blogberichten toevoegen vanuit de data-browser van Parse, deze ophalen met JavaScript en deze aan de voorkant weergeven.

Controleer het bronbestand als je vastloopt. En laat alsjeblieft een reactie achter als je problemen tegenkomt die volgen.

Code