วันศุกร์ที่ 15 เมษายน พ.ศ. 2559

Deploy Web App to Heroku "Part 5" XML

Deploy Web App to Heroku "XML"

      XML คืออะไร
      XML เป็นภาษาที่ถูกออก แบบขึ้นมาเพื่อทำการแลกเปลี่ยนข้อมูลผ่านเครือข่ายอินเทอร์เน็ต และสามารถรองรับการเเลกเปลี่ยนได้หลายภาษา หากจะให้เข้าใจง่ายๆก็ยกตัวอย่างเช่น คนหลายชาติต่างภาษาเลือกที่จะทำการศึกษาภาษาอังกฤษในการสื่อสารกับชาติต่างๆ เพราะภาษาอังกฤษถือเป็นภาษากลาง เเทนที่จะทำการศึกษาเพียงภาษาใดภาษาหนึ่ง เพราะหากสามารถเข้าใจภาษากลางเพียงภาษาเดียวเเล้ว ก็แถบจะสามารถสื่อสารได้กับทุกชาติ เพราะฉนั้น XML จึงเปรียบเสมือนภาษากลาง
       ความเเตกต่างระหว่าง HTML และ XML
       TML คือ ภาษาสำหรับเเสดงผลข้อมูล เพียงอย่างเดียว โดยไม่รู้ว่าข้อมูลนั้นคืออะไร เช่น เเสดงข้อมูลเป็นตัวหนา ตัวเอน เป็นต้น XML คือ ภาษาสำหรับอธิบายข้อมูล และเก็บข้อมูลอะไร
       โครงสร้างของภาษา XML
       ภาษา XML ไม่มีโครงสร้างกำหนดเอาไว้ตายตัวซึ่งก็ถือเป็นข้อดีของ XML ที่สามารถนำไปประยุกต์ใช้กับโปรแกรมอื่นๆ ถึงเเม้ว่า XML จะไม่มีโครงสร้างที่กำหนดไว้อย่างตายตัวเเล้ว เเต่ XML ก็มีรูปแบบที่เป็นที่ตกลงกัน เพื่อให้เข้าใจได้ง่ายขึ้น ดูตัวอย่างได้จากโค้ดข้างล่างนี้1001มณีศรีเพ็ญบัญชี087-1245766 จาก Code จะเห็นว่ามีเครื่องหมาย < และ > เป็นตัวบ่งบอกแท็ก เมื่อมีการกำหนดเเท็กทุกครั้งจะต้องเริ่มด้วย Start Tags เช่น และจบลงด้วย End Tags ทุกครั้ง เช่น ส่วนข้อมูลที่อยู่ตรงการจะเรียนกว่า Element (สมาชิก)
       กฏเบื้องต้นสำหรับการสร้างข้อมูลที่เก็บอยู่ในโครงสร้างของ XML 

  1. ในการสร้างแท็กเเต่ลละครั้งจะต้องมีทั้ง เเท็กเปิดและเเท็กปิด เพื่อระบุขอบเขตของข้อมูล 
  2. ในภาษา XML ตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่มีความเเตกต่างกัน เช่น... แบบนี้จะเกิดความผิดพลาด 
  3. ในบางครั้งอาจมีลำดับชั้นที่ซับซ้อนมากขึ้น ดังนั้นควรระมัดระวังเรื่องของแท็กปิดและเเท็กเปิดให้ตรงลำดับชั้น เช่น001A33C03Auttaya Teeyut074-1454788

* สามารถสร้างเเท็กที่ซับซ้อนได้เท่าที่ต้องการ เพียงเเต่จะต้องปิดลำดับชั้นของเเท็กให้ถูกต้อง
       สรุปความเข้าใจภาษา XML เบื้องต้น
            - ถูกกำหนดมาตรฐานโดย W3C
            - รูปแบบข้อมูลที่มีโครงสร้างที่เหมาะต่อการแลกเปลี่ยนข้อมูลในเครือข่ายอินเทอร์เน็ต
            - ลักษณะของภาษาคล้ายกับ HTML
            - เป็นการออกแบบข้อมูลไม่ใช่การเเสดงข้อมูลออกมา
            - ไม่มี tag กำหนดล่วงหน้าตายตัว เพราะฉนั้นต้องกำนด tag ขึ้นมาเอง
            - โครงสร้างของภาษา XML คือ แท็กเปิด <>, แท็กปิด</> ,Element

สามารถอ่านบทความที่เกี่ยวข้องเพิ่มเติมได้ ที่ HTML5 Drag and Drop  HTML5 WebSockets

ที่มา www.mdsoft.co.th


  • ถ้าจะต้องเเลกเปลี่ยนข้อมูลกันจะทำอย่างไร ถ้าหากมีเว็บที่ทำงานเเบบเดียวกันอยู่หลายเว็บ

wordbank

  • ปัญหา

       ปัญหาเเรกที่พบเลยคือรูปเเบบไม่ตรงกันทำให้ไม่สามารถที่จะนำข้อมูลของเว็บ อื่นๆ มาใช้งานด้วยกันได้เนี่องจากมีการจัดวาง root ที่ไม่เหมือนกัน ทำให้ไม่สามารถที่จะใช้ ฟังก์ชั่น เดิมที่เคยเรียกใช้ได้

xml ที่ wordbank ใช้
xml ที่ เว็บอื่นใช้
  • การเเก้ปัญหา
           ทำข้อตกลงกันระหว่าง เว็บ ว่าจะมีเเบบที่เป็น มาตราฐาน อย่างไรเมื่อตกลงกันได้เเล้วก็สร้าง ฟังก์ชั่น ใหม่มา 1 ฟังก์ชั่น เพื่อทำงานนี้โดยเฉพาะ ทุกเว็บต้องมีเหมือนกัน

 
   def standard_save_xml_file():
    all_word = Word.objects.all()
    words = ET.Element('bank')
    for word_ in all_word:
        for detail in word_.detail_set.all():
            et_word = ET.SubElement(words, 'word')
            ET.SubElement(et_word, 'text').text = word_.word_text
            ET.SubElement(et_word, 'type').text = detail.type_text
            ET.SubElement(et_word, 'mean').text = detail.example_text_EN
            ET.SubElement(et_word, 'ex').text = detail.example_sentence_EN
    tree = ET.ElementTree(words)


เขียนโดย ที่ ไม่มีความคิดเห็น:

Deploy Web App to Heroku "Part 4" Wordbank

Deploy Web App to Heroku "Wordbank App"

  •  เมื่อเราได้ทำการ Deploy wep app เสร็จเเล้ว คราวนี้ผมก็จะมาเเนะนำให้รู้จักกับ Wordbank App ที่ได้ทำการสร้างขึ้มมา 
หน้าเเรก
  • หน้าเเรกก็จะมีช่องให้ค้นหา Word ที่มีใน ฐานข้อมูลทั้งหมด เเละก็จะมีระบบ login เเละ register อยู่ด้านบนมุม ขวา ในกรณีที่ต้องการ เพิ่มคำใน ฐานข้อมูลนั้นจำเป็นจะต้อง สมัคสมาชิก ก่อน 

หน้า Register
  •  หน้า register นี้ก็จะมีข้อมูลให้กรอกดังภาพ
หน้า Login

  • หน้า login สามารถที่จะ login ผ่านทางหน้านี้ เเละหน้าเเรกได้

หน้า สมาชิก ระดับ admin
  • หน้าของ สมาชิคจะเเบ่งออกเป็น สมาชิคธรรมดา เเละ admin โดยที่หน้าของ admin นี้จะสามารถที่จะเพิ่มคำ upload csv เเละ upload xml ได้ สามารถเปลี่ยนรูปประจำตัวได้ สามารถเรียกคืนค่าของระบบได้สามารถที่จะ โหลดไฟล์ backup ไปเก็บไว้ได้
หน้า สมาชิก
  • สามารถที่จะทำได้คล้ายกับระดับ admin ยกเว้น การเรียกคืนค่าเดิมของระบบ
ในกรณีที่ค้นหาเเล้วไม่เจอ
  • ถ้าคำๆนั้นไม่มีในระบบก็จะเเสดงคำทุกคำที่มีในระบบ
ในกรณีที่พบคำที่ค้นหา
  • ถ้าพบคำที่ค้นหาก็จะเเสดงรายละเอียดของคำๆนั้นออกมา

      สามารถที่จะทดลอง Wordbank app ได้ที่ https://wordbankapp.herokuapp.com/             - ทดลองหน้า admin
              username: admin
              password: 12345678!
           - ทดลองหน้า สมาชิก
              username: username
              password: username

 *หมายเหตุ
    web app wordbank เป็นเพียงการทดลองศึกษาการเขียน web app โดยการใช้ Django เเละ Python เท่านั้น เพื่อให้เข้าใจในการออกเเบบ เเละสร้าง web app เเบบพื้นฐาน ยังมีส่วนที่ต้องเเก้ไขเเละปรับปรุงอีกมากเพื่อให้สามารถใช้งานได้จริง

Special thanks : SPN

เขียนโดย ที่ ไม่มีความคิดเห็น:

Deploy Web App to Heroku "Part 3" พบปัญหา !!

Deploy Web App to Heroku "พบปัญหา !!"

  • จากการทดสอบการใช้งานเบื้องต้นพบว่า สามารถใช้งานได้ปรกติ ยกเว้น การเพิ่มคำเข้าใน ฐานข้อมูล คือเมื่อทำการเพิ่มคำลงไปจะเกิดการ UnicodeEncodeError 'ascii' codec can't encode characters in position 0-6: ordinal not in range(128)

ทดลองค้นหาคำในฐานข้อมูล

สามารถค้นหาเเละเเสดงผลได้ตามปกติ

ทดลองเพิ่มคำลงใน ฐานข้อมูล

เกิดการ UnicodeEncodeError 'ascii'

  • การเเก้ปัญหา

          เนื่องจากตอนทดลองเขียนได้ใช้ Python 3 ในการทดลองจึงทำให้ Wep app สามารถทำงานได้ตามปกติเเต่เมื่อทำการ Deploy ขึ้น Heroku Python ที่ใช้จะเป็น Python 2.7.11 จึงลองเปลี่ยนเป็น Python 3 โดยการสร้างไฟล์ชื่อ runtime.txt ขึ้นใน root directory ของ project และใส่ version ที่ต้องการจะใช้ไป เช่น python-3.5.1 ก็จะเป็นการใช้ Python 3.5.11 ใน App ของเรา

            จากนั้นได้ลองทำการ เพิ่ม คำในฐานข้อมูล อีกครั้ง ก็สามารถที่จะเพิ่ม คำในฐานข้อมูลได้ตามปกติ จึงสรุปได้ว่าการที่เกิด UnicodeEncodeError 'ascii' นั้นอาจจะเป็นเพราะ version ของ Python

    ทดลองเพิ่มคำในฐานข้อมูล

    คำที่เพิ่มขึ้นมา

เขียนโดย ที่ ไม่มีความคิดเห็น:

Deploy Web App to Heroku "Part 2" เริ่ม Deploy App

Deploy Web App to Heroku "เริ่ม Deploy App"

      ในการทดสอบในครั้งนี้ผมได้ใช้ Wordbank App ในการ Deploy น่ะครับสามารถดูได้ที่

 https://bitbucket.org/staticsuriya/assignment-wordbank
หรือ
 $ git clone https://staticsuriya@bitbucket.org/staticsuriya/assignment-wordbank.git

  • เข้าไปใน Directory ที่เราต้องการ Deploy ในที่นี้คือ assignment-wordbank น่ะครับ    


  • จากนั้นให้สร้าง virtual environment สำหรับ project 
$ virtualenv venv


 สร้างเสร็จจะมี folder ชื่อ venv ขึ้นมาใหม่

จากนั้นก็ทำการ activate virtualenv ให้ทำงาน
$ source venv/bin/activate
ถ้าไม่มีปัญหาจะมี (venv) อยู่ข้างหน้าหมายถึง virtualenv activate แล้ว (ถ้าปิดเปิด terminal ใหม่แล้วต้องการมาทำ project ต้อง activate ใหม่ทุกครั้ง) ตั้งแต่ step นี้ไปจะต้อง activate เอาไว้


  • สร้างไฟล์ requirements.txt เพื่อบอกให้ heroku รู้ว่า project ของเราต้องลงโปรแกรมอะไรบ้างในการจะ run project ในที่นี้ผมใช้ 
          dj-database-url==0.4.0
          Django==1.9.2
          gunicorn==19.4.5
          psycopg2==2.6.1
          whitenoise==2.0.6
          pdfkit==0.5.0
          Pillow==2.7.0

  • สร้างไฟล์ Procfile ขึ้นมา(ไม่มีนามสกุล) เพื่อเป็นการบอกให้ heroku รู้ว่าจะต้องรัน app ตัวไหน


          ภายในให้เขียนตามนี้ เพื่อบอกให้ run wsgi ของ project " web: gunicorn ชื่อของproject.wsgi --log-file - " ในที่นี้ project ชื่อ assignment_one ก็จะต้องใส่เป็น 
web: gunicorn assignment_one.wsgi --log-file - น่ะครับ
  • ให้ virtuallenv ทำการ ติดตั้งไฟล์ทั้งหมดที่จะเป็นในการรัน จาก list โปรแกรมใน requirements.txt (เพื่อจะนำมาลอง run แบบ local ในเครื่องก่อน deploy ) ครับ
$ sudo pip3 install -r requirements.txt




 แต่จะมีปัญหากับ app psycopg2 เพราะ จะต้องทำการลง code python เสริมก่อนด้วยคำสั่ง
$ sudo apt-get install libpq-dev && sudo apt-get install python3-dev
 แล้วลอง run ใหม่ ก็จะ install ผ่านไม่ติดตัวแดง
$ sudo pip3 install -r requirements.txt

  • เริ่มทดลอง run code จริง แบบ local ก่อน จะ deploy ลง heroku เพื่อทดสอบการทำงานครั้งสุดท้าย
    $ heroku local web

    แล้วลอง เข้า browser localhost:5000 (heroku จะใช้ port 5000 เป็นส่วนใหญ่) วิธีปิด heroku local web ให้กด ctrl+c


สามารถทำงานได้ตาม ปกติเเต่ไม่สามารถที่จะเเสดง CSS ได้
          วิธีการที่จะทำให้สามารถที่จะโหลด css ได้นั้นให้เข้าไปใน directory ของ project เปิดไฟล์ setting.py แล้วเพิ่ม code ตามนี้


import dj_database_url
# ไว้ด้านบนของไฟล์


PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/

STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
# Extra places for collectstatic to find static files.
 
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)
# Simplified static file serving.
# https://warehouse.python.org/project/whitenoise/
 
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
# ไว้ด้านล่างสุดของไฟล์ เดิมๆจะมี static_url ='/static/' อยู่แล้วให้ ลบตัวเก่าไป แล้วcode ด้านบนใส่ลงให้หมด

          ใน directory เดิม ให้สร้าง folder static ขึ้นมา และมีสร้างไฟล์อะไรก็ได้สักอันขึ้นมา เพราะ git จะไม่สนใจ folder เปล่าเวลา add 
          ในตัวอย่างนี้สร้างไฟล์ ชื่อ human.txt เอาไว้ ข้างในไม่ต้องพิมพ์อะไร เมื่อทำเสร็จทั้งหมดให้พิมพ์คำสั่ง (อย่าลืมว่าต้อง activate virtual venv ไว้ตลอด)
$ python manage.py collectstatic
ตอบ ' yes '
          คำสั่งนี้จะจัดการเอาไฟล์ static ทั้งหมดทุก app ที่เรามีรวมถึงรูปด้วยมาเก็บไว้ ใน folder ชื่อ staticfiles อยู่ใน folder projectหลังจากนั้นเปิด wsgi.py ไฟล์ ที่อยู่ใน folder project
แล้วเพิ่ม code ด้านล่าง
from whitenoise.django import DjangoWhiteNoise
application = DjangoWhiteNoise(application)


          ส่วนนี้คือให้โปรแกรม whitenoise จัดการ serve static file ให้กับ project ของเราไปแสดงผล เสร็จทั้งหมดนี้ก็ทดลองรัน heroku แบบ local
$ heroku local web
ก็จะเห็นได้ว่าสามารถที่จะโหลด CSS ได้เเล้ว ^^
  •   เริ่มเอา app ไป deploy จริง ต้อง commit git ก่อน deploy แต่เพื่อป้องกันไฟล์ที่ไม่เกี่ยวข้องให้เเก้ไขไฟล์ .gitignore ก่อน เข้าไปใน project ย้อนกับมาในหน้าที่มี manage.py

    กด ctrl+h เพื่อเเสดงไฟล์ที่ซ่อนอยู่ครับ

    เข้า .gitignore เพื่อทำการเเก้ไข ให้เเก้เป็น 
          venv
          *.pyc
          staticfiles
          .env
เเก้เสร็จกด save เลยครับ
     หลังจากนั้นก็ commit แล้วเอา code อัพขึ้น heroku
 $ git add .
 $ git commit -m "Added a Procfile."
 $ heroku create
    ถ้า heroku ถาม E-mail กับ Password ก็ให้ใส่ E-mail กับ Password ที่ได้ไปสมัคเว็บ Heroku มาน่ะครับ จากนี้เราก็ push web ของเราขึ้นไปเลยครับ
 $ git push heroku master
    รอจนเสร็จ.... ถ้าไม่มีอะไรผิดพลาดจะได้ดังรูปน่ะครับ ว่า deploy... done. จากนั้นเราก็สามารถที่จะดูเว็บของเราได้โดยการใช้คำสั่ง
 $ heroku open
 หน้าเว็บก็จะเปิดขึ้นมาครับ
    เเต่ url ที่ได้จะเเปลกๆซักหน่อยน่ะครับ
วิธีในการ rename app ของเราคือ การใช้คำสั่ง
 $ heroku apps:rename my_new_app_name
ในที่นี้ผมต้องการจะได้ชื่อว่า wordbankapp ผมจึงใช้ 
 $ heroku apps:rename wordbankapp



เสร็จเรียบร้อยครับการ Deploy App ขึ้น Heroku ของเรา ^^

 นี้คือตัวเว็บที่ได้น่ะครับ https://wordbankapp.herokuapp.com


เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)