Weekly Progress 1 — Setup Environment, CI/CD, Registration Page

Published in

println-mic

4 min readMar 7, 2018

Dalam tulisan ini saya ingin membagikan progress dan beberapa hal yang saya pelajari selama minggu pertama pengerjaan proyek Automatic Printing — Println.

My Compeleted Quest :

Inisiasi project untuk frontend menggunakan React.js
Setup Continuous Intergration / Deployment menggunakan gitlab dan VPS
Membuat halaman registrasi

1. PROJECT INITIATION

Untuk frontend dari web application ini saya dan tim memilih menggunakan React.js. Agar mempermudah pembelajaran dan juga pengembangan kami menggunakan react-bolierplate karena sudah stable dan siap untuk di deploy serta menerapkan best practice dalam penggunaan tools dan struktur project.

https://github.com/react-boilerplate/react-boilerplate.

dokumentasinya cukup lengkap mulai dari konfigurasi dan deployment, termasuk juga dalam melakukan test yang menggunakan Jest.

2. Setup Continuous Intergration / Deployment menggunakan gitlab dan VPS

Untuk Continuous Integration / Deployment (CI/CD) kami menggunakan Gitlab CI dan deployment server ke VPS menggunakan Digital Ocean. yang dilakukan pertama ialah membuat file dengan nama gitlab-ci.ym yang berisi konfigurasi untuk Gitlab CI dan diletakan pada root project. ketika melakukan push ke repository gitlab, file gitlab-ci.yml akan secara otomatis dibaca dan gitlab akan menjalankan task-task yang di definisikan pada file tersebut. dalam project ini kami mendefine 3 task yang dibagi kedalam 2 stage (Test dan Deploy):

test_backend : untuk melakukan testing pada app backend (django)
test_frontend : untuk melakukan testing pada app frontend (react)
deployment : melakukan push ke server VPS

gitlab-ci.yml

stages:
  - test
  - deploytest_frontend:
  image: "node:8.9.3"
  stage: test
  before_script:
    - "cd frontend"
    - "npm cache clean --force"
    - "rm -rf node_modules"
    - "npm install"
  script:
    - "npm test"
  coverage: /All files[^|]*\\|[^|]*\\s+([\\d\\.]+)/test_backend:
  stage: test
  before_script:
    - apt-get install -f
    - apt-get update -qy
    - apt-get install -y python3-pip sudo python-dev libpq-dev postgresql postgresql-contrib
    - apt-get update
    - service postgresql start
    - sudo -u postgres psql -c "CREATE USER ppl WITH PASSWORD 'ppl' CREATEDB"
    - sudo -u postgres psql -c "CREATE DATABASE ppl OWNER ppl;"
    - sudo -u postgres psql -c "GRANT ALL PRIVILEGES ON DATABASE ppl TO ppl;"
    - export DATABASE_NAME=ppl
    - export DATABASE_USER=ppl
    - export DATABASE_PASSWORD=ppl
    - export DATABASE_HOST=localhost
  script:
    - cd backend
    - pip3 install -r requirements.txt
    - python3 manage.py migrate
    - coverage run --source='.' --omit='*/env*' manage.py test
    - coverage report
  artifacts:
    paths:
      - test/deploy_production:
  stage: deploy
  image: gitlab/dind:latest
  only:
    - master
    - production
  before_script:
    - apt-get update -qy && apt-get install sshpass
  script:
    - mkdir ~/.ssh
    - echo -e "Host 159.65.136.5\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
    - git remote add server $VPS_SERVER_GIT
    - sshpass -p $VPS_SERVER_PASSWORD git push server master -f
  environment:
    name: production
    url: $VPS_SERVER_URL

Di server :

Saya juga mempelajari bagaimana membuat online repository git di server. dengan menggunakan perintah :

git init --bare

setelah dijalankan akan digenerate beberapa folder, untuk saat ini yang perlu diperhatikan adalah folder hooks/.

pada folder kita dapat membuat beberapa script yang akan dijalankan apabila repository tersebut menerima suatu event (msl. commit, push). untuk menjalankan suatu script ketika menerima event push dari suatu local repository (e.g dari gitlab melakukan push ke git di VPS) maka kita perlu membuat file bernama post-receive yang akan dijalankan ketika push event terjadi. Script tersebut berisi command untuk melakukan test, build dan run aplikasi (untuk backend disetup oleh teman saya assagaf). untuk frontendnya, ketika push diterima, saya membuat script untuk menjalankan proses build, kemudian menjalankan aplikasi tersebut dengan bantuan library pm2. pm2 adalah library process manager untuk aplikasi node yang memungkinkan kita menjalan suatu aplikasi node sebagai long running service. Selain itu pm2 juga memudahkan mengatur aktifitas proses seperti start, stop, reload. Dengan bantuan pm2 ketika melakukan update di server aplikasi akan direload secara otomatis (hot-reload).

3. Membuat Halaman Register

Dalam membuat halaman register saya mengikuti prinsip thinking in react dan juga menerapkan TDD. pertama-tama saya membuat stubs dan test kosong. Awalnya saya kebingungan bagaimana cara yang tepat melakukan test pada react. setelah melakukan pencarian dengan bantuan google saya mendapatkan beberapa hal penting yang perlu ditest pada aplikasi react :

Component (dan Connected Component)
Reducer (karena menggunakan redux)
Action Creator
Interaction Test

Untuk saat saya hanya hanya melakukan component testing untuk memastikan komponen merender view sesuai dengan yang diharapkan. saya menggunakan library Enzyme untuk melakukan testnya. Enzyme memanipulasi React Component menjadi DOM Tree, dan kita dapat melakukan tranversing untuk setiap nodenya menggunakan selector.

/**
* index.test.js
*/import React from 'react';
import { shallow } from 'enzyme';import { RegisterPage, mapStateToProps } from '../index';describe('<RegisterPage /> - rendering', () => {
  it('should render correctly', () => {
    const subject = shallow(<RegisterPage />); // render one-level dom element
    expect(subject).toMatchSnapshot(); // capture dom structure to check in later changes
  });/**
   * TODO: interaction test here
   */
});describe('mapStateToProps', () => {
  it('should receive correct state', () => {
    const state = {
      homePage: {},
      registerPage: {
        isLoading: false,
        data: {},
        error: null,
      },
    };
    const result = mapStateToProps(state);
    expect(result).toEqual({ registerPage: state.registerPage });
  });
});

Untuk pembuatan form registrasi, saya menggunakan library redux-form yang mempermudah manajemen state pada form. redux-form menyediakan beberapa component input yang terhubung dengan redux dan proses perubahan state yang terjadi pada input sudah dibungkus semua oleh library tersebut.

— hasil