O prezentare (pentru ediția 2015 a Școlii de vară "Informatica la Castel" de la Macea, Arad – www.informaticalacastel.ro) descriind o serie de instrumente Web disponibile liber și bazate pe diversele tehnologii aliniate curentului "cloud computing" pentru editarea, testarea, rularea și partajarea de cod-sursă scris în mai multe limbaje de programare. Pentru alte detalii, a se vizita siturile aferente materiilor predate de Sabin Buraga: http://profs.info.uaic.ro/~busaco/teach/

1. Dr. Sabin Buraga
Facultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco
☁
☁
Cu c o dul în nori☀
☁
☁
☁

2. …în „excursiile” noastre (virtuale),
recurgem la aplicații – în general: software

3. 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

4. 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,…

6. aplicații native
pot recurge la platforme/tehnologii/limbaje
proprietare și/sau libere
pot fi utilizate conform unei licențe
(proprietare sau deschise)

7. detalii despre licențele de utilizare a software-ului/datelor la
tldrlegal.com

8. aplicații Web
colecție interconectată de pagini Web
cu conținut generat dinamic,
oferind o funcționalitate specifică

9. 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,…)

10. ☁☁⛭
⛭
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent
Internet
(Web)

11. La ce-am putea recurge
pentru a dezvolta aplicații Web?

12. server de aplicații Web
scop:
eficientizarea proceselor de dezvoltare
a aplicațiilor Web de anvergură

13. 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

14. server de aplicații Web
poate fi integrat în unul/mai multe servere Web
de asemenea, poate oferi propriul server Web
sau mediu de execuție

15. server de aplicații Web
simplifică maniera de invocare
de programe (script-uri) ale unei aplicații Web
generarea de conținut dinamic pe partea de server

16. 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, Zope
Ruby – Cramp, Ruby on Rails, Sinatra,…
Scala – Apache Spark, Akka, Finagle, Play etc.
disponibile cu licențe de utilizare liberă

17. 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ă

18. 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++)

19. cadru de lucru (framework)
oferă suport pentru implementări JavaScript
la nivel de client
exemple populare:
AngularJS, Backbone.JS, Ember
de studiat și www.infoq.com/research/javascript-frameworks-2015

20. 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

21. bibliotecă (library)
poate fi referită de alt cod-sursă (software):
server de aplicații, framework, bibliotecă,
serviciu, API ori componentă Web

22. 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

23. 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

24. 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)
…

25. 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

26. interfață de programare (API)
API public
disponibil pe baza unei licențe de utilizare
API privat
pentru uz intern

27. mash-ups
API-ul de la FitBit oferă acces la
date în formatele JSON și XML

28. 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ă)

29. privire pragmatica
exemplu: acces la API-uri în Python – www.pythonapi.com

30. implementare
De la aplicații la API-uri și servere de aplicații
Brian Mulloy, Web API Design, Apigee, 2012
http://offers.apigee.com/web-api-design-ebook/

31. Care-s elementele
software ce pot fi
reutilizate
în contextul
interacțiunii cu
clientul Web?

32. 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

33. componentă Web
dezvoltare pe baza unei biblioteci sau framework
soluții „clasice” – uzual, la nivel de client:
Dojo Toolkit, jQuery UI,…

34. componentă Web
cadrul general:
Web Components (în lucru la Consorțiul Web)
recurgând la diverse tehnologii HTML5
http://webcomponents.org/

35. widget
aplicație – de sine-stătătoare sau inclusă
într-un container (e.g., un document HTML) –
ce oferă o funcționalitate specifică

36. 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

37. (Web) app
o aplicație (Web) instalabilă
care folosește API-urile oferite de o platformă:
browser, server de aplicații, sistem de operare,…

38. (Web) app
a distributed computer software application
designed for optimal use on specific screen sizes
and with particular interface technologies
Robert Shilston, 2013

39. (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

40. Web browser
app store
single
page
app
platform
(OS + device)
native
app
HTTP
WebSockets
adaptare după Adrian Colyer (2012)
aplicații
Web
și
servicii
(API-uri)
☁ ☁

41. 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.)

42. exemplificare: addons.mozilla.org

43. ⛈
Recurgând la tehnologiile din „nori”,
n-am putea studia, dezvolta și/sau
contribui la software liber?

44. cod-sursă stocat
(code repositories)
instrumente de
dezvoltare (IDE)
mediu de execuție
(runtime environment)
dezvoltare
rulare
adaptaredupăA.Iqbal,M.Haunsenblas,S.Decker(2012)
procesul actual de dezvoltare și exploatare
a aplicațiilor Web – Development As A Service
☁
☁ ☁

45. cod-sursă stocat
(code repositories)
instrumente de
dezvoltare (IDE)
mediu de execuție
(runtime environment)
dezvoltare
rulare
adaptaredupăA.Iqbal,M.Haunsenblas,S.Decker(2012)
☁
☁ ☁
DigitalOcean, Google App Engine,
Heroku, Jelastic, OpenStack,…
BitBucket,
GitHub,…
Web: Cloud9, Koding și altele
desktop: Eclipse, KDevelop etc.

46. precondiția #1:
calculator tradițional (desktop)
și/sau
dispozitiv portabil – de dorit, dotat cu tastatură reală

47. precondiția #2:
acces la Internet

48. precondiția #3:
existența unui navigator Web modern

49. Pentru început, să experimentăm
sau să ne familiarizăm cu diverse
limbaje/paradigme de programare…

50. editare, rulare, partajare de programe
cu Ideone – http://ideone.com/

51. un alt instrument Web, inclusiv
oferind propuneri de concursuri:
CodeChef – www.codechef.com/ide

52. trasarea execuției codului – Python,
Java, JavaScript, Ruby – pentru
a înțelege semantica instrucțiunilor
www.pythontutor.com

53. invocarea de cod PHP
PhpFiddle – http://phpfiddle.org/

54. interogări asupra bazelor de date
SQL Fiddle – http://sqlfiddle.com/

55. entuziaștii altor limbaje/tehnologii
pot consulta lista de la https://fiddles.io/

56. alte soluții vizând programarea în „nori”
www.tutorialspoint.com/codingground.htm

57. EDA Playground – www.edaplayground.com
mediu online pentru proiectarea și simularea
comportamentului circuitelor electronice

58. Ce-ar fi (să învățăm) să creăm
pagini/interfețe Web?

59. editarea on-line a codului HTML/CSS/JavaScript
cu instrumentul JS Bin – jsbin.com

60. experimente CSS (Cascading Style Sheets)
CSSDesk – cssdesk.com

61. 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

62. …și puțin amuzament educativ
CSS Diner – http://flukeout.github.io/

63. un instrument pentru designeri și dezvoltatori Web
pe partea de client (front end)
pentru realizarea de exemple demonstrative
CodePen – http://codepen.io/

64. 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

65. experimente practice de realizare
a designului Web responsiv (aici cu Bootstrap)
www.codeply.com/go

66. …cochetând cu grafica 3D pentru Web
http://webglplayground.net/
WebGL
în conjuncție cu jQuery

67. WebGLStudio – http://webglstudio.org/
o platformă Web pentru creat scene 3D interactive

68. Dar dacă dorim să realizăm aplicații
tradiționale/Web/mobile (mai complexe)?

69. 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)

70. 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

71. studiul de caz #1: Koding – https://koding.com/

72. acces la o mașină disponibilă în „nori”

73. spațiu de lucru oferind consultarea sistemului
de fișiere și editarea codului-sursă

74. …inclusiv cu rularea și testarea unor programe
(aplicații Web) concepute în PHP, Python, Ruby,…

75. …sau realizarea unor aplicații Internet
(aici, editarea, compilarea și rularea în terminal
a unui server TCP și clientul aferent concepute în C)

76. parcurgerea interactivă a sistemului de fișiere
+ testarea în terminal a suportului pentru Java

77. suport inclus pentru ajutor și conversații
de vizitat și http://learn.koding.com/

78. studiul de caz #2: Cloud9 – https://c9.io/

79. crearea unui spațiu de lucru (specific)

80. …și bine-cunoscuta pagină de întâmpinare

81. după plasarea codului-sursă (eventual, via SFTP
ori prin drag & drop), îl putem edita și rula
aici, testarea suportului pentru Node.js

82. generarea dinamică a conținutului
(i.e. marcaje HTML) via un program PHP
+ ilustrarea istoricului modificărilor codului-sursă

83. rularea unui program Python ce procesează
un document XML inclus în spațiul de lucru

84. facilități de configurare a mediului de execuție
și inspectarea listei proceselor sistemului

85. pentru posibilități de ajutor +
discuții tehnice a se vizita docs.c9.io

86. Altceva care ar putea fi de interes
pentru dezvoltatori?

87. proiectarea interfeței cu utilizatorul
(sketching, wireframing, mockups & prototyping)
unelte în „nori”: FluidUI, Invision, MarvelApp, Moqups, UXPin
a se parcurge și http://uxdesign.cc/ux-tools/

88. testare automată a programelor
cu instrumentul TDD Bin: http://tddbin.com/
inițiativă: studierea noilor practici ES6 – http://es6katas.org/

89. realizarea diagramelor și schemelor grafice
Draw.io – www.draw.io
Gliffy – www.gliffy.com
MindMup – www.mindmup.com
www.websequencediagrams.com

90. redactarea (e.g., în LaTeX)
și publicarea documentației
Authorea, OverLeaf, Papeeria

91. open participation
open data
open software
open app development
open web
open cloud
open (computing) hardware





⛈

92. Spor la dezvoltat aplicații în „nori”!
ilustrații: Sleeveface – www.sleeveface.com