플랫아이언 스쿨 소프트웨어 엔지니어링 1단계 완료! — 내 프로젝트

반응형

격심한 3주(엄밀히 말하면 휴일 휴식 덕분에 4주) 후에 나는 성공적으로 1단계를 마쳤다.
플랫아이언 스쿨
소프트웨어 엔지니어링 라이브 프로그램. 별도의 게시물을 통해 지금까지의 AWESS 경험에 대한 제 생각을 되돌아보겠지만, 먼저 제 1단계 프로젝트를 공유하고 싶었습니다.

1단계는 Javascript를 중심으로 진행되었으며, 시작하기 전에 사전 작업 커리큘럼에서 학습한 HTML과 CSS를 기반으로 합니다. 우리의 과제는 피치, 개발, 프레젠테이션까지 우리의 첫 번째 웹 기반 앱을 개발하는 것이었습니다.

제 파트너인 Gian과 저는 레시피 API(이 경우 데이터를 얻을 수 있는 온라인 데이터베이스)를 활용한 앱을 개발하기로 했습니다. 사용 가능한 공개 API 중 일부를 탐색한 후(키가 필요하지 않거나 초기 API와 마주친 과제인 CORS 보호가 있는) 전 세계 요리법의 개방형 크라우드 컨버전스 데이터베이스인 TheMealDB.com를 사용하기로 결정했다.

어떤 API를 사용할지 결정한 후 해결해야 할 사용자와 문제가 있었습니다. 브레인스토밍을 한 후, 우리는 친구들과 무엇을 요리해야 할지 결정하면서 좌절감을 나누었습니다. 우리 둘 다 우리가 쉽게 구할 수 있는 단백질을 기반으로 무엇을 요리할지 결정하는 경향이 있었습니다. API와 Javascript/HTML/CSS 지식을 고려할 때, 이 솔루션은 실행 가능한 것으로 보였습니다!

 

HTML을 시작으로, 우리는 우리 앱의 기본 골격을 구축할 수 있었습니다. CSS는 기본 골격을 취하여 사용자가 앱과 상호 작용하기 쉽게 하기 위해 피부를 추가하였다. 자바스크립트는 앱 기능을 제공하기 위해 근육을 추가했다.

다음은 앱 초기화 시 모습입니다.

…여기서 완벽하게 작동하는 방법입니다!

성찰 글에서 자세히 말씀드리자면, 1단계를 완료했음에도 불구하고 자바스크립트 전문가는 아니지만, 기안과 저는 몇 가지 구체적인 과제를 극복할 수 있었고 자바스크립트에 대한 고마움을 더 많이 배웠습니다.

우리의 첫 번째 주요 도전은 우리가 언급한 썸네일 바, 즉 RecipeBar를 사용하는 것이었습니다.

 

RecipeBar를 채우기 위해 사용자가 클릭한 5가지 단백질(돼지/연어/쇠고기/닭고기/두부) 중 어떤 단백질을 기준으로 theMealDB.com에서 특정 데이터를 가져왔습니다. RecipeBar를 채운 후 막대를 지우지 않고 다른 단백질을 클릭하여 다른 썸네일 이미지로 대체하면 더 많은 이미지가 추가되어 사용자가 빠르게 비대하고 과포화 된 RecipeBar를 사용하게 됩니다. 그 레시피 바코드의 다른 부분을 조작하려고 시도한 끝에, 우리는 마침내 해결책을 생각해냈습니다. 마지막으로 .final을 사용했습니다(모두 말장난 의도).

.finally는 fetching과 함께 동작하는 자바스크립트 메소드입니다. .fetch를 사용하고 .then과 함께 fetch에 함수를 추가하는 것이 매우 일반적이다. 기본적으로 데이터베이스로부터 데이터에 액세스하도록 요청한 후 .을(를) 통해 데이터가 특정 방식으로 사용될 수 있습니다. 우리는 recipeBar가 지속적으로 채워질 수 있도록 데이터를 얻기 위해 .fetch를 사용하는 데 성공했습니다. 코드는 우리가 부탁한대로 잘 작동했어요!

.finally를 사용하여 final step을 fetch에 추가했다. .finally는 나머지 fetch가 실행되기를 기다린다(성공 여부에 관계없이).

이 예에서는 데이터를 가져와 recipeBar를 채우고 마지막으로 recipeBar를 지우는 다른 함수를 실행한다. 사용자가 한 단백질을 클릭하기만 하면 절대 필요하지 않고, 사용자가 다른 단백질을 클릭하기를 원할 경우 더 많은 단백질을 클릭할 수 있다. 우리는 마침내 RecipeBar를 과하게 채우지 않는 해결책을 찾았다.

또 다른 도전은 우리의 레시피 재료 목록, 즉 레시피였다.우리가 부르는 재료.

 

theMealDB.com(모든 API 데이터베이스와 마찬가지로)은 입력된 데이터만큼만 유효하다. 데이터베이스는 공개되어 있고 크라우드 소싱되기 때문에 사람들이 데이터를 입력하는 방법에 따라 달라집니다. 데이터는 잠재적 성분 20개와 잠재적 성분 측정치 20개로 구성돼 있지만 모든 조리법에 성분이 20개인 것은 아니다. 이렇게 되면 레시피 주변에 용기가 생긴다.동적으로 크기가 조정되지 않는 성분으로, 20가지 성분이 들어 있지 않아도 자동으로 크기가 조정되기 때문에 용기가 너무 높은 경우가 많았다. 데이터를 필터링해야 했습니다.

코드에 설정된 특정 조건을 필터링하는 메서드인 .filter를 입력합니다. 하지만 우리는 어떤 조건이 필요한가요? 데이터베이스의 여러 레시피를 테스트한 결과 재료가 없다는 이유로 모든 레시피가 동일한 데이터로 입력되지는 않았습니다. 일부 레시피에는 재료에 대한 정보가 입력되지 않았습니다. 다른 것들은 ""로 남겨졌고 다른 것들은 " " (한 개의 빈 공간)으로 남겨졌다. 필터 진짜 많이 했어요. 다행히 .filter를 사용하면 한 번에 여러 개의 필터를 사용하여 여러 조건을 설정할 수 있습니다.

위의 코드에서 설정된 조건은 null이 아닌, not "과 not "에 대해 필터링하는 것이었다.

분명 다른 도전도 있었지만, 우리가 가장 자랑스럽게 극복한 두 가지였다. 이를 극복함으로써(감사합니다 구글!!!), 우리는 자바스크립트를 사용하여 사용자에게 친숙하고 역동적인 앱을 구축하고 특정 문제를 성공적으로 해결하는 방법에 대해 배웠습니다.

앞으로는 사용자가 그 성분으로 쇼핑 리스트를 만들 수 있는 기능을 추가했으면 좋겠고, 이미 그 성분을 가지고 있다면 체크박스를 표시할 수 있어 시중에 들고 나올 수 있는 쇼핑 리스트에 포함되지 않을 것이다. 하지만 한편으로는 기안과 내가 만든 앱에 매우 만족한다.

 

저는 저의 첫 번째 정적 지오시티 및 Angelfire 웹페이지에서 먼 길을 걸어왔습니다!

이번 주에 1단계에 대한 나의 반영을 확인해라!