Transcription

1 .., ,.....,,,,,..,.., 2017

2 CSS UML

3 UML

4 ,.,., - -., -., -. IT -, ,., -. -, -,,. -.,,,. -. Kubernetes [1] 1 - [2]., -.,,. 4

5 -. 5

6 1 ю я -. Codecademy [3]. Codecademy - : JavaScript, jquery, Java, Python, HTML & CSS, Git..,.,.,. -., -,, -. Codecademy -., -.,. -. «Codecademy Pro», 20$. -, -. JavaRush [4]. JavaRush - Java, Codecademy :. - Intellij IDEA. 6

7 , $ 200$.,, [5]. - python.. brython, - python ,.,,,,. : ) ; ) ; ). 7

8 2 ы 2.1 ы я ы я - : - ( ) ( ). - -, JavaScript. -.. PHP [6], HTML-. -. PHP -, - - ; : WordPress, Joomla, Drupal. - :,. Ruby [7] -,, Perl, Eiffel Smalltalk. Ruby Ruby on Rails, MVC -. Ruby RubyGems, -. Ruby [8]. Python [9] -., Django., -, python - [8]. Node.js [10] JavaScript, V8, JavaScript - 8

9 - - JIT-. Node.js - /, -. (NPM). NW.js, AppJS Electron. Node.js,., - JavaScript -,. 2.2 ы я ь Express Express,, - Node.js[11]. [12]:,, -, HTTP (,..), 14, -,. Express -, HTTP., - - HTTP API.,., Express. -. -, Express., Loopback LoopBack Node.js, Express, : 9

10 REST API,, API, push, -, Android, ios, JavaScript SDKs. Loopback API Explorer. -,, -. -,, loopback-cli Meteor Meteor [13] JavaScript,. - Meteor :,. Meteor - DDP. JSON-, -,,,. MongoDB., -,.,,, HTML-,. Meteor 3 - : Blaze, React Angular. Blaze Meteor. Handlebars. - Atmosphere [14]. - JavaScript, - Meteor - -,. 10

11 2.2.2 я ь Angular Angular [15] HTML JavaScript, JavaScript. -,, -. Angular, -., -,,. Angular HTML. -, (, - )., -. HTML.. Angular :.,, -. JavaScript DOM React React [16] JavaScript. MVC ( - - ) React V ( ).. JSX, - JavaScript, 11

12 HTML. -. DOM. React, DOM. Redux [17], -., -, CSS CSS-, -, - ё (..)., CSS-, css-, ( - - ) Bootstrap [18] CSS- -., -,. JavaScript-. Skeleton [19] JavaScript CSS, -,. Skeleton. -. Materialize [20], CSS - (Material Design), Google. Materialize - -. CSS,,. 12

13 2.2.4 ы ы - Node.Js., Meteor: -, -,,. -, : Blaze, MongoDB. CSS Materialize - Material Design. 2.3 ы ы : -,, : ),.,,, -. Meteor. ),,. Meteor. ),. MongoDB. 13

14 1 - Loopback Express Meteor Full-stack - API HTTP JavaScript - - -, API - API Explorer, HTTP - -, - JavaScript,, - - SDK, websocket, websocket >8000 >29000 >36000 GitHub Node.js Push - -,, Login Express, npm -, OAuth 2.0, Express / MongoDB,, MongoDB, MySQL MySQL, Oracle, PostgreSQL PostgreSQL, SQL Server, ATG, , REST, SOAP 14

15 1 ),, -,. ) DDP Meteor. ) HTTP, ё, - ( ) ( - ),. -, :, -, ,., - -,. -, -. 15

16 2 2.4 ь ы ы - ( ):,. -. 3,, : 16

17 3 4 ) ; ) ; ), ; 17

18 ) ; ), ; ), - -. :,,, ; ), -. - :,,,, ; ), -, ; ) -,,, ; ),,,. - :,, ; ) - (, ); ) - ; 2.5 ы ы MongoDB JSON- ( - JavaScript). - : «users», «courses», «lessons», «exercises», «jobs», «runners». 5.,., -,. «users» : id, 18

19 5,,,. «courses» : id,, -. «lessons» - : id,,,,, id. «exercises» : id,,,, id, -. «runners» : id,, (,, - ),, -. «jobs», :,, - ( ),,. 19

20 3 ы я я , - «imports/» [21]., - Meteor,, «import». - «imports/» - [21]. - «client/main.js» «client/server.js». Meteor, - «server». «main.js»,. 6, 3. «imports/» : ) «imports/api» ) «imports/startup» ) «imports/ui» «public». «package.json» -, npm. «i18n/ru.i18n.json» Meteor - Mongo.Collection.,, - insert(), update() delete(). - 20

21 6-7 lessons,., MongoDB,,, - [22]., -,, -.,., [22]. Meteor - «Simple Schema» [23]. «lessons»

22 7 lessons 8, SimpleSchema, «aldeed:collection2-core» [24], -, -. «lessons» : 22

23 Lessons.attachSchema(Lessons.schema);., -. «percolate:migrations» [25]. 9 «wasonlineat». 9 : Migrations.migrateTo('latest'); ы Meteor -. - API,., - [26] , - 11.,, Courses., 2. 23

24 2 lessons.incourse courseid, - exercises.inlesson lessonid, - exercise exerciseid -,,. runners.registrationtoken - runners jobs accesstoken -. users.roles - user.publicfields - 24

25 10, ы Meteor, -,. API.,, - [27] : ) lessons.updatetext. : 1) lessonid id 2) newtext ) lessons.updatename. : 1) lessonid id 2) newname 25

26 ) lessons.insert id. - : 1) name 2) text 3) courseid id, ) lessons.remove. : 1) lessonid id ) lessons.changeindex.. : 1) lessonid id 2) index. ) lessons.moveforward. : 1) lessonid id ) lessons.movebackward. : 1) lessonid id ) courses.update., courseid. : 1) courseid id 2) name 3) description 4) scripts, build run,. ) exercises.insert ё id. : 1) name 2) lessonid id, 3) description 4) tests, -. ) exercises.remove. : 1) exerciseid id ) exercises.update. : 26

27 1) exerciseid id 2) exercisechanges,, ) runners.createregistrationtoken.. ) runners.register -.. : 1) registrationtoken 2) name ) runners.unregister -. : 1) accesstoken ) runners.remove -. : 1) runnerid id ) runners.updatestatus (,, ). : 1) accesstoken 2) status ) runners.checkoffline ) jobs.run.. ). : 1) scripts build run, - 2) source 3) input ) jobs.test. -. ). : 1) scripts build run, - 27

28 2) source 3) tasks, - input,, output,. ) jobs.update -. : 1) accesstoken 2) jobid id 3) jobchanges,, - ) users.addrole. : 1) userid id 2) role ) users.removerole. : 1) userid id 2) role ) users.setexerciseaspassed -. : 1) exerciseid id ь ь Meteor Blaze. ё - Spacebars [28]. Spacebars HTML, : {{ }}.., - 13, - JavaScript. 13 courses , 15, «profile-settings»: 28

29 {{> }}.. «Course_card» : {{> Course_card course=course}} - jquery trumbowyg [29]. ace [30] я - URL-. URL - 29

30 : ) URL-, - ), - ) URL- -., - HTML, URL- -., 30

31 HTTP, -., Meteor - : - DDP., -,, -., URL-, URL [31]., URL URL-, URL-.,, - «kadira:flow-router» [32] ,, - 18 : ) «/exercises/:exerciseid/edit», exerciseid id. ) - ( ).,. ) Exercise_edit_page App_body. ( ). - 31

32 {{> Template.dynamic}}. 19 App_body 19, App_body, App_body, - : ) )

33 ) ) ) ) ) ) ) ) ) ) ) ) ь я,,,,.,. -,,,, - [33]. Meteor «meteor test». «-» [33]., : ),. ), *.test[s].*, *.spec[s].*. ) Meteor.isTest )., -,,. -,, -,. - 33

34 . «meteor test»,. [33] - Mocha [34] Chai [35] ). 3.2 я ь ь, Node.js,,,. : ), -. ). ) -, -,. : ) ). ).. ). ), , - 34

35 22 UML., :.., 2 :,,. DDP asteroid [36]. 35

36 4 ь я 4.1 ы я : ) Meteor «curl sh» ) «meteor npm install; meteor» ) - « 4.2 ь я,. ( 23). 23 ( 24), ( 25)., 36

37 25.,., - ( 26). -., ,., -., ( 27) : 37

38 27 ) ) ), -., , «-»( 28). -,, ( 29). 4.3 я, -, ,

39 ( 31) -,. - 39

40 , -. -.,,,. 31, 32, -, ( 33), -,. 4.4,. ( 34). 40

41 ( 35). -, id, ,. 41

42 я «node» «npm». : ) npm install ) «node./dist/register.js --token=< окен> --url=<ад е >», - -, - DDP «ws://*/websocket», «ws://localhost:3000/websocket». ) «node./dist/runner.js» docker-. «docker build.», «docker pull docker pull mirzam/courses-runner». -, url token., : «docker run -it -e url=ws://localhost:3000/websocket -e token=< окен> mirzam/courses-runner». 42

43 Ч -,, -, -. -,. -,. -. : ) Meteor - JavaScript; ) - css- Materialize; ) - ; ), -. -, -,., -.. Meteor, css- Materialize.. - « 43

44 Ь Ы Ч 1. Kubernetes Documentation [ ]. Overview. - : kubernetes-basics/ [ ]. -. : 3. Codecademy [ ]. Learn to code. : 4. JavaRush [ ]. - - Java. : 5. [ ].. : 6. PHP [ ]. Hypertext Preprocessor. : 7. Ruby [ ]. Ruby. : 8. benchmarksgame [ ]. The Computer Language Benchmarks Game. : alioth.debian.org/ [ ]. About Python. : nodejs.org [ ]. : org/en/. 11. Express [ ]. Node.js web application framework. - : Express GitHub [ ]. : Meteor [ ]. Build apps with JavaScript. - : Atmosphere [ ]. The trusted source for JavaScript packages, Meteor resources and tools. : atmospherejs.com/. 15. Angular docs [ ]. Architecture Overview. - : 44

45 architecture.html. 16. React [ ]. A JavaScript library for building user interfaces. : react/. 17. Redux [ ]. Data Flow. : redux.js.org/docs/basics/dataflow.html. 18. Bootstrap GitHub [ ]. : Skeleton GitHub [ ]. : Materialize [ ]. Documentation. : Meteor Guide [ ]. Application Structure. - : Meteor Guide [ ]. Collections and Schemas. - : schemas. 23. simpl-schema npmjs [ ]. : aldeed:collection2-core GitHub [ - ]. : meteor-collection2-core. 25. percolate:migrations Atmosphere [ ]. : migrations. 26. Meteor Guide [ ]. Publications and Data Loading. - : Meteor Guide [ ]. Methods. : https: //guide.meteor.com/methods.html. 28. BlazeJS [ ]. Spacebars templates. : Trumbowyg GitHub [ ]. : Ace [ ]. The High Performance Code Editor for the 45

46 Web. : Meteor Guide [ ]. URLs and Routing. - : FlowRouter GitHub [ ]. : Meteor Guide [ ]. Testing. : https: //guide.meteor.com/testing.html. 34. Mocha - the fun, simple, flexible JavaScript test framework [ - ]. : Chai [ ]. : Asteroid GitHub [ ]. : 46

47 UML я ь я ь ь 47

48 UML я я 48

49 ь ь я 49

50 ы я ы ь ь 001: import { Meteor } from 'meteor/meteor'; 002: import { Random } from 'meteor/random'; 003: import { ValidatedMethod } from 'meteor/mdg:validated-method'; 004: import SimpleSchema from 'simpl-schema'; 005: import { Roles } from 'meteor/alanning:roles'; 006: import { _ } from 'meteor/underscore'; 007: import { Jobs } from './jobs.js'; 008: import { Runners } from '../runners/runners.js'; 009: 010: function waitforjob(jobid, callback) { 011: Jobs.find().observe({ 012: changed(newdocument) { 013: if (newdocument._id === jobid && newdocument.isdone) { 014: callback(null, newdocument.tasks); 015: } 016: }, 017: }); 018: } 019: 020: function findrunnerid() { 021: const readyrunner = Runners.findOne({ status: 'ready' }); 022: if (_.isobject(readyrunner)) { 023: return readyrunner._id; 024: } 025: const busyrunner = Runners.findOne({ status: 'busy' }); 026: if (_.isobject(busyrunner)) { 027: return busyrunner._id; 028: } 029: return null; 030: } 50

51 031: 032: export const run = new ValidatedMethod({ 033: name: 'jobs.run', 034: validate: new SimpleSchema({ 035: scripts: Object, 036: 'scripts.build': String, 037: 'scripts.run': String, 038: source: String, 039: input: { 040: type: String, 041: optional: true, 042: }, 043: }).validator({ clean: true, filter: false }), 044: run({ scripts, source, input }) { 045: let runnerid; 046: if (!this.issimulation) { 047: runnerid = findrunnerid(); 048: if (!runnerid) { 049: throw new Meteor.Error('jobs.noRunners', 'There are no runners to handle this job'); 050: } 051: } else { 052: runnerid = Random.id(); 053: } 054: const jobtorun = { 055: isdone: false, 056: scripts, 057: source, 058: jobtype: 'run', 059: tasks: [{ 060: input, 061: }], 062: createdat: new Date(), 063: assignedrunnerid: runnerid, 51

52 064: }; 065: const jobid = Jobs.insert(jobToRun); 066: const waitforjobsync = Meteor.wrapAsync(waitForJob); 067: const tasks = waitforjobsync(jobid); 068: if (tasks) { 069: return tasks[0].output ''; 070: } 071: return ''; 072: }, 073: }); 074: 075: export const test = new ValidatedMethod({ 076: name: 'jobs.test', 077: validate: new SimpleSchema({ 078: scripts: Object, 079: 'scripts.build': String, 080: 'scripts.run': String, 081: source: String, 082: tasks: Array, 083: 'tasks.$': Object, 084: 'tasks.$.input': String, 085: 'tasks.$.output': String, 086: }).validator({ clean: true, filter: false }), 087: run({ scripts, source, tasks }) { 088: let runnerid; 089: if (!this.issimulation) { 090: runnerid = findrunnerid(); 091: if (!runnerid) { 092: throw new Meteor.Error('jobs.noRunners', 'There are no runners to handle this job'); 093: } 094: } else { 095: runnerid = Random.id(); 096: } 52

53 097: const jobtorun = { 098: isdone: false, 099: scripts, 100: source, 101: jobtype: 'test', 102: tasks, 103: createdat: new Date(), 104: assignedrunnerid: runnerid, 105: }; 106: const jobid = Jobs.insert(jobToRun); 107: const waitforjobsync = Meteor.wrapAsync(waitForJob); 108: const result = waitforjobsync(jobid); 109: return result; 110: }, 111: }); 112: 113: export const update = new ValidatedMethod({ 114: name: 'jobs.update', 115: validate: new SimpleSchema({ 116: accesstoken: Runners.simpleSchema().schema('accessToken'), 117: jobid: String, 118: jobchanges: Object, 119: 'jobchanges.isdone': Boolean, 120: 'jobchanges.tasks': Array, 121: 'jobchanges.tasks.$': Object, 122: 'jobchanges.tasks.$.output': { 123: type: String, 124: optional: true, 125: }, 126: 'jobchanges.tasks.$.error': { 127: type: String, 128: optional: true, 129: }, 130: }).validator({ clean: true, filter: false }), 53

54 131: run({ accesstoken, jobid, jobchanges }) { 132: const runner = Runners.findOne({ accesstoken }); 133: if (!runner) { 134: throw new Meteor.Error('job.invalidAccessToken', 'Must have valid token to do this'); 135: } 136: const oldtasks = Jobs.findOne(jobId).tasks; 137: const updatedtask = []; 138: _.each(oldtasks, (element, index) => { 139: updatedtask.push({ 140: input: element.input, 141: output: jobchanges.tasks[index].output, 142: error: jobchanges.tasks[index].error }); 143: }); 144: Jobs.update(jobId, { 145: $set: { 146: isdone: jobchanges.isdone, 147: tasks: updatedtask, 148: }, 149: }); 150: }, 151: }); 152: 54

55