<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Vlladie Condeno</title>
    <description>The latest articles on DEV Community by Vlladie Condeno (@vldcndn).</description>
    <link>https://dev.to/vldcndn</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F444944%2Fc71798e1-c8fe-44b6-a5cc-db0f47e59535.png</url>
      <title>DEV Community: Vlladie Condeno</title>
      <link>https://dev.to/vldcndn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/vldcndn"/>
    <language>en</language>
    <item>
      <title>Read Mifare Classic card using NFC-PCSC library - NodeJS &amp; Socket IO</title>
      <dc:creator>Vlladie Condeno</dc:creator>
      <pubDate>Tue, 13 Sep 2022 03:49:11 +0000</pubDate>
      <link>https://dev.to/vldcndn/read-mifare-classic-card-using-nfc-pcsc-library-nodejs-socket-io-44be</link>
      <guid>https://dev.to/vldcndn/read-mifare-classic-card-using-nfc-pcsc-library-nodejs-socket-io-44be</guid>
      <description>&lt;h2&gt;
  
  
  OBJECTIVE
&lt;/h2&gt;

&lt;p&gt;Apply the tap and go so that the user doesn't need to interact with the person in charge on the station.&lt;/p&gt;

&lt;p&gt;The challenge is to get the value stored in the smartcard and pass the data to the front end and then the front end will request the full information from the server.&lt;/p&gt;

&lt;p&gt;The image below will be the setup.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MIAepN2n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s3j5bm3jgsn9cuzabae.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MIAepN2n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s3j5bm3jgsn9cuzabae.jpg" alt="Setup" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Tools
&lt;/h2&gt;

&lt;p&gt;I tried searching for a library that I can use to help me read the the smartcard sector using &lt;strong&gt;NodeJS&lt;/strong&gt;. the client is using a MIFARE Classic card and I found this library &lt;a href="https://github.com/pokusew/nfc-pcsc"&gt;pokusew/nfc-pcsc&lt;/a&gt; which uses a &lt;strong&gt;javascript/NodeJS language&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The nfc-pcsc have it's &lt;a href="https://github.com/pokusew/nfc-pcsc/blob/master/examples/mifare-classic.js"&gt;own example&lt;/a&gt; for mifare-classic, the only needs to do is to apply the socketIO.&lt;/p&gt;
&lt;h2&gt;
  
  
  Implementation
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KzHBd5Cv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2vwxe9aluu286d62uap.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KzHBd5Cv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2vwxe9aluu286d62uap.jpg" alt="Image description" width="800" height="449"&gt;&lt;/a&gt;&lt;br&gt;
This is the structure. The NodeJS App needs to be in the same station where the smartcard reader is connected. &lt;br&gt;
The client card contains a unique data as an identifier &lt;/p&gt;
&lt;h3&gt;
  
  
  Process:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Front end will establish a websocket to the NodeJS App&lt;/li&gt;
&lt;li&gt;NodeJS App will start listening to any card that been tap.&lt;/li&gt;
&lt;li&gt;If NodeJS Receive a card tapped, it will start reading the card Sector 2, after that, NodeJS App will emit to the front end what's 
the information it gets from the card. &lt;/li&gt;
&lt;li&gt;If Front end get the data, it will send the data it gets to the backend to fetch the full information.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You can check the whole code in my GitHub repo below.&lt;br&gt;
&lt;a href="https://github.com/VLDCNDN/smartcard-reader"&gt;https://github.com/VLDCNDN/smartcard-reader&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/VLDCNDN"&gt;
        VLDCNDN
      &lt;/a&gt; / &lt;a href="https://github.com/VLDCNDN/smartcard-reader"&gt;
        smartcard-reader
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      read smartcard Mifare Classic using NodeJS and SocketIO
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h3&gt;
Requirements&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;nodeJS 8 above&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For other Requirements please refer here &lt;a href="https://github.com/pokusew/nfc-pcsc#installation"&gt;nfc-pcsc installation&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
Installation&lt;/h1&gt;
&lt;p&gt;Run &lt;code&gt;npm install&lt;/code&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/VLDCNDN/smartcard-reader"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


</description>
      <category>nfc</category>
      <category>node</category>
      <category>socketio</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Create API Using AWS Rekognition to return detected faces in uploaded image - Nodejs &amp; React</title>
      <dc:creator>Vlladie Condeno</dc:creator>
      <pubDate>Thu, 18 Aug 2022 18:23:09 +0000</pubDate>
      <link>https://dev.to/vldcndn/create-api-using-aws-rekognition-to-return-detected-faces-in-uploaded-image-nodejs-react-353m</link>
      <guid>https://dev.to/vldcndn/create-api-using-aws-rekognition-to-return-detected-faces-in-uploaded-image-nodejs-react-353m</guid>
      <description>&lt;p&gt;&lt;strong&gt;Objective:&lt;/strong&gt; user can upload image and it will return the list of detected faces.&lt;/p&gt;

&lt;p&gt;You can visit the repo &lt;a href="https://github.com/VLDCNDN/face-rekognition-app"&gt;here&lt;/a&gt; and fork it and try it yourself!&lt;br&gt;
or you can follow the instruction below&lt;/p&gt;
&lt;h5&gt;
  
  
  1. Clone the repo by running in your cmd
&lt;/h5&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;
&lt;span class="nv"&gt;$ &lt;/span&gt;git clone https://github.com/VLDCNDN/face-rekognition-app.git
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;face-rekognition-app
&lt;span class="nv"&gt;$ &lt;/span&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h5&gt;
  
  
  2. Copy &lt;code&gt;.env.copy&lt;/code&gt; file then paste it in the same level of the copied file, rename the file into &lt;code&gt;.env&lt;/code&gt;
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XQv1xAZQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9yj6vssn33yw9wwxsph.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XQv1xAZQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9yj6vssn33yw9wwxsph.png" alt="step2 image" width="347" height="308"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h5&gt;
  
  
  3. Open &lt;code&gt;.env&lt;/code&gt; file and make sure that the 2 value exist
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--z1wz1qd7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avqsz5waarakc10xg9bf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--z1wz1qd7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avqsz5waarakc10xg9bf.png" alt="Step3" width="800" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Make sure that you already configure the &lt;a href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html"&gt;&lt;strong&gt;AWS Credential&lt;/strong&gt; ENV&lt;/a&gt; because the app will not run without it &lt;/p&gt;
&lt;h3&gt;
  
  
  Now you can run it's &lt;code&gt;API&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Here's the URL for the API&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# REQUEST
POST /api/detect-faces
body {
   "image": "base64 image"
}

# RESPONSE FORMAT
{
  "data" : [
     "base64 image",
     ...
   ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jUb4AXh3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayztt2wl4ymq5uyl50g1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jUb4AXh3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayztt2wl4ymq5uyl50g1.png" alt="Response" width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  If you want to use the front end
&lt;/h3&gt;

&lt;p&gt;within the same repo, run&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;cd client &amp;amp;&amp;amp; npm install&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;now try running&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;npm start&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;make sure that you're under &lt;code&gt;client&lt;/code&gt; folder&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;now you can see this (localhost:3000) &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ES1Y9Naq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao3128z3zidrs2tzvqse.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ES1Y9Naq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao3128z3zidrs2tzvqse.png" alt="Result" width="800" height="478"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you only want the backend, you can just delete the client folder&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NOTE:&lt;/strong&gt; Make sure that your nodejs/express is running in port of 3001 since the proxy set in reactjs is 3001 for backend, just change the reactjs proxy url if you wanted the backend running different port&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XJ1yPMT9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ahx39lkmb07er4jnrnz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XJ1yPMT9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ahx39lkmb07er4jnrnz.png" alt="Port" width="800" height="510"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>node</category>
      <category>react</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
