Angular 2 Movie App

Programiranje
1

Pozdrav svima.

Otprilike 2mj nakon sta sam odlucio preci sa angular1 na angular2, evo jedne “vece” aplikacije koju bih volio podijeliti s vama.

Do sada su to bile samo razno razne varijacije To-Do lista, obicnih staticnih osobnih blogova, pregled github korisnika… ali ovo je recimo drugi level.

Nisam bio bas aktivan sto se tice izrade zbog raznih drugih obaveza.

Saljem vam ovo cisto da vidim sto mislite o samoj funkcionalnosti itd. a sto se tice stilova, ubacio sam boostrap tek toliko da se ne moram zajebavati sa dizajniranjem, tako da mi je to jasno da je taj dio poprilicno sugav. (Ionako je radeno cisto za vjezbu angulara).

Koristio sam themoviedb.org api za povlacenje podataka, a sljedece sto planiram je povezati web sa firebase za recimo privatne “Favorite” kolekcije itd itd. (Takoder mislim poslati ovdje, pa koga zanima da pogleda :slight_smile: )

Stavio sam kod na github, a stranicu mozete vidjeti ovdje.

Cheers :sunglasses:

2

Svidja mi se bas brzo otvara.

1 Like
3

Dobar nacin za nauciti sto vise o nekom JS Frameworku, uzeti neki API, skupiti podatke i onda se igrati s tim podacima.U biti nista super tesko i komplikovano, klasnicna SPA koja radi sa nekim vanjskim API-om, ali svaka cast, samo naprijed :slight_smile:

Vjerovatno iz razloga sto je SPA :wink:

4

Čestitke, odlično si ovo odradio. Ne postoji bolji način za developera da obogati svoj “CV”.

EDIT: Da izbjegneš ovaj generički bootstrap template, koristi neku bootstrap temu. Imaš ovdje nekoliko https://bootswatch.com/

5

Bravo super projekat za vjezbati SPA, jedino sto bi ti jos mogao predloziti je da napravis server side rendering zato jer sad imas: http://prntscr.com/dwdeey

6

@belmin [quote=“belmin, post:3, topic:34356”]
U biti nista super tesko i komplikovano
[/quote]

Hvala ti, naravno, nista pre posebno kada pogledas, ali definitivno zabavno i korisno iskustvo. :smiley:

@nightcomer
Koja sam budala, nisam se ni sjetio tih templateova haha, definitivno cu ubaciti jedan kasnije. Hvala :slight_smile:

@Dooki
Zanimljivo, hvala ti na napomeni! :slight_smile:

–
Uglavnom ljudi hvala vam na odgovorima! Kroz par dana cu “skemijati” nesto sa firebaseom pa cu postaviti ovdje da pogledate ako cete biti zainteresirani.

Pozdravljam… :sunglasses:

7

Page Not Found

This specified file was not found on this website. Please check the URL for mistakes and try again.

Why am I seeing this?

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

Bilo bi dobro ako krene neka komercijala da ovo središ, bar neka početna SEO optimizacija…

1 Like
8

Pozz ljudi, evo me opet sa updateom.

Update sadrzi:

  • Firebase bazu podataka
  • Autentikacija sa facebookom ili gmailom
  • Dodavanje filmova u kolekciju
  • Route Guards ( Zabrana pristupu rutama koje su namjenjene trenutnom korisniku )
  • Public profil
  • Uredivanje profila

Uz te bitne stvari dodao sam i Flatly bootstrap temu, da stranica ipak lici na nesto.

Novi link stranice

Naravno volio bih znati sto mislite… :slight_smile:

Poz :sunglasses:

9

Dobar napredak, ova brzina ucitavanja je stvarno odlicna.
Imas problem kad se pristupi URLu direktno, npr
https://ngmovies-2c8be.firebaseapp.com/movie/278
Izbacit ce error

1 Like
10

@Veritos
Hm… da stvarno, nastojat cu to cim prije popraviti :slight_smile:

11

To se ne dešava zbog Angulara kao takvog, već zbog hostinga. Client ne zna ništa o /movie/278 s obzirom da ta stranica u osnovi ne postoji, već moraš mapirat svaki url da otvara index.html što Firebase podržava. Baš sam nedavno depoloyao jednu React aplikaciju pa je situacija bila slična.

firebase.json izgleda otprilike ovako:

 "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
12

Da, evo ubacio sam “rewrites”… kod u json i sada je sve ok.

Hvala na tome :slight_smile:

13
14

Vjerovatno je do bootstrapa, ali ionako mi nije bitno jer, kako sam prije naveo, bitniji mi je bio dio sto se tice angulara nego dizajna i layouta.

Da sam od pocetka planirao paziti na layout i dizajn, sigurno ne bih koristio neki bootstrap (ni ostale frameworkse) :slight_smile:

15

Je do bootstrapa je i mozda ti sad nije bitno, ali ti jednom mozda zatreba pa cu ti rec o cemu se radi…

Prepostavljam da ti sad imas jedan <div class="row"> i u njemu for each petlju koja u <div class="col-sm-3> stavlja glumce, i to sve radi dok je height diva col-sm-NESTO identican ali u ovom slucaju neka od slika ima veci height za 1-3px i zato ti se raspalo.

Da to rijesis array koji imas moras podjelite na chunkove od 4 komada tako da svaki red ima svoj <div class="row"> .

1 Like