'전체 글'에 해당되는 글 132건

ThingSpeak insert(차트 자동으로 그려주는 클라우드)

Posted by PeEn
2019. 11. 17. 12:28 Programing/Python
def insertCloud():
    api_key = '키 값'
    url = 'https://api.thingspeak.com/update'
    url = url + '?api_key=%s' % api_key
    url = url + '&field3=%s' % 데이터
    url = url + '&field4=%s' % 데이터2
    url = url + '&field5=%s' % 데이터3
    
    print(url)
    urllib.request.urlopen(url)

https://thingspeak.com/channels/894399

'Programing > Python' 카테고리의 다른 글

배열 MySQL insert  (0) 2019.11.17
컴프리핸션 Comprehension  (0) 2019.05.27
출력  (0) 2019.05.27
문자열  (0) 2019.05.27
랜덤 난수  (0) 2019.05.27

PHP에서 외부 주소 JSON 언파싱

Posted by PeEn
2019. 11. 17. 12:09 Programing/Web Programming
<?php

$url = "http://주소/파일이름.php";
$data = file_get_contents_curl($url);

//echo $data.'<br />';

$R = json_decode($data,TRUE);// JSON 데이터를 배열로 변환


foreach($R['그룹명'] as $val) {
	$curtime = $val['curtime'];
	$pm1_0_cf1 = $val['pm1_0_cf1'];
	$pm2_5_cf1 = $val['pm2_5_cf1'];
	$pm10_0_cf1 = $val['pm10_0_cf1'];
	$pm1_0_atm = $val['pm1_0_atm'];
	$pm2_5_atm = $val['pm2_5_atm'];
	$pm10_0_atm = $val['pm10_0_atm'];
	$air_0_3 = $val['air_0_3'];
	$air_0_5 = $val['air_0_5'];
	$air_1_0 = $val['air_1_0'];
	$air_2_5 = $val['air_2_5'];
	$air_5_0 = $val['air_5_0'];
	$air_10_0 = $val['air_10_0'];
	
	echo $air_10_0;
   // echo $val['필드이름'] . ' | ' . $val['필드이름2'] . "<br />";
}

function file_get_contents_curl($url) {
    $ch = curl_init();// curl 리소스를 초기화
    curl_setopt($ch, CURLOPT_URL, $url); // url을 설정
    // 헤더는 제외하고 content 만 받음
    curl_setopt($ch, CURLOPT_HEADER, 0);
    // 응답 값을 브라우저에 표시하지 말고 값을 리턴
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $data = curl_exec($ch);
    curl_close($ch);// 리소스 해제를 위해 세션 연결 닫음
    return $data;
}

?> 

CSS 애니메이션 기울기, 비율, 이동

Posted by PeEn
2019. 11. 7. 11:40 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>

	H1{
	 text-shadow: 5px 5px 5px; 
	color:blue;
	text-align: center; 
	
	width:30%;
	height:50px;
	margin-left:25%;
	border:2px solid black;
	box-shadow: 2px 2px 0px black; 
	
}

img{
	padding:20px;
	margin-bottom:20px;
	margin-right:25px;
}
	img.shadow1{

	width:300px;
	box-shadow: 5px 5px 10px black; 
	padding:10px;
	float:left;
	transition: transform 1s;
}

	img.shadow1:hover{
	transform: rotate(10deg);
}
	img.shadow2{
	width:300px;
	box-shadow: -5px 5px 10px black; 
	padding:10px;
	float:left;
	transition: transform 1s;
}

	img.shadow2:hover{
		transform: scale3d(1.1 1.1 1.1);
		transform: scaleX(1.1) scaleY(1.1);
}
	
	img.shadow3{
	width:300px;
	box-shadow: 5px -5px 10px black; 
	padding:10px;
	float:left;
	transition: transform 1s;

}

	img.shadow3:hover{
	transform: translateX(30px) translateY(20px);
}
	
	div:hover{
	background:gray;
	margin:20px;
}

	div.a{
	border:2px solid;
	float:left;
	width:270px;
	margin: 10px;
	border-radius: 0px 0px 0px 25px;
	padding:15px;
	margin-right:25px;
}
	div.b{
	border:2px solid;
	float:left;
	width:270px;
	margin: 10px;
	padding:15px;

	margin-right:40px;
}
	div.c{
	border:2px solid;
	float:left;
	width:270px;
	margin: 10px;
	border-radius: 0px 0px 25px 0px;
	padding:15px;
}
	</style>
	
</head>

	
<body>
	<H1>전주 가을을 입다</H1>

	<img class="shadow1" src="Flower1.jpg"></img>
	<img class="shadow2" src="Flower2.jpg"></img>
	<img class="shadow3" src="Flower3.jpg"></img>
	

<p>
	<div class="a">
전주 19번도로 완주 국도변을 지나가 보세요. 빨강, 분홍, 흰 물결이 하늘거리는 코스모스 꽃길을 만날 수 있읍니다.
어제 귀경길 뜻밖에 행운(?)을 접하고,먼 옛날 비포장 코스모스 꽃길로 기억을 되돌려 보았읍니다. 
</div>

	<div class="b">
 정말 줄 세워놓은 것처럼 곧게 자란 나무들이 저를 반깁니다^^
 우리나라에서 이렇게 나무들이 반듯하게 심어진 곳으로 사람들이 걸어 다닐 수 있는 곳이 또 얼마나 되려는지 모르겠습니다.
정말 아름답습니다. 
	</div>

<div class="c">
우리 나라의 제주도와 일본이 원산지인 목련은 잎은 달걀 모양이며 꽃은 이른 봄 잎이 돋아나기 전에 
다른 꽃보다 먼저 핀다. 3월에 흰꽃이 피는 백목련과 3~4월에 붉은색 꽃이 피는 자목련, 일본목련 등이 있다.
</div>

</body>
</html>

CSS 기울기 색 변형효과 transform, 레이아웃 설정

Posted by PeEn
2019. 11. 5. 11:48 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		header{
		background-color:red;
		width:100%;
		height: 50px;
		}
		nav{
		background-color:yellow;
		width:100%;
		height:100px;
		}
		aside{
		background-color:yellow;
			width:10%;
		height: 400px;
		float:left;
		}

		article.one{
		background-color:#ff00dd;
		height: 400px;
	width:70%;
	float:left;
		}
		article.two{
		background-color:#ffff00;
			width:20%;
		height: 400px;
		float:right;
		}
		footer{
		background-color:blue;
		width:100%;x
		height: 100px;
		clear:both;
		}
</style>
</head>
	
<body>
	<head >header</head>
	<nav >nav</nav>
	<aside >aside</aside>
	<article class="one" >content</article>
	<article clas="two" >con</article>
	<footer>footr</footer>
</body>
</html>

transform

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
  	transition: all 1s;
	transform: rotate(0deg);

  
		}
    div:hover{
     	 transition: all 1s;
	transform: rotate(45deg);
	background: yellow;
}
	
	</style>
</head>
	
<body>
<div></div>
</body>
</html>

 

레이아웃

 

 

'Programing > Web Programming' 카테고리의 다른 글

PHP에서 외부 주소 JSON 언파싱  (0) 2019.11.17
CSS 애니메이션 기울기, 비율, 이동  (0) 2019.11.07
HTML 공 튕기기  (0) 2019.10.31
HTML 좌우 움직임  (0) 2019.10.31
HTML 기울기  (0) 2019.10.31

FCM 앱 알람

Posted by PeEn
2019. 11. 2. 23:12 Programing/Android

1. FCM 프로젝트 생성

2.안드로이드 아이콘 클릭하여 앱 등록과정 진행

3.패키지명 입력, 앱이름(아무거나)입력 후 앱등록 ->
구성파일 다운로드 google-services-json 파일 다운로드 후
안드로이드 스튜디오 작업 프로젝트로 가서 Android보기에서 Project보기로 변경 후 app디렉터리에 파일을 넣는다
그리고 다음버튼 ->
build에 넣으라는 것들 넣고 sync now 클릭해서 적용 후 다음

4.안드로이드 스튜디오 Tools -> Firebase 클릭 Cloud Messaging 클릭  Set up Firebase Cloud Messaging 클릭

 Connect your app to Firebase 클릭

5. manifests 클릭 후 </application>이전에 삽입

  <service
            android:name=".Service.MyFirebaseMessagingService">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT"/>
            </intent-filter>
        </service>

        <service
            android:name=".Service.MyFirebaseInstanceservice">
            <intent-filter>
                <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
            </intent-filter>
        </service>

6. 패키지 디렉터리에 Service라는 패키지(디렉터리) 생성
Service 디렉터리 안에 MyFirebaseInstanceservice.java 생성 후 아래 코드 삽입

import android.util.Log;

import com.google.firebase.iid.FirebaseInstanceId;
import com.google.firebase.iid.FirebaseInstanceIdService;

import java.io.IOException;

import okhttp3.FormBody;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;

public class MyFirebaseInstanceservice extends FirebaseInstanceIdService {

    private static final String TAG = "MyFirebaseIIDService";

    /**
     * Called if InstanceID token is updated. This may occur if the security of
     * the previous token had been compromised. Note that this is called when the InstanceID token
     * is initially generated so this is where you would retrieve the token.
     */
    // [START refresh_token]
    @Override
    public void onTokenRefresh() {
        // 설치할때 여기서 토큰을 자동으로 만들어 준다
        String refreshedToken = FirebaseInstanceId.getInstance().getToken();
        Log.d(TAG, "Refreshed token: " + refreshedToken);

        // 생성한 토큰을 서버로 날려서 저장하기 위해서 만든거
        sendRegistrationToServer(refreshedToken);
    }

    private void sendRegistrationToServer(String token) {
        // Add custom implementation, as needed.

        // OKHTTP를 이용해 웹서버로 토큰값을 날려준다.
        OkHttpClient client = new OkHttpClient();
        RequestBody body = new FormBody.Builder()
                .add("Token", token)
                .build();

        //request
        Request request = new Request.Builder()
                .url("http://db와php있는서버주소/resigster.php")
                .post(body)
                .build();

        try {
            client.newCall(request).execute();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

* .url("http://db와php있는서버주소/resigster.php")

에서 'db와php있는서버주소' 부분을 자신의 서버주소로 변경!

6. 오른쪽 Firebase창에서 Add FCM to your app에 버튼 클릭해서 Firebase 적용
(오른쪽에 Firebase창이 없으면 안드로이드 스튜디오 Tools -> Firebase 클릭 Cloud Messaging 클릭  Set up Firebase Cloud Messaging 클릭)

7. Service 디렉터리에 MyFirebaseMessagingService.java 생성 후 아래 코드 삽입

import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.media.RingtoneManager;
import android.net.Uri;

import androidx.core.app.NotificationCompat;

import com.debtorlee.projectuniv.Main_ShowData;
import com.debtorlee.projectuniv.R;
import com.google.firebase.messaging.RemoteMessage;

public class MyFirebaseMessagingService extends  com.google.firebase.messaging.FirebaseMessagingService {
private static final String TAG = "FirebaseMsgService";

// [START receive_message]
@Override
public void onMessageReceived(RemoteMessage remoteMessage) {

        //추가한것
        sendNotification(remoteMessage.getData().get("message"));
        }

private void sendNotification(String messageBody) {
        Intent intent = new Intent(this, Main_ShowData.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        PendingIntent pendingIntent = PendingIntent.getActivity(this, 0 /* Request code */, intent,
        PendingIntent.FLAG_ONE_SHOT);

        Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
        NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
        .setSmallIcon(R.mipmap.ic_launcher)
        .setContentTitle("FCM Push Test") // 이부분은 어플 켜놓은 상태에서 알림 메세지 받으면 저 텍스트로 띄워준다.
        .setContentText(messageBody)
        .setAutoCancel(true)
        .setSound(defaultSoundUri)
        .setContentIntent(pendingIntent);

        NotificationManager notificationManager =
        (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
        }

        }



8. 처음시작되는 java에 다음 소스 추가

public class MainActivity extends AppCompatActivity {
.
.
.
.
  @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_showdata);

        //추가한 라인
        FirebaseApp.initializeApp(this);
        FirebaseMessaging.getInstance().subscribeToTopic("news");
        FirebaseInstanceId.getInstance().getToken();
        
    }
.
.
.

9. config.php와 resigster.php 파일을 만들어 수정 후 html서버에 저장하여 호스팅한다.

resigster.php 안의 내용을 자신의 정보에 맞게 작성하고 저장하는 것 유의~!

*config.php

<?php
	define("DB_HOST", "localhost");
	define("DB_USER", "MYSQL DB ID");
	define("DB_PASSWORD", "MYSQL DB 비밀번호");
	define("DB_NAME", "fcm");

	define("GOOGLE_API_KEY", "FCM 프로젝트 서버키"); 

?>

*resigster.php

<?php

	if(isset($_POST["Token"])){

		$token = $_POST["Token"];
		//데이터베이스에 접속해서 토큰을 저장
		include_once 'config.php';
		$conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
		$query = "INSERT INTO users(Token) Values ('$token') ON DUPLICATE KEY UPDATE Token = '$token'; ";
		mysqli_query($conn, $query);

		mysqli_close($conn);
	}
?>

10. 실행 후 DB에 토큰 key가 들어오는지 확인하여 작동하는지 확인한다.


파이썬 서버

import http.client
import pymysql

import requests
import json


#def send_fcm_notification(ids, title, body):
def send_fcm_notification(ids, title, body):
    # fcm 푸시 메세지 요청 주소
    url = 'https://fcm.googleapis.com/fcm/send'
    
    # 인증 정보(서버 키)를 헤더에 담아 전달
    headers = {
        'Authorization': 'key= 서버키',
        'Content-Type': 'application/json; UTF-8',
    }

    # 보낼 내용과 대상을 지정
    content = {
        'registration_ids': ids,
        'notification': {
            'title': title,
            'body': body
        }
    }

    # json 파싱 후 requests 모듈로 FCM 서버에 요청
    requests.post(url, data=json.dumps(content), headers=headers)



# MySQL Connection 연결

connection = pymysql.connect(host="localhost", port=3306, user="아이디", password="비밀번호",
					  db='fcm', charset='utf8')


try:
    with connection.cursor() as cursor:  
        sql = "select Token from users"
        cursor.execute(sql)
        result = cursor.fetchall()
        
        for i in result:
            send_fcm_notification(i,"제목","내용")
            
                  
finally:
    connection.close()


connection.close()

    

HTML 공 튕기기

Posted by PeEn
2019. 10. 31. 11:46 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
   
@keyframes bounce
        {
         from, to{
	bottom:0px;
	animation-timing-function:ease-out;
	}
	50%{
	bottom:200px;
	animation-timing-function:ease-in;
	}
       }
	#ball{
	position: absolute;
	width:20px;
	height:20px;
	background:red;
	border-radius:10px;
	animation-name: bounce;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	}
	</style>
</head>
	
<body>
<div id="ball"></div>
</body>
</html>

HTML 좌우 움직임

Posted by PeEn
2019. 10. 31. 11:41 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        position:relative;
        animation: 2s myanim;  
        animation-iteration-count: 10
		}
		
@keyframes myanim
        {
            0%   {left:0px; top:0px;}
            25%  {left:100px; top:0px;}
            50%  {left:200px; top:0px;}
            75%  {left:100px; top:0px;}
            100% {left:0px; top:0px;}
       }
	</style>
</head>
	
<body>
<div></div>
</body>
</html>

'Programing > Web Programming' 카테고리의 다른 글

CSS 기울기 색 변형효과 transform, 레이아웃 설정  (0) 2019.11.05
HTML 공 튕기기  (0) 2019.10.31
HTML 기울기  (0) 2019.10.31
HTML 마우스 올리면 사이즈 조절  (0) 2019.10.31
HTML 투명도  (0) 2019.10.31

HTML 기울기

Posted by PeEn
2019. 10. 31. 11:41 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
        p {
            width: 100px;
            height: 50px;
            border: 1px solid black;
            background: yellow;
            transition: width 5s, height 5s, border 5s, transform 5s;
}


        p:hover {
            width: 200px;
            height: 100px;
            border: 10px solid red;
            transform: perspective(300px) rotateY(59deg);
}

	</style>
</head>
	
<body>
    <p>마우스를 올려보세요.</p>

</body>
</html>

'Programing > Web Programming' 카테고리의 다른 글

HTML 공 튕기기  (0) 2019.10.31
HTML 좌우 움직임  (0) 2019.10.31
HTML 마우스 올리면 사이즈 조절  (0) 2019.10.31
HTML 투명도  (0) 2019.10.31
CSS 수평 리스트, 테이블  (0) 2019.10.22

HTML 마우스 올리면 사이즈 조절

Posted by PeEn
2019. 10. 31. 11:40 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		div {
			width:100px;
			height: 50px;
			border: 1px solid black;
			background:yellow;
			transition width 5s;	
		}
		
		div:hover{
			width:200px;
		}
	
	</style>
</head>
	
<body>
<div>마우스를 올려보세요</div>
</body>
</html>

'Programing > Web Programming' 카테고리의 다른 글

HTML 좌우 움직임  (0) 2019.10.31
HTML 기울기  (0) 2019.10.31
HTML 투명도  (0) 2019.10.31
CSS 수평 리스트, 테이블  (0) 2019.10.22
img,video,audio 삽입 | table | fieldset | input | button  (0) 2019.10.10

HTML 투명도

Posted by PeEn
2019. 10. 31. 11:40 Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		img{opacity:0.4;}
		img:hover{opacity:1.0;}		
	</style>
</head>
	
<body>
	<HI>Opacity 속성</h1>
		<img src= "lion.png" width="150" height="120" alt="lion">
		<img src= "audio.png" width="150" height="120" alt="audio">

</body>
</html>



 

'Programing > Web Programming' 카테고리의 다른 글

HTML 기울기  (0) 2019.10.31
HTML 마우스 올리면 사이즈 조절  (0) 2019.10.31
CSS 수평 리스트, 테이블  (0) 2019.10.22
img,video,audio 삽입 | table | fieldset | input | button  (0) 2019.10.10
IIS 서버 HTML  (0) 2019.10.01