Cześć, dziś opiszę co do tej pory zrobiłem w aplikacji MyTwitter. Commits on Jun 28, 2017
Głównym celem było połączenie się z bazą, aby móc pobierać dane i zapisywać je. W pierwszej kolejności za pomocą menadżera pakietów npm dodałem do swojej apki pakiet mongoose. Mongoose to obiekt mongoDB tworzony z myślą o nodejs.
Kolejnym krokiem było stworzenie pliku db.js a w nim zaimplementowanie połączenia z bazą. Z niezrozumiałych rzeczy dotycząca pliku db.js może być poniższy fragment
var url = process.env.MONGODB_URI
|| 'mongodb://localhost/socialLocalhost'
Tłumacze i objaśniam process.env.MONGODB_URI jest to zmienna środowiskowa heroku, gdy robie deploy to aplikacja sprawdza, zmienną MONGODB_URI, jeżeli jest zdefiniowana to łączy z bazą na stage, bądź produkcji zależy jaki adres kryję się pod tą zmienną, jeżeli nie ma nic przypisanego łącze się z moim localhostem. W późniejszym commicie do pliku dodałem zabezpieczenia które będą informować o niepowodzeniu z połączeniem do bazy.
Dobrze, mamy już połączenie z bazą mongodb, potrzebujemy teraz stworzyć jej model aby mongo wiedziało jakie dane ma zapisać w kolekcji(odpowiednik sql’owych tabel) a w nich dokument(odpowiednik wiersz rekordów sql’owych). Plik models/posts.js
var db = require('../db')
var Post = db.model('Post', {
username: { type: String, required: true },
body: { type: String, required: true },
date: { type: Date, required: true, default: Date.now }
})
module.exports = Post
W pierwszej linii pobieramy obiekt db czyli połączenie z bazą danych, dla tego połączenia(tej konkretnej bazy) tworzymy model czyli tworzymy kolekcje o nazwie Post. MongoDB utworzy kolekcje w liczbie mnogiej posts. Następnie definiujemy dokument username typu String i jest to wartość wymagana, kolejnym „wierszem” jest body które ma takie same warunki oraz date wymagana wartość która generuje aktualną datę. Gdy dokonamy zapisu, pojedynczy dokument w kolekcji wygenerowany przez mLabMongoDB wygląda następująco:
{
"_id": {
"$oid": "595532b6d67b0e00110a0d5c"
},
"username": "nyweron",
"body": "this is my new post",
"date": {
"$date": "2017-06-29T17:02:46.445Z"
},
"__v": 0
}
$oid to inaczej ObjectId, zaś $date to ISODate.
„__v” jest to versionKey czyli właściwość ustawiana dla każdego dokumentu kiedy jest tworzona po raz pierwszy przez mongoose. Klucz zawiera wewnętrzną wersję dokumentu. Po więcej informacji odnośnie versionKey odsyłam do dokumentacji. Zaś dokument wygenerowany przez shell mongo wygląda następująco:
{
"_id" : ObjectId("594fcfc60c05b30794b5b7e0"),
"username" : "nyweron",
"body" : "this is my new post",
"date" : ISODate("2017-06-25T14:59:18.903Z"),
"__v" : 0
}
W tej części kodu wykonałem pull requesta a później merga z masterem na potrzeby przetestowania pewnej funkcji w heroku. Plik app.json stworzony dla heroku opisuję aplikację. Mianowicie przedstawia zmienne środowiskowe, nazwę apki i inne ważne informacje które są wymagane przy starcie aplikacji na heroku.
Zainstalowanie paczki nodemon, świetna sprawa za każdym razem kiedy nanosicie zmiany na serwerze czyli naszych plikach nodejs, serwer automatycznie uruchamia się ponownie z nowymi zmianami. Wystarczy wydać polecenie
nodemon server.js
i cieszyć się automatycznym przeładowywaniem serwera za każdym razem gdy zostanie on zmieniony i zapisany. Wcześniej za każdym razem musiałem stopować ctr+c i uruchamiać ręcznie serwer poleceniem:
node server.js
No teraz już jakieś mięso pliczek server.js W pliku mamy paczkę expressjs pokrótce jest to framework do nodejs który ładniej wygląda. Wcześniej utworzony model Post możemy użyć w API do tworzenia nowych postów. Warto zwrócić uwagę na argument błędu err
post.save(function(err, post) {
if (err) { return next(err) }...
W linii 18 znajduję się warunek sprawdzający czy istnieje jakiś błąd, jeżeli tak, to następuję wykonanie wywołania zwrotnego next() który zawiera argument wywołujący błąd 500 czyli problem z frameworkiem Express. Z reguły 500 oznacza problemy z bazą.
Aby przetestować działania dodawania postu, używam postman. Gdy wejdziemy do postman’a ustawiamy metodę HTTP na post i w zakładce Headers ustawiamy:
| Key | Value |
| Content-Type | application/json |
| username | nyweron |
| body | new post |
gdy ustawiliśmy parametry klikamy send i żądanie powinno zapisać post do bazy.
Gdy metoda post działa przechodzę do implementacji metody get (commit), która pobiera wcześniej dodany dokument i wysyła go w formacie json.
Następne commity, to szukanie prze zemnie błędów w postaci wyświetlania logów.
Angular teraz przejdziemy do obsługi front-endu. Plik index.html na tę chwilę dodajemy bootstrap css i js. Kolejnym krokiem jest wyświetlenie na sztywno podanych dwóch postów, aby zobaczyć czy bootstrap załadował się poprawnie.
Teraz już poważna zabawa z angularem i jego możliwościami commit. W linii 28 wykonujemy pewien myk, mianowicie podczas zadeklarowania kontrolera wykonujemy operacje zwaną wstrzyknięciem zależności $scope
app.controller('PostsCtrl', function($scope) {...
Szybka ściąga $scope to nic innego jak obiekt, do którego mamy dostęp w kodzie HTML, jak i kontrolerze. W kontrolerze definiujemy $scope.posts który przechowuję w sobie dwa posty. W linii 15 wykonujemy pętlę która wyświetla nam posty. Ostatnia rzecz jaka została prze zemnie zrobiona to dodanie przycisku oraz pola do wpisywania treści. Ciekawą rzeczą jest
<input ng-model='postBody' class='form-control' />
dyrektwa ng-model która powoduję powiązanie danego elemntu z podaną właściwością w $scope.
Pozdro 🙂