👍Join Our📱Facebook🌍Page👉Click Here
👍Join Our📱Telegram🌍Group👉Click Here Share This News To Ur Groups& Add 9123576459
QR Code என சுருக்கமாக அழைக்கப்படுகிற Quick Response Code-ஐ நாம் அன்றாடம் பல இடங்களில் கடந்துசெல்கிறோம். கடைகளில் வாங்கும் பொருள்களிலிருந்து, செய்தித்தாள் விளம்பரங்கள் வரை இக்குறியீட்டை நாம் காணலாம். நமது திறன்பேசியிலுள்ள கேமராவைக்கொண்டு இக்குறியீட்டை வருடும்போது அதில் ஒளித்துவைக்கப்பட்டுள்ள செய்தியை நாம் அறிந்துகொள்ளலாம். இச்செய்தி ஒரு வணிகப்பொருளுக்கான வலைத்தள முகவரியாகவோ, நிறுவனங்களின் வைபை கடவுச்சொல்லாகவோ இருக்கலாம். இக்குறியீட்டை வழங்குபவரின் நோக்கத்தைப்பொருத்து செய்திகளை இதற்குள் குறித்துவைக்கமுடியும்.
நிரல்வழியே விரைவு எதிர்வினை குறியீடுகளை உருவாக்குவதற்கு பல திரட்டுகள் கிடைக்கின்றன. இப்பதிவில், ரியாக்ட் கட்டமைப்பைப் பயன்படுத்தி, இக்குறியீடுகளை உருவாக்கவும், உணரவும் முயலலாம்.
ரியாக்ட் செயலி உருவாக்கம்:
முதல்படியாக ஒரு ரியாக்ட் செயலியை உருவாக்கலாம். பலவழிகளில் இதனைச் செய்யமுடியும். அவற்றையெல்லாம் இவ்விணைப்பில் காணலாம். நமது தேவைக்கு create-react-app என்ற கருவியைப் பயன்படுத்தி qr-code-demo என்ற புதிய செயலியை உருவாக்கலாம்.
1
2
3
| npx create-react-app qr-code-democd qr-code-demonpm start |
இக்கட்டளையை இயக்கியவுடன் localhost:3000 என்ற முகவரியைக் கொண்ட பக்கம் உலாவியில் திறக்கப்படுகிறது. கீழ்கண்ட படத்திலுள்ளது போன்ற பக்கத்தை அதில் காணலாம்.
இதில் குறிப்பிட்டுள்ளது போல, src/App.js என்ற கோப்பினை மாற்றி, ஒரு விரைவு எதிர்வினைக் குறியீட்டை உருவாக்கலாம்.
QR Code – உருவாக்கம்
கியூஆர் குறியீட்டை உருவாக்குவதற்கு qrcode என்ற திரட்டு பயன்படுகிறது. பின்வரும் கட்டளையைக் கொடுப்பதன் மூலம், இத்திரட்டை செயலியின் சார்புகளில் சேர்க்கவேண்டும்.
1
| npm install --save qrcode |
App.js ல் இதைப் பயன்படுத்துவதற்கு முன், பின்வருமாறு இறக்குமதி செய்யவேண்டும்.
1
| import QRCode from 'qrcode'; |
அதன் பின்னர், விரைவு எதிர்வினைக் குறியீட்டை உருவாக்குவதற்கு, பின்வரும் நிரலைப் பயன்படுத்தலாம்.
1
2
3
4
5
| generateQRCode() { .then(url => this.setState({ url })) .catch(err => console.error(err))} |
இங்கே www.kaniyam.com/qrcode என்பது நாம் உருவாக்குகிற குறியீட்டில் இருக்கவேண்டிய செய்தியாகும். toDataURL என்ற செயற்கூறு, இச்செய்தியை குறியீடாக மாற்றி, அதற்கான data url ஐத்தருகிறது. இதனை ஒரு <img /> க்கு மூலமாக (src) கொடுக்கும்போது நம்மால் குறியீட்டைத் திரையில் காண முடிகிறது.
<img src={this.state.url} alt=’qr-code’/>
இக்குறியீட்டை உங்கள் திறன்பேசியின் கேமரா மூலம் வருடும்போது அதில் பொதிந்துள்ள செய்தியை நீங்கள் அறிந்துகொள்ளலாம்.
மேலே, முக்கியமான சில நிரல் துண்டுகளை மட்டும் கவனத்தில் கொண்டோம். இக்குறியீட்டைப் பெறுவதற்கான முழுமையான நிரலைக் கீழே காணலாம்.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| import React, { Component } from 'react';import QRCode from 'qrcode';import './App.css';class App extends Component { constructor(props) { super(props); this.state = { url: null } } componentDidMount() { this.generateQRCode(); } generateQRCode() { .then(url => this.setState({ url })) .catch(err => console.error(err)) } render() { return ( <div className="App"> <header className="App-header"> <img src={this.state.url} alt='qr-code'/> </header> </div> ); }}export default App; |
QR Code – உணர்தல்
அடுத்ததாக, பிறர் உருவாக்கி வைத்துள்ள கியூஆர் குறியீட்டை படித்துணரவும், அச்செய்தியை நமது செயலியில் பயன்படுத்திக்கொள்ளவும், இக்குறியீட்டுக்கான வருடியை எப்படி பயன்படுத்துவது என அறியலாம். இதற்கென react-qr-scanner என்ற திரட்டைப் பயன்படுத்துகிறோம். முதல்படியாக அதனை சார்புகளில் சேர்க்கவேண்டும்.
1
| npm install --save react-qr-scanner |
அடுத்ததாக, இதனை App.jsல் இறக்குமதி செய்யவேண்டும்.
1
| import QrReader from 'react-qr-scanner'; |
240×320 என்ற அளவுகொண்ட பகுதியில் கேமராவினை இயக்கி, குறியீட்டை வருடுவதற்கு, பின்வரும் நிரலைப் பயன்படுத்தலாம்.
1
2
3
4
5
6
| <QrReader delay={100} style={{ height: 240, width: 320 }} onError={(err) => console.error(err)} onScan={this.handleScan} /> |
இங்கே delay என்பது எத்தனை மில்லிவினாடிகளுக்கு ஒருமுறை கியூஆர் குறியீட்டை வருடவேண்டும் எனக் குறிப்பிடுகிறது. வருடும்போது பிழை ஏற்பட்டால் என்ன செய்யவேண்டும் என்பதை onError குறிக்கிறது. வருடிய செய்தியை என்ன செய்யவேண்டும் என்பதை onScan குறிக்கிறது. இங்கே handleScan என்ற செயற்கூற்றினைப் பயன்படுத்துமாறு எழுதியிருக்கிறோம். அச்செயற்கூற்றின் வரையறையை கீழே காணலாம்.
1
2
3
4
5
| handleScan(data){ this.setState({ result: data })} |
இந்த எளிய செயற்கூறு, குறியீட்டில் உள்ள தகவலை data என்ற உள்ளீடாகப் பெற்று, result என்ற மாறியில் சேமிக்கிறது. செயல்முறைக்காக, ஒரு <p />ஐப் பயன்படுத்தி, இத்தகவலைத் திரையில் காட்டலாம்.
<p>{this.state.result}</p>
இதற்கான முழுமையான நிரலைக் கீழே காணலாம்.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| import React, { Component } from 'react';import QrReader from 'react-qr-scanner';import './App.css';class App extends Component { constructor(props) { super(props); this.state = { result: 'Loading...' } this.handleScan = this.handleScan.bind(this) } handleScan(data){ this.setState({ result: data }) } render() { return ( <div className="App"> <header className="App-header"> <QrReader delay={100} style={{ height: 240, width: 320 }} onError={(err) => console.error(err)} onScan={this.handleScan} /> <p>{this.state.result}</p> </header> </div> ); }}export default App; |
👍Join Our📱WhatsApp🌍Group👉Click Here
👍Join Our📱Facebook🌍Page👉Click Here
👍Join Our📱Telegram🌍Group👉Click Here கணினிக்கல்வி செய்திகளை உங்கள் WhatsApp Groupல் உடனடியாக பெறுவதற்கு 9123576459 இந்த எண்ணை இணைக்கவும்
