[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Term Projects

Lecture 8: Midterm Exam Discussion, Feedback, and

Term ProjectsKobkrit Viriyayudhakorn, Ph.D.

CEO of iApp Technology Limited. [email protected]

http://www.kobkrit.com

Important Links• Source Codes

https://github.com/kobkrit/learn-react-native

• Course Materials http://www.kobkrit.com/category/programming/react-native/

• Score Announcementhttp://bit.ly/its484quizscore

• Facebook Grouphttps://web.facebook.com/groups/ReactNativeThai/

Midterm Exam Solutions & Discussion

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 onhttps://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

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)

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

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.

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.

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

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).

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.

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…

Complaint Report App

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.

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.

Stock Management App for Salesperson

• Create PO in the app.

• Checking Item Stock from the App

• Checking status of PO.

Stock Management for E-commerce Merchant

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

Vaccination Alert App

• Vaccination Alert for Pet

• Warn owner to the pet hospital for check up.

Parasite Museum App• Faculty of Medicine

Siriraj Hospital

• Show Museum History and Introduction

• Calendar of Event

• Contact Us

Travel Planner App

• Arrange the order of visits

• Pin Location on the Map

• Compute Distance between Locations

Time Attendance Recorder

• Record Time Attendance IN and OUT.

• Leave Record.

• Time Attendance Report

• Automatic Attendance Recording using Location :)

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

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.

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 …

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!

Or any app idea that you want to do..

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.

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.

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

Github Continue• Verify E-mail Address

Start a new Github Proj• Visit https://

github.com/new

• Create a new project with Public visibility

• Add Name and Description

• 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.

Start the Term-Project App• Open terminal, cd to your working directory.

• $ react-native init complaintApp

• $ cd complaintApp

• $ git init

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 pushYou might need to input your github username and password and try above again

Successfully Pushed

Not yet pushed, Failed Pushed

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.

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

Project page on Github after successfully pushed.

Console when successfully pushing the updates.

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 [email protected] 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.

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!

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.

Using waffle.io for Kanban project management board

• Perfectly linked with the github.com

Want to know more about git?

• You can start by following these instruction https://try.github.io/levels/1/challenges/1

Q/A