Weekly Diary

For

Industrial Training

At

Sumago InfoTech Pvt Ltd

From 03/06/2024 To 15/07/2024

Name of Supervisor: Mr Amol Pawar

Designation of Supervisor: Learning and Development Head

Name of Student: Shantanu Ashok Holey Enrolment No.: 2200400291

Branch of engineering: Computer Technology

Name of Polytechnic: Sou. Venutai Chavan Polytechnic,Pune

Industrial Training Weekly Diary

Week 1: From 03/06/2024 To 08/06/2024

Day Activities Carried Out

a) Visited the company.

1 b) Informed about the company’s details.
c) Learnt about types of projects and services offered.

a) Information & Introduction to React-Native.

2 b) Visited Documentation website.
c) Install React-Native.

a) Introduction to packages.
3 b) Purpose of different packages.
c) Execution of code/project.

a) Introduction to JavaScript
4 b) Use of variables
c) Use of different Operators

a) Functions in JavaScript and their use

5
b) Introduction to Arrow function

6 a) Fun activities to improve teamwork

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Summary
In the first week of Industrial Training the following topics were covered:
1] Introduction of the company itself: -
1.1] The company is divided into 2 separate entities one of them is known by the name of
Scope.
1.2] Scope conducts implant training in/on different topics like MAD, UI/UX designing.
1.3] They also explained about our training & course as well as about their core values.

2] What is React-Native?
2.1] It is an open source JS framework for building applications.
2.2] It is based on React which is used to build interactive websites.
2.3] Features-
1] Code created is applicable on IOS as well as Android
2] Large community and interaction.
2.4] Installation steps and other topics could be researched upon by using-
[React-Native official documentation].

3] File packages in Vs code: -

3.1] Different packages in Vs code are: -
1.1] Index.js- Entry point of JavaScript code.
1.2] App.js- Entry point of components.
1.3] Node.js- Stores all libraries.
1.4] Package.json- Stores all dependencies.
1.5] Package. lock. Json- Stores dependencies of dependency.
1.6] Metro.config- After changes are made, it reloads.
1.7] App.json- Stores information about the project.
3.2] To create a project- npx react-native init proj_name –version 0.73.6
3.3] To start project – npm start.
3.4] To check & correct the installation – npm i –g react-native.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

4] Introduction to JavaScript: -
4.1] JavaScript is a scripting language that allows us to implement complex features on
webpages & control dynamic website i.e. an interactive website, it also helps animate.
4.2] List of variables – var, let, const.
4.3] Scope of the variables: -
• Var- do not have block scope
• Let – only available in the block scope
• Const- Once declared value of them can’t be changed.
4.4] List of Operators- ‘+’,’-’,’/’, %’,’*’,’==’,’===’

Example-
let x=5;
let y=2;
let z=x-y;
console.log(z);
let z=x+y;
console.log(z);
let z=x*y;
console.log(z);
let z=x/y;
console.log(z);
let z=x%y;
console.log(z);

5] Function in JavaScript
5.1] A JS function in nothing but a block of code & is used to perform a particular task.
Example: - Function Fruit ()
{
Return ‘Apple’;
}
Output-Apple

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

6] Fun activities: -
On Eighth of June our mentors had arranged various activities: -
1] The first activity was named as Concentration Activity the task was simple each team was
given about a minute to remember as many of the words as possible.
2] The second activity was very much chaotic. In this activity in a team alternatively we had
to go round & speak number in English & Marathi. One member from each team was
selected & then same was repeated.
3] The third activity was very interesting in which we were displayed a total of 6 images &
we had to create a storyline around it.

Signature of Student: Signature of Industrial Supervisor:

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Week 2: From 10/06/2024 To 15/06/2024

Day Activities Carried Out

Topics covered:
1 a) Introduction & use of button & pressable.
b) Types and use of events.

Topics covered:
2 a) Introduction to states & props
b) Use of states & props.

Topics covered:
3
a) Styles & types of styling.

Topics covered:
4 a) Introduction to TextInputBox.
b) Use of TextInputBox.

Topics covered:
5
a) Introduction to flatlist & sectionlist.

Topics covered:
6
a) Expert talk on financial literacy.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Summary
In the second week of Industrial Training the following topics were covered:

1] Button and Pressable: -

1.1] Button can be imported from ‘React-Native’. Button can be ’pressed’ instead of being
‘clicked' therefore it’s event will be known as onPress.
1.2] Pressable is very similar to a button & is also programmed in a similar way.
1.3] onPress has 3 types as: -
1] onLongPress
2] onPressIn
3] onPressOut

2] States & Props

2.1] States- It is used to store/hold information data inside a component.
1] It also allows you to represent dynamic & changing data within a component.
2] It is one of class component features.
3] Syntax-Const [name, setname] =useState (“”);
2.2] Props- It is used for passing data from one component to another.
1] The relation between these component is the parent child relationship.
2] Props in simple words is used to infuse inheritance.

3] Style & types of styling

3.1] Inline- It is used at a single line at a time.
3.2] Internal- It is declared once & can be used multiple times. It is present in the same
file.
3.3] External- It is declared outside of the current file therefore it is to imported into the file
hence the name.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

4] TextInputBox
4.1] Text Input is a component for inputting text/information into the app via keyboard. It
Is one of the foundational component and relies on the’onChangetext’event to read user
input.
4.2] It can also be styled according to our preference.
4.3] It is imported from ‘React-Native’.
4.4] It is often used with the help of states.

5] Flatlist and Sectionlist

5.1] The flatlist components displays the similar structured data in a scrollable list. It takes 2
Props: data and renderitem.
5.2] It works well for large lists of data.
5.3] We can import flatlist from React-Native.
5.4] The sectionlist component is a list view component which sets the list of data into broken
Logical section. It has one more field as data inside it.

6] Expert talk on financial literacy

6.1] The speaker was from BSE (Bombay Stock Exchange).
6.2] The session was a very detailed and informative lecture on ‘Investment’.
6.3] The session was focused upon the power of investing rather than savings.
6.4] The session was quite interactive & interesting.

Signature of Student: Signature of Industrial Supervisor:

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Week 3: From 17/06/2024 To 22/06/2024

Day Activities Carried Out

Topics covered:
1 a) Static Grid.
b) Mapping functions.

Topics covered:
2 a) UseEffect of lifecycle method
b) Purpose of Hooks.

Topics covered:
3 a) Proper understanding of flex.
b) Touchable Opacity.

Topics covered:
4
a) Radio Button in React-Native.

Topics covered:
5 a) Revision.
b) Understanding of Update & Unmount.

Topics covered:
6
a) Fun activity to improve teamwork.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Summary
In the third week of Industrial Training the following topics were covered:

1] Static Grid & Mapping function: -

1.1] Static grid- It is a layout structure used to display items in a grid like pattern where each
Cell/block has fixed position and size.
1.2] It doesn’t dynamically adjust or change based on user interactions or data updates.
1.3] It can be created by using styling properties like ‘width’,’height’,’flexdirection’.
1.4] Mapping function- By using mapping function to create list we are able to create a list
without using component.
1.5] By using mapping function to render multiple items/objects.

2] UseEffect
2.1] UseEffect triggers a function on every component render leveraging react to execute
specified task efficiently.
2.2] It does not need any event to be triggered and automatically executes the function.
2.3] Life cycle Methods: -
Mount-loading
Update-changes being registered
Unmount-closing
2.4] Hooks are used so that we are able to use features of class components in function
components.

3] Proper understanding of Flex

3.1] We need flex to create a responsive UI.
3.2] Flex- It is a layout system which helps you define how elements should be arranged
and how should they behave on different screen sizes.
-Working of flex is based upon ratios between the different screen sizes and
components which are to be displayed.
3.3] Touchable Opacity is a core component in React-Native that provides feedback to users
When they press a button or a touchable area.
1] It is used to design a custom button.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

2] The opacity wrapped view decreases whenever it is pressed.

4] Radio Button in React-Native

4.1] Radio button is not a part of React-Native therefore we need to design it separately.
4.2] We created the radio button as a custom button by using the TouchableOpacity and
separate logic.
4.3] More than one radio-button can’t be selected at the same time therefore separate logic
Needs to be developed.

5] Update and Unmount

5.1] The update lifecycle stage in a component is when the component re-renders due to
changes in its states or props.
5.2] The unmount stage is used to close or ‘clean-up’ resources that were allocated.
5.3] We implemented this stages by the use of both useState and useEffect.

6] Activity to improve co-ordination

6.1] There were 6 teams in which there were 7 to 6 members.
6.2] The activity was a game in which each team was given a total of 10 cups and they had
to arrange them from bottom to top, descending manner.
6.3] The cups were to be stacked by the use of a rubber band which had a total 4 extensions.
6.4] Each extension was to be operated by a member of the team.
6.5] Each team had been allocated a total of 50 points and 15 minutes to complete.

Signature of Student: Signature of Industrial Supervisor:

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Week 4: From 24/06/2024 To 29/06/2024

Day Activities Carried Out

Topics covered:
1 a) Use of a Modal.
b) Use of a Status bar.

Topics covered:
2 a) Understanding of NPM.
b) Navigation.

Topics covered:
3 a) Styling of a stack page.
b) Options and Screen Options.

Topics covered:
4
a) Project management and its components.

Topics covered:
5
a) Implementation of an API.

Topics covered:
6
a) Expert talk to know your ‘why?’.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Summary
In the fourth week of Industrial Training the following topics were covered:
1] Modal and Status Bar
1.1] Modal is used to display information a ‘layer’ above the current page. It requires
Interaction before changes to current page can be made.
1.2] It can be best described by the example of pop-up messages.
1.3] Typically used in Login/Sign-up forms.
1.4] Status Bars used to enhance the overall user experience and provides important
System related information.
1.5] It can be imported from React-Native.

2] NPM and Navigation

2.1] NPM – Stands for Node Package Module and is the default package manager for Node.
It allows us to install, share and manage dependencies for JS projects.
2.2] Navigation – It is very important in React-Native to build multi-screen applications.
2.3] Three modes of navigation are: -
1] Stack
2] Drawer
3] Tab (Bottom & top)

3] Styling a Stack Page

3.1] Options and Screen Options is used to style stack pages.
3.2] Options – It is used to define options for a specific screen.
- These can be set directly on a screen component by using the options prop in
the navigator.
3.3] Screen Options- It is used to define default options for all screen within a navigator
- It can be set on the navigator itself to provide common settings that
apply to all of the screens.

4] Project Management
4.1] Project – It is a task with specific set of goals, objectives and constraints which is to be
completed by a group of people.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

4.2] Project components-

-Goals
-Timeline
- Budget
- Stakeholders
4.3] Project Management – It is the practice of applying knowledge skills, tools, techniques
to complete a project according to specific requirements.

5] API
5.1] API stands for application programming interface and are essential tools in software
developments that enable different system and application to communicate and interact
with each other.
5.2] Four methods of API: -
1] Get- used to fetch data.
2] Post- used to push/add data.
3] Put- used to update data.
4] Delete- used to delete data.

6] Expert talk to know your ‘Why?’

6.1] The expert talk was to know your ‘Why’ by sir Prasad Joshi, sir enlightened us upon
finding our purpose in life.
6.2] The talk started with sir sharing about people who the best performance in their like
Virat Kolhi.
6.3] Sir also mentioned a great phrase that we die in our twenties and buried in our eighties.
6.4] Sir questioned us about what is success.
6.5] Ikegai means purpose of being which means asking ourselves questions like what do you
want and love.

Signature of Student: Signature of Industrial Supervisor:

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Week 5: From 1/07/2024 To 06/07/2024

Day Activities Carried Out

Topics covered:
1 c) Axios and Json Server.
d) Axios Get method.

Topics covered:
2 c) Revision of Get method.
d) Axios Post method.

Topics covered:
3 c) Revision of Post method.
d) Axios Delete method.

Topics covered:
4 b) Revision of Delete method.
c) Axios Put method.

Topics covered:
5 b) Async Storage.
c) App Icon Designing

Topics covered:
6
a) Discussion and project review.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Summary
In the fifth week of Industrial Training the following topics were covered:

1] Axios and Json Server

1.1] Json server is a tool that allows us to create a API with zero coding. It is useful for
prototyping, mocking and testing.
1.2] To use the json server we need to install it first by using- npm install –g json-server.
1.3] Axios – In proper words it is a promise based HTTP client for the Node.js. It is used
To fetch and request data from the API itself.
1.4] Axios Method Get- It is used to fetch data from the API.

2] Get Method
2.1] Const response= await axios.get(“Link”);
2.2] Post Method –
By using Axios. Post in the code we can easily push add data from the screen or
application to the API itself.
2.3] Const response=await axios.post (“link” {name:name1, email: email1});

3] Post Method
3.1] Const response=await axios.post (“link” {name:name1, email: email1});
3.2] Delete Method –
It is used to delete data permanently from the API itself. By using Axios.Delete
we are able to erase data from the API.
3.3] Const response=await axios. delete(`Link/$(id)`);

4] Delete Method
4.1] Const response=await axios. delete(`Link/$(id)`);
4.2] Put Method –
It is used to update data which is present in the API itself. By using Axios. Put we
are able change data present in the json server.
4.3] Const response= await axios. Put(`link/$(id)`) (Para=para, Para1=para1 );

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

5] Async Storage
5.1] In simple words it is a file present in the phone or mobile which can be used by the app
to store details which are to be frequently accessed.
5.2] App Icon can be designed by using sites like EasyAppIcon.
5.3] We need to replace the files of the app icon which we have created by the default.
5.4] Files are located – Android/app/src/main/res.

6] Discussion and project review

6.1] The session was planned to be our project’s review. The review was given by Ravi &
Amol sir together. Our task (as a team) was to give a neat and clean demonstration of
our project to accomplish.
6.2] The sir collectively gave us a good review although we were told to make some minor
changes.

Signature of Student: Signature of Industrial Supervisor:

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Week 6: From 8/07/2024 To 12/07/2024

Day Activities Carried Out

Topics covered:
1
a) Deployment.

Topics covered:
2
a) Revision and completion.

Topics covered:
3
a) Final preparation of our project.

Topics covered:
4
a) Project submission.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Summary
In the sixth week of Industrial Training the following topics were covered:
1] Deployment
1.1] Previously to test our project we were either using an emulator or physically
connecting a device.
1.2] By performing the following steps we are able to use our project like an actual
App.
1.3] Procedure –
1] Check or create folder inside the [android/app/src/main/asset/index.android-bundle]
2] Enter below command: -
[npx react-native bundle—platform android—dev false—entry-file index.js-bundle-
output android/app/src/main/assest/index.android.bundle—assests-dest
Android/app/src/main/res]
3] Then change directory to android (Cd Android)
4] Then enter below (. /gradlew assemble debug)
5] Check Apk inside the folder (android/app/build/outputs/apk/debug/app-debug-apk)

2] Revision and Completion

2.1] The session was all about revision about topics and concepts which we have learnt till
then.
2.2] Understanding of components as well as concepts were questioned upon for example: -
1] Why is mapping preferred over the use flatlist?
2] Rest of the session was given for completion.

3] Final preparation
3.1] On the particular session we were still working on our last 10% of the project
development of styling and making changes which were necessary.
3.2] In this last 10% we in short made our project more responsive.
3.3] The deployment was successful.

4] Project submission
4.1] The final submission of our project was on 11/7/24.

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

4.2] We were asked to create a file [zip file] of our project.

4.3] Before submitting the project viva/oral was taken of the particular team.
4.4] The viva was comprised of question based on the concepts which we had learnt and
questions based on the project itself.

Signature of Student: Signature of Industrial Supervisor:

Maharashtra State Board Of Technical Education

Industrial Training Weekly Diary

Maharashtra State Board Of Technical Education