5.

Implementation

5.1) Hardware requirements

“Category” “Parameter” “Requirement” “Supported by another platform?”

“Hardware” “CPU” “2.50GHz – 2.60GHz or “Yes”

faster”

“Memory” “8.0GB” “Maybe 4.0GB is enough. Then OS should

be installed on 240GB SSD”

“Total disk space” “OS: 240GB SSD “Maybe 1TB HDD is enough. Then RAM
should 16GB”
Application size on dick:
306MB”

“Network adapters” “Two Gigabit Ethernet “Yes”

Adapters”

“OS” “Operating system” “Windows 10” “Windows 8 also compatible”

“Service pack level” “Need to verify” “Need to verify”

Table 1 - hardware requirements

5.2) Software requirements

“Software” “Purpose”

“Visual Studio” “Front end and Back end development”

“Database” “PostgreSQL”

“Server” “Heroku”

“Arduino” “IoT devices implementations”

“Android studio” “To run the android emulator”

“Postman” “To check the Back end APIs”

“Microsoft word” “Document the Smart-Refuel application”

“Visual Paradigm” “Use case diagrams, activity diagrams, sequence

 diagrams and other relational diagrams”
Table 2 - software requirements

5.3) Python Django - Backend Implementation

“Django is an open-source platform for Python-based backend software applications—one of the top
web development languages. Its key objectives are simplicity, flexibility, efficiency, and scalability.”

“Django has its naming scheme for all features and modules (e.g., the HTTP response is named
"views").”

5.3.1) Project structure

Figure 1 - Python-Django project Structure

5.3.2) Virtual environment

“It is standard practice to use a virtual environment for our Python projects to build self-contained
development environments (also called sandboxes). The virtual environment aims to prevent separate
versions of libraries/packages from messing with each other.”

“Think of a virtual environment as an entirely separate container on our computer, where we can use
any version of Python and add libraries/packages, and it doesn't affect anything beyond the box. It's
like an isolated, soundproof space inside our house where we can yell as loud as we want, for
whatever we want, and nobody else in the room can hear it.”

“Belove command will help us list all the libraries with their versions installed in a virtual
environment. “

Figure 2 - cmd to list all the libraries.

Figure 3 - installed packages list

5.3.3) Defining a data models (models.py)

“Django web applications handle and query data via Python objects referred to as models. Models
describe the stored data configuration, including field types and likely their maximum size, default
values, collection list choices, document support text, form mark text, etc. Defining the model is
independent of the underlying database—we can select one of a few as part of our project settings. If
we have chosen what database we want to use, we don't need to communicate to it directly—we write
our model structure and other code, and Django does all the "dirty work" for us interacting with the
database.”

“The code snippet belove shows the Django model for an “UserAccount” object. It defines the email,
name, password, and OTP fields as character fields and specifies a maximum number of characters to
be stored for each record. And email field is assigned as a unique key. “is_active” and “is_staff”
fields are set as Boolean values to define a user as a superuser or not.”

Figure 4 - UserAccount class

“At the very least, in each model, we can describe the basic Python class method “__str__()” to
return a human-readable string for each item. This string is used to describe individual documents on
the administration web (and anywhere else, we need to refer to a model instance). It would also
retrieve a title or a name field from the model.”
 Figure 5 - __str__() code snippet

“The code snippet belove shows the Django model for an “RFIDDetail” object. It defines their
variables as character fields and specifies a maximum number of characters to be stored for each
record. And user field is assigned as a foreign key. “is_assigned” field is set as Boolean values to. So
that when the admin assigns a new tag, the admin can click on it. As soon the admin click on that
button user will receive an email about a success message.”

“And I create this class to store user tag details. Since one user can have more than one tags, I
assigned a user from the “UserAccount” as a foreign key.”

Figure 6 - RFIDDetail class

“The code snippet belove shows the Django model for an “RequestPool” object. It defines their
variables as character fields and specifies a maximum number of characters to be stored for each
record. And user field is assigned as a foreign key. A “request_date” field is set to Date and Time
field and assigned as auto adding field. So that date and time field will be automatically filled
whenever each record is adding to this table.”
And I use this object to deal with all the refuelling purposes.

Figure 7 - RequestPool class

“The code snippet belove shows the Django model for an “Inquiry” object. It defines their variables as
character fields and specifies a maximum number of characters to be stored for each record. And user
field is assigned as a foreign key.”

Figure 8 - Inquiry class

5.3.4) Model serializers (serializers.py)

“Serializers allow complex data, such as querysets and model instances, to be translated to native
Python datatypes that can quickly convert to JSON, XML, or other document types. Serializers also
 have deserialization, allowing parsed data to be translated back to complex forms after validating the
incoming data.”

“The serializers in the REST system function very similarly to the Django Type and Model Form
groups. They provide a Serializer class that gives us an efficient, generic way to monitor the
performance of our responses and a Model Serializer class that provides a useful shortcut for building
serializers that handle model instances and querysets.”

“Belove snippet shows my serializer class for the “RequestPool” object. Very first, I initialize a
variable called “EXP_TIME” for 180seconds (3mins). I used this variable to calculate the time when
a user requests a new session. When it becomes 3mins from the time user requested and will
display “request_date” as a “***EXPIRED***”.”

“When the user requests a new session for refuel by selecting a vehicle number and the fuel amount,
the user will forward it to the payment screen if all the user inputs are valid. After the payment is
made successfully, then he/she can go to the gas station to refuel. The RFID reader, placed at the gas
station, will read the vehicle’s RFID tag number, identify the car, and start to refuel.”

“That’s how the real-world condition will happen. But since I didn’t integrate the payment gateway
for the gas station side at this level, I used belove function (belove snippet) to demonstrate the real-
world transaction.”

“After successfully requesting a new session, the system will open a 3minutes session. Within a
3mins session user, should goes to the gas station to refuel his vehicle. After 3mins, the session will
be expired, and the user will not allow refuelling again. By opening a new session again, the user can
continue to refuel his/her vehicle again.”

“Demonstration” “With a payment gateway”

“Select vehicle number, enter merchant id and fuel “Select vehicle number, enter merchant id and fuel
amount in rupees.” amount in rupees.”
“If the user credentials are valid system will display “If the user credentials are the valid system will
a success message.” navigate the user to the payment screen to proceed to

“It opens a 3mins session, and the user should go to
the gas station within 3mins. Else the session will be
expired, and the user has to request another new
session.”
the payment.”
“After the transaction user can go to the gas station
and can refuel his/her vehicle. After the successful
refuelled, that session will be closed. Users can open
a new session by following the above steps.”

Figure 9 - RequestPool serializer class

5.3.5) View in Django (views.py)

“Django Views is one of the prominent participants in the MVT System of Django. A View is the
user interface what we see in our browser when we make a website. This is expressed by
HTML/CSS/JavaScript and Jinja scripts. As per Django Documents, A View is a Python feature that
takes a Web request and returns a Web response. This may be the HTML content of a web page, a
redirect, a 404 error, an XML document, or an image, whatever the web browser may view.”

Figure 10 - how views.py works.

 Figure 11 - RFIDDetail view set

“The above snippet shows the view-set class of the "RFIDDetail" object in the models.py class. I
declared two methods. One is the GET request to get the RFID details of the user. Another method is
a POST request to post RFID details of the user.”

“I am getting only the user's RFID details from the GET request, which "is_assigned = True". Since
one user can have more than one record, and in the GET request, as I want to get all that data, I used
the "many=True" condition (line number 221). If I did not apply this condition when I called the
GET request, I could get only the user's last added record.”
 5.3.6) URLS in Django (urls.py)

5.4) React Native – Frontend Implementation

“The mobile app is being built in JavaScript using the React Native framework. The application is
developed for both IOS and Android platforms using the IDE code for Visual Studio.”

5.4.1) Endpoints

“The above snippet shows the two constant variables. These two constant variables hold all the
endpoints and their appropriate methods. When I need to call the API, I can directly call the value
from this class. Therefore, if I want to do modifications for API, maybe, later on, I don’t need to go
through all classes and do the changes if I modernized my API. And this will reduce the duplicated
code using in the same class.”

5.4.2) User inputs validation

“Before uploading data to the server, it is essential to ensure that all appropriate form controls are
performed in the correct format. This is called client-side form validation, which aims to ensure that
the submitted data satisfies the criteria set out in the different form controls.”

“Client-side validation is an initial audit and an essential part of successful user experience; by
collecting invalid client-side data, the user can correct it instantly if it gets to the server and is then
denied, a noticeable delay triggered by a round trip to the server and then back to the client-side to
inform the user to correct their results.”

Belove snippet shows all the validations I have done to validate user inputs before sending data to the
server.

1. Email validation
2. Username validation
3. Password validation
4. OTP validation
5. Phone number validation
6. Vehicle number validation
7. Fuel amount validation
 5.5) Hardware Implementation

“The hardware component of the system is programmed in C programming language using Arduino
IDE. This device consists of three main modules; RFID-RC522, LCD Display 20*4 I2C, and
ESP8266 NodeMCU.”

Belove block diagram shows the final hardware device of the project.
 Figure 12 - Hardware connection diagram

“Belove block diagram shows the connection between the pins of both NodeMCU and the RFID-
RC522.”
 Figure 13 - Connect RFID reader to the NodeMCU.

“NodeMCU” “RFID-RC522”
“D4” “SDA”
“D5” “SCK”
“D7” “MOSI”
“D6” “MISO”
“-“ “IRQ”
“GND” “GND”
“D3” “RST”
“3V” “3.3V”

Above mentioned pins are used for the following goals.

“Pin name” “Description”

“SDA” “Acts as Serial Input (SS) for SPI communication, SDA for IIC, and Rx for
UART.”
“SCK” “Serial Clock pin – used to supply the origins of the clock.”
“MOSI” “Master out slave in pin for SPI correspondence.”
“MISO” “MISO pin used for SPI contact serves as SCL for I2c and Tx for UART.”
“IRQ” “Interrupt pin – used to wake up the module while the system is in range.”
“GND” “Connected to the ground of the device.”
“RST” “Reset pin – used to reset or reset the module.”
“3.3V” “Typically, 3.3V is used to operate the module.”
 Figure 14 - Connect 2004 display to the NodeMCU

“NodeMCU” “LCD Display 20*4 I2C”

“GND” “GND”
“3V” “VCC”
“D2” “SDA”
“D1” “SCL”

“The code snippet above contains all the libraries that are needed to use the program modules. The
libraries and their uses are as follows:”

 “LiquidCrystal_I2C.h:
A library for I2C LCDs. The library allows controlling I2C displays with functions
remarkably similar to the LiquidCrystal library.”

 “ESP8266HTTPClient.h:
 ESP8266HTTPClient specifically knows how to communicate with an HTTP web server and
does all the formatting and parsing needed.”
 “ArduinoJson.h:
It helps us parse JSON data and extract values based on keys. The ArduinoJson library is also
capable of serializing JSON, meaning we could generate our JSON data using data from
sensors connected to your ESP8266.”
 “MFRC522.h:
This library read and writes different Radio-Frequency IDentification (RFID) cards on our
NodeMCU using RC522 based reader connected via the Serial Peripheral Interface (SPI)
interface.”