Thursday, June 27, 2019

การใช้ Kivy สร้างโปรแกรมบวกเลข

วันนี้เราก็จะมาทำโปรแกรมบวกเลขผ่าน Kivy กันนะครับ

.
.
.
สำหรับใครที่ไม่เข้าใจเรื่องคลาสแนะนำให้ดูนี้ก่อน
ความหมายของ class
.
โดยเริ่มแรกเราจะมาทำการออกแบบกันก่อนครับ
ให้มี Label ไว้สำหรับแสดงผลข้อมูลและระบุตำแหน่งให้ใส่เลขรวม 3 อัน
ให้มี Text input ไว้สำหรับการรับค่าตัวเลขที่จะนำมารวมกัน 2 อัน
ให้มี Button ที่เวลาเรากดปุ่มจะนำค่าของ Text input มารวมกัน 1 อัน

เมื่อเราทำการออกแบบเสร็จแล้วก็มาเริ่มเขียนกันเลย
.
.

from kivy.app import App           #class App ทำหน้าที่ render Object ที่เราได้สร้างเอาไว้ผ่าน Build()
from kivy.uix.widget import Widget               #class Widget ทำหน้าที่จัดวาง Object ตามแกน x , y
from kivy.uix.label import Label                    #class Label ไว้ใช้สร้าง Object ที่แสดงข้อความ
from kivy.uix.textinput import TextInput       #class TextInput ไว้ใช้สร้าง Object ที่เก็บข้อมูล
from kivy.uix.button import Button                #class Button ไว้ใช้สร้าง Object ที่เป็นปุ่มกด
from kivy.core.window import Window         #class Window ไว้ใช้ในการปรับขนาด โปรแกรม
Window.size = (550,150)                                #กำหนดให้โปรแกรมมีขนาดเริ่มต้นที่ สูง 150 , กว้าง 550

class Summation(Widget):                            #ให้คลาส Summation เป็น subclass ของ Widget
    def __init__(self,**kwargs):                                  
        super(Summation,self).__init__(**kwargs)                #**kwargs จะรับค่าเป็นตัวแปรได้
        self.textin = TextInput(pos=(50,25),font_size=30)       #สร้างกล่องรับข้อความชื่อ textin
        self.textin2 = TextInput(pos=(250,25),font_size=30)   #สร้างกล่องรับข้อความชื่อ textin2
        self.btn = Button(text='.                        #สร้างปุ่มกดที่ชื่อ btn เมื่อกดปุ่มจะใช้ function cal
                                  , font_size=25
                                  , pos=(350,25),on_press=self.cal)
        self.add_widget(self.textin)                                          #เพิ่ม textin ลงใน widget
        self.add_widget(self.textin2)                                        #เพิ่ม textin2 ลงใน widget
        self.add_widget(self.btn)                                            #เพิ่ม btn3 ลงใน widget
        self.label=Label(text='0',pos=(450,25),font_size=30)   #สร้างแถบข้อความ 0 ที่ชื่อ label
        self.label2=Label(text='+',pos=(150,25),font_size=30) #สร้างแถบข้อความ + ที่ชื่อ label2
        self.add_widget(self.label)                                            #เพิ่ม label ลงใน widget
        self.add_widget(self.label2)                                          #เพิ่ม label2 ลงใน widget

    def cal(self,btn):                         #function ที่นำค่าของเลขที่ใส่มาบวกกันและส่งค่าให้ label
        self.sum=str(int(self.textin.text)+int(self.textin2.text))  #รับค่าจากกล่องรับข้อความ textin และ                                                                                                  textin2 โดยปกติแล้วข้อมูลที่เราได้รับจะ                                                                                                   อยู่ในรูปของ String เราจึงต้องเปลี่ยนเป็น                                                                                     integer แล้วนำไปบวกกันก่อนจะคืนกลับไปเป็น String 
        self.label.text=self.sum                                                 #นำค่าที่ได้ไปโชว์ใน Label
class Myapp(App):                                                                #สร้าง Myapp ให้เป็น subclass of App
    def build(self):                                                                   #Override Build() Method in Myapp class
        return Summation()
Myapp().run()                                                                       #รัน Myapp ผ่าน run() Method



เมื่อเราทำการ Run โค้ดออกมาจะได้โปรแกรมหน้าตาแบบนี้



ทำการใส่เลข 5 ในช่องที่ 1 และ 2


กดปุ่ม = แล้วรอรับคำตอบ


จาก ' 5 + 5 = 10 ' นั้นถูกต้อง
แสดงว่าโปรแกรมของเรานั้นทำงานได้เพื่อนๆก็อย่าลืมไปลองเล่นกันนะครับ

//////////////////////////////////////////////////////////////////////////////////////////////////////




การติดตั้ง Kivy ผ่าน cmd



เรามาต่อจากสัปดาห์ที่แล้วนั่นก็คือการติดตั้ง Kivy
.
.
(สามารถ Download ได้จาก https://kivy.org/doc/stable/installation/installation-windows.html)
ส่วนขั้นตอนการติดตั้ง Kivy ผมจะลงผ่าน cmd

cmd คือ คำสั่งที่ใช้เปิด Windows Command interpreter สามารถเรียกใช้โปรแกรมต่างๆ
ผ่าน Text mode 

(รูปภาพ Command Prompt)

เริ่มแรกเราต้องอัพเดต pip ที่ใช้สำหรับลง Package for python
โดยพิมพ์ python -m pip install --upgrade pip wheel setuptools virtualenv ลงใน cmd
เมื่อทำการอัพเดตสำเร็จแล้วให้ทำตามขั้นตอนต่อไปนี้

1.สร้าง kivy_venv ใน directory ของเรา:  python -m virtualenv kivy_venv
2.สั่งให้ kivy_venv ทำงาน : kivy_venv\Scripts\activate
3.แล้วพิมพ์ :
   python -m pip install docutils pygments pypiwin32 kivy_deps.sdl2==0.1.22 kivy_deps.glew==0.1.12
   python -m pip install kivy_deps.gstreamer==0.1.17
4.ลง Kivy : python -m pip install kivy==1.11.1
5.ลง Kivy example : python -m pip install kivy_examples==1.11.1
6.เปิดใช้งาน example : python kivy_venv\share\kivy-examples\demo\showcase\main.py
(**ทุกครั้งที่เราเปิดใช้งาน cmd ใหม่จะต้องทำตามข้อ 2 ใหม่ทุกครั้ง)

( รูปภาพ Kivy example )


*************************************************************




Monday, June 24, 2019

การติดตั้ง Python และ Pycharm

ได้รับมอบหมายให้ศึกษาการสร้าง Desktop Application ด้วย Python
ทางกลุ่มได้ทำการเลือก IDE : Pycharm และใช้ Kivy ในการทำ POS

IDE ย่อมาจาก Integrated Development Environment คือ เครื่องมือที่ช่วยในการพัฒนาโปรแกรมโดยมีสิ่งอำนวยความสะดวกต่างๆ

POS ย่อมากจาก Point of sale ซึ่งหมายถึง จุดขายหรือจุดชำระเงิน ตรงแคชเชียร์ ซึ่งนำหลักการของเครื่องคิดเงิน (Cash Register) มาเขียนโปรแกรมพัฒนาบนคอมพิวเตอร์ แล้วเพิ่มเติมความสามารถต่างๆที่เครื่องเก็บเงินทำไม่ได้


เริ่มต้นด้วยการลง Python กันก่อน
(สามารถ Download ได้ที่ : https://www.python.org/downloads/ )


จากรูปภาพ จะมีให้เลือก Download ได้หลากหลาย Version

เมื่อเราได้ Download เสร็จสิ้น ก็มาต่อกันด้วยการติดตั้ง



ให้ทำการ Install File ที่เราได้ทำการ Download มา
แล้วเลือก Customize installation



ส่วนที่สำคัญคือ 2 อันแรก นอกนั้นแล้วแต่เราว่ามีความจำเป็นต้องใช้ Library ข้างต้นหรือไม่
แล้วทำการกด Next




ให้ทำการกดเลือก Install for all users เพิ่มเข้าไป แล้วเลือกว่าจะติดตั้งไว้ที่ไหน
ส่วนตัวผมนั้นเลือกแบบ Default แล้วกด Install



เมื่อลงสำเร็จก็เป็นอันเสร็จสิ้น :))

ขั้นต่อไปคือการลง Pycharm
(สามารถ Download ได้ที่ : https://www.jetbrains.com/pycharm/download/#section=windows )


โดยจะมีให้เลือกโหลดแบบ Pycharm Community เพราะเป็นแบบ Open-source
(สำหรับคนที่มี License code ให้เลือก Professional Pycharm)
ในการลง Pycharm นั้นง่ายมากเพียงแค่กด Next ก็สามารถติดตั้งจนเสร็จได้





ในส่วนนี้คือ การเลือกตำแหน่งที่จะลง Pycharm แล้วทำการกด Next


เท่านี้ก็เป็นอันเสร็จ

/////////////////////////////////////////////////////////////////////////////////////////

ในครั้งถัดไปจะเป็นการสอนลง Kivy และการใช้งาน Pycharm เบื้องต้น