Weather app with react-native

Cuối tuần rảnh rỗi, tìm chút gì đó để làm, thoát ra những gì quen thuộc.

Chào các bạn.

React Native là một framework cho phép các lập trình viên xây dựng các ứng dụng trên nền tảng Android và iOS sử dụng ngôn ngữ lập trình javascript nhưng mang lại trải nghiệm native app thực sự.

Hướng dẫn sau đây chia sẻ cách viết app mobile để xem thời tiết đơn giản tại thành phố bạn đang sống. Bỏ qua các yếu tố khác, chỉ tập trung vào vấn đề làm thế nào tạo ra app bởi chính tay bạn.

Để bắt đầu với ract-native thì có khá nhiều bài hướng dẫn, video clip trên Youtube hướng dẫn cách tạo môi trường để lập trình. Nếu các bạn ngại cảm theo dõi video, bài viết bằng Tiếng Anh có thể tham khảo các bài học của anh Khoa Phạm tại kênh Youtube của anh Khoa Phạm. Nhân đây cũng gửi lời cảm ơn đến anh Khoa Phạm rất nhiều, vì mình cũng tham khảo nhiều vấn đề từ video của anh.

Trong nội dung app này chúng ta sử dụng một số kiến thức cơ bản như Component, State, sử dụng API để xem thời tiết tại https://openweathermap.org cùng kiến thức liên quan JSON. Ở đây sử dụng công cụ SublimeText để code.

Bắt đầu thôi.

Code index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,   
} from 'react-native';

import  MainPage from './MainPage';

AppRegistry.registerComponent('WeatherProject', () => MainPage);

File MainPage.js

'use strict';

import React, { Component } from 'react';

import {
 
  Image,
  Text,
  TextInput,
  View, 
  StyleSheet,
} from 'react-native';
import Forecast from './Forecast';
const API_KEY='17b3ac29ca8c3bbdc427123e277b022e';

export default class MainPage extends Component{

	constructor(props) {
	  super(props);
	
	  this.state = {
	  	zip: '700000',
	  	city: 'Ho Chi Minh',
	 	country: '', 	
	  	forecast:{
	  		main:'',
	  		description: '',
	  		temp: '',
	  		icon: ''
	  	},
	  };
	}
	_handleTextChange(event){
			var getCity = this.state.city;
			if(getCity !=''){
			fetch('http://api.openweathermap.org/data/2.5/weather?q='+getCity+'&units=Metric&appid='+API_KEY)
					.then((response) => response.json())
					.then((responseJSON) => {					 
							this.setState({
							country:responseJSON.sys.country,
							forecast: {
								main: responseJSON.weather[0].main,
								description: responseJSON.weather[0].description,
								temp: responseJSON.main.temp,
								icon: responseJSON.weather[0].icon,
							}
						});
					})
					.catch((error) => {
						console.warn(error);
					}); 
			}
	}
	componentWillMount() {
    		this._handleTextChange(); 
  	}
	render(){
		var content = null;
	    if (this.state.forecast !== null) {
	      content = <Forecast 
	                  main={this.state.forecast.main}
	                  description={this.state.forecast.description}
	                  temp={this.state.forecast.temp}
					  icon={this.state.forecast.icon}
	                  />;
	    }

	return (
			<View style={styles.container}>

			<Image source={require('./flowers.jpg')}  style={styles.backgroundImage} />
				<View style={styles.overlay}>
					<View style={styles.row}>							
						<Text style={styles.bigText}>
							City {this.state.city}, {this.state.country}
						</Text>
						{content}
						<TextInput style={styles.cityInput} placeholder="Your City!" value={this.state.city}
	         				onChangeText={(city) => this.setState({city})} 
	          				onSubmitEditing={()=>this._handleTextChange()} />
					</View>
				</View>
			</View>
		)
	}
}

  
const styles = StyleSheet.create({
	container: {
    flex:1,     
    alignItems: 'center',    
  	},
  	backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover',
       
        position  : 'absolute',
		top       : 0,
		bottom    : 0,
		left      : 0,
		right     : 0,
    },
  	overlay:{
    	position  : 'absolute',
     	top       : 0,
		
		left      : 0,
		right     : 0,

    	backgroundColor: '#000000',
    	opacity: 0.5,
    	flexDirection: 'column',
    	alignItems: 'center',
  
  	},
	row: {
    
      paddingTop: 10,
      paddingBottom: 10,
  	},
   	bigText: {
    
	    fontSize: 32,
	    textAlign: 'center',
	    margin: 10,
	    color: '#FFFFFF'
  	},
  	cityInput:{  	
  		color: '#FFFFFF'
  }
});

File Forecast.js

'use strict';
import React,{Component} from 'react';
import {
	StyleSheet,
	View,
	Text,
	Image,
} from 'react-native';

export default class Forecast extends Component{
	
	render(){
		var getIcon = this.props.icon;
		var getImage=null;
		if(getIcon != null && getIcon !=undefined){
			getImage = <Image 
			style={styles.imageIcon}
        	source={{uri: 'http://openweathermap.org/img/w/'+getIcon+'.png'}} />
		}
		return (
		<View>
        
        <View style={styles.viewImageIcon}>
        {getImage}

        </View>
        <Text style={styles.mainText}>
          	Current conditions: {this.props.description}          	
        </Text>
        <Text style={styles.tempText}>
          	{this.props.temp}°C
        </Text>
      </View>
		


		)
	}
}

const styles = StyleSheet.create({
	bigText: {
    
	    fontSize: 28,
	    textAlign: 'center',
	    margin: 10,
	    color: '#FFFFFF'
  	},
  	mainText: {    
	    fontSize: 16,
	    textAlign: 'center',
	    color: '#FFFFFF'
  	},
  	tempText: {
  		fontSize: 60,
  		color: '#FFFFFF',
  		textAlign: 'center',
  	},
  	viewImageIcon:{
		justifyContent: 'center',
    	alignItems: 'center',

  	},
  	imageIcon: {
  		width: 64,
  		height: 64,  		
  	},
})


module.exports = Forecast;

Các bạn có thể download mã nguồn tại GitHub

Chúc các bạn thành công.

Published by

tuanitpro

Tôi là Lê Thanh Tuấn, và tôi chia sẻ những điều mình cho rằng nó là thú vị, hay giúp ích cho bạn!

Leave a Reply