INDUSTRY PROJECT

SHOP SICKLE: AN ECOMMERCE

APP FOR SICKLE INNOVATIONS
Under the Guidance of
Prof. Mallikarjun Akki

Presented By:
Neelendra Singh
01FE17BCS115
 CONTENTS
1. Introduction
2. About Company
3. Introduction
4. Literature Survey
5. Objectives
6. Functional Requirements
7. Block Diagram
8. Use Case Diagram
9. Activity Diagram
10. Implementation
11. Results
12. Future Scope
13. Conclusion
 ABOUT COMPANY
Sickle Innovations is a farming solution company with a
core focus on improving conventional farming practices
through design intervention. We closely work with farming
communities to identify the problems and challenges
facing our agricultural sector and offer innovative
solutions.
PRODUCT PORTFOLIO
 INTRODUCTION
Shop Sickle is an Ecommerce app for Sickle Innovations where they can sell their farming
tools and equipments at cheap rates and reach a larger number of customers. React Native
was used which is a framework for building native apps for iOS or Android using JavaScript.
Cloud Firestore was also used which allows to store the data in the cloud, so the user can
sync it across all the devices or share them among multiple users.
 LITERATURE SURVEY
React Native
React Native is a framework for building native apps for
iOS or Android using JavaScript. With React Native one
doesn't need to know iOS or Android programming unless
they want to build a complex app and need to access the
native API of those platforms.

The React Native maps these components into their native widgets. React native provides
various stateless components like View, Button, Text, etc. that can be composed to build
interactive and responsive interfaces. With a rich eco-system built around. React Native, it is
a very good choice to build cross-platform applications.
 OBJECTIVES

1. Solve a real-world problem using a software solution.

2. Study and explore the popular technologies that are widely used for cross-platform

(Android and iOS) mobile app development.

3. Make sure the mobile application is scalable.

4. Design the user-interface screens.

FUNCTIONAL REQUIREMENTS

7. Add New Product

1. Sign up User
8. Update
2. Login User
Product 9.
3. Logout
Delete Product
User
10. Contact Seller
4. List All Products
11.
5. List
Contact Buyer
My products
12. Chat with
6. Search/Filter Product
BLOCK DIAGRAM
USE CASE
DIAGRAM
ACTIVITY
DIAGRAM
 Tab Navigation Between Screens using React Native

function Notification({ navigation }) {

return (
<View style={{ flex: 1, alignItems:
'center', justifyContent: 'center' }}> Above is our functional
<Text>Notifications Details</Text> component for the
<Pressable
onPress={() =>
Notifications page. The
navigation.navigate('Notifications')} screen contains a Pressable
style={{ padding: 10, marginBottom: component. Notice that a
10, marginTop: 10 }}
> navigation prop is passed to
<Text>Go to Notifications</Text> the component. We can use
</Pressable> this navigation prop, to jump
</View>
); to any of the tabs.
}
 Cloud Firestore

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from
Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in
sync across client apps through real time listeners and offers offline support for mobile and
web so you can build responsive apps that work regardless of network latency or Internet
connectivity.
 Upload Files to Firebase Storage
import storage from '@react-native-firebase/storage'; // 1

uploadImageToStorage(path, imageName) {
let reference = storage().ref(imageName); // 2
let task = reference.putFile(path); // 3

task.then(() => { // 4
console.log('Image uploaded to the bucket!');
}).catch((e) => console.log('uploading image error => ', e));

1. Import the default Firebase app module.

2. Create an instance of the Firebase storage API and use the ref function to get a
reference instance to upload an image.
3. Invoke the putFile function with a file path/URI to upload the file to Firebase
storage.
4. The putFile function returns a task object that supports Promise based
implementation to track the result of the upload process using the then function.
BALSAMIQ WIREFRAMES
RESULTS
 FUTURE SCOPE
The future scope of the application lies in adding the payment gateways in the
application. Currently the buyer/seller have to contact each other to make a
trade on their own, since the app is in its initial phases. But as soon as the
number of users increase adding a ssl secured payment gateway will be must.
Since the app is still in the developing phase and users have to yet use the app to
buy the products the reviews of the products are not available. When the app
will be used in a large scale a user review module will have to be added so that
the customers get to see the actual product reviews of the app. Continuous
maintenance, bug-fixes and updation of the application is also crucial for the
long-term success of the application.
 CONCLUSION

To conclude, I'd like to summarize my experience. It takes time to learn the latest
technologies of our own and use them to write the application code. One has to have
enough patience to learn and then write, debug, and test the code. This project helped
me grow not only learning new technologies but other aspects and enhance our skills
like analysis, constant communication with end users, and taking bold decisions of our
own.
INDUSTRY TRAINING
Front-End Development Using
React Native
Under the Guidance of
Prof. Mallikarjun Akki

Presented By:
Neelendra Singh
01FE17BCS115
 CONTENTS
1. Introduction
2. Tools and Technologies
3. Software Development Lifecycle (SDLC)
4. Conclusion
 ABOUT COMPANY
Sickle Innovations is a farming solution company with a
core focus on improving conventional farming practices
through design intervention. We closely work with farming
communities to identify the problems and challenges
facing our agricultural sector and offer innovative
solutions.
PRODUCT PORTFOLIO
 INTRODUCTION
The main objective of the internship training is to experience and understand real-life
situation in industrial organizations and their related environments and accelerating the
learning process of how student’s knowledge could be used in a realistic way. Student’ s
implement what they have learned and learn more throughout the training. Students can also
gain experience to select the optimal solution in handling a situation. During industrial
training, students can learn the accepted safety practices in industry. The main objectives of
the internship are:
• To develop skills in the application of theory to practical work situation.
• To expose the students to real work environment experience and gain knowledge.
• To expose the students to new software tools used in the organization.
• To make the student understand the safety practices carried out in the industry.
 React Native
React Native is a framework for building native apps for iOS or Android using JavaScript.
With React Native one doesn't need to know iOS or Android programming unless they want
to build a complex app and need to access the native API of those platforms. Application code
is written using the JavaScript language only and the same code can be shared across iOS and
Android. The User Interface can be represented in an abstract or platform-independent way
as a composition of components. The React Native maps these components into their native
widgets. React native provides various stateless components like View, Button, Text, etc. that
can be composed to build interactive and responsive interfaces. With a rich eco-system built
around. React Native, it is a very good choice to build cross-platform applications.
With React Native we can create native apps and the user experience is also quite seamless. It
has 3 core set of components which map directly to platform’s native UI:
1. View
2. Text
3. Image
 Pressable Component In React Native
React Native recently released a new core component called Pressable in version 0.63. As the name
suggests, this component can detect the different stages of press or touch interactions. Pressable could
potentially be an alternative to older components like TouchableOpacity and
TouchableWithoutFeedback.

onPressIn()
This is method called as soon as a press event occurs.
onLongPress() – Hot and New!
This method is a useful new method that comes with Pressable. It
is called after onPressIn() if the user engages with a long press/touch that lasts over 370 milliseconds. This value can be
customized using the delayLongPress prop.
delayLongPress – Hot and New!
This prop is used to customize the delay time that is used to call the method
onLongPress() after onPressIn(). The prop is basically a duration that is set in milliseconds.
onPressOut()

This method is called when the press/touch is released.

onPress()
This method is called right after
onPressOut() method.
 Tab Navigation Between Screens using React Native

function Notification({ navigation }) {

return (
<View style={{ flex: 1, alignItems:
'center', justifyContent: 'center' }}> Above is our functional
<Text>Notifications Details</Text> component for the
<Pressable
onPress={() =>
Notifications page. The
navigation.navigate('Notifications')} screen contains a Pressable
style={{ padding: 10, marginBottom: component. Notice that a
10, marginTop: 10 }}
> navigation prop is passed to
<Text>Go to Notifications</Text> the component. We can use
</Pressable> this navigation prop, to jump
</View>
); to any of the tabs.
}
Cloud Firestore
Cloud Firestore allows us to store the data in the cloud, so the user can sync it across all the devices
or share them among multiple users. It also allows structuring of data in ways that make more sense
because of its powerful querying and fetching capabilities. It works in near real-time, automatically
fetching changes from the database as they take place. It scales automatically as the usage grows. It
gives the developer serverless development experience because of no infrastructure issues. The
features like setting up the backend, scalability, data replication, recovery from server failure, and
other administrative tasks are automatically taken care of by the Google Cloud Firestore
How it works
Cloud Firestore is cloud-based, NoSQL website for your iOS, Android, and web applications
that can directly access native SDKs. Cloud Firestore is also available in Node.js, Java,
Python, Unity, C ++ and Go Go SDKs, in addition to REST and RPC APIs.

Following the Cloud Firestore data model for NoSQL, you store data in documents containing
configuration fields for values. These documents are stored in clusters, which are containers
for your documents that you can use to organize your data and create queries. Documents
support a wide range of data sources, from simple strings and numbers, to complex, integrated
objects. You can also create sub collections within documents and create equal data structures
that grow as your database grows. The Cloud Firestore data model supports any data structure
that works best in your application.
Firebase Storage
Firebase Storage allows storage and retrieval of user-generated content like images, audio, and
video without the need of a self-administered server. The Google Cloud platform takes care of the
administration.

Key Features
1. Robust Firebase SDKs functions for Cloud Storage enable downloads and downloads without
network quality. Uploads and downloads are powerful, which means they restart where they left
off, saving your users time and bandwidth.
2. Strict security of Firebase SDKs for Cloud Storage is integrated with Firebase Authentication to
provide easy and accurate authentication to developers. You can use our compliant security
model to allow access based on file name, size, content type, and other metadata.
3. Large Cloud Storage is built on an exabyte scale when your app becomes infected. It grows
easily from model to production using the same infrastructure that enables Spotify and Google
Photos.
Metro bundler
Building and running a React Native project starts up a packager called Metro. The packager bundles all the JavaScript
code into a single file and translates newer versions of JavaScript like ES6 into native elements.

React Native - Building Mobile Apps with JavaScript

This book written by Vladimir Novick in 2017, is a handbook for making you understand how to write the mobile
applications for the Android and iOS platforms using a single codebase. It makes us learn how Instagram, Twitter-like
mobile applications were built using the React-Native framework. It also helps to get acquainted with different APIs
provided by the React-Native framework as well as understanding the application release process in detail.
JavaScript mobile frameworks comparison: React Native vs Ionic vs Native
Script
We can compare three different JavaScript frameworks for mobile application development. Although
these frameworks have the same objectives, choosing the best one depends on the user’s functional
requirements, other requirements discussed below, and the skill set available with the existing developers.
Ionic has the benefit of having a single codebase but it should not be used for graphic-intensive
applications. React-Native has better performance and optimization capabilities compared to the other two
but has the overhead of mapping generic components to the native elements of Android and iOS. Although
the Native Script is quite powerful, the downside is that it makes the application's size large.
 SOFTWARE DEVELOPMENT LIFE CYCLE (SDLC)
What is SDLC?
SDLC is a process followed by a software project, within a software organization. It contains a detailed program that
describes how to build, maintain, modify and modify or improve a particular software. The life cycle describes how to
improve software quality and the overall development process.
Phase 1: Planning and Needs Analysis
Needs analysis is the most important and fundamental phase in the SDLC. It is done by senior team
members with input from customers, sales department, market surveys and industry experts in the
industry. This information is also used to plan the basic approach to the project and to conduct
feasibility studies in the areas of savings, labor and technology.Planning for quality assurance
requirements and work-related risk identification is also done in the planning phase. The result of
existing technical research is to describe the various technical methods that can be followed to
successfully implement a project with minimal risk.

Phase 2: Definition of needs

Once the needs analysis has been taken the next step is to clearly define and document the product
requirements and is approved for customers or market analysts. This is done through an SRS
(Software Requirement Specification) document that contains all the product requirements that will be
created and developed during the life cycle of the project.
Phase 3: Product Design
SRS is the trust of product manufacturers to come up with the best technology for product development.
In accordance with the requirements set out in SRS, more than one method of product design is
proposed and documented in the DDS - Design Document Specification. This DDS is reviewed by all key
stakeholders and is based on various parameters such as risk assessment, product durability, design
consistency, budget and time constraints, best product design approach. The design approach clearly
defines all product building modules and the representation of communication and data flow through
external and third modules (if any).

Phase 4: Building or developing a product

At this stage of the SDLC real development begins and the product is built. Application code is generated
per DDS per section. If construction is done in a detailed and systematic way, coding can be
accomplished without much hassle. Various programming languages ​such as C, C ++, Pascal, Java and
PHP are used for encoding.
Phase 5: Product testing
This section is usually the basis of all categories as modern models of SDLC, testing activities are
very involved in all sections of SDLC. However, this section refers to the only product testing
phase in which product defects are reported, followed, repaired and restored, until the product
meets the quality standards specified in the SRS.

Phase 6: Market Delivery and Care

Once the product has been tested and ready for distribution it is officially released to the relevant
market. The product may first be shipped in a limited edition and tested in a real business
environment (UAT- User approval). Thereafter depending on the response, the product can be
released as is or with the enhancements suggested in the target market category. After a product
is released from the market, its storage is done for an existing customer base.
SDLC models
There are a variety of defined and built-in software developments that follow during the software
development process. These models are also called "Process Process Models". Each process follows
a series of different steps of their kind to ensure success in the software development process.

The following are the most important and popular SDLC models followed in the industry -
· Waterfall Model
· Iterative Model
· Spiral Model
· V-Example
· Big Bang model
· Other related methods are Agile Model, RAD Model, Rapid Application Development and
Prototyping Models.
SDLC MODELS
 CONCLUSION

The industrial training that I went through at Sickle Innovations made me learn new technologies and
methods. I got an opportunity to learn new concepts and put my knowledge into practice in real
projects. I became familiar with company standards and goals. I learned a lot about industry
practices and how actually a project is developed in an industry. I came to realise the significance of
Software Development Life Cycle and how important it is when working on real life projects.
Completing the tasks assigned before deadline, maintaining the code quality, documenting the
things learnt, trying various methods to find the best-suited ones were a few important things that I
have learnt throughout the training