Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Ez difikirim ku min di kariyera xwe ya IT-ê de bi dehan pêşkêşî ji hevkar, xerîdar û axaftina gelemperî re kiriye. Bi gelek salan, Powerpoint ji bo min wekî amûrek hilberîna slaytê bijarek xwezayî û pêbawer e. Lê îsal rewş bi kalîte guheriye. Ji meha sibatê heta gulanê derfeta min hebû ku ez di pênc konferansan de biaxivim û diviyabû slaytên raporan di demeke kurt de, lê bi kalîte, bihatana amadekirin. Pirs der barê şandina wê beşa xebatê ya di derbarê sêwirana dîtbarî ya slaytan de ji kesên din re derket holê. Carekê min hewl da ku bi sêwiranek re bixebitim, pelên .pptx bi postayê bişînim, lê kar veguherî kaosê: kesî nizanibû kîjan guhertoya slaytan "nûtirîn" e, û ji ber cudahiya di Powerpoint de sêwirana "livîn" bû. guherto û tîpên li ser makîneyên me. Û min biryar da ku tiştek nû biceribînim. Min ew ceriband, û ji hingê ve ez nefikirîm ku vegerim Powerpoint.

Em çi dixwazin

Nêzîkî sal û nîv berê, pargîdaniya me dev ji karanîna Word-ê berda ji bo afirandina belgeyên projeyê, ji ber ku rastî heman pirsgirêkan hat: her çend Word ji bo nivîsandina belgeyek piçûk baş e, her ku hejmûn mezin dibe, bi hevkarî û bidestxistina kalîteya bilind û bilind re zehmetî derdikevin. sêwirana yekgirtî. Hilbijartina me bi ser ket AsciiDoctor, û em tu carî dev ji şabûna vê hilbijartinê bernadin, lê ev mijarek ji bo gotarek cihê ye. Di heman demê de, em fêrî bandorkeriya yek ji prensîbên DevOps yên "her tişt wekî kod" bûn, ji ber vê yekê bijartina hewcedariyên teknolojiya nû ji bo afirandina slaytên pêşkêşkirinê pir eşkere bû:

  1. Divê pêşkêşî bi zimanekî nîşankirinê pelek nivîsê ya sade be.
  2. Slaydên me di derbarê projeyên pêşkeftinê de ne, ji ber vê yekê divê nîşankirin wê hêsan bike, bêyî ku serî li pergalên derveyî bide.
    • parçeyên kodê yên bi ronîkirina hevoksaziyê,
    • nexşeyên hêsan ên di forma şiklên geometrîkî de bi tîran ve girêdayî ne,
    • Diagramên UML, nexşeyên herikandinê û hêj bêtir.
  3. Pêşniyara pêşkêşkirinê divê di pergala kontrola guhertoyê de were hilanîn.
  4. Divê erêkirin û komkirina slaytên qediyayî di pergalek CI de were kirin.

Îro, du vebijarkên bingehîn ji bo afirandina slaytan di zimanên nîşankirinê de hene: pakêt projektor ji bo LaTeX an yek ji çarçoveyên çêkirina slaytan bi karanîna HTML/CSS (RevealJS, bingotin, deck.js û gelekên din).

Her çend giyanê min di LaTeX-ê de ye, hişê min ferman da ku bijartina çareseriyek ku ez ê ne tenê bikar bînim divê li kêleka çareseriyek ku ji xeleka berfireh a mirovan re naskirî be. Ne her kes LaTeX-ê nizane, û heke pratîka weya rojane bi nivîsandina gotarên zanistî ve ne girêdayî be, wê hingê hûn ne mimkûn e ku wextê we hebe ku hûn xwe di cîhana mezin, tevlihev a vê pergalê de bihelînin.

Lêbelê, serweriya HTML/CSS ne bi rastî jêhatîbûnek berbelav e: Mînakî, ez ji jêhatîbûna bi tevahî dûr im. Xweşbextane, AsciiDoctor-a jixwe naskirî tê alîkariyê: veguherînerek asciidoctor-revealjs dihêle hûn bi karanîna nîşankirina AsciiDoctor slaytên RevealJS biafirînin. Û hînbûna wê hêsan e û ji her kesî re tê gihîştin!

Meriv çawa slaytan kod dike

Ji bo têgihîştina cewhera slaytên kodkirinê yên li ser AsciiDoctor, awayê herî hêsan dayîna mînakên taybetî ye. Vana hemî ji slaytên rastîn in ku min îsal ji bo pêşniyarên konferansa xwe çêkir.

Slaydek bi sernav û navnîşek tiştên ku yek li pey hev vedibin:

== Зачем нам Streams API?

[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабирование

Di encama

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Sernav û pişka koda çavkaniyê bi ronîkirina hevoksaziyê:

== Kafka Streams API: общая структура KStreams-приложения

[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции

Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----

Di encama

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Di amadekirina axaftinê de, demoyên kodê di bin guheztin û çêtirkirinên dubare de dibin, ji ber vê yekê şiyana kopîkirin û pêvekirina bi lez "koda xav" rasterast di slaydekê de bê qîmet e, û piştrast dike ku demo nûvekirî ye bêyî ku xema ronîkirina hevoksaziyê bike.

Sernav, nîgar û nivîs (sazkirina li ser slaytê di hucreyan de tê çêkirin Tabloyên AsciiDoctor):

== Kafka Streams in Action

[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===

Di encama

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Carinan sernavek ne hewce ye, û ji bo ronîkirina xala xwe hûn tenê wêneyek tev-screen hewce ne:

[%notitle]
== Жить в легаси нелегко

image::swampman.jpg[canvas, size=cover]

Di encama

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Gelek caran pêdivî ye ku ramanek bi xêzek hêsan, di forma "çargoşeyên ku bi tîran ve girêdayî ne" were piştgirî kirin. Xwezî, AsciiDoctor bi pergalê re yekbûyî ye Graphviz - zimanek ku destûrê dide te ku hûn diyagramên grafîkan li ser bingeha danasîna xalî û girêdanên di navbera wan de diyar bikin. Graphviz kelek fêrbûnê digire, lê li ser bingeha nimûneyên peydakirî, kirina wê pir hêsan e! Ev e ku ew xuya dike:

== Пишем “Bet Totalling App”

Какова сумма выплат по сделанным ставкам, если сыграет исход?

[graphviz, "counting-topology.png"]
-----
digraph G {
graph [ dpi = 150 ];
rankdir="LR";
node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"];
Store [shape="cylinder"; label="Local Store"; fixedsize="true"; width="1.5"]
Source -> MapVal -> Sum -> Sink
Sum -> Store [dir=both; label=" n "]
{rank = same; Store; Sum;}
}
-----

Di encama

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Di rewşa ku pêdivî ye ku sernavê li ser wêneyê biguhezînin, arasteka tîrê biguhezînin û hwd., ev dikare rasterast di koda pêşkêşkirinê de were kirin, li şûna ku wêneyê li cîhek ji nû ve xêz bike û ji nû ve têxe nav slaytê. Ev bi girîngî leza xebata li ser slaytan zêde dike.

Mînakek tevlihevtir:

== Невоспроизводимая сборка
[graphviz, "unstable-update.png"]
-----
digraph G {
  rankdir="LR";
  graph [ dpi = 150 ];
  u -> r0;
  u[shape=plaintext; label="linter updaten+ 13 warnings"]
  r0[shape=point, width = 0]
  r1 -> r0[ arrowhead = none, label="master branch" ];
  r0-> r2 [];   b1 -> b4;  r1->b1
  r1[label="150nwarnings"]
  b1[label="± 0nwarnings"]
  b4[label="± 0nwarnings"]
  b4->r2
  r2[label="163nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>]
  {rank = same; u; r0; b4;}
}
-----

Di encama

Pêşkêşkirina wekî kod, an çima ez êdî Powerpoint bikar naynim

Bi awayê, hêsan e ku hûn bi Graphviz re ceribandin û wêneyên li ser rûpelê debug bikin Graphviz liserxetê.

Di dawiyê de, heke hûn hewce ne ku nexşeyek rêkûpêk, diagramek pola an diyagramek din a standardkirî têxin slaytek, wê hingê pergalek din a ku bi AsciiDoctor re yekbûyî dikare were rizgariyê, PlantUML. Hevkarê min Nikolai Potashnikov li ser kapasîteyên berfireh ên PlantUML nivîsî post cuda.

Veguheztina projeya pêşkêşkirinê li koda ku li ser pergalek kontrolkirina guhertoyê hatî hilanîn dihêle ku meriv xebata hevbeş li ser pêşkêşiyê organîze bike, berî her tiştî, ji hev veqetandina karên afirandina naverok û sêwiranê. Di RevealJS de sêwirana slaytan (font, paşeroj, kêşan) bi karanîna CSS-ê tê vegotin. Zehmetiya min a kesane ya bi CSS re çêtirîn tê vegotin ev gif - lê ne tirsnak e dema ku mirovên ku bi CSS-ê re ji min pir jêhatîtir û zûtir dixebitin hene. Wekî encamek, derdikeve holê ku digel demek zû nêzîkbûna demek ji bo pêşkêşiyekê, em dikarin bi riya Git-ê bi hevdemî li ser pelên cûda bixebitin û gava ku pelên .pptx bi e-nameyê dişînin lezek hevkariyê pêşve bibin.

Avakirina rûpelek HTML-ê bi slaytan

Çavkaniyên nivîsê yên sade mezin in, lê hûn çawa wan di pêşkêşiyê de bi xwe berhev dikin?

AsciiDoctor projeyek e ku bi Ruby hatî nivîsandin, û çend awayên xebitandina wê hene. Pêşîn, hûn dikarin zimanê Ruby saz bikin û rasterast asciidoctor bimeşînin, ku dibe ku tiştê herî nêzîk ji pêşdebirên Ruby re ye.

Heke hûn naxwazin bi sazkirina Ruby re tevlihev bibin, hûn dikarin wêneya docker bikar bînin asciidoctor/docker-asciidoctor, ku tê de, dema ku were destpêkirin, hûn dikarin peldankê bi çavkaniyên projeyê bi VOLUME ve girêdin û encamê li cîhek diyar bistînin.

Vebijarka ku min hilbijart dibe ku hinekî nediyar xuya bike, lê ew ji bo min wekî pêşdebirek Java ya herî hêsan e. Ew sazkirina Ruby an docker hewce nake, lê dihêle hûn bi karanîna skrîptek Maven slaytan biafirînin.

Mesele ew e ku proje JRuby - Pêkanîna Java ya zimanê Ruby ew qas baş e ku dihêle hûn hema her tiştê ku ji bo Ruby hatî afirandin di makîneyek Java de bimeşînin, û xebitandina AsciiDoctor yek ji karanîna herî gelemperî ya JRuby ye.

berdestbûnî asciidoctor-maven-plugin destûrê dide te ku hûn belgeyên AsciiDoctor ku beşek projeyek Java-yê ye (ya ku em bi çalak bikar tînin) berhev bikin. Di heman demê de, AsciiDoctor û JRuby ji hêla Maven ve bixweber têne dakêşandin, û AsciiDoctor di hawîrdora JRuby de dimeşe: hewce ne ku tiştek li ser makîneyê saz bikin! (Ji bilî pakêtê graphviz, ya ku hewce ye heke hûn dixwazin grafikên GraphViz an PlantUML bikar bînin.) Bi tenê pelên .adoc xwe di peldankekê de bi cih bikin src/main/asciidoc/. Li vir mînakek pomnikkomkirina slaytên bi diagram.

Slides veguherînin PDF

Her çend guhertoya HTML-ê ya slaytan têra xwe bixwe ye, dîsa jî pêdivî ye ku guhertoyek PDF-ê ya slaytan hebe. Ya yekem, diqewime ku di hin konferansan de ku ji axaftvan re fersenda girêdana laptopa xwe nadin, ew slaytên "bi hişkî di forma pptx an pdf" de hewce dikin, bêyî ku hêvî bikin ku ew jî di HTML-ê de ne. Ya duyemîn, baş e ku hûn ji organîzatoran re guhertoyek neguherbar a slaytên xwe yên ku di raporê de hatine xuyang kirin, bi forma PDF-ê ji bo weşandina pelê di materyalên konferansê de bişînin.

Xweşbextane, kargêriya Node.js vî karî dike. decktape, li ser bingehê ava kirin puppeteer - pergalên otomasyonê ji bo birêvebirina geroka Chrome. Hûn dikarin bi fermanê pêşandana RevealJS veguherînin PDF

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf  

Du hîle dema destpêkirina decktape-ê, yên ku me neçar ma ku bi ceribandin û xeletiyê bigihîjin wan:

  • çareseriya bi rêya parametre -s divê bi marjînalek du qat were destnîşan kirin, wekî din di encamên veguheztinê de dibe ku pirsgirêk hebin

  • di URL-ya guhertoya HTML ya pêşkêşiyê de hûn hewce ne ku pîvanek derbas bikin ?fragments=true, ya ku dê ji bo her rewşek navîn a slideya we rûpelek PDF-ê ya cihê biafirîne (mînak, pênc rûpel ji bo pênc xalên guleyan heke ew yek li dû hev werin xuyang kirin). Ev ê bihêle ku hûn di dema raporê de PDFek wusa bi serê xwe wekî pêşkêşiyek bikar bînin.

Civîn û weşandina otomatîkî li ser malperê

Gava ku guheztin di pergala kontrolkirina guhertoyê de têne çêkirin dema ku slayd bixweber têne berhev kirin hêsan e, û dema ku slaytên bixweber berhevkirî ji bo karanîna gelemperî li ser Înternetê têne şandin hêsantir e. Slaydên ji Înternetê dikarin bi hêsanî li ber temaşevanan ji her makîneyek ku bi Înternetê ve girêdayî ye û projektorek ve girêdayî "lîstin".

Ji ber ku em di xebata xwe de GitHub bikar tînin, bijartina xwezayî ya pergala CI-ê ye TravisCI, û ji bo mêvandariya pêşandanên amade - github.io. Fikra li pişt github.io ev e ku her naverokek statîk ku li şaxek hatî şandin gh-pages projeya we ya li ser GitHub, li ser peyda dibe <ваше имя>.gihub.io/<ваш проект>.

Pelê veavakirina TravisCI tije bikin, di nav de berhevkirina guhertoya HTML-ê ya rûpelê bi karanîna Maven, veguheztina PDF-ê bi karanîna decktape-yê, û barkirina encaman li ser mijarekê. gh-pages ji bo weşana li ser github.io, dixuye wiha.

Ji bo avakirina projeyek wusa li ser milê TravisCI, hûn hewce ne ku guhêrbarên jîngehê mîheng bikin

  • GH_REF - nirxa mîna github.com/inponomarev/csa-hb
  • GH_TOKEN - Nîşana gihîştina GitHub. Hûn dikarin wê ji GitHub di mîhengên profîla xwe de, Mîhengên Pêşdebir -> Nîşaneyên Gihîştina Kesane bistînin. Ger hûn pêşkêşiyek li depoyek giştî dakêşin, wê hingê ji bo vê nîşanê bes e ku hûn asta gihîştina yekane "Gihîştina depoyên giştî" diyar bikin.
  • GH_USER_EMAIL / GH_USER_NAME - cotek nav / e-nameyê ku li ser navê wan dê pêlêdana li ser mijarê were kirin gh-pages.

Bi vî rengî, her pêkanîna koda pêşkêşkirinê ya li ser GitHub encam dide ku slayd bixweber di HTML û PDF-ê de têne çêkirin û ji nû ve li github.io têne barkirin. (Bê guman, divê hûn tenê wan pêşandanên ku hûn di dawiyê de dixwazin eşkere bikin li github.io bar bikin.)

Nimûneyên projeyan

Di dawiyê de, li vir zencîreyên çend mînakên projeyên pêşkêşkirinê yên bi tîpên xwerû Maven û veavakirina CI-yê ji bo Travis-CI hene, ku dikarin dema ku projeyên pêşkêşkirina xwe biafirînin werin klon kirin û bikar bînin:

Bi xatirê te Powerpoint! Ez nafikirim ku ez ê ji bo pêşkêşiyên teknîkî ji we re hewce bikim :)

Source: www.habr.com

Add a comment