สร้าง  Virtual Devices  ใน Andriod Studio

ในการพัฒนา mobile ด้วย react native  จะต้องมีการเตรียม virtual devices สำหรับ android มีขั้นตอนดังต่อไปนี้

สร้าง  virtual device

เลือก พัฒนา บน Android 6


เพิ่ม path ในระบบ เลือกให้ถูกต้องกับระบบที่ใช้งานอยู่

เริ่มต้น พัฒนา mobile project  ด้วย  react native  ให้ติดตั้ง  node ในเครื่องให้เรียบร้อย
ใช้  npm  เพื่อติดตั้ง

ต่อมาให้ติดตั้ง app ชื่อ expo และ กด Scan QR Code ไปยัง bar code เพื่อทำการเชื่อมต่อระหว่าง app.js และเครื่อง มือถือเรา

หากเราต้องการ  run ใน emulator    ให้กด a

ในบทต่อไปก็จะเริ่มต้นในการพัฒนา React Native  ด้วยการสร้าง  project  และทำการ customize app.js  

พัฒนา React Native Android App บน Windows 10

ติดตั้ง Node.js บน window เปิด web https://nodejs.org/en/ เลือก current version

ขั้นตอนการติดตั้ง

verify ด้วย command

 
Download java (jdk) http://www.oracle.com/technetwork/java/javase/downloads

verify

เพิ่ม JAVA_PATH ใน system variable

ติดตั้ง Android Studio
เปิด web https://developer.android.com/studio/index.html
Download และติดตั้ง

เพิ่ม ANDROID_HOME C:\Users\\AppData\Local\Android\Sdk

เพิ่ม target platform (SDK manager)

เลือก virtual Device สำหรับ เป็น Emulator (จะต้องปิด Hyper-V )ด้วย

flask-logo

พัฒนา API ด้วย Flask Application

Flask คือ python webframe work เรียนรู้ได้ง่าย Flask object ที่ทำการ implement WSGI application และมีประสิทธิภาพ มาเรียนรู้ที่จะเริ่มต้นการพัฒนา ไปดูตัวอย่าง ได้ที่ http://flask.pocoo.org/
ติดตั้ง Flask ด้วย pip

Flask application เลือกสร้างได้ สองแบบ
1 สร้าง app.py ด้วยการสร้าง module (ไฟล์ที่มีนามสกุล py) เหมาะกับ application ขนาดเล็ ไม่ได้มีความซับซ้อน

2 สร้าง app.py ด้วยการสร้าง python package (Directory ที่มีไฟล์ __init__.py)

มาดูตัวอย่างแบบง่ายๆๆ ก่อนครับ ให้สร้าง python module

วิธีการ Run


class flask.Flask(import_name, static_path=None, static_url_path=None, static_folder='static', template_folder='templates', instance_path=None, instance_relative_config=False, root_path=None)

import_name จะแทนค่าด้วย __name__ เมื่อมีการเรียก Flask() constructor จะได้รู้ว่าเป็นของ Application อะไร

แต่หากเราได้ประกาศ application ไว้ใน application/app.py สามารถมีทางเลือกที่จะเรียก Flask contructor ได้ดังนี้

parameter ที่สามารถกำหนดให้แก่ constructor

import_name ชื่อ application package
static_url_path path ของ static file สามารถกำหนดได้แต่หากไม่มีการกำหนดจะใช้ค่า Default คือ  static_folder
static_folder  folder  ที่ใช้สำหรับ static file ที่จะใช้สำหรับ static_url_path โดยค่า default คือ static  folder ที่ root ของ application
 template_folder  folder ที่ทำหน้าที่เก็บ  templatesโดยค่า default คือ templates folder ที่ root application
root_path Flask  กำหนดให้เอง อัตโนมัติ เพื่อกำหนด root path ของ Application

คราวนี้ลองมาสร้าง flask app ใน application/__init__.py  อ้างอิงโครงสร้างแบบที่  2 จากด้านบน แต่ การ start application  จะมีสร้าง file ใหม่ที่จะใช้สำหรับการ start  ชื่อ <code>setup.py</code> ไว้ ดังโครงสร้าง

คราวนี้ก็มาสร้าง file ดังนี้
1) file __init__.py สำหรับ flask application

2) views.py
1) file views.py สำหรับ กำหนด route

Circular imports
ในกรณีที่ views.py มีการ import myapp และ ใน __init__.py ก็มีการ import myapp.views แสดงว่า module มีความสัมพันธ์ซึ่งกันและกัน ที่จริงเราไม่ได้ใช้งาน views ที่เรา import เข้ามาใน __init__.py เพียงต้องการที่จะทำให้มั่นใจว่า module จะต้อง import เข้ามา และเราจะวางไว้ ล่างสุดของ file

3 run app

Flask configuration
สร้าง file config ชื่อว่า config.py โดย เป็นfile ที่ใช้สำหรับการ ตั้งค่า configuration ค่า ตัวแปรใน Config ใช้เป็นอักษรตัวใหญ่

โหลด config ใน application

Run App

ติตตั้ง STS (Spring Tool Suite) บน Eclipse

Spring Tool Suite (STS) เป็นส่วน ขยาย ของ Eclipse IDE เพื่อใช้สำหรับ พัฒนา  Spring Application มีขั้นตอนดังนี้

1).  ไปยัง market place

2). ให้ค้นหาคำว่า sts

3). ยืนยัน package

4). ยืนยัน license

5). restart eclipse

เมื่อ report เปิดขึ้นมาใหม่ จะเห็น spring framework

6) เปลี่ยน perspective

เลือก spring

8) สร้าง spring boot project

9) ใส่ข้อมูล application

10)จะได้โครงสร้างของตัวโปรเจค

พิจารณา ไฟล์ pom.xml

 

พิจารณาไฟล์  HelloSpringBootApplication.java

11). build dependency

12). Run Spring

ติดตั้ง Maven บน Eclipse

มีขั้นตอนดังนี้
1. กด Help จากเมนูใน Eclipse และเลือก Install New Software

2.กดปุ่ม Add จะได้หน้า window ใหม่เปิดขั้นมาก ให้ใส่ url สำหรับ maven repository

3. ตั้งชื่อ name ว่า Maven และ location ตั้งเป็น http://download.eclipse.org/technology/m2e/releases/

4. ให้กดเลือก package และ กด next

และ กด next อีกครั้ง

5. ยอมรับ Term and condition

6. สร้าง project ใหม่

และต่อมา

7 เลือก quickstart

8 เลือก groupid, artifactid และ กด finish

9. สำรวจตัวโครงสร้าง ของ project ที่สร้าง

ให้เพิ่ม ใน pom.xml เพื่อระบุ version ที่จะ Compile

10. เลือก preference

11. Verify ด้วยการ build

12. กำหนด goal clean verify และกด run

ผลที่ได้หามี การ run success

13. ลองไปสำรวจ dependecy ที่ maven repository

และนำค่าที่ได้ไปใส่ไว้ select Dendency
14. การเพิ่ม Dependency โดยให้กด tab ที่มีชื่อว่า Dependencies และกดปุ่ม Add


15. ผลที่ได้ จะเพิ่ม dependency

16. กลับไปดูในหน้า ของ pom.xml จะมีข้อมูลเพิ่มเติมดังนี้

 

พัฒนา Twitter Bootstrap 4 ด้วย Gulp และ Node.js

Gulp คืออะไร

Gulp เป็นเครื่องมือที่ใช้สำหรับ การ  compile sass/less ที่นำมาใช้งานสำหรับการพัฒนาร่วมกับ Twitter bootstrap 4 ได้อย่างง่ายดาย พร้อมกับสามารถใช้งานร่วมกับ browser-sync ทำให้  browser สามารถแสดงผลทันทีไม่ต้องทำการ reload ก่อนการใช้งาน Gulp จะต้องทำการติดตั้ง Node.js ให้เรียบร้อยก่อนดังนี้

ติดตั้ง Node, NPM บน mac ผ่านทาง brew

ติดตั้ง node บน Fedora

หลังจากติดตั้ง ให้ติดตั้ง Gulp ให้เป็น –global

สร้าง bootstrap4 folder เพื่อให้ทำหน้าที่เป็น Project folder สามารถตั้งชื่อเป็นชื่ออะไรก็ได้ ตามที่ต้องการ

สร้าง package.json ด้วย คำสั่ง npm init -y

ติดตั้ง node package

ติดตั้ง node package

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

ต่อมาสร้างไฟล์ index.html เพื่อใช้งาน css และ js ที่ build จาก gulp

Build Gulp