Seminar 6 – resurse single-page application

Pentru proiect abordam o arhitectură de tipul Single-page Application (SPA) [1] [2]

Acest tip de arhitectură presupune separarea aplicației în două componente cu responsabilități disticte (client / server). Nevoia de a decupla aceste două componente a apărut datorită

  • creșterii complexității aplicațiilor
  • varietatea dispozitivelor disponibile (desktop, mobile, IoT)
  • dezvoltarea de soluții care să permita interconectarea mai multor siteme software

Clientul asigură, de cele mai multe ori, interfața cu utilizatorul. Este o pagină web care este încărcată inițial de browser. Cererile ulterioare sunt făcute asincron, astfel diverse secțiuni sunt actualizate independent de restul paginii.

Serverul asigură preluarea și procesarea datelor, implementează logica de business și se ocupă de persistența datelor folosind diverse mecanisme de stocare (baze de date relaționale, non-relationale, fișiere, în memorie, pe disk, etc).

Abordările pentru a dezvolta o arhitectura de tip SPA variază în funcție de tehnologiile folosite, de preferința dezvoltatorului, de tipul proiectului. În cadrul seminarului vom dezvolta o aplicație folosind pe parte de server NodeJS cu framework-ul Express și Sequelize pentru interactiunea cu baza de date. Pe parte de client vom folosi AngularJs, HTML și CSS.

Referințe

[1] https://en.wikipedia.org/wiki/Single-page_application

[2] http://singlepageappbook.com/index.html

Seminar 7 – simple CRUD api

1) Porneste un workspace nou cu NodeJs in cloud9 (sterge toate fisierele autogenerate)

2) Instaleaza MySQL

mysql-ctl start

3) Descarca exemplul https://github.com/eduardbudacu/webtech-prj-sciencedb/archive/master.zip

wget https://github.com/eduardbudacu/webtech-prj-sciencedb/archive/master.zip

unzip nume_fisier

4) Ruleaza comanda

cd nume_director

npm install

5) Instaleaza nodeadmin (https://www.npmjs.com/package/nodeadmin)

npm install –save nodeadmin

6) Creaza o tabela pentru proiectul tau care sa contina

  • id, int(8), AUTO_INCREMENT
  • cel putin 3 atribute

7) Instaleaza Sequelize urmand instructiunile de instalare http://docs.sequelizejs.com/en/v3/docs/getting-started/

8) In cadrul laboratorului dezvoltam metodele CRUD

CREATE

  • POST /nume_entitate

READ

  • GET /nume_entitate
  • GET /nume_entitate/:id

UPDATE

  • PUT /nume_entitate/:id

DELETE

  • DELETE /nume_entitate/:id

Alegere tema proiect

În săptămâna 31 Octombrie – 6 Noiembrie definitivăm temele de proiect

1) Alege o temă care te preocupă personal, o problemă din viața cotidiană sau o problemă economică a cărei rezolvare consideri că poate fi dezvoltarea unei aplicații web

2) Definește obiectivele proiectului tău și funcționalitățile pe care le vei dezvolta pentru a rezolva problema aleasă

3) Consultă specificațiile tehnice

4) Publică pe GitHub un repo “webtech-prj-[nume-proiect]”

5) Descrie proiectul în fișierul README.md

6) Configurează un workspace în Cloud9

Happy Coding!

1d71dl

keep-calm-and-happy-coding

Seminar 3 – get some style in it

CSS (Cascading Style Sheets) – un mecanism prin care se definește stilul unui document web [1]

Discutăm despre

  1. Metode de definire a stilurilor CSS
  2. Principiul separării responsabilităților (structură vs stil)
  3. Selectori CSS
  4. Principiul reutilizării (style guides, css frameworks)

Resurse

[1] https://www.w3.org/Style/CSS/Overview.en.html

[2] https://c9.io/eduardbudacu/css-examples

 

 

HTML/CSS layouts

Din PSD in HTML/CSS

Responsive web design

Carti recomandate

Contribuitor: Andrei Tudor, frontend web developer, AdoreMe

Seminar 2 – let’s make our texts hyper

În seminarul 2 lucrăm cu limbajul HTML

HTML este un limbaj care iti va permite sa structurezi textul astfel incat atunci cand este prelucrat de borowserul web va fi redat intr-o forma dorita. Folosind elemente specifice ai posibilitatea de a:

  • Structura un text in titlu, capitole, paragrafe
  • Defini fontul, dimensiunea si modul de afisare al textului (bold, italic, taiat)
  • Defini liste ordonate si neordonate
  • Insera legaturi catre alte pagini sau siteuri web
  • Adauga tabele
  • Adauga imagini sau alte resurse externe (precum o pagina web, o hara, un video de pe YouTube)
  • Construi formulare de input

Posibilitatile sunt multiple asa ca mai bine trecem la treaba. Mai jos sunt resurse ce descriu fiecare element html.

Actvitati

1) Inspectam traficul HTTP folosind Chrome si Fiddler

2) Configuram un workspace in cloud9 folosind repoul creat in seminarul anterior

3) Dezvoltam o pagina de profil folosind elementele de baza html

Resurse

Curs 2 – Andrei Toma – https://docs.google.com/presentation/d/1Z6QGANMCoAcEFhqyRCYJu3mF8ynjelWOJKFDIJkrWso/edit?usp=sharing

Specificații HTML si xHTML – https://www.w3.org/TR/html5/
Tutorial HTML w3schools – http://www.w3schools.com/html/default.asp

Mindset

donnie-darko

growth-v-fixed

adayofawebdeveloper

hacker

cfb

 

Detalii despre proiect

Obiectivul acestui seminar este ca la sfârșitul lui fiecare să prezinte o aplicație folosind tehnologiile studiate.

Arhitectura aplicației este SPA (Single-page application)

Specificațiile tehnice ale proiectului valabile pentru toate grupele se găsesc la următoarea adresă:

https://docs.google.com/presentation/d/1WIdxGb9mP-9ZFKe5IgGP3c411IgFVRVItm9NH5Ppw70/edit#slide=id.p