Kobkrit Viriyayudhakorn

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

Download PDF here l8-midtermexam-groupproject

[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Term Projects
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

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.
12. 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…
13. Complaint Report App
14. 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.
15. 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.
16. Stock Management App for Salesperson • Create PO in the app. • Checking Item Stock from the App • Checking status of PO.
17. Stock Management for 
 E-commerce Merchant
18. 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
19. Vaccination Alert App • Vaccination Alert for Pet • Warn owner to the pet hospital for check up.
20. Parasite Museum App • Faculty of Medicine Siriraj Hospital • Show Museum History and Introduction • Calendar of Event • Contact Us
21. Travel Planner App • Arrange the order of visits • Pin Location on the Map • Compute Distance between Locations
22. Time Attendance Recorder • Record Time Attendance IN and OUT. • Leave Record. • Time Attendance Report • Automatic Attendance Recording using Location 🙂
23. 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
24. 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.
25. 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 …
26. 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!
27. Or any app idea that you want to do..
28. 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.
29. 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.
30. Github • Sign In/Sign Up for http://github.com
31. Github Continue • Verify E-mail Address
32. Start a new Github Proj • Visit https:// github.com/new • Create a new project with Public visibility • Add Name and Description
33. • 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.
34. Start the Term-Project App • Open terminal, cd to your working directory. • $ react-native init complaintApp • $ cd complaintApp • $ git init
35. 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
36. Successfully Pushed Not yet pushed, Failed Pushed
37. 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.
38. 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.,
39. Project page on Github after successfully pushed. Console when successfully pushing the updates.
40. 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.
41. 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!
42. 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.
43. Using waffle.io for Kanban project management board • Perfectly linked with the github.com
44. Want to know more about git? • You can start by following these instruction
45. Q/A

Fixing TextArea is too high in Contact Form plugin of WordPress.

I config wordpress today. I use contact form plugin to collect information from visitor.
I have added Text Area to the from by default it is super high.
They set col=10 by default!!

To fix that, I have add CSS stylesheet to limit their height to just 100 px.
The following are full example of Contact Form source.

เสียเวลาไปเป็นเดือน แก้ปัญหาสุดคลาสสิค Git Push แล้ว Group Permission เปลี่ยน

Geek Alert


เริ่มต้นคือว่าเราใช้ Jenkins ในการ Build ครับ พอเราทำการ Update Git Push ไปยัง Github,
เราก็เซ็ตให้ Jenkins ไปดึงมาจาก Github ทำการ Build ให้จนเสร็จไฟล์แล้ว Deploy ให้ที่ Server ครับ.
เมื่อ Deploy ไฟล์ไหนถูกเปลี่ยน, Permission มันก็จะเป็น jenkins:jenkins ; ทุกอย่างดู Perfect ดี ; แต่มันเป็นนรกทันทีเมื่อเราต้องสามารถ Push โค้ดด่วนจากเครื่องของตัวเองครับ.

ประเด็นคือ Jenkins มัน Build ค่อนข้างนานมาก, แล้วบางทีเราอยาก Deploy ที่ Server ให้เร็วๆ,
เราก็สั่งให้เครื่องเรา Git Push ไปยัง Deploy Server โดยตรงเลย ไม่ต้องผ่าน Jenkins และ Github.
แต่ปรากฏว่า เมื่อเรา Push ไปยัง Deploy แล้ว, ไฟล์ไหนถูกเปลี่ยน, Permission มันก็จะเป็น kobkrit:kobkrit ครับ.

คราวนี้ก่อปัญหาแล้ว, เมื่อมี Commit ใหม่มา, เพราะมันจะ ​Git Push จาก jenkins ไม่ได้, เนื่องจาก jenkins มันไม่ได้อยู่ใน Group kobkrit.

ผมติดอยู่เป็นเดือน แก้ไม่ได้ซักที ตอนแรกคิดว่าเป็น git แต่จริงๆแล้วมันเป็นที่ระบบ File ของ Linux เรานี่แหละครับ
(1) สร้าง Groups ใหม่ที่มีเราและ jenkins อยู่ด้วยกัน ชื่ออะไรก็ได้ อาทิเช่น kobjen
(2) ทำการเปลี่ยน Group Permission ของ Deploy directory เป็น kobjen.

(3) ทำการแก้ gid (setgid) ของทุก Folder ใน Deploy Proj กำหนดเป็น Template ให้มัน inherit group kobjen ไว้ตลอดเวลามีการแก้ไขไฟล์ใหม่นั้น

เท่านี้ ไม่ว่าใครก็จะ git push มาที่ deploy, group ก็จะไม่ถูกเปลี่ยน เป็น kobjen ไปตลอดนั้นเอง ปัญหาถูกแก้ไขแล้ววว ฮ่าๆๆๆ


[React Native Tutorial] How to setup BabelJS and try ES6 on Windows!

Running BabelJS on Windows (Try ES6 on Windows)
1. Running BabelJS on Windows Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited. kobkrit@gmail.com http://www.kobkrit.com
2. How to try ES6 and Beyond with on Windows (1) Open Command Line with “Run as Administrator”
3. (2) Create Directory at C:es6 and then run “npm init”
4. (3) Press Enter Many Times Until All Questions are Answered
5. (4) npm install –save-dev babel-cli 
6. (4) notepad link.cmd
7. (5) Type “doskey babel-node=.node_modules.binbabel- node $*” and hit file > save
8. (6) Go back to command line, type “link.cmd”
9. (7) echo {“presets”:[“stage-0”]} > .babelrc
10. (8) notepad 1.js
11. (9) Type down some ES6 code, e.g., 
 console.log(‘Hello World!’); + Hit Save
12. (10) babel-node 1.js
13. Alias is not persistence! • If you closed the command line windows, enter c: es6 again, and always run link.cmd • Open command line program • cd c:es6 • link.cmd • babel-node somefile.js

Download the full PDF: How to setup BabelJS and try ES6 on Windows Slides!

[React Native Tutorial] Lecture 2: Modern JavaScript Programming language with ES6/ES2015

The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)

  1. Walkthrough guides for setup ES6 develop environment in Mac by using Babel
  2. Walkthrough guides setup ESLint to check the JavaScript style guide.
  3. Teach Modern JavaScript programming language (ES6/ES2015)
  4. Teach how to write ES6/ES2015 with correct style guides (be the best practices from day one) based on Airbnb

Lecture 2: ES6 / ES2015 Slide

1. ES6/ES2015 and Beyonds
 with the Best Practices
 Kobkrit Viriyayudhakorn, Ph.D. CEO of iApp Technology Limited. kobkrit@gmail.com http://www.kobkrit.com
2. What we will learn today? • A bit on JavaScript History • Learn how to program in the modern JavaScript i.e., ECMAScript 2015 (Version 6) / ECMAScript 6 / ES2015 / ES6 complied by BabelJS • Program with the best practices (Airbnb coding style) and style checking tools by ESLint
3. Short History • Want to added support for Java applets more accessible to non-Java programmers in Netscape. • Developed by Brendan Eich of Netscape • December 1995 • Mocha => LiveScript => JavaScript • Popular! • Microsoft release JScript • NetScape submit to ECMA for standardize
4. ECMAScript • Script-Language Specification • Standardized by Ecma International in ECMA-262 and ISO/IEC 16262, based on JavaScript • First Appeared June 1997, 19 year ago.
5. Significant Development • V8 JavaScript engine (2008). To compete with Internet Explorer on JavaScript benchmark, Google developed v8 that can compile JavaScript to Native Machine code. It is very fast. • NodeJS + NPM (2009): Using V8 to make server-side JavaScript Web Application. • MongoDB (2009): No SQL database based on V8 engine. • React (2013): JavaScript Front-end Web framework for creating Interactive UI. • React-Native (2015): Enable to Mobile App Development
6. BabelJS • Latest version of NodeJS and Browser is not yet fully compatible with ES6 yet. • BabelJS library is needed for using the next generation of JavaScript (ES6) • It complies ES6 to the traditional JavaScript(ES5) that can run everywhere. • React-Native install BabelJS as a main dependency by default and use it for compile every files.
7. How to try ES6 and Beyond with BabelJ • Open Terminal / Command Line • Make new directory with any name, and change directory into it. • $ npm init • Enter project information, or press a lot of enters. • $ npm install –save-dev babel-cli babel-preset- stage-0 • $ ln -s ./node_modules/.bin/babel-node . • $ echo ‘{“presets”:[“stage-0”]}’ > .babelrc • $ ./babel-node filename.js
8. How to get code’s style check with ESLint • ESLint – ECMAScript Style Checker Tool • $ npm install eslint –save-dev • $ ln -s ./node_modules/.bin/eslint . • $ ./eslint —init • Answer: Use popular style > Airbnb > JavaScript • $ ./eslint yourfile.js
9. Let’s Start with ES6
10. ES6 Basic • /* Comment */ • // Comment • console.log(‘print out’); • Syntax mostly derived from C language • if (true){} • while (true){} • do{…} while(true); • for(init ; condition; incr) {}
11. Primitive Types • Directly Store Value • string • number • boolean • null • undefined
12. Primitive Type #1: String, Number, and Boolean
13. Primitive Type #2: Null, Undefined, and Reference by Value
14. Complex Types • Reference of its value • object • array • function
15. Complex Type #1: Object & Array
16. Complex Type #2: Function and Pass by Reference
17. Declaration 
 (Var, Let and Const) • Var, Let, Const = Making Variable Declaration • Const = Constant Declaration, Can’t Reassign. • Use with reference that never change. • Block-Level Scope • Safer (If reassignment happen, it will throw the errors)
18. Declaration
 (Var, Let and Const) • Let = Variable Declaration, Can Reassign. • Block-Level Scope • Var = Variable Declaration, Can Reassign • Global-Level Scope • Old JavaScript • Dangerous. Don’t use it.
19. Declaration #1: Global Scope, Block Scope and Constant
20. Declaration #2: General Use Case in For loop
21. Functions • Function in JavaScript are objects, which can use as arguments. • Function can be invoked.
22. Function #1: Declaration, Invocation
23. Function #2: ES6 Feature – Declaration
24. Function #3: Anonymous Function
25. Function #4: Recursive
26. Function #5: Callback
27. Function #6: Exceptions
28. Function #7: ES6 Feature – Rest Params (Spreads …),
 Default Params
29. Function #8: ES6 Feature – Named Parameters
30. Function’s Airbnb Style Guides Style Guide #1. Use function declarations instead of function expressions.
31. Style Guide #2. Wrap immediately invoked function expressions in parentheses. Why? An immediately invoked function expression is a single unit – wrapping both it, and its invocation parens, in parens, cleanly expresses this.
32. Style Guide #3. Never declare a function in a non-function block (if, while, etc.)
33. Style Guide #4. Never use arguments, use … instead.
34. Style Guide #5. Use parameter syntax rather than mutating function arguments.
35. Style Guide #6. Avoid side effects with default parameters
36. Style Guide #7: Always put default parameters last.
37. Style Guide #8: Use spread operator … to call variadic function.
38. Style Guide #8: Use Arrow Functions when passing an 
 anonymous function.
39. Style Guide #9: Omit braces and use the implicit return, if the function body consists of a single expressions.
40. Style Guide #10: If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments.
41. Object • Object is a dictionary data structure. • Map between Key => Value
42. Object #1: Declaration, Reference
43. Object #2: Assignment, Retrieval, Re-Assignment
44. Object #3: Deletion, Keys, Size, Loops
45. Object #4: Pass by Reference
46. Object #5: Clone a Object
47. Object #6: Functions in Objects
48. Object #7: ES6 Features – Dynamic Keys & Function Shorthand
49. Object #8: ES6 Features – Property Value Shorthand & Destructuring
50. Object #9: ES6 Features – Sprades Operators
51. Object’s Airbnb Style Guides Style Guide #1. Use literal syntax for object creation.
52. Style Guide #2: Define All Property in One Place
53. Style Guide #3: Use Object Method Shorthand
54. Style Guide #4: Use Property Value Shorthand
 Why? It is shorter to write and descriptive.
55. Style Guide #5: Group your shorthand properties
 at the beginning of your object declaration.
 Why? It’s easier to tell which one are using shorthand.

56. Style Guide #6: Only quote properties that are invalid identifiers
 Why? Easier to Read. Easily Optimized by many JS Engines.
57. Style Guide #7: Use dot notation when accessing properties.
 Use bracket when accessing properties with a variable.
58. Array • Array is a list data structure. • Sequence of objects
59. Array #1: Declaration, Update, Length
60. Array #2: Delete, Sub-Array
61. Array #3: Push, Pop, Unshift, Shift
62. Array #4: Array.isArray, [].indexOf
63. Array #5: Loop
64. Array #6: Sort, Reverse
65. Array #7: Array <-> String, 2D and 3D Array
66. Array #8: [].forEach
67. Array #9: ES6 Features: Array Spreads …, Array.from, Array.of
68. Array #10: ES6 Features: [].fill, [].find, [].findIndex, [].map
69. Array #11: ES6 Features: [].reduce, [].filter
70. Array #12: ES6 Features: Destructuring
71. Array’s Airbnb Style Guides Style Guide #1. Use literal syntax for array creation.
72. Style Guide #2. Use Array.push() instead of direct assignment to add items to an array.
73. Style Guide #3. Use array spreads … to copy arrays.
74. Style Guide #4-1 Use return statements in array method callbacks. It’s ok to omit the return if the function body consists of a single statement
75. Style Guide #4-2 Use return statements in array method callbacks. It’s ok to omit the return if the function body consists of a single statement
76. String String #1: Declaration, Concatenation, NewLine
77. String #2: ES6 Feature – Template Strings
78. String #3: Number <-> Strings
79. String #4: IndexOf, Search, Replace
80. String #5: IndexOf, Search, Replace, Compare
81. String #6: charAt, slice, toLowerCase, toUpperCase, trim, includes
82. String #7: startsWith, endsWith, Repeats
83. String’s Airbnb Style Guides Style Guide #1. Use single quote ‘ ‘ for Strings
84. Style Guide #2. Strings that cause the line to go over 100 characters should not be written across multiple lines using string concatenation. …
85. Style Guide #3 When programmatically building up strings, use template strings instead of concatenation …
86. Style Guide #4 – Do not unnecessarily escape characters in strings. …
87. Class • Programming Paradigm that Encapsulate data and methods based on the concept of real world objects. • JavaScript never have Class concept before. They just added in ES6. • I personally like the function-oriented nature of JavaScript more. But by adding the Class, it make the object-oriented programming in JavaScript a lot easier and nicer.
88. Class #1: ES6 Feature – Declaration, Instantiate
89. Class #2: ES6 Feature – Extend
90. Class #3: ES6 Feature – Getter/Setter
91. Class’s Airbnb Style Guides Style Guide #1. Methods can return this, to enable method chaining.
92. Style Guide #2 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.
93. Modules • ES6 gave us a native way to organize our code into modules.
94. Module #1: ES6 Feature – Import, Export
95. Module’s Airbnb Style Guides Style Guide #1 Do not use wildcard imports.
96. Style Guide #2 Only import from a path in one place
97. Style Guide #3: Put all imports above non-import statements.
98. Style Guide #4: Do not export directly from an import
99. Style Guide #5: Do not export mutable bindings.
100. Style Guide #6: In modules with a single export, prefer default export over named export.
101. Exercise (1) Write down a function that sum every element in array. E.g. sumArray([12,3,4,1,2,3]) = 25
102. Exercise (2) Write function that count word size case-insensitively. Input: “Hello world hello hello earth earth” (Not limited to these word, it can be any words) Output: Object{hello : 3, world : 1, earth : 2 }
103. Exercise (3) Let’s say: ‘(‘, ‘{‘, ‘[‘ are called “openers.” 
 ‘)’, ‘}’, ‘]’ are called “closers.” Write an efficient function that tells us whether or not an input string’s openers and closers are properly nested. Examples: “{ [ ] ( ) }” should return true “{ [ ( ] ) }” should return false “{ [ }” should return false
104. Q/A

Full PDF File: ITS484 Lecture2: ES6/ES2015

Smooth Build Dist by Update NPM Package.json for Angular-Fullstack@2.0.13

After you clean initialize the generator-angular-fullstack package version 2.0.13, edit the file as follows to smooth your grunt build experience.

Happy building! 🙂

Think Startup: Rushbike

เรื่องราวของ Rushbike ออก นสพ. กรุงเทพธุรกิจ ใน Section: Think Startup (หน้า 26) เมื่อวันพฤหัสที่ 18 สิงหาคมที่ผ่านมาครับ


[React-Native-Router-Flux] [IgniteJS] Allow POP to refresh the previous scene

This post is talk about how to allow the NavigationActions.pop() command of the react-native-router-flux library https://github.com/aksonov/react-native-router-flux refresh the props of the previous scene.

The situation is when user went from the Screen1 to Screen2, and user press “Back button” on the Navigation bars of Screen2 back to Screen1. Here is the way to notified Screen1 about this return.


Add the following function to


The console.log show as follows.

Compatible version of React-Native and React Libraries

For RN 0.30 and 0.31: npm install react@~15.2.1
For RN 0.32: npm install react@~15.3.0

[React Native Tutorial] React-Native Setup on Windows for Android Development Walkthrough

Android Development

  • Install Chocolatey
  • Install Node
  • Install Python2
  • Install React-Native Client
  • Install Android Studio
  • Setup Android SDK
  • Setup ANDROID_HOME and PATH environment
  • Install Genymotion
  • Setup Genymotion ADB Setting
  • Run React-Native on Genymotion

Environement Variable Content

Notable Android’s SDK command

[React Native Tutorial] Lecture 1: Introduction to React-Native

Hello, everyone. I am Kobkrit Viriyayudhakorn. This series, I will teach you how to make the mobile application in both iOS and Android by React-Native.

Here is the first lecture.

Full PDF: L1-ReactNativeIntroduction

React Native is a new technology that allows building real mobile apps using only JavaScript. It is a JavaScript framework for writing, debugging, and deploying both iOS and Android mobile applications with native experience. React-Native allows developers to share about 80% of code between iOS and Android which make the development is 5x faster than traditional means. React-Native libraries are created by Facebook released in March 2015. It was proven by many world-class mobile applications, such as Facebook, Facebook Ads Manager, TaskRabbit, QQ, Discord, SoundCloud, etc.

React-Native Walk-through Installation Videos

Set up React-Native on Mac for iOS and Android Development
Set up React-Native on Windows for Android Development

Next Lecture > ES6 / ES2015

Setting ANDROID_HOME enviromental variable on Mac OS X After Install Android Studio

In Terminal:

Add lines:

Check it worked:

[React Native Tutorial] React-Native Setup For Mac

The following are react-native setup for mac.

Install Homebrew
Open terminal, and run the following command.

(For Developing iOS) Install Xcode via Mac App Store: https://itunes.apple.com/us/app/xcode/id497799835?mt=12
(For Developing Android) install Android Studio: https://developer.android.com/studio/install.html

Testing the installation
Open terminal

Using Mobile Angular in Generator-Angular-Fullstack

The followings are that transformation of the web app generated by generator-angular-fullstack https://github.com/angular-fullstack/generator-angular-fullstack to mobile friendly website by using the mobile-angular-ui http://mobileangularui.com/

Generate the project from the generator-angular-fullstack

Add the following to index.html

Continue reading

« Older posts

Copyright © 2016 Kobkrit Viriyayudhakorn

Theme by Anders NorenUp ↑