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