Skip to content

Commit 1b836e4

Browse files
author
Patricio Vargas
committed
read me and nfc value write
1 parent 34e13d2 commit 1b836e4

File tree

3 files changed

+121
-39
lines changed

3 files changed

+121
-39
lines changed

‎README.md‎

Lines changed: 109 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,142 @@
1-
# Getting Started with Create React App
1+
# REACT NFC Sample App
2+
3+
## About
4+
5+
This is a simple sample app demostrating the usage of the [Web NFC API](https://w3c.github.io/web-nfc/). To get the Web NFC API working you will need an Android Device with Google Chrome and you web app will need to be hosted using https.
6+
7+
This is the [sample app](https://react-nfc-90146.web.app/) in action.
8+
9+
### WTF is NFC?
10+
11+
NFC stands for **_Near-Field Communication_**. NFC is a set of communication protocols for communication between two electronic devices.
12+
13+
Electromagnetic fields can be used to transmit data or induce electrical currents in a receiving device. Passive NFC devices draw power from the fields produced by active devices, but the range is short.
214

315
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
416

5-
## Available Scripts
17+
You can buy NFC Tags on [Amazon](https://www.amazon.com/gp/product/B0727NYX3B/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1). These tags can contain up to 540KB of info.
618

7-
In the project directory, you can run:
19+
## Usages
20+
21+
NFCs can have multiple usages, some of the usages are:
822

9-
### `yarn start`
23+
- Making contactless payments like Google and Apple Pay
24+
- Opening a door using your badge
25+
- Opening a link
26+
- Produc control in a warehouse
1027

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
28+
To learn about the usages visit [this forum](https://nfc-forum.org/what-is-nfc/).
1329

14-
The page will reload if you make edits.\
15-
You will also see any lint errors in the console.
30+
## Getting Started with the Web NFC API
1631

17-
### `yarn test`
32+
This project uses 4 methods of the Web NFC API
1833

19-
Launches the test runner in the interactive watch mode.\
20-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
34+
1. Scan: Returns a Promise resolved if starting NFC scan was successful.
2135

22-
### `yarn build`
36+
`ndef.scan()`
2337

24-
Builds the app for production to the `build` folder.\
25-
It correctly bundles React in production mode and optimizes the build for the best performance.
38+
2. Reading: An event fired when a new reading is available.
2639

27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
40+
`ndef.onreading()`
2941

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
42+
3. Reading Error: An event fired when an error happened during reading.
3143

32-
### `yarn eject`
44+
`ndef.onreadingerror()`
3345

34-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
46+
4. Write: Returns a Promise resolved if writing the message (String, ArrayBuffer or NDEF record) with options was successful.
47+
`ndef.write()`
3548

36-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
49+
## Using the methods
3750

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
51+
### Scan, Reading, Reading Error
3952

40-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
53+
```javascript
54+
const scan = async() =>
55+
if ("NDEFReader" in window) {
56+
try {
57+
const ndef = new window.NDEFReader();
58+
await ndef.scan();
4159

42-
## Learn More
60+
console.log("Scan started successfully.");
61+
ndef.onreadingerror = () => {
62+
console.log("Cannot read data from the NFC tag. Try another one?");
63+
};
4364

44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
65+
ndef.onreading = (event) => {
66+
console.log("NDEF message read.");
67+
onReading(event); //Find function below
68+
};
69+
} catch (error) {
70+
console.log(`Error! Scan failed to start: ${error}.`);
71+
}
72+
}
73+
};
74+
```
4575

46-
To learn React, check out the [React documentation](https://reactjs.org/).
76+
The **onReading** method grabs the message and serial number inside of the NFC tag, the uses the array of reacord inside of the message and decodes the information so its readable to humans.
4777

48-
### Code Splitting
78+
```javascript
79+
const onReading = ({message, serialNumber}) => {
80+
console.log(serialNumber);
81+
for (const record of message.records) {
82+
switch (record.recordType) {
83+
case "text":
84+
const textDecoder = new TextDecoder(record.encoding);
85+
console.log("Message": textDecoder.decode(record.data));
86+
break;
87+
case "url":
88+
// TODO: Read URL record with record data.
89+
break;
90+
default:
91+
// TODO: Handle other records with record data.
92+
}
93+
}
94+
};
95+
```
4996

50-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
97+
### Write
5198

52-
### Analyzing the Bundle Size
99+
```javascript
100+
const onWrite = () => {
101+
try {
102+
const ndef = new window.NDEFReader();
103+
await ndef.write({
104+
records: [{ recordType: "text", data: "Hellow World!" }],
105+
});
106+
console.log(`Value Saved!`);
107+
} catch (error) {
108+
console.log(error);
109+
}
110+
};
111+
```
53112

54-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
113+
## Learn More & Resources
55114

56-
### Making a Progressive Web App
115+
- https://web.dev/nfc/
116+
- https://www.androidauthority.com/what-is-nfc-270730/
117+
- https://nfc-forum.org/what-is-nfc/
118+
- https://whatwebcando.today/nfc.html
119+
- https://caniuse.com/webnfc
120+
- https://w3c.github.io/web-nfc/
57121

58-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
122+
## Available Scripts
59123

60-
### Advanced Configuration
124+
In the project directory, you can run:
61125

62-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
126+
### `yarn start`
63127

64-
### Deployment
128+
Runs the app in the development mode.\
129+
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
65130

66-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
131+
The page will reload if you make edits.\
132+
You will also see any lint errors in the console.
67133

68-
### `yarn build` fails to minify
134+
### `yarn build`
135+
136+
Builds the app for production to the `build` folder.\
137+
It correctly bundles React in production mode and optimizes the build for the best performance.
69138

70-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
139+
The build is minified and the filenames include the hashes.\
140+
Your app is ready to be deployed!
141+
142+
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

‎src/components/Writer/Writer.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { useCallback, useEffect } from 'react';
2+
3+
const Writer = () => {
4+
5+
return (
6+
<></>
7+
);
8+
};
9+
10+
export default Writer;

‎src/containers/Write.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ const Write = () => {
44
const onWrite = useCallback(async() => {
55
try {
66
const ndef = new window.NDEFReader();
7-
await ndef.write({records: [{ recordType: "text", data: "18" }]});
8-
alert(`${18} saved!`);
7+
await ndef.write({records: [{ recordType: "text", data: "Hello World!" }]});
8+
alert(`Value Saved!`);
99
} catch (error) {
1010
console.log(error);
1111
}

0 commit comments

Comments
 (0)