먼 곳에서 식사를 하다
23402 단어 webdevjavascriptazure
나에 관하여
안녕하세요!저는 애니타라고 하는데 현재 시카고 일리노이대학 컴퓨터과학과 3학년 학생입니다.내가 학교에서 일하지 않을 때, 내가 가장 좋아하는 취미는 자전거 타기, 밥 짓기, 그림 그리기 등이었다.
나 완전 미식가야.내가 가장 좋아하는 사교 활동 중의 하나는 바로 친구와 밥을 먹으러 나가는 것이다.나는 시카고의 대면 수업을 완전히 놓쳤다. 왜냐하면 이것은 나에게 거의 매주 새로운 배달 장소를 시도할 수 있다는 핑계를 주었기 때문이다.만약 네가 이 도시에 왔었다면, 나는 네가 가는 것을 매우 추천한다Brightwok Kitchen!
밥 먹을 곳을 선택하는 것은 항상 나의 어려운 문제이다. 나는 항상 다음과 같은 몇 가지 요소를 고려한다.
거리가 얼마나 됩니까?🚗
Dine the Distance는 두 개의 점 (당신과 친구) 사이에서 zip 위치, 한 개의 식당 요리, 그리고 중립적인 중간 위치에서 식당 추천을 제공하는 웹 응용 프로그램이다.각 레스토랑 추천은 아주맵스 API에서 요청한 것으로 해당 레스토랑 홈페이지, 메뉴, 전화번호, 주소를 가리키는 링크가 담겨 있다.Dine the Distance는 간편한 음식 위치를 제공하면서 조리 선호도에 따라 결과를 필터링한다.그 창설은 당신과 친구가 만나고 먹을 장소를 결정하지 못하는 것을 피하기 위해서다.
이제 프로젝트를 구축하기 위해 수행한 단계와 향후 프로젝트를 복제하는 데 필요한 세부 사항에 대해 살펴보겠습니다.
Azure 기능 응용 프로그램 만들기💻
프런트엔드✨
<form onsubmit="handle(event)" enctype="multipart/form-data">
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="zip1" placeholder="Zip Code 1" required>
<input type="text" name="phone1" placeholder="Phone Number 1" required>
</div>
<div class="form-group col-md-6 mt-3 mt-md-0">
<input type="text" name="zip2" placeholder="Zip Code 2" required>
<input type="text" name="phone2" placeholder="Phone Number 2" required>
</div>
</div>
<div class="text-center" style="padding-top: 30px;">
<input type="text" name="cuisine" placeholder="Food Cuisine" required>
</div>
<div class="text-center"><button type="submit">Find Food!</button></div>
</form>
var functionUrl = "/api/dineTrigger"
const resp = await fetch (functionUrl, {
method: 'POST',
body:JSON.stringify({zip1, zip2, cuisine}),
headers: {
'Content-Type': 'application/json'
},
});
var data = await resp.json();
var newData = JSON.stringify(data.results);
var obj = JSON.parse(newData);
백엔드⚙️
HTTP 트리거 1(dineTrigger)
우리의 첫 번째 HTTP 트리거는 식당 정보를 검색하기 위해 Azure Maps에 사용자 우편번호와 요리 정보를 보낼 것입니다.
module.exports = async function (context, req) {
var body = req.body;
//zip code 1 -> latitude and longitude (us-zips) -> zip1Response
//zip code 2 -> latitude and longitude (us-zips) -> zip2Response
// midpoint lat lon (geolib) -> centerCoords
var zip1 = body.zip1;
var zip2 = body.zip2;
var zip1Response = usZips[zip1];
var zip2Response = usZips[zip2];
var centerCoords = geolib.getCenterOfBounds([
{ latitude: zip1Response["latitude"], longitude: zip1Response["longitude"] },
{ latitude: zip2Response["latitude"], longitude: zip2Response["longitude"] },
]);
var cuisine = body.cuisine;
var testResult = await analyzeCoords(centerCoords["latitude"], centerCoords["longitude"], cuisine);
context.res = {
// status: 200, /* Defaults to 200 */
body: testResult
};
}
async function analyzeCoords(latitude, longitude, cuisine){
const subscriptionKey = process.env['map-key'];
const uriBase = 'https://atlas.microsoft.com' + '/search/fuzzy/json';
let params = new URLSearchParams({
'api-version': '1.0',
'query': cuisine + ' ' + 'restaurant',
'subscription-key': subscriptionKey,
'lat': latitude,
'lon': longitude,
'limit': 10
})
let resp = await fetch(uriBase + '?' + params.toString(), {
method: 'GET'
})
let data = await resp.json();
return data;
}
URL 매개 변수를 추가하거나 수정하려면 API 문서 자유 형식 검색을 참조하십시오.
https://docs.microsoft.com/en-us/rest/api/maps/search/getsearchfuzzy
HTTP 트리거 2 (msgTrigger)
우리의 두 번째 HTTP 트리거는 사용자가 선택한 식당을 지시하는 문자메시지를 보낼 것이다.
{
"type": "twilioSms",
"name": "message",
"accountSidSetting": "TwilioAccountSid",
"authTokenSetting": "TwilioAuthToken",
"from": "+1425XXXXXXX",
"direction": "out",
"body": "Azure Functions Testing"
}
async function sendAddress(phone1, phone2, address, name){
var functionUrl = "/api/msgTrigger";
const resp = await fetch (functionUrl, {
method: 'POST',
body:JSON.stringify({phone1, phone2, address, name}),
headers: {
'Content-Type': 'application/json'
},
});
}
module.exports = async function (context, req) {
var body = req.body;
var phone1 = body.phone1;
var phone2 = body.phone2;
var address = body.address;
var restaurantName = body.name;
var txtMessage = "Thanks for using Dine the Distance! Here's the address to go to " + restaurantName + ": " + address;
//send directions
context.bindings.message = {
body : txtMessage,
to: phone1
};
context.bindings.message2 = {
body : txtMessage,
to: phone2
};
}
정적 웹 어플리케이션 배포🚀
또한 제 코드를 보고 싶으시면 제 Github 환매 프로토콜입니다: https://github.com/a-padman/Dine2
그럼 다음은요?🔮
Dine the Distance는 다른 기능을 위한 공간을 제공합니다.다음 단계는 모든 사용자에게 거리 추적기를 보여줌으로써 그들이 추천하는 식당마다 차를 몰아야 하는 거리를 가시화하는 것을 돕는다.
그 전에...Dine the Distance가 있으면 당신과 당신의 친구는 더 이상 목적 없이 인터넷에서 근처의 식당을 방문하지 않고 다음에 당신이 먹고 싶을 때 이 기능이 완비된 인터넷 앱을 사용할 수 있습니다!
특별히 언급하다🤗
이 프로젝트는 마이크로소프트(Microsoft)가 공동으로 발기한Bit Project 서버가 없는 BitCamp의 일부분이다.나는 나의 지도 교수인 마리 호그에게 감사할 것이다. 그녀는 나의 모든 질문에 대답하여 이 프로젝트를 훌륭한 학습 체험으로 만들었다.또한 에밀리, 이브린, 줄리아가 우리의 팀 활동을 조율하고 비트 캠프 전체에 명확한 기대를 제시해 주셔서 감사합니다.
마지막으로 사랑하는 제 친구 디비야 프랑시스가 이 앱의 영예를 얻었습니다.💖
Reference
이 문제에 관하여(먼 곳에서 식사를 하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bitproject/dine-the-distance-500f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
