சுருக்கமாக கூறுவதெனில் ReactPy என்பது ஜாவாஸ்கிரிப்ட் இல்லாமலேயே பைத்தானில் பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு நூலகமாகும்.இந்த ReactPyஇன்இடைமுகங்கள் ReactJS இல் உள்ளதைப் போன்றே தோற்றமளிக்கின்ற செயல்படுகின்ற கூறுகளிலிருந்து உருவாக்கப்படுகின்றன. இது பயன்படுத்த எளிதாகஇருக்கவேண்டுமேன்பதை மனதில் கொண்டு வடிவமைக்கப்பட்டுள்ளது, மிகமுக்கியமாக இந்தReactPy ஆனது இணையபயன்பாடுகளை உருவாக்குவதில் அனுபவம் இல்லாதவர்களால் பயன்படுத்திகொள்ளமுடியும்என்பதேயாகும்.. இதனை பயன்படுத்துவது எளிதான செயலாகும், மேலும்இது பின்னனி, முன்னனி தொழில்நுட்பங்களை ஒருங்கிணைக்க உதவுகிறது.
ReactPy என்பது ஒரு சமகால பைதான் நூலகமாகும், இது JavaScript சார்ந்திருக்கின்ற தேவையை அறவே நீக்குகின்ற அதே வேளையில், ReactJS இன் செயலிகளை ஒத்த, மாறுகின்ற ஊடாடுகின்ற பயனர் இடைமுகங்களை உருவாக்க மேம்படுத்து நர்களுக்கு இது உதவுகிறது (படம் 1 இல் காட்டப்பட்டுள்ளது). பைத்தானைப் பயன்படுத்தி வசீகரிக்கும் முன்னனி அனுபவங்களை உருவாக்க இது தடையற்ற வழிமுறையை வழங்குகிறது மேலும் இந்த(React)இல் காணப்படுவதை ஒத்த ஆக்கக்கூறுகளை மேம்படுத்துகிறது. இணைய மேம்பாட்டிற்கு புதிய நபர்களுக்கு நேரடியான அணுகுமுறையை வழங்குவதன் மூலம் இந்நூலகம் ஒரு உகந்த சமநிலையைத் தருகிறது, அதே நேரத்தில் அளவிடுதலின் செயல்திட்டங்களுக்கு தேவையான வலிமையையும் வழங்குகிறது.பயன்பாட்டின் முன்னனி திறன்களை மேம்படுத்த விரும்பும் பைதான் ஆர்வலராக இருந்தாலும் அல்லது பின்னனி முன்னனி தொழில்நுட்பங்களுக்கு இடையே மென்மையான ஒருங்கிணைப்பைத் தேடுகின்ற மேம்படுத்துநராக இருந்தாலும், ReactPy என்பது நம்முடைய கருவித் தொகுப்பில் மிகவும் மதிப்புமிக்க சொத்தாக திகழ்கின்றது. இதுபயன்பாடுகளுக்கான பயனர் இடைமுகங்களை எளிமையுடன் உருவாக்க நமக்கு அதிகாரம் அளிக்கிறது. அது வழங்குகின்ற அணுகுதலிருந்தும் வலிமையிலிருந்தும் பயனடைக.
மெய்நிகர் சூழலை அமைத்தல்
முதலில், பின்வருமாறான கட்டளைவரியின் மூலம் மெய்நிகர் சூழலை உருவாக்கிடுவதற்காக virtualenv ஐ நிறுவுகைசெய்திடுக :
$ pip install virtualenv
அவ்வாறு நிறுவுகைசெய்தபின், பின்வருமாறான கட்டளைவரியின் மூலம்ஒரு மெய்நிகர் சூழலை உருவாக்கிடுக:
$ virtualenv -p /usr/bin/python3.10 venv
இது venv எனப்படும் புதிய கோப்பகத்தை உருவாக்குகின்றது. இங்கே பைதான் 3.10 ஐப் பயன்படுத்திகொள்ளப்படுகின்றது; பைதான் பதிப்பு3.8 அல்லது 3.9 ஐ கூடப் பயன்படுத்திகொள்ளலாம். இப்போது,பின்வருமாறான கட்டளைவரியின்மூலம் மெய்நிகர் சூழலை செயல்படுத்திடுக:
ht@ext:~/sambashare/rajni$ source venv/bin/activate
(venv) ht@ext:~/sambashare/rajni$ python
Python 3.10.12 (main, Jun 7 2023, 12:45:35) [GCC 9.4.0] on linux
Type “help”, “copyright”, “credits” or “license” for more information.
இந்த மெய்நிகர் சூழலை செயலிழக்க செய்ய விரும்பினால், பின்வருமாறான கட்டளைவரியை முனைமத்தில் உள்ளிடுக:
(venv) ht@ext:~/sambashare/rajni/venv/code$ deactivate
பொதுவாக ReactPy ஆனது pipஐப் பயன்படுத்தி நிறுவுகைசெய்யப்பட்ட பின்னனி முனைமங்களில் ஒன்றைப் பயன்படுத்தி, அது சொந்தமாக ஆதரிக்கிறது. Starletteஐ பின்னனியாகப் (back-end) பயன்படுத்த விரும்பினால், படம் 2 இல் காட்டப் பட்டுள்ளவாறு ReactPy ஐ இயக்கலாம்.
நிறுவுகை செயல்முறை
படம் 2: நிறுவுகை செயல்முறை
கீழே காட்டப்பட்டுள்ளவாறான ReactPy இன் எளிய எடுத்துக்காட்டினை எடுத்துக் கொள்க:
1 from reactpy import component, html, run
2 @component
3 def Show ():
4 return html.hl(“Hello, world!”)
5 run (Show,host=”192.168.11.19”,port=7000)
Sublime எனும்திருத்தி அல்லது வழக்கமான பைதான் உரைநிரலைப் பயன்படுத்தி இந்தக் குறிமுறைவரிகளை இயக்கலாம். உள்ளடக்கத்தை hello.py இல் சேமித்து, பின்வரும் கட்டளைவரியுடன் அதை இயக்கிடுக:
$ python hello.py
வெளியீடு எவ்வாறு தோன்ற வேண்டும் என்பதை படம் 3 காட்டுகிறது.
படம் 3
இணைய உலாவியில் 192.168.11.19:7000 என்ற இணையதள முகவரியை உள்ளிடுக. படம் 4 இல் காட்டப்பட்டுள்ளவாறு,‘Hello, world!’ எனும் செய்தி திரையில் தோன்றிடுகின்றது. பிழை ஏற்பட்டால், குறிமுறைவரிகளின் ஒரு சிறிய பகுதியை மாற்றியமைத்திடுக:
உடன் இணைய உலாவியில் ‘Hello,world!’எனும் வெளியீடு திரையில்தோன்றுகின்றது
படம் 4: இணை உலாவியில் ‘Hello, world!’ எனும் வெளியீடு
$ run(Show, host=”0.0.0.0”, port=7000)
…or:
$ run(Show)
நம்மால் புரவலரையும்(host) ,வாயிலையும்(port) குறிப்பிட முடியாவிட்டால்கூட, பயன்பாடு ஆனது இயல்புநிலை IP முகவரியில் இயங்குகின்றது.
மேலேகூறிய எடுத்துக்காட்டின் கட்டளைவரிகளில் ஒவ்வொரு வரியும் என்ன செய்கிறது என்பதை இப்போது விவரமாக காண்போம்.
, ‘from reactpy import component, html, run’ எனும் முதல் கட்டளை வரியானது நூலகத்திலிருந்து தேவையான ஆக்கக்கூறுகளை பதவிறக்கம் செய்கிறது. இதில்’html’ என்பது HTML உறுப்புகளை உருவாக்குவதற்கான செயலிகளை வழங்குகிறது, ‘component’ என்பது React இன் ஆக்ககூறுகளை வரையறுக்கப் பயன்படுகின்ற ஒரு அலங்கரிப்பானாகும் .reactஇன் பயன்பாட்டை இயக்க ‘run’ என்பது பயன்படுத்தப்படுகிறது.
decorator ‘@component’என்பது அடுத்த செயலியை ஒரு React இன் ஆக்கக்கூறு என்று குறிப்பிடுகிறது.
‘def Show():’ என்பது ‘Show’ எனும் செயலியை அறிவிக்கிறது, இது ஒரு React இன் ஆக்ககூறுகளைக் குறிக்கிறது.
‘return html.h1(“Hello, world!”)’ என்ற கட்டளைவரி ‘Show’ எனும் ஆக்கக்கூறுக்கான திரும்பும் மதிப்பைக் குறிப்பிடுகிறது. இது ‘html’ எனும் தகவமைவிலிருந்து ‘html.h1’ செயலியைப் பயன்படுத்தி ‘Hello, world!’ என்ற உரையுடன் ஒரு HTML தலைப்பின் உறுப்பை (‘h1>’) உருவாக்குகிறது.
React எனும் பயன்பாடனது ‘‘run(Show, host=“192.168.11.19”, port=7000)’ எனும் கட்டளை வரியுடன் துவங்குகின்றது. இந்த பயன்பாடு ஆனது ‘reactpy’எனும் நூலகத்திலிருந்து ‘ ‘run’ எனும் செயலியைப் பயன்படுத்தி துவங்குகின்றது. பயன்பாட்டின் மூலஆக்கக்கூறு ஆனது ‘Show’இன் பகுதியாக அனுப்பப்படுகிறது. பயன்பாட்டின் புரவலராக செய்யப்படும் IP முகவரி, வாயில்(port) எண் ’ ஆகியவற்றின் தருமதிப்புகளால் குறிப்பிடப்படுகின்றன. இந்த நிகழ்வில், ‘port’ 7000 , IP முகவரி ‘192.168.11.19’ இன் வாயிலாக அணுக முடியும்.
மேலே உள்ள குறிமுறைவரிகளில்,‘Show’ எனப்படுவது நேரடியான React இன் ஆக்கக்கூறுகளை உருவாக்குகிறது, இது‘Hello, world!’ என்ற உரையுடன் HTML தலைப்பின் உறுப்பை வழங்குகின்றது. அதன் பிறகு, React எனும் பயன்பாடானது துவங்கப்பட்டு கொடுக்கப்பட்ட IP முகவரி ,வாயிலில் புரவலராக செய்யப்படுகிறது.
‘‘To-do List’’ எனும்பயன்பாட்டை உருவாக்குதல்
ReactPy இன் உதவியுடன் நாம் ‘To-do List’’எனும் பயன்பாட்டைப் பின்வருமாறான கட்டளைவரிகளுடன் உருவாக்கலாம்:
from reactpy import component, html, run
@component
def DataList(items, filter_by_priority=None, sort_by_priority=False):
if filter_by_priority is not None:
items = [i for i in items if i[“priority”] <= filter_by_priority]
if sort_by_priority:
items = sorted(items, key=lambda i: i[“priority”])
list_item_elements = [html.li({“key”: i[“id”]}, i[“text”]) for i in items]
return html.ul(list_item_elements)
@component
def TodoList():
tasks = [
{“id”: 0, “text”: “Read a book”, “priority”: 0},
{“id”: 1, “text”: “Meet Geet”, “priority”: 0},
{“id”: 2, “text”: “Hit the gym”, “priority”: 2},
{“id”: 3, “text”: “Buy egg”, “priority”: 1},
{“id”: 4, “text”: “Clean the house”, “priority”: 2},
{“id”: 5, “text”: “organize office”, “priority”: 2},
{“id”: 6, “text”: “Do some coding”, “priority”: 1},
{“id”: 7, “text”: “Read a book”, “priority”: 1},
]
return html.section(
html.h1(“My Todo List”),
DataList(tasks, filter_by_priority=1, sort_by_priority=True),
)
run(TodoList, host=”192.168.11.19”,port=7000)
நாம் செய்ய வேண்டிய பணியின் பட்டியலான பயன்பாட்டின் வெளியீடு படம் 5 இல் காட்டப்பட்டுள்ளது.
படம் 5: உலாவியில் ‘செய்ய வேண்டிய பட்டியல்’ பயன்பாட்டின் வெளியீடு
இன்னும் சவாலான ஒன்றுக்கு செல்லலாம். உருவப்படங்கள், தலைப்புகள், தலைப்புசெய்திகளைச்(captions), சேர்க்கலாம் மேலும் பல்வேறு HTML ஆக்கக் கூறுகளைப் பயன்படுத்தி அவற்றை ஒரு செயலியாககூட இணைக்கலாம் அதற்கான கட்டளைவரிகள்பின்வருமாறு:
from reactpy import component, html, run
@component
def Title(title):
return html.h1(title)
@component
def Photo():
return html.img(
{
“src”:”https://cdn.media.amplience.net/i/epammarketplace/open_source_license_header?version=1684831857337”,
“style”: {“width”: “40%”},
}
)
@component
def PhotographerName(caption):
return html.h4(caption)
@component
def PhotoViewer():
return html.section(
Title(“Picture of the day”),
Photo(),
PhotographerName(“Visos Banner”)
)
run(PhotoViewer, host=”192.168.11.19”,port=7000)
இதன்இறுதfவெளியீடு படம் 6 இல் காட்டப்பட்டுள்ளது.
படம் 6: இறுதி வெளியீடு
நம்முடைய குறிமுறைவரிகள் மீண்டும் பயன்படுத்தக்கூடியதாக இருப்பதை காணலாம். எனவே, எடுத்துக்காட்டாக, புகைப்படத்தையும் புகைப்படக் கலைஞரின் பெயரையும் கொண்ட ஒரு புதிய செயலியை வரையறுக்கலாம், அதன் பிறகு அந்தச் செயலியைப் பல முறை பயன்படுத்திகொள்க, URL , பெயரை மட்டும் குறிப்பிடுக. ஒரு பொருட்காட்சி(gallery), இணையதளம் போன்றவற்றை உருவாக்க இது போதுமானதாகும்.
ReactPy பின்னனியாக(back-end)
ReactPy FastAPI , Flask , Sanic , Starlette , Tornadoஆனது ஆகிய பின்னனி செயலாக்கங்களை ஆதரிக்கிறது:
ReactPy ஐ பின்னனியாக (back-end) நிறுவுகைசெய்திட, பின்வரும் கட்டளையை செயற்படுத்திடுக; காற்புள்ளிகளால் பிரிப்பதன் மூலம் ஒன்றுக்கு மேற்பட்ட வாய்ப்புகளை நிறுவுகைசெய்திடலாம்.
$ pip install “reactpy[fastapi,flask,sanic,starlette,tornado]”
எதையும் திரையில் காட்சியாக காண முடியும் என, ReactPy உடன், இயக்கநேர பயனர் இடைமுகங்களை உருவாக்குவது ஒரு தென்றல்போன்ற இனிமையான செயலாகும்.
மேலும் விவரங்களுக்கு reactpy.dev/எனும் இணையதளமுகவரிக்கு செல்க