O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Cu codul în "nori"

3.223 visualizações

Publicada em

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/

Publicada em: Tecnologia

Cu codul în "nori"

  1. 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. 2. …în „excursiile” noastre (virtuale), recurgem la aplicații – în general: software
  3. 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. 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,…
  5. 5. aplicații native pot recurge la platforme/tehnologii/limbaje proprietare și/sau libere pot fi utilizate conform unei licențe (proprietare sau deschise)
  6. 6. detalii despre licențele de utilizare a software-ului/datelor la tldrlegal.com
  7. 7. aplicații Web colecție interconectată de pagini Web cu conținut generat dinamic, oferind o funcționalitate specifică
  8. 8. 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,…)
  9. 9. ☁☁⛭ ⛭ Client interfață cu utilizatorul Server sit/aplicație Web Date stocate persistent Internet (Web)
  10. 10. La ce-am putea recurge pentru a dezvolta aplicații Web?
  11. 11. server de aplicații Web scop: eficientizarea proceselor de dezvoltare a aplicațiilor Web de anvergură
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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ă
  16. 16. 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ă
  17. 17. 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++)
  18. 18. 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
  19. 19. 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
  20. 20. bibliotecă (library) poate fi referită de alt cod-sursă (software): server de aplicații, framework, bibliotecă, serviciu, API ori componentă Web
  21. 21. 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
  22. 22. 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
  23. 23. 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) …
  24. 24. 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
  25. 25. interfață de programare (API) API public disponibil pe baza unei licențe de utilizare API privat pentru uz intern
  26. 26. mash-ups API-ul de la FitBit oferă acces la date în formatele JSON și XML
  27. 27. 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ă)
  28. 28. privire pragmatica exemplu: acces la API-uri în Python – www.pythonapi.com
  29. 29. 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/
  30. 30. Care-s elementele software ce pot fi reutilizate în contextul interacțiunii cu clientul Web?
  31. 31. 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
  32. 32. componentă Web dezvoltare pe baza unei biblioteci sau framework soluții „clasice” – uzual, la nivel de client: Dojo Toolkit, jQuery UI,…
  33. 33. componentă Web cadrul general: Web Components (în lucru la Consorțiul Web) recurgând la diverse tehnologii HTML5 http://webcomponents.org/
  34. 34. widget aplicație – de sine-stătătoare sau inclusă într-un container (e.g., un document HTML) – ce oferă o funcționalitate specifică
  35. 35. 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
  36. 36. (Web) app o aplicație (Web) instalabilă care folosește API-urile oferite de o platformă: browser, server de aplicații, sistem de operare,…
  37. 37. (Web) app a distributed computer software application designed for optimal use on specific screen sizes and with particular interface technologies Robert Shilston, 2013
  38. 38. (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
  39. 39. 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) ☁ ☁
  40. 40. 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.)
  41. 41. exemplificare: addons.mozilla.org
  42. 42. ⛈ Recurgând la tehnologiile din „nori”, n-am putea studia, dezvolta și/sau contribui la software liber?
  43. 43. 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 ☁ ☁ ☁
  44. 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) ☁ ☁ ☁ DigitalOcean, Google App Engine, Heroku, Jelastic, OpenStack,… BitBucket, GitHub,… Web: Cloud9, Koding și altele desktop: Eclipse, KDevelop etc.
  45. 45. precondiția #1: calculator tradițional (desktop) și/sau dispozitiv portabil – de dorit, dotat cu tastatură reală
  46. 46. precondiția #2: acces la Internet
  47. 47. precondiția #3: existența unui navigator Web modern
  48. 48. Pentru început, să experimentăm sau să ne familiarizăm cu diverse limbaje/paradigme de programare…
  49. 49. editare, rulare, partajare de programe cu Ideone – http://ideone.com/
  50. 50. un alt instrument Web, inclusiv oferind propuneri de concursuri: CodeChef – www.codechef.com/ide
  51. 51. trasarea execuției codului – Python, Java, JavaScript, Ruby – pentru a înțelege semantica instrucțiunilor www.pythontutor.com
  52. 52. invocarea de cod PHP PhpFiddle – http://phpfiddle.org/
  53. 53. interogări asupra bazelor de date SQL Fiddle – http://sqlfiddle.com/
  54. 54. entuziaștii altor limbaje/tehnologii pot consulta lista de la https://fiddles.io/
  55. 55. alte soluții vizând programarea în „nori” www.tutorialspoint.com/codingground.htm
  56. 56. EDA Playground – www.edaplayground.com mediu online pentru proiectarea și simularea comportamentului circuitelor electronice
  57. 57. Ce-ar fi (să învățăm) să creăm pagini/interfețe Web?
  58. 58. editarea on-line a codului HTML/CSS/JavaScript cu instrumentul JS Bin – jsbin.com
  59. 59. experimente CSS (Cascading Style Sheets) CSSDesk – cssdesk.com
  60. 60. 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
  61. 61. …și puțin amuzament educativ CSS Diner – http://flukeout.github.io/
  62. 62. un instrument pentru designeri și dezvoltatori Web pe partea de client (front end) pentru realizarea de exemple demonstrative CodePen – http://codepen.io/
  63. 63. 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
  64. 64. experimente practice de realizare a designului Web responsiv (aici cu Bootstrap) www.codeply.com/go
  65. 65. …cochetând cu grafica 3D pentru Web http://webglplayground.net/ WebGL în conjuncție cu jQuery
  66. 66. WebGLStudio – http://webglstudio.org/ o platformă Web pentru creat scene 3D interactive
  67. 67. Dar dacă dorim să realizăm aplicații tradiționale/Web/mobile (mai complexe)?
  68. 68. 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)
  69. 69. 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
  70. 70. studiul de caz #1: Koding – https://koding.com/
  71. 71. acces la o mașină disponibilă în „nori”
  72. 72. spațiu de lucru oferind consultarea sistemului de fișiere și editarea codului-sursă
  73. 73. …inclusiv cu rularea și testarea unor programe (aplicații Web) concepute în PHP, Python, Ruby,…
  74. 74. …sau realizarea unor aplicații Internet (aici, editarea, compilarea și rularea în terminal a unui server TCP și clientul aferent concepute în C)
  75. 75. parcurgerea interactivă a sistemului de fișiere + testarea în terminal a suportului pentru Java
  76. 76. suport inclus pentru ajutor și conversații de vizitat și http://learn.koding.com/
  77. 77. studiul de caz #2: Cloud9 – https://c9.io/
  78. 78. crearea unui spațiu de lucru (specific)
  79. 79. …și bine-cunoscuta pagină de întâmpinare
  80. 80. după plasarea codului-sursă (eventual, via SFTP ori prin drag & drop), îl putem edita și rula aici, testarea suportului pentru Node.js
  81. 81. generarea dinamică a conținutului (i.e. marcaje HTML) via un program PHP + ilustrarea istoricului modificărilor codului-sursă
  82. 82. rularea unui program Python ce procesează un document XML inclus în spațiul de lucru
  83. 83. facilități de configurare a mediului de execuție și inspectarea listei proceselor sistemului
  84. 84. pentru posibilități de ajutor + discuții tehnice a se vizita docs.c9.io
  85. 85. Altceva care ar putea fi de interes pentru dezvoltatori?
  86. 86. 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/
  87. 87. testare automată a programelor cu instrumentul TDD Bin: http://tddbin.com/ inițiativă: studierea noilor practici ES6 – http://es6katas.org/
  88. 88. realizarea diagramelor și schemelor grafice Draw.io – www.draw.io Gliffy – www.gliffy.com MindMup – www.mindmup.com www.websequencediagrams.com
  89. 89. redactarea (e.g., în LaTeX) și publicarea documentației Authorea, OverLeaf, Papeeria
  90. 90. open participation open data open software open app development open web open cloud open (computing) hardware      ⛈
  91. 91. Spor la dezvoltat aplicații în „nori”! ilustrații: Sleeveface – www.sleeveface.com

×