OutSystems 반응형 웹 만들기 1

박재훈·2023년 4월 8일
0

Low-Code

목록 보기
3/4
post-thumbnail

https://velog.io/@noorong/OutSystems-%EC%8B%A4%EC%A0%9C-%EC%95%B1-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0

지난번엔 모바일 앱을 만들어봤는데, 이번엔 웹 앱을 만들어보겠습니다 ! 유사한 부분이 많아서 어렵지않았어요.

  1. From scratch 를 골라, 빈 캔버스에 만들어볼게요.
  1. 그리고 반응형 웹 앱 선택

  2. 이름을 정해줍니다.

  3. 그리고 자동으로 모듈 이름과 타입이 적혀있더라구요. 바로 Create Module !

  4. https://success.outsystems.com/documentation/11/getting_started/create_your_first_reactive_web_app/#create-entity-from-excel
    여기에서 엑셀 파일을 다운받고 아래 이미지에 나온 번호 순서로 Import 해주세요 !
    Task 어쩌고 하면서 메세지 나오면 Import 누르시면 됩니다용

  5. 다시 인터페이스 탭으로 와서 screen 생성하기

  6. 그럼 모달창이 뜨는데, Empty를 고르시고 이름을 적으신 다음 create 하면 됩니다.

  7. 이후 Data 탭에서 Database의 Task를 생성된 화면에 드래그하시면 됩니다. 이미지 참고해주세요

    만약 적용이 안된다면!! 아래처럼 빨간아이콘이 아닌

    아래처럼 파란 아이콘이 떠야 정상적으로 적용이 됩니다. 드래그한 뒤 바로 놓지말고 잠시만 기다려주세요. ^_^

  1. 그러면 자동으로 Table을 만들도록 되어있어요. Select

  2. List의 첫번째를 클릭하면 다른 페이지로 넘어가게 설정하기.

  3. 그러면 아까봤던 모달이 뜨는데 마찬가지로 Empty를 고르고 이름은 TaskDetail 이런식으로 Detail을 포함한 작명을 추천드리고, create 해주세요.

  4. 그러면 페이지가 생성돼요. 여기서 save 버튼을 누르면 저장할 수 있도록 기능을 적용해야합니다. save 버튼을 더블클릭하면 save 라는 텍스트가 없는 부분을 클릭해주셔야해요 ! padding이 있는 부위랄까요....ㅋㅋㅋ

    그러면 이런 알고리즘 페이지로 넘어가는데 이제 여기에 true 일때 저장하게끔 로직을 만들어 줄 것이니 일단 다음으로 넘어갑니다.

  5. Logic 탭에서 Server Actions를 우클릭하여 Add Server Action을 눌러주세요.

    그러면 또 새로운 액션을 만드는 화면이 만들어지는데, 이름은 TaskCreateOrUpdate로 정의해주세요.

    그리고 TaskCreateOrUpdate을 우클릭하여 Add Input Parameter. 입력시 필요한 파라미터를 삽입합니다.
    (파라미터는 y = f(x) 처럼 함수를 정의할 때, 입력값을 담는 변수 x 정도로 생각하시면 됩니다.)

  1. 추가한 Input Parameter의 이름과 타입을 Task 로 바꿔주세요

  2. 이번엔 Output Parameter을 추가하고,

    이름은 TaskId, 타입은 Task Identifier로 수정해주세요.

  1. 다음으로 Data탭에서 Database -> Task -> CreateOrUpdateTask를 왼쪽 화면 가운데로 드래그해서 삽입해주세요. 그러면 처음엔 Error Found라고 뜨는데, 오른쪽 아랭 Source를 Task로 입력하면 해결됩니다. (소스를 입력 매개 변수 작업으로 설정합니다.)

  2. 다음으로 출력 파라미터 TaskId 값을 CreateOrUpdateTask에 할당해야 합니다. 왼쪽 도구 상자에서 Assign을 Create~Task와 End 사이에 끌어서 삽입하고, 오른쪽 아래에서 변수를 TaskId, 값을 CreateOrUpdateTask.Id 로 설정합니다.

  1. Interface 탭에서 SaveOnClick을 더블클릭해서 왼쪽 화면이 나오게 하고

  2. Logic 탭으로 이동해서 TaskCreateOrUpdate를 True일때 End로 가는 선에 삽입하고, 오른쪽아래에서 Task를 GetTaskById.List.Current.Task로 설정해주세요. (Get만 입력해도 자동완성됩니다. ㅎㅎ)

  3. 마지막으로 7번에서 만들었던 메인페이지를 End에 삽입해주시면 됩니다. 그러면 Valid가 True, 즉 사용자가 적절한 값을 입력했다면 Task를 생성 또는 수정하고 메인페이지로 이동하게 하는 로직이 완성된 것 입니다 !

만드는게 엄청 쉽진않지만 만약 JS로 짜야했다면.... 훨씬 어렵고 SQL 공부도 따로 해야했겠죠...? 그런 관점에선 정말 정말 편리하네요 ㅎㅎ 다음엔 Task를 완료했을때, 추가하는 것 마지막으로 브라우저에서 열었을 때 잘 되는지 테스트 해보겠습니다. !

참고로 이 모든 튜토리얼은 OutSystems의 홈페이지에 나와있습니다 !

profile
신입 개발자

0개의 댓글