Cu codul în "nori"
5 likes4,530 views
Documentul discută despre dezvoltarea aplicațiilor web, evidențiind aplicațiile native și web, care interacționează cu utilizatorul prin diverse modalități. Este explorată utilizarea serverelor de aplicații web, limbajelor de programare și cadrelor de lucru (framework-uri) care facilitează crearea de aplicații complexe. De asemenea, se menționează resursele necesare pentru dezvoltarea în cloud și diverse instrumente web pentru programare, testare și design.
Cu codul în "nori"
- 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,…)
- 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.)
- 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