Openedu-proj

1 setup-project.md

1 Setup venv สำหรับ python3 สร้าง directory เพื่อให้เป็นเสมือน container เก็บ code ทั้งหมด _proj

$ mkdir openedu-proj 
$ cd openedu-proj
$ python3 -m virtualenv venv36


== result ==
Using base prefix '/usr'
New python executable in /home/mee/Django/openedu-proj/venv36/bin/python3
Also creating executable in /home/mee/Django/openedu-proj/venv36/bin/python
Installing setuptools, pip, wheel...done.

activate virtualenvironment สำหรับ python

$ source venv36/bin/activate
(venv36) $
(venv36) $ pip install django psycopg2 psycopg2-binary
(venv36) $ pip  freeze > requirements.txt
(venv36) $ cat requirements.txt

2 สร้าง django project

$ django-admin startproject openedu
$ tree openedu/
==result==
openedu/                       <-------   django project
├── manage.py
└── openedu                    <-------   django app
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
    

ย้ายเข้าไป ใน django project และสร้าง directory เพิ่มเติม

$ cd openedu
$ mkdir {templates,static,bootstrap4}

• templates ทำหน้าที่เป็น ที่เก็บ Templates สำหรับ django
• static ทำหน้าเป็นที่เก็บ STATIC_ROOT สำหรรับ django
• bootstrap4 ทำหน้าเป็น STATIC_PATH และ เป็นพื้นที่เก็บ source ของ twitter bootstrap 4 ที่เราจะต้อง build

2 built-twitter-bootrap.md

Build Twitter bootstrap ด้วย gulp และ npm 1 ติดตั้ง gulp --global

npm install gulp -g

เข้าไปยัง directory bootstrap4และสร้าง โครงสร้างภายใน

$ cd bootstrap4
$ mkdir {assets,css,js,scss,fonts}
$ touch index.html
$ touch scss/style.scss
$ ll

total 16
drwxrwxr-x. 2 mee mee 4096 Mar  3 21:05 bootstrap4
drwxrwxr-x. 3 mee mee 4096 Mar  3 20:34 openedu
-rw-rw-r--. 1 mee mee   66 Mar  3 20:33 requirements.txt
drwxrwxr-x. 5 mee mee 4096 Mar  3 20:30 venv36

สร้าง package.json ใน django project

$ cd ..
$ ll
== result==
total 20
drwxrwxr-x. 7 mee mee 4096 Mar  4 00:39 bootstrap4
-rwxrwxr-x. 1 mee mee  539 Mar  4 00:31 manage.py
drwxrwxr-x. 2 mee mee 4096 Mar  4 00:31 openedu
drwxrwxr-x. 2 mee mee 4096 Mar  4 00:34 static
drwxrwxr-x. 2 mee mee 4096 Mar  4 00:34 templates

$ npm init -y
====
Wrote to /home/mee/Django/openedu-proj/bootstrap4/package.json:

{
  "name": "bootstrap4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ติดตั้ง node package

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save
npm install font-awesome --save

node จะสร้าง directory เพิ่มสำหรับ เก็บ node module สร้าง development environment กำหนดให้ bootstrap4 เป็น source ของทาง bootstrap

$ ll

drwxrwxr-x. 7 mee mee 4096 Mar  4 00:39 bootstrap4
-rwxrwxr-x. 1 mee mee  539 Mar  4 00:31 manage.py
drwxrwxr-x. 5 mee mee 4096 Mar  4 00:42 node_modules               <---- node packages
drwxrwxr-x. 2 mee mee 4096 Mar  4 00:31 openedu
-rw-rw-r--. 1 mee mee  324 Mar  4 00:42 package.json               <--- node config
-rw-rw-r--. 1 mee mee  792 Mar  4 00:42 package-lock.json
drwxrwxr-x. 2 mee mee 4096 Mar  4 00:34 static
drwxrwxr-x. 2 mee mee 4096 Mar  4 00:34 templates

ติดตั้ง gulp เพื่อเตรียม build ตำแหน่งที่สั่งจะต้องอยู่ตำแหน่งของ file package.json

npm install gulp browser-sync gulp-sass --save-dev

• gulp คือ task runner
• browser-sync ทำหน้าที่ reload server เมื่อมีการ แก้ไข file
• gulp-sass ทำหน้า compile scss เป็น css
• --save-dev บันทึกเป็น development dependencies

เตรียมไฟล์ gulpfile.js ดังนี้

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 
        'node_modules/font-awesome/scss/font-awesome.scss',
        'bootstrap4/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("bootstrap4/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/popper.min.js'])
        .pipe(gulp.dest("bootstrap4/js"))
        .pipe(browserSync.stream());
});


// Move the fonts into our /bootstrap4/fonts folder
gulp.task('fonts', function() {
    return gulp.src(['node_modules/font-awesome/fonts/*'])
        .pipe(gulp.dest("bootstrap4/fonts"))
        .pipe(browserSync.stream());
});


// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./bootstrap4"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'bootstrap4/scss/*.scss'], ['sass']);
    gulp.watch("bootstrap4/*.html").on('change', browserSync.reload);
});

gulp.task('default', ['fonts', 'js','serve']);

Twitter bootstrap start up

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/css/style.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/js/jquery.min.js" ></script>
    <script src="/js/popper.min.js" ></script>
    <script src=/js/bootstrap.min.js" ></script>
  </body>
</html>