IoT:n ja koneoppimisen kehittymisen myötä chatbotit ja automatisointi on noussut ihmisten huulille. Digitoimisto Dude Oy:ssa automatisointia on kuitenkin harrastettu ensimmäisestä päivästä lähtien, vaikka web-maailmaa eletäänkin. Automatisointi on tyypillisempää etenkin softaan, robotiikkaan ja tekoälyyn liittyvillä aloilla, mutta sitä voi harrastaa myös modernien verkkosivujen kehityksen workflowssa.
Tähän väliin jargonivaroitus, sillä nyt seuraa teknistä jargonia. Itse asiassa tämä koko kirjoitus on sitä. Mutta järkevää sellaista. Haluan nimittäin kertoa miten meillä tehostetaan projektin läpivientiä jo heti alussa.
Dudella on ollut alusta asti tarkoituksena noudattaa DRY-periaatteita (Don’t Repeat Yourself). Ideana on laittaa komentorivisovellus tekemään sen apinatyön, jonka muuten joutuisi nakuttelemaan työläästi itse käsin läpi. Puhun siis esimerkiksi WordPressin ylläpitopuolella asetusten päivittelystä. Esittelen näihin automatisoitaviin asioihin liittyviä tehtäviä tässä kirjoituksessa kohta vähän tarkemmin.
Vaikka teemme perinteistä WordPressiä, teemme sitä modernilla tavalla. Työkalumme ovat uutuuttaan huokailevia ja aina ajan tasalla. Näistä voit lukea lisää esimerkiksi Handbookistamme. GitHub-profiilimme alta löydät työkalut ja tekniikat keskeisimmistä repoistamme kuten devpackages, dudestack ja air-light.
Automatisoinnilla raapaistaan henkilötyötunteja kokonaisten päivien verran
Koska olemme vanhan liiton Linux/unix-ihmisiä, luotamme automatisoinnissa vanhaan kunnon GNU Bashiin. Kävin aikoinaan automaatiotyökaluja läpi kuten Ansible ja Puppet, mutta ne tekivät liikaa ja liian monimutkaisesti. Osa nörteistä on sitä mieltä, että bashia ei tulisi käyttää tällaiseen, mutta mielestäni vanha kunnon komentoriviscripti on kaikista luotettavin erityisesti silloin kun sen on itse kirjoittanut. Bash on ollut suoraviivainen ja ymmärrettävä ja sillä on menty. Tietää ainakin tasan tarkkaan mitä tapahtuu.
Kun saamme aloittaa uuden projektin, ajamme siis bash-komennon. Sitten menemme ottamaan kahvia. Prosessi näyttää tältä (katso pidempään niin näet tapahtumat suoraan, video kestää noin 5 minuuttia):
Projekti laitetaan käyntiin yksinkertaisella komennolla:
createproject
Komento kysyy ensin millä nimellä projektia kutsutaan. Yleensä tämä on sivuston tai asiakkaan nimi pienillä kirjaimilla ilman erikoismerkkejä. Tämän jälkeen kone ryhtyy töihin ja seuraavat asiat tapahtuvat:
- Tarkistetaan onko työkalut kuten git ja composer asennettu
- Haetaan tuorein versio WordPressistä ja uusimmat versiot Duden käyttämistä oletuslisäosista sekä siirretään ne oikeille paikoilleen
- Päivitetään riippuvuudet edellä olevista
- Luodaan projektille MySQL/MariaDB-tietokanta
- Luodaan projektille sisäänkirjautumista varten WordPress-tunnus ja salasana
- Poistetaan oletusartikkelit (WordPress luo asennuksessa ”Moikka maailma!” -testiartikkelin ja muuta vastaavaa pientä turhaa)
- Päivitetään sivuston nimi ja kuvaus
- Vaihdetaan kieli suomeksi
- Poistetaan WordPressin oletusteemat ja vaihdetaan oma oletukseksi
- Päivitetään pysyvät linkit
- Päivitetään aikamääreet ja aikavyöhyke
- Otetaan pois päältä turhat toiminnallisuudet kuten pingbackit
- Poistetaan kommentointi oletuksena käytöstä sieltä mihin se ei kuulu
- Päivitetään ylläpitäjän sähköpostiosoite
- Luodaan HTTPS-sertifikaatti
- Luodaan projektille GitHub-repo
- Päivitetään tiedostojen käyttöoikeudet
- Lisätään kehityspalvelimelle toimiva osoite (projekti.test) teknistä työstöä varten
- Käynnistetään palvelin uudelleen asetusten voimaan saattamiseksi
- Tarjoillaan osoite, josta WP-sivusto löytyy
Sitten luodaan projektille WordPress-teema komennolla:
newtheme
Tämä komentorivisovellus tekee seuraavaa:
- Kysyy projektin nimen, johon teema luodaan sekä varsinaisen luotavan teeman nimen (samalla projektilla voi olla useampikin teema, jos kyseessä on monia sivustoja sisältävä sivustojen verkko eli Network/Multisite)
- Hakee uusimman version pohjateemastamme Air-light
- Luo ACF:lle valmiudet toimia ja laittaa käyttöoikeudet kuntoon
- Hakee projektiin mukaan uusimmat versiot teemakehitystyökaluistamme, joita käytetään CSS/JS/HTML-ohjelmointiin.
- Asentaa npm-paketit (tässä yleensä kestää pisimpään)
- Siivoilee ylimääräisiä tiedostoja, jos niitä on
- Testaa että kaikki varmasti toimii työstöä ajatellen
- Pyöräyttää teeman alustavat JavaScriptit ja CSS-tyylitykset kasaan
- Tarjoillaan kansiopolut, joista tiedostot löytyvät ja toivotetaan työn iloa koodailuun.
Yllä olevat asiat pitäisi ilman automatiikkaa takoa joka ikinen kerta käsipelillä läpi. Voit kuvitella miten vaivalloista on mennä selaimella fi.wordpress.org, etsiä nappi ja ladata zip-paketti, purkaa se, käynnistellä palvelimia, luoda kansioita, siirtää tiedostoja, täytellä wp-config.php-tiedosto, keksiä tai generoida tunnus ja salasana, kirjautua sisään, asentaa WordPress kliksuttelemalla läpi asennus, sen jälkeen kirjautua sisään, asettaa sivuston nimi, ja niin edelleen…
Mitä seuraavaksi
Onneksi kehitys kehittyy päivittäin. Yllä olevaan prosessiin on vuosien varrella lisätty asioita, joita joutuisimme muuten toistamaan. Jokaisessa manuaalisessa työssä kysymme teknisessä tiimissä itseltämme: Voiko tämän automatisoida? Jos voi, se lisätään osaksi automaattista prosessia.
Seuraava kehitysaste on komento:
newblock
Tämä komento tulee tekemään seuraavaa:
- Kysyy ensin mikä lohko tuodaan
- Tuo teemaan mukaan lohkon tiedostot, eli PHP-, JS- ja CSS-tiedoston
- Tuo teemaan mukaan lohkon riippuvuudet, eli mahdolliset JS-moduulit, SVG-tiedostot jne.
- Asentaa lohkon mahdollisesti vaatimat lisäosat composerin kautta ja aktivoi ne
- Lisää lohkon vaatimat importit JS:ään ja SCSS _blocks.scss-tiedostoon, joka tuo lohkon tyylin ja toiminnallisuuden näkyviin myös Gutenbergin puolelle
- Tuo lohkon vaatimat ACF-kentät mukaan projektiin
- Lisää lohkon esimerkkidatalla kaikkien lohkojen esikatselusivulle
Tämän jälkeen päästään räätälöimään lohkoa asiakkaan ilmeeseen sopivaksi.
Lohkokirjastomme on vielä vahvasti työn alla. Tätä kirjoittaessa osoitteesta blocks.airwptheme.com löytyy kaksi valmista lohkopohjaa, mutta lisää on tulossa. Edistymisen näet reaaliajassa GitHubista.
Tulevaisuus on valoisa
Tekninen prosessimme WordPress-kehityksessä on hiottu viimeisen päälle ja toimii kuin rasvattu koneisto, mutta aina kun uusi aallonharja on saavutettu, löytyy seuraava kehitysaskel. ACF + Gutenberg ovat ovat viitoittaneet meille tien kestävässä ja toimivassa kehityksessä. Kehitämme omia tapojamme, mutta myös käyttämämme työkalut kehittyvät koko ajan. Niin ACF kuin WordPressin Gutenberg-puolikin vihjaavat molemmat siitä, että vielä parempaa on tulossa:
Näillä tekniikoilla ja työkaluilla saamme asiakkaallemme kaikista helppokäyttöisimmän ja selkeimmän sivuston aikaan. Hallintapaneeliamme avasimme viime kesänä artikkelissa Duden WordPress-hallintapaneelin avulla verkkosivujen päivittäminen sujuu kuin tanssi. Haluamme olla alallamme niin hyviä, että ei jää epäilystä siitä kenen tekemä sivusto on kyseessä.
Heräsikö kiinnostus ammattimaisten työkalujemme myötä? Haluaisitko uudistaa verkkosivunne? Ota yhteyttä!
