Expo + Notification 시작하기
8805 단어 Notificationexpo
Mac이 없지만 아이폰에 알림을 보내고 싶다!
앱 개발 수업 중에 문득 이런 생각이 가슴 속을 둘러싸고, 도착한 것은 Expo이었습니다.
Expo는 자바스크립트(프레임워크의 주로 React)로 Android, IOS 앱을 쉽게 개발할 수 있도록 도와주는 도구입니다.
우선 앱에서 알림을 보내기 전에 먼저 온라인 에디터와 Curl을 사용하여 알림을 보내고 싶습니다.
앱 설치
Iphone에서 Expo Client를 설치하고 계정을 만드십시오.
우선 온라인 에디터를 사용해 본다
Expo의 온라인 편집기는 Expo Snack 라는 사이트에서 웹에서 쉽게 Expo 응용 프로그램을 만들 수 있습니다. 이번에는 Curl을 사용하여 알림을 보내기 위해 ExponentTokenID
라는 것을 얻기위한 응용 프로그램 ()을 만듭니다.
소스 코드는 다음과 같습니다. 이것을 App.js
에 쓰십시오. (쓴 것 htps : // s ck. 에 x포. 이오 / @ 에이 ct / ゔ ぃ 세프 sh와 켄)
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Permissions, Notifications } from 'expo';
//取得のためのコード
async function registerForPushNotificationsAsync() {
//warningがでるのを防ぐためにtry catchを入れる
try {
const { status: existingStatus } = await Permissions.getAsync(
Permissions.NOTIFICATIONS
);
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== 'granted') {
return;
}
this.token = await Notifications.getExpoPushTokenAsync();
// this.token = token
//コンソールに出力
console.log(this.token);
} catch (error) {
console.log(error);
}
return this.token;
}
export default class App extends React.Component {
componentDidMount() {
//呼び出し
let token = registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Open up App.js to start working on your app!</Text>
<Text>token: {token}</Text>
</View>
);
}
}
{token}
에서 빨간색 선이 나오고 있지만 무시하십시오. 잘갑니다
Expo Client를 통해 Expo 앱을 살펴보십시오.
Expo Snack의 오른쪽을보십시오.
장치가 보입니다. 이 Run on your device
를 클릭하면 로그인하라는 메시지가 나타납니다.
로그인하면, Projects
라는 란에서 사용하고 있는 앱을 선택할 수 있게 되어 있으므로, 이것을 기동합니다.
앱을 열면,token: ExponentPushToken[...]
라는 문자를 볼 수 있다고 생각하므로, 이 녀석을 메모해 주세요.
메모를 사용하여 Curl에서 알림을 보냅니다.
Curl을 사용하여 Iphone에 알림
앱을 떨어뜨린 후,
터미널에서 다음 명령을 입력하십시오.
curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": "ExponentPushToken[<yourtoken>]",
"title":"hello",
"body": "world"
}'
당신의 아이폰에 좋은 알림을 얻을 수 있습니다.
참고
Iphone에서 Expo Client를 설치하고 계정을 만드십시오.
우선 온라인 에디터를 사용해 본다
Expo의 온라인 편집기는 Expo Snack 라는 사이트에서 웹에서 쉽게 Expo 응용 프로그램을 만들 수 있습니다. 이번에는 Curl을 사용하여 알림을 보내기 위해 ExponentTokenID
라는 것을 얻기위한 응용 프로그램 ()을 만듭니다.
소스 코드는 다음과 같습니다. 이것을 App.js
에 쓰십시오. (쓴 것 htps : // s ck. 에 x포. 이오 / @ 에이 ct / ゔ ぃ 세프 sh와 켄)
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Permissions, Notifications } from 'expo';
//取得のためのコード
async function registerForPushNotificationsAsync() {
//warningがでるのを防ぐためにtry catchを入れる
try {
const { status: existingStatus } = await Permissions.getAsync(
Permissions.NOTIFICATIONS
);
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== 'granted') {
return;
}
this.token = await Notifications.getExpoPushTokenAsync();
// this.token = token
//コンソールに出力
console.log(this.token);
} catch (error) {
console.log(error);
}
return this.token;
}
export default class App extends React.Component {
componentDidMount() {
//呼び出し
let token = registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Open up App.js to start working on your app!</Text>
<Text>token: {token}</Text>
</View>
);
}
}
{token}
에서 빨간색 선이 나오고 있지만 무시하십시오. 잘갑니다
Expo Client를 통해 Expo 앱을 살펴보십시오.
Expo Snack의 오른쪽을보십시오.
장치가 보입니다. 이 Run on your device
를 클릭하면 로그인하라는 메시지가 나타납니다.
로그인하면, Projects
라는 란에서 사용하고 있는 앱을 선택할 수 있게 되어 있으므로, 이것을 기동합니다.
앱을 열면,token: ExponentPushToken[...]
라는 문자를 볼 수 있다고 생각하므로, 이 녀석을 메모해 주세요.
메모를 사용하여 Curl에서 알림을 보냅니다.
Curl을 사용하여 Iphone에 알림
앱을 떨어뜨린 후,
터미널에서 다음 명령을 입력하십시오.
curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": "ExponentPushToken[<yourtoken>]",
"title":"hello",
"body": "world"
}'
당신의 아이폰에 좋은 알림을 얻을 수 있습니다.
참고
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Permissions, Notifications } from 'expo';
//取得のためのコード
async function registerForPushNotificationsAsync() {
//warningがでるのを防ぐためにtry catchを入れる
try {
const { status: existingStatus } = await Permissions.getAsync(
Permissions.NOTIFICATIONS
);
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
finalStatus = status;
}
if (finalStatus !== 'granted') {
return;
}
this.token = await Notifications.getExpoPushTokenAsync();
// this.token = token
//コンソールに出力
console.log(this.token);
} catch (error) {
console.log(error);
}
return this.token;
}
export default class App extends React.Component {
componentDidMount() {
//呼び出し
let token = registerForPushNotificationsAsync();
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Open up App.js to start working on your app!</Text>
<Text>token: {token}</Text>
</View>
);
}
}
Expo Snack의 오른쪽을보십시오.
장치가 보입니다. 이
Run on your device
를 클릭하면 로그인하라는 메시지가 나타납니다.로그인하면,
Projects
라는 란에서 사용하고 있는 앱을 선택할 수 있게 되어 있으므로, 이것을 기동합니다.앱을 열면,
token: ExponentPushToken[...]
라는 문자를 볼 수 있다고 생각하므로, 이 녀석을 메모해 주세요.메모를 사용하여 Curl에서 알림을 보냅니다.
Curl을 사용하여 Iphone에 알림
앱을 떨어뜨린 후,
터미널에서 다음 명령을 입력하십시오.
curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": "ExponentPushToken[<yourtoken>]",
"title":"hello",
"body": "world"
}'
당신의 아이폰에 좋은 알림을 얻을 수 있습니다.
참고
curl -H "Content-Type: application/json" -X POST "https://exp.host/--/api/v2/push/send" -d '{
"to": "ExponentPushToken[<yourtoken>]",
"title":"hello",
"body": "world"
}'
Reference
이 문제에 관하여(Expo + Notification 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/MeguruMokke/items/1773dc10673ee64cf0b6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)