Writing React Native Class 8. ITS484 Special Software Topic I. Sirindhorn International Institute of Technology

1. Lecture 8: Midterm Exam
Discussion, Feedback, and
Term Projects
Kobkrit Viriyayudhakorn, Ph.D.
CEO of iApp Technology Limited.
kobkrit@gmail.com
http://www.kobkrit.com

2. Important Links
• Source Codes
https://github.com/kobkrit/learn-react-native
• Course Materials
http://www.kobkrit.com/category/programming/react-
native/
• Score Announcement
http://bit.ly/its484quizscore
• Facebook Group
https://web.facebook.com/groups/ReactNativeThai/

3. Midterm Exam
Solutions & Discussion

4. Heard Feedbacks (1)
1. Too Fast - 10
• Slow down in both typing and speaking
2. Move to Lab Room - 7
• We will study in the lab room starting from next week.
3. Help students to cope with difficulties - 6
• TA is impossible.
• Contact me at the end of class, leave the question at Github issue on
https://github.com/kobkrit/learn-react-native/issues
4. More Exercise & Example & Home work - 5
5. Put the source code as the A4 sheet. (Don’t split to many slides) - 4

5. Heard Feedbacks (2)
Video Record
Teach more on how to use external lib
English Speaking
More advanced concept
Separate Exam Rooms
Real Project Based Examination (Less paper based)
(All below items are one frequency of occurrence)

6. Most Confused Chapters
• Navigation 10
• Network, iOS Block
connection 4
• JS Encapsulation 1
• BabelJS 1
• Installation (Need
Diagram) 1
• ListView 1
• State 1
• API Key 1
• JSON 1
• Flexbox 1

7. Term Project
• Making a 5-10 Screens Mobile
Applications
• Set up a group of three. (36/3 = 12
groups)
• Either iOS and Android is fine or Both.

8. Scores
• 15% - Group scores - Usefulness,
App Business Model, UI, UX,
Functionality, Code Style, and
Pitching.
• 5% - Individual scores - App
development questions target to
each person during presentation.

9. Presentation
• 10 minutes presentation
• Pitching 3 minutes
• Code Explanation 2 minutes
• Question & Answering 5 minutes.
• Pitching Deck 10 slides.
I will teach how to do pitching deck and
introduction to the mobile app business
entrepreneur (Startup) in the next few weeks
• Presentation on Dec 6, 2016

10. Codes
• Push your mobile app code to Github.
• Make it as the public repository.
• Send the repository link to me (via the
term project registration page).

11. Term Project Registration
• Registration Deadline: Oct 25, 2016 23:59:59
• Registration at http://bit.ly/2en4RZ5
• If the same project was chosen by multiple groups.
The first-selector will get that project.

13. Projects that people needs
(Sort by chronological orders)
• Complaint Report App
• Subliminal Messages App
• Stock Management App for
Salesperson
• Stock Management App for E-
commerce Merchant
• Vaccination Alert App
• Parasite Museum App
• Time Attendance Recorder
App
• Food Temperature App
• E-Commerce App
• Hospital Directory App
• Pet Hospital Progress Report
App
• Any apps you want to do…

14. Complaint Report App

15. Complaint Report App
• Report the broken pipe, broken wire, any problems
we encounter in areas (May be in Thammasat Univ.)
• Take a picture, Record Location, and Upload to
Server, and send the complaint to government service.
• Keep track of complaint
• Make a complaint map, to share information to others.

16. Subliminal Messages
• Listen to some specific music for starting mediate
and eternal happiness
• https://www.youtube.com/watch?v=iLm-EL3UdnI
• There are about 400 clip on this categories.

17. Stock Management App for
Salesperson
• Create PO in the app.
• Checking Item Stock
from the App
• Checking status of
PO.

18. Stock Management for
E-commerce Merchant

19. Stock Management for
E-commerce Merchant
• Checking Stock via Mobile App
• Add Stock, Cut Stock, Hold Stock
• Export to Excel and Sent to e-mail

20. Vaccination Alert App
• Vaccination Alert for Pet
• Warn owner to the pet hospital for check up.

21. Parasite Museum App
• Faculty of Medicine
Siriraj Hospital
• Show Museum
History and
Introduction
• Calendar of Event
• Contact Us

22. Travel Planner App
• Arrange the order of visits
• Pin Location on the Map
• Compute Distance between Locations

23. Time Attendance Recorder
• Record Time Attendance IN and OUT.
• Leave Record.
• Time Attendance Report
• Automatic Attendance Recording using Location :)

24. Food Temperature Checker
App
• Have the list of the fruits/veg/herbs, showing its
effect to human body. Some are heat up, Some are
cool down.
• E.G., http://www.mensfitness.com/nutrition/what-to-
eat/8-foods-keep-you-cool

25. E-commerce App
• Making App for Enabling E-commerce.
• Take a look at, Lazada, Alibaba as Example.
• Having product list, product view, addToCart, and
Checkout.

26. Hospitals Directory App
• Show the list of nearby Hospital, Clinic, and Spa and telephone
number
• Search-able
• Pin it on the Map
• Have many category, such as,
• Normal Hospital
• Clinic
• Pet Hospital …

27. Pet Hospital Progress
Report App
• Nan Piyamit Pet Hospital
• Sick Animals Registration
• Progress Report
• SMS
• Push Notification
• Appointment Alert
• Free Trip 1 night to Nan
Province and accommodation!

28. Or any app idea that
you want to do..

29. Git installation
• Mac
• Might have it already, Checking by typing
• $ git
• If command is not found, Visit https://git-scm.com/download/mac
• Windows
• Download at https://git-scm.com/download/win
• Download and following instruction
• Type $|> git to check that it is working or not.

30. Git
• Git is a version control management system.
• History tracking
• Enable group of developers working in the same file s in
the same project.
• Marking the versions of codes by using a snapshot (called it
as commit).
• Git repository can be fully copied all history and records to
the another remote repository (e.g., github.com) to prevent
the loss of works, and open up the new ways of collaboration.

31. Github
• Sign In/Sign Up for http://github.com

32. Github Continue
• Verify E-mail Address

33. Start a new Github Proj
• Visit https://
github.com/new
• Create a new
project with Public
visibility
• Add Name and
Description

34. • Copy the http address in the address bar (https://
github.com/kobkritv/complaint-app) and put it into
the term project registration form. One repo per
team.

35. Start the Term-Project App
• Open terminal, cd to your working directory.
• $ react-native init complaintApp
• $ cd complaintApp
• $ git init

36. Make a git commit and push
to github
• Add all files in the project directory into the repository by
$ git add --all
• Commit the first batch of files to be record into the repository, called it
“First commit”
$ git commit -am "First commit"
• Make github as the our remote repository
$ git remote add origin https://github.com/kobkritv/complaint-app.git
• Push the change to the github
$ git push -u origin master
• If above not work, try
$ git push
You might need to input your github username and password and try
above again

37. Successfully Pushed
Not yet pushed, Failed Pushed

38. Updating the git repo
• Adding the file / Deleting a file / Make change to files.
• For example, Creating a new file called “README.md”
• $ atom README.md
• Write down your name in it.

39. Sending update to Github
• Having a new file? You need to “git add” it
$ git add README.md
• Or just $ git add --all
• Make the change as the commit by this command
$ git commit -am “Add Readme file”
• Push the change to github
$ git push
• Visit your Github Web URL to see the changes. E.G.,
https://github.com/kobkritv/complaint-app

40. Project page on Github after successfully pushed.
Console when successfully pushing the updates.

41. Updating the Term Project
Every week.
• Try to update the project every week.
• Do not rush near at the end of the deadline (Dec 6, 2016)
• If you encounter any difficulties, Give me your group name, the file
name and line number and send it to kobkrit@gmail.com with title “Term
project help need”, So I can see your code and help you via Github.
• Github repository is also play an important role in term project score.
• It give us information on who working on what? when?
• How is a team works?
• Bug tracker and communication tools.

42. Found some bugs, report it
as issues.
• Visit https://
github.com/kobkritv/
complaint-app/
issues/new
• Report the bug detail
information so the
group and solve it.
• This is very nice
feature of github, so
use it!

43. Want some new feature,
also make it as an issue.
• Issue can be assigned
to the team members to
handle it.
• Issue can attached with
milestone goal.
• Issue can be grouped
and can be
categorized.
• It can be use as the
project management
system.

44. Using waffle.io for Kanban
project management board
• Perfectly linked with the github.com

45. Want to know more about
git?
• You can start by following these instruction
https://try.github.io/levels/1/challenges/1

46. Q/A