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

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

 

 

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

 

Seminar 1 – să ne cunoaștem

Folosim timpul alocat primulului seminar de Tehnologii web pentru a ne cunoaște, pentru a descoperi subiectele pe care le vom parcurge împreună și pentru a clarifica modul de lucru. Timpul e scurt așa că să trecem la treabă.

Să ne cunoaștem

Cine sunteți voi?

cine-sunteti

Cine sunt eu?

cv

website

Cine suntem noi?


(source: http://www.learning30.co/)

Obiectivul seminarului, tehnologii, proiect

Discutăm despre obiectivele cursului și seminarului, tehnologiile pe care le vom folosi și proiectul pe care îl vom realiza împreună până la sfârșitul acestui semestru.

HTML
CSS
JavaScript
NodeJS (w/ ExpressJS & SequelizeJS)
AngularJS

Mediul de lucru

1) GitHub – tutorial
2) Cloud9 – tutorial