WordCamp Workshop

Tömähti uusi workflow

Git

Composer

Vagrant

WP-kehittäjille

Kuka?

• WP-intoilija, open source -kehittäjä ja hakkeri
• Devaaja Seravo Oy:ssa
• WP-palvelun pääkehittäjänä vuodesta 2014
• 5 kuppia kahvia työpäivän aikana

Miksi Git?

• Versionhallintana erittäin suosittu
• Github.com tarjoaa ilmaisen koodihostauksen ja mahtavan yhteisön kehittyä paremmaksi
• Jouheva yhteistyö muiden kanssa 
• Mahdollistaa skriptien ajamisen tallentamisen yhteydessä

Miksi Composer?

• Auttaa pitämään kolmannen osapuolen koodin versionhallinnan ulkopuolella (pluginit, teemat)
• Voit lukita lisäosien versioita toimiviin kokonaisuuksiin
• Parempi tietoturva hyökkäyksistä tulleita koodi-injektioita vastaan

Miksi Vagrant?

• Voidaan matkia tuotantoympäristöä omalla koneella
• Varmistutaan, että kaikki kehittäjät käyttää samoja binaareja, versiota, konffeja jne...
• Helpompi kehitysympäristön pystyttäminen

Eiköhän aloiteta jo!

Tarvittavat ohjelmat

Esimerkkinä nykyaikaisesta WordPress-pohjasta käytämme Githubista: Seravo/wordpress

Asennus

1. Asenna Vagrant (1.7.2 tai uudempi)
2. Asenna VirtualBox
3. Avaa terminaali ja aja seuraavat komennot:

# Kloonaa git-repository itsellesi haluamaasi sijaintiin
$ git clone https://github.com/Seravo/wordpress ~/Projects/wordpress-dev
$ cd ~/Projects/wordpress-dev
# Asenna tarvittavat lisäosat vagrantille
$ vagrant plugin install vagrant-hostsupdater vagrant-triggers
# Käynnistä Vagrant ja vastaa skriptin kysymyksiin (y/n)
# tai valitse oletus asetukset painamalla enteriä
$ vagrant up

Käyttäminen

Aina kun tallennat työsi gitillä, git ajaa vagrantin sisällä automaattisesti läjän testejä, jotka varmistavat että kirjoittamasi muutokset toimivat.

$ git commit -am "change index.php"
==> Running tests in Vagrant...
==> Checking syntax errors...
==> Running rspec tests...
testing http://wordpress.dev...
....
doing the cleanup...

Finished in 4.49 seconds (files took 3.34 seconds to load)
4 examples, 0 failures

==> Tests passed!
[master 39e71d6] change index.php
 1 file changed, 1 insertion(+)

Sisäänasennetut

Extraherkut

Gulp + Browsersync

• Lataa automaattisesti selaimen kun koodiin tulee muutoksia.
• Pitää jokaisen sivulla olevan selaimen synkronoituna.

Katso esimerkki täältä

# Käynnistä gulp + browsersync Vagrantin sisällä
$ vagrant ssh -c 'cd /data/wordpress && gulp'

xDebug & Webgrind

Onko koodisi hidasta? Tsekkaa mistä se johtuu profiloimalla!

# Käy haluamallasi testi sivulla ja lisää profilointi parametri: XDEBUG_PROFILE
# Esimerkiksi etusivu:
http://wordpress.dev/?XDEBUG_PROFILE
# Avaa webgrind:
http://webgrind.wordpress.dev
# ja klikkaa 'update'

Mailcatcher

Testaa sähköpostin lähetystä lähettämättä sitä!

Rspec

Integraatiotestit wordpressiin!

# Example test which logins to admin-panel
describe "admin-panel" do
  before do
    visit "https://wordpress.dev/wp-login.php"
  end

  it "There's a login form" do
    expect(page).to have_id "wp-submit"
  end

  #Only run these if we could create random test user
  if username
    it "Logged in to WordPress Dashboard" do
      within("#loginform") do
        fill_in 'log', :with => username
        fill_in 'pwd', :with => password
      end
      click_button 'wp-submit'
      # Should obtain cookies and be able to visit /wp-admin/
      expect(page).to have_id "wpadminbar"
    end
  end
end

Kiitos

Jos sinulla heräsi kysymyksiä, voit ottaa yhteyttä:

Tutustu myös:

• Avaamalla issuen Githubiin
• Lähettämällä viestiä onni@seravo.fi