19 posts tagged with "react-native"

Updated Facebook Login Function for 2.js in the Lecture 12.
https://gist.github.com/kobkrit/6ed60d963c343331e9f76c73d82dcd25

เริ่มต้น​

React ถูกใช้ด้วย Developer มากกว่า 500,000 กว่าคน (นับโดยจำนวนคนโหลด React Developer Tools Plugins ใน Chrome

React-Native ถูกใช้ใน Production App หลากหลาย App ดังข้างล่าง โดยเฉพาะ Facebook ที่ทุกคนใช้กันอยู่ ตอนแรกทีม Facebook ถกกันว่าจะเขียนใหม่ด้วย React-Native ทั้งหมดดีไหม แต่ทีมคิดว่าการเขียนใหม่ เป็นการลงทุนที่มากเกินไป ได้ไม่คุ้มเสีย แต่การเขียนด้วย React-Native ก็ย่อมดีกว่าเขียนด้วย Native อยู่แล้ว จึงได้ข้อสรุปว่าจะเริ่มเอา React-Native มาใช้ทดแทน Native code (Incrementally adopt) ในตัวแอพ Facebook หลักไปเรื่อยๆ

React-Native จะมีอะไรใหม่​

1. ลดเวลารันตอนเริ่มต้นด้วยการ Parallel Network Request

แต่ก่อน

ตัวใหม่

2. ใช้ Declarative View ไม่ต้อง Complie App ให้เสียเวลาอีกต่อไปแล้ว เป็นอิสระต่อ Xcode และ Android Studio แบบเต็มตัว ดูได้ต่อใน Create-React-Native-App

3. Cross-App Development เมื่อ Facebook และ Instagram สามารถ Share code กันได้

จริงๆแล้ว เราก็คล้ายๆกัน ต่างกันนิดหน่อย ทำไมไม่มาใช้โค้ดร่วมกันละ

สรุป 3 สิ่งเด็ดๆ

ทำ Animation ได้ถึง 60FPS​

wix/react-native-interactablereact-native-interactable - Experimental implementation of high performance interactable views in React Nativegithub.com​

React-Native-Interactable เป็น Declarative Physic Engine สำหรับ React-Native สามารถทำให้เราสร้าง Animation ใน React-Native ได้ถึง 60FPS Support มี Animation ที่หลากหลายให้เราเลือกใช้

ปกติ React-Native จะกระตุกเพราะว่า มี Animation อะไรซักอย่างทีต้องวิ่งผ่าน Bridge ที่คุยกันระหว่าง Native กับ JS ทำให้ Bridge มัน Busy, App ก็ Lag กันไป

กดที วิ่งผ่าน Bridge ที

ตัวนี้แก้ปัญหา โดยการให้กำหนด Physic Property (Declare Interaction) มาจากฝั่ง JS มาให้ Native เลย แล้วให้ Native คำนวณการอัพเดท Animation ไปได้เลย ไม่ต้องวิ่งผ่าน Bridge อีก

Bridge ก็โล่ง แอพก็เร็วปื๊ด ทันที

ตัวอย่าง Interaction Declarion

แนะนำให้ลองใช้ React-Native App ของคุณ ราศีจับขึ้นทันที

ลองทดสอบ Performance ได้ที่นี่

Create-React-Native-App​

อันนี้เด็ดสุดในงาน

บริษัท Exponent ออก Create-React-Native-App เลียนแบบ Create-React-App ของ Dan Abramov ที่เด็ดก็คือ ใช้แค่ NodeJS ในการพัฒนาทั้งหมด ซึ่งก็หมายความว่า เราสามารถใช้ Windows พัฒนา iOS App ได้แล้ววว

เมื่อรันเสร็จก็จะได้ QR Code อันนี้มา ในมือถือทั้ง iOS และ Android ลงแอพชื่อ Expo เสร็จแล้ว Scan QR Code นี้ก็จะเห็น App รัน On-the-fly แบบ Realtime แบบ Hot Reloading เปลี่ยนแปลงตามโค้ดที่เราพัฒนาได้เลยทันที (ขออย่างเดียว ขอให้อยู่ใน Wifi เดียวกันเท่านั้น)

สบายขึ้นเยอะ

ดังภาพ ไม่ต้องมีสายแล้วนะจะ Line Free

Expo บอกว่าไม่ได้มาเล่นๆ Support Native Library ทั้งหลายแหล่ด้วยจ้า

จากเครื่องเปล่าๆ 5 นาที ใช้พัฒนา App ได้เลย ต่อจากนี้ผมจะสอน นักศึกษาได้ง่ายขึ้นแล้ว ไม่ต้องมานั่งลงเป็น 1–2 ชม. อีกต่อไป

ปีนี้ค่อนข้างเด็ด แต่ยังขาด Day 2 อีกวัน รออัพเดทพรุ่งนี้จ้า

Easiest way to shift up the screen when keyboard is shown up and hide it when touch other parts.​

6

Can not type password here T_T

Shift up the screen when the keyboard is shown up.​

1. Use the KeyboardSpacer, $ npm install react-native-keyboard-spacer
2. Adding the followings into your React component,

**import KeyboardSpacer from 'react-native-keyboard-spacer';** class LoginScreen extends React.Component {  

...render() {  
 ...  
 return (  
        <View style={Styles.container}>  
           <View style={Styles.yourOldContainerView}>  
           </View>  
           **< KeyboardSpacer />**  
        </View>  
 );  
}

Done.

Dismiss the keyboard when user touch somewhere else.​

1. Use DismissKeyboard, Do not need to install anything. It comes with React-Native.

**import DismissKeyboard from 'dismissKeyboard';** class LoginScreen extends React.Component {  

...render() {  
 ...  
 return (  
     **< TouchableWithoutFeedback onPress={()=>{DismissKeyboard()}}>**        <View style={Styles.container}>  
           <View style={Styles.yourOldContainerView}>  
           </View>  
           <KeyboardSpacer />  
        </View>** </TouchableWithoutFeedback>**  
 );  
}

Done.

Easy right?

Post นี้สำหรับพนักงาน iApp ใหม่ทุกท่าน ที่ทุกคนต้องได้คือ 0, 1, 7
ถ้าสาย Mobile App ต้อง 2,3 (5 — Optional)
ถ้าสาย Web Front End ต้อง 2 (5 — Optional)
ถ้าสาย Web Back End ต้อง 4,6 (5 — Optional)

Warning สาย Web Back End กำลังจะตกงานนะจ๊ะ (อยากรอดต้องเป็น Firebase จ๊ะ 5)

0. Git

ถ้า Git ยังไม่ได้ไม่ต้องพูดถึงเรื่องอื่นเลย

Try GitLearn how to use Git with Code School's interactive course, Try Git.try.github.io​

1. ES6 & Babel & Webpack

ก่อนจะเริ่ม React ได้ ต้องเขียนภาษา ES6 ให้โปรเสียก่อน
แนะนำ Course ของ Udemy เป็นหลักและอ่าน Blog ของผมและ AirBnb ผ่านๆ

ECMAScript 2015 (ES6), Babel and Webpack ExplainedStart using EcmaScript/ES6 in production and own projects today. - Free Coursewww.udemy.com​

[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com​

แนะนำให้ทวนตามใน Blog ของผมด้วย จะได้เขียนถูก Style ตามหลัก Airbnb https://github.com/airbnb/javascript

2. React & Redux

แนะนำอ่านชุดบทความของ babel coder มาก่อน (ทบทวน Webpack และ Babel ด้วย) แล้วต่อด้วยของ Udemy มี 2 เจ้าจะเอาของ Stephen Grider หรือ Leonardo Daniel ก็ได้ ต่อด้วยใช้ BoilerPlate ของ React-Production-Starter ให้เป็น หรือแต่งสดเองก็ได้

Modern React with Redux - UdemyMaster the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6www.udemy.com​

Advanced React and Redux - UdemyDetailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and…www.udemy.com​

[ชุดบทความ] สอนสร้าง Isomorphic Application ด้วย React.js และ Redux ใน 5 วันชุดบทความนี้ประกอบไปด้วย 5 บทความที่จะสอนคุณสร้าง Isomorphic Application ใน 5 วันwww.babelcoder.com​

React Redux React-Router: From Beginner to Paid Professionallearn React, Redux, React-Router, ECMAScript2015(ES6) by creating many applications such as Todo List, YouTube and…www.udemy.com​

jaredpalmer/react-production-starterreact-production-starter - React Redux boilerplate with isomorphic rendering, async react-router routes, async redux…github.com​

Bootstrap · The world's most popular mobile-first and responsive front-end framework.Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.getbootstrap.com​

3. React-Native + Firebase

ลองเล่นของ Udemy ก่อน แต่ไม่ค่อยครบ แล้วอ่านของ FormInit ให้พื้นฐาน React, Redux ให้แน่น แล้วมาจบด้วยของผมที่เล่น Module ครบถ้วนที่สุด อันสุดท้ายสร้าง App ด้วย IgniteJS ต่อด้วยสามารถทำ Firebase ได้

React Native Course DirectoryBuild native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.medium.com​

React Native Course ตอนที่ 1: ติดตั้งบน OSXReact Native Installation for OSX ด้วยเหตุที่ React Native เป็นระบบที่ใช้สำหรับพัฒนา Native App. สำหรับทั้ง IOS แล…www.forminit.com​

The Complete React Native and Redux Course - UdemyiOS and Android App Development from scratch - build fully native mobile apps ridiculously fast!www.udemy.com​

infinitered/igniteignite - The unfair starting CLI, Generator, and more for React Nativegithub.com​

4. สาย Server, NodeJS, Express, MongoDB, AngularJS

ดูเหมือนของ Code School จะตรงสุด ตามด้วยเรียนรู้ให้ the MEAN stack ให้เป็น เพิ่มพวก MongoDB, Mongoose, AngularJS และ Gulp ด้วยการอ่าน Doc และสุดท้ายใช้ generator-angular-fullstack ให้เป็น

The MEAN Stack | Code SchoolMEAN is a collection of JavaScript-based technologies - MongoDB, Express.js, AngularJS, and Node.js - used to develop…www.codeschool.com​

MongoDB Tutorials - MongoDB Manual 3.2MongoDB Manual 3.2 MongoDB Tutorialsdocs.mongodb.com​

Mongoose ODM v4.7.6Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type…mongoosejs.com​

AngularJSAngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data…docs.angularjs.org​

Express - Node.js web application frameworkExpress is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com​

Socket.IOEdit descriptionsocket.io​

RedisRedis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker…redis.io​

gulp.jsEdit descriptiongulpjs.com​

angular-fullstack/generator-angular-fullstackgenerator-angular-fullstack - Yeoman generator for AngularJS with an Express servergithub.com​

5. สาย Firebase (Serverless)

[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com​

[React Native 13] Firebase Realtime Database + Authenticationmedium.com​

Firebase | App success made simpleFirebase gives you the tools and infrastructure you need to build better apps and grow successful businesses.firebase.google.com​

6. สาย Server

NGINX | High Performance Load Balancer, Web Server, & Reverse ProxyNGINX accelerates content and application delivery, improves security, facilitates availability and scalability for the…www.nginx.com​

DockerDocker is an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on…docker.com​

Amazon Web Services (AWS) - Cloud Computing ServicesAmazon Web Services offers reliable, scalable, and inexpensive cloud computing services. Free to join, pay only for…aws.amazon.com​

The leading operating system for PCs, tablets, phones, IoT devices, servers and the cloud | UbuntuUbuntu is an open source software platform that runs everywhere from IoT devices, the smartphone, the tablet and the PC…www.ubuntu.com​

Microsoft Azure: Cloud Computing Platform & ServicesMicrosoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more, and save money…azure.microsoft.com​

7. Tools ที่บริษัทใช้

JenkinsJenkins is an open source automation serverjenkins.io​

fastlane - iOS and Android Automation for Continuous Deliveryfastlane is the tool to release your iOS and Android app 🚀 It handles all tedious tasks, like generating screenshots…fastlane.tools​

Build software better, togetherGitHub is where people build software. More than 19 million people use GitHub to discover, fork, and contribute to over…www.github.com​

ZenHub - Agile GitHub Project Management SoftwareZenHub turns GitHub into a robust project management platform. Add powerful collaboration features to your GitHub…www.zenhub.com​

Slack: Be less busySlack brings all your communication together in one place. It's real-time messaging, archiving and search for modern…slack.com​

Build native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.

Course Directory

[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​

[React Native 1] Lecture 1: Introduction to React-NativeWhat is React-Native? What are differences compared with native developments.medium.com​

[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com​

[React Native 3] Setup BabelJS and ES6 on Windows and more on ES6/ES2015medium.com​

[React Native 4] Basic Elements and Flexboxmedium.com​

[React Native 5] State and Keyboard Input By Making BMI Calculator and Stop Watch Appmedium.com​

[React Native 6] Components, Props, and Network By Making Stocks AppReact Native Components, Props, and Network By Making Stocks Appmedium.com​

[React Native 7] Navigation Bar, Scene Transition, List ViewReact Native Navigation Bar, Scene Transition, ListViewmedium.com​

[React Native 8] Midterm Exam Discussion, Feedback, and Term ProjectsThis post is about Midterm Exam, and Term Projects for SIIT students who enroll ITS484.medium.com​

[React Native 9] Using Map in React-Native (Apple Map and Google Map)Learn how to including Apple Map and Google map into the iOS and Android mobile app written by React Native.medium.com​

[React Native 10] Camera, Camera Roll, Gallery by Making Selfies Scoreboard AppLearn how to write iOS and Android mobile app to take photo (Camera), and selecting image from Phone’s Gallery (Camera…medium.com​

[React Native 11] AsyncStorage and Realm DB for In-App Database TutorialWe are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and…medium.com​

[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com​

[React Native 13] Firebase Realtime Database + Authenticationmedium.com​

[React Native 14] Startup PitchingThis is a bit strange that we are talking about the Startup Pitching in the mobile app development course. But believe…medium.com​

[React Native 15] Final Presentation ScheduleITS484 Presentation Schedule for Dec 6, 2016 Click here to view >> Presentation Schedulemedium.com​

This is a bit strange that we are talking about the Startup Pitching in the mobile app development course. But believe me, to success in the mobile app business, you need to know a lot about the business, not only the tech parts. This lecture, I summarized how to make the correct pitching deck. The Pitch deck is the core material that you need to send to your prospect investors to get funded. Moreover, it is the main visualizer to your audiences when you are pitching on the stages in the startup pitching competitions. After that, I summarized the core knowledge about tech startup especially in the Lean Startup that every tech-entrepreneur need to know, which help you save the ton of time in exploring about it by yourself.

1

We are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and Realm Database (Like CoreData, SQLite in both iOS and Android).

Lecture Note​

AsyncStorage​

When you are develop the app, at one point, you will need to store information permanently for an application (it does not gone after the forced close and re-open). For faster loading time, Line app use a local database to remember all of your conversations. For caching propose, Facebook app use a local database to record all of the previously loaded news feed.

React Native AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android,React Native AsyncStorage will use either RocksDB or SQLite based on what is available.

To use AsyncStorage, you don’t need to installation any extra library. It comes with React Native by default. AsyncStorage uses key-value pairs so to save data, as show in the following example.

import { AsyncStorage } from 'react-native';  
AsyncStorage.setItem('myKey', myValue);

To loaded the saved data, you can do like this…

AsyncStorage.getItem('myKey').then((myValue) => {  
  this.setState({'myKey':myValue});  
});

Since loading data is a time consuming task, It is designed to be a asynchronous operation. So getItem returned the promise, which will invoke the call back function when the read operation is completed.

More information, please see on Slide. TK We are adding soon.

Learn how to write iOS and Android mobile app to take photo (Camera), and selecting image from Phone’s Gallery (Camera Roll) by React Native.