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 Course Outline

Course Outline of ITS485

Here is the first lecture.

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 vs Ionic Framework Comparison

React-Native Walk-through Installation Videos

[React Native 0] Set up React Native on Mac for iOS and Android DevelopmentThe followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.medium.com​

[React Native 0] React-Native Setup on Windows for Android Development WalkthroughAndroid DevelopmentWalkthrough Android Developmentmedium.com​

Concept ก่อนเข้าใจ​

**Deterministic Turing machine
** คอมพิวเตอร์ที่รันคำสั่งเหมือนเดิมทุกครั้ง ถ้าหาก Input และ State เหมือนเดิม (คอมพิวเตอร์ในปัจจุบัน)
**
Non-deterministic Turing machine
** คอมพิวเตอร์ที่รันคำสั่งอาจะไม่เหมือนเดิมทุกครั้ง ถ้าหาก Input และ State เหมือนเดิม (แยก Process ได้) มันสามารถแตกการกระทำได้มากกว่า 1 พร้อมๆกัน

ตัวอย่างปัญหา
อาทิเช่น Zero sum subset problem สมมุติว่ามี Set อยู่ {5,-2,-3, 7, 8} ต้องหา Subset ที่รวมกันได้ 0 (คำตอบก็คือ {5, -2, -3}) เป็นต้น

Deterministic Turing machine
DTM ไล่รวมไปเรื่อยๆ จนกว่าจะเจอ O(N+(N-1)+(N-2)+… 1) = O(N(N+1)/2) = O(N²)

Non-deterministic Turing machine
NDTM แตก Process เป็น Tree ได้เลย อาทิเช่น

Steps Solutions

1 {}
2 {5} {-2} {-3} {7} {8}
3 {5,-2} {5,-3} {-2, 5} {-2, 3}

NDTM ถ้าซักสายใดสายหนึ่งเจอ มันจะเอาสายที่เจอมาเป็นคำตอบและหยุดการทำงาน สมมุติว่าถ้าเรารู้ว่าคำตอบมันต้องใช้ 3 ตัว มันจะเจอใน Step ที่ 3 แน่นอน ยังไงก็ไม่มากกว่า N เพราะฉะนั้นมันคือ O(N)

ขี้โกงจริงๆ

คราวนี้มาเข้าเรื่อง P, NP, NP-Complete และ NP-Hard​

P คือเซ็ตของโจทย์ที่สามารถแก้ได้โดย Deterministic Turing machine ด้วยเวลา Polynomial

​NP คือเซ็ตของโจทย์ที่สามารถแก้ได้โดย Non-Deterministic Turing machine ด้วยเวลา Polynomial หรือ โจทย์ที่สามารถตรวจว่าคำตอบนี้ถูกหรือผิดได้บน Deterministic Turing machine ด้วยเวลา Polynomial เมื่อให้คำตอบมาให้

จริงๆแล้ว P ก็เป็น Subset ของ NP เนื่องจากว่าทุกโจทย์ของ P สามารถแก้ได้ด้วย Non-Deterministic Turing machine ด้วยเวลา Polynomial แน่นอน (เพราะง่ายกว่า) เพราะฉะนั้น NP จึงมี P เป็น Subset ด้วย

ในทางกลับกัน เค้าว่ากันว่า จริงๆแล้ว P=NP ก็ได้ ว่าทุกปัญหาใน NP สามารถแก้ได้ด้วย Deterministic Turing machine ด้วยเวลา Polynomial (อันนี้บางคนเชื่อ บางคนไม่เชื่อนะครับ เพราะยัง Proof ไม่ได้ เลยเป็นปัญหาระดับโลกที่รอคนคอยพิสูจน์อยู่ว่า P=NP? หรือไม่ ใคร Proof ได้ ได้ล้านเหรียญนะครับ)

NP-Complete คือเซ็ต NP-P (NP ลบ P) คือเซ็ตที่เป็น NP เพียวๆจริงๆไม่มี P เข้ามาแทรก หรือโดยนิยามคือหมายความว่าเป็น เซ็ตของโจทย์ที่สามารถแก้ได้โดย Non-Deterministic Turing machine ด้วยเวลา Polynomial แต่ไม่สามารถแก้ได้โดย Deterministic Turing machine ด้วยเวลา Polynomial

NP-Hard คือเซ็ตของปัญหาขนาดใหญ่ที่มีส่วนนึงของการแก้ปัญหาเป็นปัญหาแบบ NP-Complete ส่วนที่ยากของ NP-Hard ก็คือส่วนของ NP-Complete นี่แหละ ถ้าแก้ส่วนย่อยของปัญหาที่เป็น NP-Complete ได้แล้ว (หรือว่าได้คำตอบของส่วนย่อยปัญหาที่เป็น NP-Complete นี้ได้หมดแล้ว) ปัญหา NP-Hard นี้ก็จะไม่ยากอีกต่อไป แก้ได้ง่ายๆ แต่มันก็ยากกว่า NP-Complete เพราะขั้นตอนในการแก้มันเยอะกว่า

ถ้าเรียงตามความยากจริงๆก็คือ จากง่ายสุดไปยากสุด

1. P
2. NP
3. NP-Complete
4. NP-Hard (ขั้นตอนในการแก้เยอะกว่า NP-Complete)

เพื่อความเข้าใจ ก็เลยมีคนวาดให้เข้าใจง่าย ดังแผนภูมิภาพนี้นะครับบบบ

กลุ่มซ้ายคือสำหรับคนที่เชื่อว่า P != NP
กลุ่มขวาคือสำหรับคนที่เชื่อว่า P = NP

6

I get about 100+ Linkedin friend invitations from many people every week. I think they wish to connect with me for some reasons so I often accept it. But with the high amount of invitations, click the accept button one-by-one is too slow and waste of my time. To make it super fast (within 2 seconds), I use the JavaScript trick to make the browser click all 100+ of accept invitation buttons for me programmatically.

Here is the step.

1. Visit the Linkedin Website and click on the invitation notification on the top right.

2. Click on the lovely “See all >” link.

3. Scroll down the list of pending invitations page. You will see about 20 of pending invitation boxes. Click “-See more-” to show more the invitation boxes in the page. Click “-See more-” repeatedly until you feel it enough. All visible invitation boxes that you see in the page will be accepted automatically by the JavaScript code in the next step.

4. In Chrome, Press F12 in Windows or Option-Command-I in Mac, to open the Chrome Developer Panel. Click on the Console tab. It is the JavaScript console panel. Copy and paste the following codes and press Enter to execute the code.

var x = document.getElementsByClassName(‘bt-invite-accept’); for (var i=0 ; i<x.length; i++) x[i].click();

1. That’s it. Browser is clicking all buttons for us. It takes about 2–3 seconds to complete. The number of pending invitation is swiftly reduce. You can see the changes on the page. Hoo ray~! No more accepting invitation buttons (aka works) to do.

In contrast, if you wish to reject all invitations at once, just use this codes instead…

var x = document.getElementsByClassName(‘bt-invite-decline’); for (var i=0 ; i<x.length; i++) x[i].click();

See http://plnkr.co/edit/8TACXGHmMDV4k0O7D6DC?p=preview

We have implemented the corousel with image thumbnail into an AngularJS (Angular version 1) project based on the bootstrap angular-ui library, http://angular-ui.github.io/bootstrap/.

Preview

HTML Code

Slide {{$index}}​

{{slide.text}}_P_ _N_ Add SlideInterval, in milliseconds:   
        
Enter a negative number to stop the interval.

JS Code

angular.module('plunker', ['ui.bootstrap']);  
function CarouselDemoCtrl($scope) {  
  $scope.myInterval = 5000;  
  $scope.thumbnailSize = 5;  
  $scope.thumbnailPage = 1;  
  var slides = $scope.slides = [];  
  $scope.addSlide = function(i) {  
    var newWidth = 600 + slides.length;  
    slides.push({  
      image: 'http://placekitten.com/' + newWidth + '/300',  
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +  
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4],  
      index: i  
    });  
  };  
  for (var i=0; i<8; i++) {  
    $scope.addSlide(i);  
  }  
    
  $scope.prevPage = function(){  
    if ($scope.thumbnailPage > 1){  
      $scope.thumbnailPage--;  
    }  
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  }  
    
  $scope.nextPage = function(){  
    if ($scope.thumbnailPage <= Math.floor(slides.length/$scope.thumbnailSize)){  
      $scope.thumbnailPage++;  
    }  
    $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  }  
    
  $scope.showThumbnails = slides.slice(($scope.thumbnailPage-1)*$scope.thumbnailSize,$scope.thumbnailPage*$scope.thumbnailSize);  
  $scope.setActive = function(idx) {  
    $scope.slides[idx].active=true;  
  }  
}

Why?

1. Macport is old, and significantly slow than homebrew.
2. Homebrew is safer.

How?
First, Uninstall all programs installed by Macport.

sudo port -fp uninstall installed

Then remove all Macport’s application files,

sudo rm -rf \
/opt/local \
/Applications/DarwinPorts \
/Applications/MacPorts \
/Library/LaunchDaemons/org.macports.* \
/Library/Receipts/DarwinPorts*.pkg \
/Library/Receipts/MacPorts*.pkg \
/Library/StartupItems/DarwinPortsStartup \
/Library/Tcl/darwinports1.0 \
/Library/Tcl/macports1.0 \
~/.macports

Install brew,

ruby -e “$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"