Industrial Training Report on

Android Programming
done at

Reckon Infotech
Hotel Vits Campus, Railway Station Rd, vedant

Nagar, Aurangabad,

Maharashtra 431001

submitted in

Diploma
in
C o m p u t e r Engineering

by

Gayatri Ganesh Bhagwat

Department of Computer engineering

Government polytechnic Ambad

Mhada colony ,
Pachod road ambad.

1
 DECLARATION

I hereby declare that the industrial training repot entitled "ANDROID PROGRAMMING"done
at "Reckon Infotech." submitted by me, for the award of the degree of Android ,Computer

Engineering ,Government Polytechnic Ambad is a record of bonafide work carried out at

Aurangabad between 7 june 2023-24 july 2023.

Place:

Date Signature of the Candidate

The report is satisfactory/unsatisfactory

Signature of the Faculty Coordinator

&
Approved by

Head of the Department

2
 LIST OF CONTENTS

Contents page number

Title Page 1

Declaration 2

List of Contents

Chapters

Conclusion / Reference 25

3
 1. Introducton

2. Setting up development environment

3. Snack expo

4. Hello world in snack expo

5. Addition program in react native

6. Display image ( Image viewer)

7. Design a Calculator in react native

8. Develop unit converter in react native

9. Develop currency converter in react native

10. Create a Registration Form

11. Install and connect Mongoose to a Node.js project

12. Create a sample app

13. Create a complete login/register mobile app with react native

14. Create a react native app with google integration.

4
 Chapter 1
INTRODUCTION

1.1 Android

Android programming is the process of developing applications for mobile devices

that run on the Android operating system. Android is an open-source platform
developed by Google, and it is one of the most popular operating systems for
smartphones, tablets, smartwatches, and other devices.Android applications are
written using Java, Kotlin, or a combination of both programming languages. Java
was traditionally the primary language for Android development, but Kotlin has
gained significant popularity due to its conciseness, safety, and interoperability with
Java.

1.2 Scripting Language

The primary scripting languages used for Android app development are
Java and Kotlin. Both languages are officially supported by Google and
can be used interchangeably to build Android applications. However, Java
has been traditionally more prevalent, as it was the primary language for
Android development before Kotlin gained popularity.
Java: Java is a widely used and well-established programming language
with a vast ecosystem and a strong community. It has been the go-to
language for Android development since the inception of the platform.
Many Android developers are familiar with Java, making it a popular
choice for building Android apps.
Kotlin: Kotlin is a modern programming language that was introduced by
JetBrains. In 2017, Google announced official support for Kotlin as a first-
class language for Android development. Kotlin offers concise syntax,

5
 null safety, extension functions, and other features that make code more
readable and less error-prone. Due to these advantages, Kotlin has quickly
gained traction and has become the preferred language for many Android
developers.
1.3 Object Oriented Programming Language

Object-oriented programming (OOP) is a programming paradigm based on

the concept of "objects", which may contain data, in the form of fields, often
known as attributes; and code, in the fonn of procedures, often known as
methods. A distinguishing feature of objects is that an object's procedures can
access and often modify the data fields of the object with which they are
associated (objects have a notion of "this" or "self'). In 00 progranuning,
computer programs are designed by making them out of objects that interact
with one another. There is significant diversity in objectoriented
programming, but most popular languages are class-based, meaning that
objects are instances of classes, which typically also detennines their type.

1.4 History
The history of Android programming is closely tied to the development of the Android
operating system and the tools used for app development. Here's an overview of the key
milestones in the history of Android programming:

Android Operating System Announcement (2007):

In November 2007, the Open Handset Alliance (OHA), a consortium of several
technology companies led by Google, announced the development of the Android
operating system. Android was designed to be an open-source platform for mobile
devices, allowing developers to create innovative applications for smartphones.

Android SDK Release (2007):

In the same year, Google released the Android Software Development Kit (SDK) in
November 2007. The SDK provided developers with the necessary tools, libraries, and
documentation to build Android applications. Initially, the programming language used
for Android development was Java.

6
 First Android Phone (2008):
The first commercial Android device, the HTC Dream (also known as the T-Mobile G1),
was released in September 2008. This marked the official debut of Android in the
consumer market.

FIG 1. Andy Rubin

2
Your phone is a tool for communicating. You shouldn’t be communicating with the
phone; you should be communicating with somebody on the other side of the
phone..
- Andy Rubin

7
 Chapter 2

Setting up the development environment

If you are new to mobile development, the easiest way to get started is with Expo Go. Expo is
a set of tools and services built around React Native and, while it has many features, the most
relevant feature for us right now is that it can get you writing a React Native app within
minutes. You will only need a recent version of Node.js and a phone or emulator. If you'd like
to try out React Native directly in your web browser before installing any tools, you can try out
Snack.

If you are already familiar with mobile development, you may want to use React Native
CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools
installed, you should be able to get up and running within a few minutes. If they are not
installed, you should expect to spend about an hour installing and configuring them.

Installing dependencies
You will need Node, the React Native command line interface, a JDK, and Android
Studio.

While you can use any editor of your choice to develop your app, you will need to install
Android Studio in order to set up the necessary tooling to build your React Native app
for Android.

Node, JDK
We recommend installing Node via Chocolatey, a popular package manager for
Windows.

It is recommended to use an LTS version of Node. If you want to be able to switch

between different versions, you might want to install Node via nvm-windows, a Node
version manager for Windows.

React Native also requires Java SE Development Kit (JDK), which can be installed
using Chocolatey as well.

Open an Administrator Command Prompt (right click Command Prompt and select
"Run as Administrator"), then run the following command:

choco install -y nodejs-lts microsoft-openjdk11

8
 Android development environment

Setting up your development environment can be somewhat tedious if you're new to

Android development. If you're already familiar with Android development, there are a
few things you may need to configure. In either case, please make sure to carefully
follow the next few steps.

1. Install Android Studio

Download and install Android Studio. While on Android Studio installation wizard,
make sure the boxes next to all of the following items are checked:

• Android SDK
• Android SDK Platform
• Android Virtual Device
• If you are not already using Hyper-V: Performance (Intel ® HAXM) (See here
for AMD or Hyper-V)

Then, click "Next" to install all of these components.

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app
with native code, however, requires the Android 13 (Tiramisu) SDK in particular.
Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "More Actions" button and select "SDK
Manager"

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build
apps with native code.

The SDK is installed, by default, at the following location:

%LOCALAPPDATA%\Android\Sdk

4. Add platform-tools to Path

1. Open the Windows Control Panel.

9
 2. Click on User Accounts, then click User Accounts again
3. Click on Change my environment variables 4. Select
the Path variable.
5. Click Edit.
6. Click New and add the path to platform-tools to the list.

Chapter 3

10
 Addition program in react native

To create a simple addition program in React Native, we'll build an app that takes two
input numbers from the user and displays their sum when a "Calculate" button is
pressed. Follow these steps to create the app:

Set up your React Native project if you haven't already, following the steps I
provided earlier.Open the App.js file inside your project folder.Replace the content of
App.js with the following code:

import React, { useState } from 'react';

import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

const App = () => { const [number1,

setNumber1] = useState(''); const [number2,
setNumber2] = useState(''); const [result,
setResult] = useState('');

const handleAddition = () => {

const sum = Number(number1) + Number(number2);
setResult(`Result: ${sum}`);
};

return (
<View style={styles.container}>
<Text style={styles.title}>Addition App</Text>
<TextInput
style={styles.input}
placeholder="Enter number 1"
keyboardType="numeric"
value={number1}
onChangeText={text => setNumber1(text)}
/>
<TextInput
style={styles.input}
placeholder="Enter number 2"
keyboardType="numeric"
value={number2}
onChangeText={text => setNumber2(text)}
/>

11
 <Button title="Add" onPress={handleAddition}/>
<Text style={styles.result}>{result}</Text>
</View>
);
};

const styles = StyleSheet.create({

container: { flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
title: { fontSize:
24, fontWeight:
'bold',
marginBottom: 16,
}, input: { width:
'100%',
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 4,
padding: 8,
marginBottom: 16,
}, result: {
fontSize: 18,
marginTop: 16,
},
});

export default App;

Chapter 4

Create a Registration form

12
 import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

const RegistrationForm = () => { const

[name, setName] = useState(''); const [email,
setEmail] = useState(''); const [password,
setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');

const handleRegister = () => {

// Perform input validation if
(!name || !email || !password) {
setErrorMessage('Please fill in all fields');
} else if (!isValidEmail(email)) {
setErrorMessage('Invalid email format'); }
else if (!isValidPassword(password)) {
setErrorMessage('Password should be at least 6 characters long');
} else {
// Registration logic goes here
// You can make an API call to register the user
setErrorMessage(''); // Reset the form
setName(''); setEmail(''); setPassword('');
alert('Registration successful');
}
};

const isValidEmail = email => {

// Basic email validation regex pattern
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};

const isValidPassword = password => {

return password.length >= 6;
};

13
 return (
<View style={styles.container}>
<Text style={styles.title}>Registration Form</Text>
{errorMessage ? <Text style={styles.error}>{errorMessage}</Text> : null}
<TextInput
style={styles.input}
placeholder="Name"
value={name}
onChangeText={setName}
/>
<TextInput
style={styles.input}
placeholder="Email"
keyboardType="email-address"
value={email}
onChangeText={setEmail}
/>
<TextInput
style={styles.input}
placeholder="Password"
secureTextEntry value={password}
onChangeText={setPassword}
/>
<TouchableOpacity style={styles.button} onPress={handleRegister}>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</View>
);
};

const styles = StyleSheet.create({

container: { flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: { fontSize:
24, fontWeight:
'bold',
marginBottom: 20,
},
error: {
color: 'red',
marginBottom: 10,
},

14
 input: { width: 250, height: 40, borderWidth: 1, borderColor:
'#000', borderRadius: 5, paddingHorizontal: 10,
marginBottom: 10,
}, button: {
backgroundColor: '#0000AA',
padding: 10,
borderRadius: 5,
},
buttonText: { color: '#FFFFFF', fontSize: 18,
},
});

export default RegistrationForm;

Chapter 5

15
 Develop unit converter in react native
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

const UnitConverter = () => {

const [kilometers, setKilometers] = useState('');
const [miles, setMiles] = useState('');

const handleKilometersChange = (value) => {

setKilometers(value);
const convertedMiles = value !== '' ? parseFloat(value) * 0.621371 : '';
setMiles(convertedMiles.toFixed(2));
};

const handleMilesChange = (value) => {

setMiles(value);
const convertedKilometers = value !== '' ? parseFloat(value) * 1.60934 : '';
setKilometers(convertedKilometers.toFixed(2));
};

return (
<View style={styles.container}>
<Text style={styles.title}>Unit Converter</Text>
<View style={styles.row}>
<TextInput
style={styles.input}
placeholder="Kilometers"
keyboardType="numeric" value={kilometers}
onChangeText={handleKilometersChange}
/>
<Text style={styles.equalSign}>=</Text>
<TextInput
style={styles.input}
placeholder="Miles"
keyboardType="numeric"
value={miles}
onChangeText={handleMilesChange}
/>
</View>
</View>
);
};

16
 const styles = StyleSheet.create({
container: { flex: 1,
justifyContent: 'center', alignItems: 'center',
},
title: { fontSize: 24, fontWeight: 'bold',
marginBottom: 20,
}, row: { flexDirection: 'row', alignItems: 'center',
}, input: { width: 120, height: 40, borderWidth: 1, borderColor: '#000',
borderRadius: 5, paddingHorizontal: 10,
marginRight: 10,
},
equalSign: {
fontSize: 20,
},
});

export default UnitConverter;

17
 Chapter 6

Develop currency converter in react native

import React, { useState } from 'react';

import { View, Text, TextInput, TouchableOpacity, StyleSheet, Picker } from 'react-native';

const UnitConverter = () => { const [fromValue,

setFromValue] = useState(''); const [toValue,
setToValue] = useState(''); const [fromUnit,
setFromUnit] = useState('USD'); const [toUnit,
setToUnit] = useState('EUR');

const currencies = [
{ label: 'USD', value: 'USD' },
{ label: 'EUR', value: 'EUR' },
{ label: 'GBP', value: 'GBP' },
{ label: 'JPY', value: 'JPY' },
{ label: 'INR', value: 'INR' },
];

const handleConvert = () => {

const convertedValue = convertCurrency(fromValue, fromUnit, toUnit);
setToValue(convertedValue.toFixed(2));
};

const convertCurrency = (value, fromCurrency, toCurrency) => {

// Conversion logic goes here
// Replace with your actual currency conversion API call or calculations

// This is just a placeholder conversion formula for demonstration

const conversionRates = {
USD: 1,
EUR: 0.85,
GBP: 0.72,
JPY: 110.25,
INR: 74.25,
};

const fromRate = conversionRates[fromCurrency];

const toRate = conversionRates[toCurrency]; return
(value / fromRate) * toRate;
};

18
 const handleClear = () => {
setFromValue(''); setToValue('');
};

return (
<View style={styles.container}>
<Text style={styles.title}>Unit Converter</Text>
<View style={styles.row}>
<TextInput
style={styles.input}
placeholder="Value"
keyboardType="numeric"
value={fromValue}
onChangeText={setFromValue}
/>
<Picker
style={styles.picker}
selectedValue={fromUnit}
onValueChange={itemValue => setFromUnit(itemValue)}
>
{currencies.map(currency => (
<Picker.Item key={currency.value} label={currency.label} value={currency.value} />
))}
</Picker>
</View>
<Text style={styles.equalSign}>=</Text>
<View style={styles.row}>
<TextInput
style={styles.input}
placeholder="Converted Value"
keyboardType="numeric"
value={toValue}
onChangeText={setToValue}
/>
<Picker
style={styles.picker}
selectedValue={toUnit}
onValueChange={itemValue => setToUnit(itemValue)}
>
{currencies.map(currency => (
<Picker.Item key={currency.value} label={currency.label} value={currency.value} />
))}
</Picker>
</View>

19
 <TouchableOpacity style={styles.button} onPress={handleConvert}>
<Text style={styles.buttonText}>Convert</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={handleClear}>
<Text style={styles.buttonText}>Clear</Text>
</TouchableOpacity>
</View>
);
};

const styles = StyleSheet.create({

container: { flex: 1,
justifyContent: 'center',
alignItems: 'center',
}, title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
}, row: {
flexDirection: 'row',
alignItems: 'center',
}, input: { width:
120, height: 40,
borderWidth: 1,
borderColor: '#000',
borderRadius: 5,
paddingHorizontal: 10,
marginRight: 10,
}, picker:
{ height:
40,
width: 100,
},
equalSign: {
fontSize: 20,
marginVertical: 10,
},
button: {
backgroundColor: '#0000AA',
padding: 10,
borderRadius: 5,

20
 marginTop: 20,
},
buttonText: { color: '#FFFFFF',
fontSize: 18,
},
});

export default UnitConverter;

Chapter 7

21
 install and connect Mongoose to a Node.js project

To install and connect Mongoose to a Node.js project, follow these steps:

1. Make sure you have Node.js installed on your machine. You can download it from the
official Node.js website: https://nodejs.org.

2. Create a new directory for your Node.js project and navigate to it in the terminal.

3. Initialize a new Node.js project by running `npm init` and following the prompts. This will
create a `package.json` file in your project directory.

4. Install Mongoose by running the following command in your project directory:

```
npm install mongoose
```
5. Create a file, for example `server.js`, to write your Node.js code.

6. In `server.js`, require Mongoose and establish a connection to your MongoDB database.

You can use the `mongoose.connect()` method to connect to the database. Replace
`<database-url>` with the URL of your MongoDB database.

The `useNewUrlParser` and `useUnifiedTopology` options are recommended to avoid

deprecation warnings and ensure compatibility with the latest MongoDB versions.

7. Run your Node.js server to connect to the MongoDB database.

node server.js
If the connection is successful, you should see the message "Connected to MongoDB" in
the console.

You have now installed and connected Mongoose to your Node.js project. You can use
Mongoose to define schemas and models for your MongoDB collections and perform
database operations using the Mongoose API.

MongoDb

22
To create a registration form in React Native that communicates with a Node.js backend and
stores user data in MongoDB, you'll need to set up both the frontend and backend parts of the
application. Here's a step-by-step guide:

**Backend (Node.js with MongoDB):**

1. Set up a new Node.js project by creating a directory and running `npm init` in the
terminal. Follow the prompts to generate a `package.json` file.

2. Install the required dependencies by running the following command in the project
directory:
npm install express mongoose cors
```
- `express`: A web framework for Node.js.
- `mongoose`: An Object Data Modeling (ODM) library for MongoDB. -
`cors`: A middleware that enables cross-origin resource sharing.

3. Create a `server.js` file in the project directory

4. Run the backend server by executing the command `node server.js` in the terminal.

**Frontend (React Native):**

1. Set up a new React Native project by running the following command:

. Install the required dependencies:

```
2. npm install axios react-navigation react-navigation-stack

3. npx react-native init RegistrationForm

```
4. Navigate into the project directory:
```
cd RegistrationForm
```

```
- `axios`: A library for making HTTP requests.
- `react-navigation` and `react-navigation-stack`: Libraries for navigation in React Native.

23
Replace the contents of the default index.js file with the following code: import
{ AppRegistry } from 'react-native'; import App from './src/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

Create a new directory named src in the project root directory.Inside the src directory, create
a new file App.js

6. Run the React Native app in the terminal using the command `npx react-native runandroid`
for Android or `npx react-native run-ios` for iOS.

Now, you should have a registration form in your React Native app. When the user fills in the
form and taps the "Register" button, an HTTP POST request is sent to the `/register` endpoint
of the backend server running on `http://localhost:3000`. The backend server then saves the
user data to the MongoDB database.

Note: Ensure that you have MongoDB running on your local machine, and replace
`<database-url>` in the backend code with the appropriate MongoDB connection URL.

24
 Conclusion

Practical knowledge means the visualization of the knowledge, which we read in

our books. For this, we perform experiments and get observations. Practical
knowledge is very important in every field. One must be familiar with the problems
related to that field so that he may solve them and become a successful person. After
achieving the proper goal in life, an engineer has to enter in professional life.
According to this life, he has to serve an industry, may be public or private sector
or selfown. For the efficient work in the field, he must be well aware of the practical
knowledge as well as theoretical knowledge

Due to all above reasons and to bridge the gap between theory and practical, our
diploma curriculum provides a practical training of 45 days. During this period a
student work in the industry and get well all type of experience and knowledge
about the working of companies and hardware and software tools.

I have undergone my 45 days training in 5th sem at Reckon Infotech.pvt.ltd.This

report is based on the knowledge, which I acquired during my 45 days of training.

Reference

• https://snack.expo.dev/
• https://reactnative.dev/

25