Skip to main content

My first React native app - Simple weather app

I'm learning the react native and today I'll write a post about my first app - Simple weather app (from a to z) to apply what I have learned.

source https://github.com/jbohnvn/reactnative

I'm a window and android boy so this tutorial only run with android, so if you guys can run it on iOS please comment, then other people can get it as an example as well.


Requirements:
- Familiar with JavaScript and React
- Nodejs, Android SDK installed on your local machine
- VSCode is using (but you can use any other IDE or editor)
- Having Weather API - OpenWeatherMap account for get API KEY
...let's start

Creating a new project
Use the react native command line interface to generate a new React Native project
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
Make sure you installed android build version defined in SimpleWeather/android/build.gradle

 ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
    }


Really eager to write more code now...

The Prototype
In this step, we develop our first screen, which will be a simple loading screen.
In your App.js, define a local state:


Check out the weather response


Request:

http://api.openweathermap.org/data/2.5/weather?lat=37.4219983333333&lon=-122.0840000&APPID=<<REPLACE_BY_YOUR_API_KEY>>&units=metric

We will get lat and lon by piece of code in App.js


Response: 
We will get below information to display
- temperature: json.main.temp,
- weatherCondition: json.weather[0].main,
- position : { country : json.sys.country, name : json.name }
Create Weather component 

Very nice, now we have weather information, we will create a Weather component to display them:

We put the information corresponse to TextViewes and creating a dynamid backgroud base on weather condition:  <View style={[styles.weatherContainer,{ backgroundColor: weatherConditions[weather].color }]}
Integrate with App component
HOPE YOU GUY ENJOY THIS TUTORIAL!!!

Comments

Popular posts from this blog

How to Install SQL Server on MacOS with docker

 I'm writing a small tut for who need to install SQL Server on macOS using docker Step 1: Download the SQL Server Image sudo docker pull mcr.microsoft.com/mssql/server:2019-latest Step 2: Launch the SQL Server Image in Docker docker run -d --name example_sql_server -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=Pass.word-123' -p 1433:1433 mcr.microsoft.com/mssql/server:2019-latest Step 3: Check the SQL Server Docker Container docker ps -a Step 4: Install SQL Server Command-Line Tool sudo npm install -g sql-cli Step 5: Connect to SQL Server  5.1 Using Command mssql -u sa -p Pass.word-123 5.2: Using VSCode to connect to sql server Using the extension SQL Server (mssql)

What is API Gateway?

  What does API gateway do? The diagram below shows the detail. Step 1 - The client sends an HTTP request to the API gateway. Step 2 - The API gateway parses and validates the attributes in the HTTP request. Step 3 - The API gateway performs allow-list/deny-list checks. Step 4 - The API gateway talks to an identity provider for authentication and authorization. Step 5 - The rate limiting rules are applied to the request. If it is over the limit, the request is rejected. Steps 6 and 7 - Now that the request has passed basic checks, the API gateway finds the relevant service to route to by path matching. Step 8 - The API gateway transforms the request into the appropriate protocol and sends it to backend microservices. Steps 9-12 : The API gateway can handle errors properly, and deals with faults if the error takes a longer time to recover (circuit break). It can also leverage ELK (Elastic-Logstash-Kibana) stack for logging and monitoring. We sometimes cache data in the API gatew...