Dr. Sabin BuragaFacultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco
☁☁
Cu c o dul în nori☀
☁
☁
☁
…în „excursiile” noastre (virtuale), recurgem la aplicații – în general: software
aplicații native
instalabile pe un calculator/dispozitiv (mobil)
rulate grație unui mediu de execuție – uzual, oferit de un sistem de operare (e.g., Linux, iOS,…) –
pe un procesor real/virtual
aplicații native
prezintă una/mai multe modalități de interacțiune cu utilizatorul:
linia de comandă (CLI – Command Line Interface)manipulare directă: WIMP (Window Icon Menu Pointer)naturală – e.g., gesturi, voce, mișcare, ubicuitate, 3D,…
aplicații native
pot recurge la platforme/tehnologii/limbaje proprietare și/sau libere
pot fi utilizate conform unei licențe (proprietare sau deschise)
detalii despre licențele de utilizare a software-ului/datelor la tldrlegal.com
aplicații Web
colecție interconectată de pagini Webcu conținut generat dinamic,
oferind o funcționalitate specifică
aplicații Web
prezintă o interfață cu utilizatorul exploatabilă la nivel de client (i.e. navigator Web)
recurg la standarde/formate de date deschise (HTTP, URL, HTML, CSS, JSON, SVG, XML, RDF,…)
☁☁⛭
⛭
Clientinterfață cu utilizatorul
Serversit/aplicație Web
Datestocate
persistent
Internet(Web)
La ce-am putea recurge pentru a dezvolta aplicații Web?
server de aplicații Web
scop:eficientizarea proceselor de dezvoltare
a aplicațiilor Web de anvergură
server de aplicații Web
se bazează pe interfețe de programare (API – Application Programming Interface)
și/sau pe componente reutilizabile
puse la dispoziție de server ori de alți ofertanți
server de aplicații Web
poate fi integrat în unul/mai multe servere Web
de asemenea, poate oferi propriul server Websau mediu de execuție
server de aplicații Web
simplifică maniera de invocarede programe (script-uri) ale unei aplicații Web
generarea de conținut dinamic pe partea de server
server de aplicații Web
adoptă unul sau mai multe limbaje de programare
Erlang/Elixir – Chicago Boss, Phoenix, Sugar,…Java – AppFuse, Play, Wicket etc.
JavaScript – Node.js + framework-uri: Express, Locomotive ș.a. PHP – PHP + framework-uri: CakePHP, CodeIgniter, Symfony,…
Python – Django, Flask, Grok, Pyramid, ZopeRuby – Cramp, Ruby on Rails, Sinatra,…
Scala – Apache Spark, Akka, Finagle, Play etc.
disponibile cu licențe de utilizare liberă
cadru de lucru (framework)
facilitează dezvoltarea de aplicații Web complexe,simplificând operații uzuale (e.g., acces la baze
de date, generare de cod, management de sesiuni, asigurarea performanței/securității)
și/sau încurajând reutilizarea codului-sursă
cadru de lucru (framework)
vizează dezvoltarea de aplicații la nivel de server
alte exemplificări: Cuba (Ruby), Laravel (PHP), Meteor (Node.js),
Mojolicious (Perl), Ninja (Java), ObjectWeb (Python), Revel (Go), Wt (C++)
cadru de lucru (framework)
oferă suport pentru implementări JavaScriptla nivel de client
exemple populare: AngularJS, Backbone.JS, Ember
de studiat și www.infoq.com/research/javascript-frameworks-2015
bibliotecă (library)
colecție de resurse computaționale reutilizabile – i.e., structuri de date + cod –oferind funcționalități specifice
implementate într-un limbaj de programare
bibliotecă (library)
poate fi referită de alt cod-sursă (software): server de aplicații, framework, bibliotecă,
serviciu, API ori componentă Web
bibliotecă (library)
diverse exemple „notorii” cu acces liber la codul-sursă:Beautiful Soup – www.crummy.com/software/BeautifulSoup
D3.js – http://d3js.org/
ImageMagick – www.imagemagick.org
libcurl – http://curl.haxx.se/
Libxml2 – www.xmlsoft.org
Mustache – http://mustache.github.io/
OpenCV – opencv.org
Redland – http://librdf.org/
zlib – www.zlib.net
serviciu Web
software – utilizat la distanță de alte aplicații și/sau servicii – ce oferă o funcționalitate specifică,
a cărui implementare nu trebuie cunoscută de către dezvoltator
serviciu Web
recurge la tehnologii deschise, standardizate
adresare via URI (Uniform Resource Identifier)
acces prin HTTP (HyperText Transfer Protocol)
formate de date: CSV (Comma Separated Values)
JSON (JavaScript Object Notation)XML (Extensible Markup Language)
…
interfață de programare (API)
orice interfață bine-definită ce specifică operațiile pe care o componentă, un modul ori o aplicație
le oferă altor elemente software
interfață de programare (API)
API publicdisponibil pe baza unei licențe de utilizare
API privatpentru uz intern
mash-ups
API-ul de la FitBit oferă acces la date în formatele JSON și XML
ansamblu de dezvoltare(SDK – software development kit)
încapsulează funcționalitățile API-uluiîntr-o bibliotecă ori colecție de module
(implementată într-un limbaj de programare, pentru o platformă software/hardware specifică)
privire pragmatica
exemplu: acces la API-uri în Python – www.pythonapi.com
implementare
De la aplicații la API-uri și servere de aplicații
Brian Mulloy, Web API Design, Apigee, 2012http://offers.apigee.com/web-api-design-ebook/
Care-s elementele software ce pot fi
reutilizate în contextul
interacțiunii cu clientul Web?
componentă Web
parte a unei aplicații Web
ce încapsulează o suită de funcții înrudite
e.g., calendar, cititor de fluxuri de știri,
buton de partajare a URL-ului în altă aplicație
componentă Web
dezvoltare pe baza unei biblioteci sau framework
soluții „clasice” – uzual, la nivel de client:
Dojo Toolkit, jQuery UI,…
componentă Web
cadrul general:
Web Components (în lucru la Consorțiul Web)recurgând la diverse tehnologii HTML5
http://webcomponents.org/
widget
aplicație – de sine-stătătoare sau inclusă într-un container (e.g., un document HTML) –
ce oferă o funcționalitate specifică
widget
rulează la nivel de client (platformă pusă la dispoziție de sistemul de operare și/sau de navigatorul Web)
implementare pe baza standardelor: HTML, CSS, JS
(Web) app
o aplicație (Web) instalabilă care folosește API-urile oferite de o platformă:
browser, server de aplicații, sistem de operare,…
(Web) app
a distributed computer software application designed for optimal use on specific screen sizes
and with particular interface technologies
Robert Shilston, 2013
(Web) app
uzual, se poate obține via un app store(centralizat sau descentralizat)
exemple notabile: Chrome Apps
aplicații Web (mobile) pentru Firefox/Firefox OS
Web browser
app store
single page app
platform(OS + device)
native app
HTTP
WebSockets
adaptare după Adrian Colyer (2012)
aplicații Web
șiservicii
(API-uri)
☁ ☁
add-on
denumire generică a aplicațiilor asociate unui
navigator Web (extensii, teme vizuale, dicționare,
maniere de căutare pe Web, plug-in-uri etc.)
exemplificare: addons.mozilla.org
⛈Recurgând la tehnologiile din „nori”, n-am putea studia, dezvolta și/sau
contribui la software liber?
cod-sursă stocat(code repositories)
instrumente de dezvoltare (IDE)
mediu de execuție (runtime environment)
dezvoltare
rulare
adap
tare
du
pă
A. I
qb
al,
M.
Hau
nse
nb
las,
S. D
ecke
r (2
012
)
procesul actual de dezvoltare și exploatare a aplicațiilor Web – Development As A Service
☁
☁ ☁
cod-sursă stocat(code repositories)
instrumente de dezvoltare (IDE)
mediu de execuție (runtime environment)
dezvoltare
rulare
adap
tare
du
pă
A. I
qb
al,
M.
Hau
nse
nb
las,
S. D
ecke
r (2
012
)
☁
☁ ☁
DigitalOcean, Google App Engine, Heroku, Jelastic, OpenStack,…
BitBucket, GitHub,…
Web: Cloud9, Koding și alteledesktop: Eclipse, KDevelop etc.
precondiția #1:calculator tradițional (desktop)
și/saudispozitiv portabil – de dorit, dotat cu tastatură reală
precondiția #2:acces la Internet
precondiția #3:existența unui navigator Web modern
Pentru început, să experimentăm sau să ne familiarizăm cu diverse
limbaje/paradigme de programare…
editare, rulare, partajare de programe cu Ideone – http://ideone.com/
un alt instrument Web, inclusiv oferind propuneri de concursuri:CodeChef – www.codechef.com/ide
trasarea execuției codului – Python, Java, JavaScript, Ruby – pentru
a înțelege semantica instrucțiunilorwww.pythontutor.com
invocarea de cod PHP PhpFiddle – http://phpfiddle.org/
interogări asupra bazelor de dateSQL Fiddle – http://sqlfiddle.com/
entuziaștii altor limbaje/tehnologii pot consulta lista de la https://fiddles.io/
alte soluții vizând programarea în „nori”www.tutorialspoint.com/codingground.htm
EDA Playground – www.edaplayground.com
mediu online pentru proiectarea și simularea comportamentului circuitelor electronice
Ce-ar fi (să învățăm) să creăm pagini/interfețe Web?
editarea on-line a codului HTML/CSS/JavaScriptcu instrumentul JS Bin – jsbin.com
experimente CSS (Cascading Style Sheets)CSSDesk – cssdesk.com
studierea unor construcții CSS + posibilități de partajare și comentarii
CSSDeck – http://cssdeck.com/aici sistemul solar animat: cssdeck.com/labs/css-only-solar-system-model
…și puțin amuzament educativCSS Diner – http://flukeout.github.io/
un instrument pentru designeri și dezvoltatori Web pe partea de client (front end)
pentru realizarea de exemple demonstrativeCodePen – http://codepen.io/
editare, testare, rulare și partajare de cod JavaScript, inclusiv cu posibilitatea includerii de biblioteci:
AngularJS, Bonsai, D3.js, jQuery, Kinect.js, React, svg.js,…
JSFiddle – http://jsfiddle.net/
ca alternative, de survolat kodtest ori Liveweave
experimente practice de realizare a designului Web responsiv (aici cu Bootstrap)
www.codeply.com/go
…cochetând cu grafica 3D pentru Webhttp://webglplayground.net/
WebGLîn conjuncție cu jQuery
WebGLStudio – http://webglstudio.org/
o platformă Web pentru creat scene 3D interactive
Dar dacă dorim să realizăm aplicații tradiționale/Web/mobile (mai complexe)?
mediu integrat de dezvoltare(IDE – Integrated Development Environment)
oferă instrumente și mijloace specifice ingineriei software: depanarea, documentarea, testarea,
managementul codului-sursă, gestiunea pachetelor software, integrare cu alte componente, exploatare,
suport privind lucrul în echipă și altele
în contextul nostru, în „nori” (cloud computing)
o serie de soluții în „nori”
Cloud9 – c9.io
Codeanywhere – codeanywhere.com
Codenvy – codenvy.com
Codio – codio.com
Koding – koding.com
Nitrous – www.nitrous.io
Orion – orionhub.org
studiul de caz #1: Koding – https://koding.com/
acces la o mașină disponibilă în „nori”
spațiu de lucru oferind consultarea sistemului de fișiere și editarea codului-sursă
…inclusiv cu rularea și testarea unor programe (aplicații Web) concepute în PHP, Python, Ruby,…
…sau realizarea unor aplicații Internet(aici, editarea, compilarea și rularea în terminal
a unui server TCP și clientul aferent concepute în C)
parcurgerea interactivă a sistemului de fișiere+ testarea în terminal a suportului pentru Java
suport inclus pentru ajutor și conversațiide vizitat și http://learn.koding.com/
studiul de caz #2: Cloud9 – https://c9.io/
crearea unui spațiu de lucru (specific)
…și bine-cunoscuta pagină de întâmpinare
după plasarea codului-sursă (eventual, via SFTP ori prin drag & drop), îl putem edita și rula
aici, testarea suportului pentru Node.js
generarea dinamică a conținutului (i.e. marcaje HTML) via un program PHP
+ ilustrarea istoricului modificărilor codului-sursă
rularea unui program Python ce procesează un document XML inclus în spațiul de lucru
facilități de configurare a mediului de execuțieși inspectarea listei proceselor sistemului
pentru posibilități de ajutor + discuții tehnice a se vizita docs.c9.io
Altceva care ar putea fi de interes pentru dezvoltatori?
proiectarea interfeței cu utilizatorul (sketching, wireframing, mockups & prototyping)
unelte în „nori”: FluidUI, Invision, MarvelApp, Moqups, UXPina se parcurge și http://uxdesign.cc/ux-tools/
testare automată a programelor cu instrumentul TDD Bin: http://tddbin.com/
inițiativă: studierea noilor practici ES6 – http://es6katas.org/
realizarea diagramelor și schemelor graficeDraw.io – www.draw.io
Gliffy – www.gliffy.com
MindMup – www.mindmup.com
www.websequencediagrams.com
redactarea (e.g., în LaTeX) și publicarea documentațieiAuthorea, OverLeaf, Papeeria
open participationopen dataopen softwareopen app developmentopen webopen cloudopen (computing) hardware
⛈
Spor la dezvoltat aplicații în „nori”!
ilustrații: Sleeveface – www.sleeveface.com
Top Related