Merge pull request #107 from cami-espinozaq/deployment-trial-serverless

Deployment trial serverless
wdr-data · Oct 17, 2023 · 118cb5b · 118cb5b
2 parents ab3a3e5 + 9d6f008
commit 118cb5b
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 136 deletions.
diff --git a/.github/workflows/develop.yml b/.github/workflows/develop.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - develop
-      
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -18,25 +18,22 @@ jobs:
       AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
       AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
     steps:
-    - name: Checkout app
-      uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: Set up Python ${{ matrix.python-version }}
-      uses: actions/setup-python@v4
-      with:
-        python-version: ${{ matrix.python-version }}
-    - name: before install dep
-      run: |
-        sudo apt-get install -y python3-pip python3-setuptools libcups2-dev
-        pip3 install --user awscli
-        export PATH=$PATH:$HOME/.local/bin
-    - name: Install dependencies
-      run: yarn install
-    - name: serverless deploy
-      run: SLS_STAGE=staging BRANCH=develop yarn deploy
-
-
-
+      - name: Checkout app
+        uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: before install dep
+        run: |
+          sudo apt-get install -y python3-pip python3-setuptools libcups2-dev
+          pip3 install --user awscli
+          export PATH=$PATH:$HOME/.local/bin
+      - name: Install dependencies
+        run: yarn install
+      - name: serverless deploy
+        run: SLS_STAGE=staging BRANCH=develop yarn deploy
diff --git a/netlify.toml b/netlify.toml
@@ -1,4 +1,8 @@
 [build]
-  Command = "NODE_ENV=production yarn build:netlify"
+  Command = "NODE_ENV=staging yarn build:netlify"
   Functions = "lambda"
   Publish = "build"
+[[headers]]
+  for = "/*"
+    [headers.values]
+    Access-Control-Allow-Origin = "https://logs1414.xiti.com"
diff --git a/requirements.txt b/requirements.txt
@@ -0,0 +1 @@
+awscli
diff --git a/serverless.yml b/serverless.yml
@@ -2,7 +2,7 @@ service: hackingstudio-code4maus
 
 provider:
   name: aws
-  runtime: nodejs12.x
+  runtime: nodejs18.x
   region: eu-central-1
   role: 'arn:aws:iam::#{AWS::AccountId}:role/hackingstudio/code4maus/hackingstudio-code4maus-functions'
   stage: ${file(scripts/env.js):stage}

diff --git a/src/components/edu-stage/edu-stage.jsx b/src/components/edu-stage/edu-stage.jsx
@@ -60,7 +60,7 @@ const EduStageComponent = (props) => {
           <Button
             className={styles.fullscreenButton}
             onClick={() => {
-              sendPaEvent(props.gameId, 'Fullscreen Button')
+              sendPaEvent(props, 'Fullscreen')
               return props.toggleFullscreen()
             }}
           >
@@ -91,7 +91,7 @@ const EduStageComponent = (props) => {
             style="primary"
             disabled={props.slideIndex === 0}
             onClick={() => {
-              sendPaEvent(props.gameId, 'Zurück Button')
+              sendPaEvent(props, 'Zurück')
               return props.previousSlide()
             }}
           >
@@ -105,7 +105,7 @@ const EduStageComponent = (props) => {
             style="primary"
             wiggle={props.slideIndex === 0 && !props.finished}
             onClick={() => {
-              sendPaEvent(props.gameId, 'Weiter Button')
+              sendPaEvent(props, 'Weiter')
               return props.nextSlide()
             }}
             disabled={props.finished}
@@ -118,10 +118,22 @@ const EduStageComponent = (props) => {
   )
 }
 
-const sendPaEvent = (gameId, lastLevel) => {
-  const pages = guiTypePages(gameId)
-  pages.push(lastLevel)
-  paEvent.clickAction({ pages })
+const sendPaEvent = (props, clickName) => {
+  const pages = guiTypePages(props.gameId)
+  pages.push('Code')
+
+  let target = `${props.slideIndex}/${props.slideCount}`
+  if (clickName == 'Weiter') {
+    target = !props.linkNextGame ? `${props.slideIndex + 2}/${props.slideCount}` : 'Nächstes Lernspiel'
+  }
+
+  paEvent.clickAction({
+    pages,
+    pageType: 'Spiele',
+    chapter1: 'Tutorial',
+    chapter2: clickName,
+    target
+  })
 }
 
 EduStageComponent.propTypes = {

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
@@ -34,6 +34,7 @@ import costumesIcon from './icon--costumes.svg'
 import expandIcon from './expand_right@2x.svg'
 
 import styles from './gui.css'
+import { buildGuiPage, paEvent } from '../../lib/piano-analytics/main.js'
 
 // Cache this value to only retreive it once the first time.
 // Assume that it doesn't change for a session.
@@ -67,6 +68,7 @@ const GUIComponent = (props) => {
     closeSaveModal,
     saveProjectError,
     isSaving,
+    isNewProject,
     projectName,
     eduLayerActive,
     eduId,
@@ -102,6 +104,17 @@ const GUIComponent = (props) => {
     isRendererSupported = Renderer.isSupported()
   }
 
+  const logClickEvent = (eventFn, eventName) => {
+    paEvent.clickAction({
+      pages: buildGuiPage(props.eduId, props.isNewProject, props.activeTabIndex),
+      pageType: 'Spiele',
+      chapter1: 'Speichern',
+      chapter2: eventName,
+      target: eventName
+    })
+    eventFn()
+  }
+
   return (
     <div className={styles.pageWrapper} {...componentProps}>
       {loading ? <Loader /> : null}
@@ -125,7 +138,7 @@ const GUIComponent = (props) => {
               <p>{saveProjectError}</p>
               <Button
                 style="primary"
-                onClick={() => onSaveProject().then(() => closeSaveModal())}
+                onClick={() => logClickEvent(() => onSaveProject().then(() => closeSaveModal()), 'Speichern')}
                 disabled={isSaving}
               >
                 Speichern
@@ -151,7 +164,7 @@ const GUIComponent = (props) => {
                 <Button
                   style="secondary"
                   className={styles.saveModalDownload}
-                  onClick={downloadProject}
+                  onClick={() => logClickEvent(downloadProject, 'Projekt herunterladen')}
                 >
                   Projekt herunterladen
                 </Button>
@@ -162,7 +175,7 @@ const GUIComponent = (props) => {
                 <Button
                   style="secondary"
                   className={styles.saveModalDownload}
-                  onClick={handleClick}
+                  onClick={() => logClickEvent(handleClick, 'Projekt hochladen')}
                 >
                   Projekt hochladen
                   {renderFileInput()}
@@ -261,7 +274,7 @@ const GUIComponent = (props) => {
           />
         </div>
         <div className={classNames(styles.column, styles.columnButtons)}>
-          <StageHeader vm={vm} />
+          <StageHeader vm={vm} logPageInfo={buildGuiPage(props.eduId, props.isNewProject, props.activeTabIndex)} />
         </div>
       </div>
 

diff --git a/src/components/menu/menu.jsx b/src/components/menu/menu.jsx
@@ -185,12 +185,15 @@ export const MenuComponent = (props) => {
           iconSvg={buttonIconMausseite}
           external
           linkTo="https://www.wdrmaus.de/"
-          onClick={() =>
+          onClick={() => {
             paEvent.clickExit({
-              pages: ['Menu', 'Zur Maus-Seite'],
-              pageType: 'Beitrag'
+              pages: ['Menu', menuTabTitles[props.selectedTab]],
+              pageType: 'Hauptseite',
+              chapter1: 'Exit',
+              chapter2: 'Zur Maus-Seite',
+              target: "https://www.wdrmaus.de/"
             })
-          }
+          }}
         >
           Zur Maus-Seite
         </MenuButton>

diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
@@ -15,7 +15,7 @@ import menuIcon from '!raw-loader!../../../assets/icons/header_menu.svg'
 import mailIcon from '!raw-loader!../../../assets/icons/menu_impressum.svg'
 
 const StageHeaderComponent = function (props) {
-  const { isFullScreen, onSaveProject, vm, gameId } = props
+  const { isFullScreen, onSaveProject, vm, logPageInfo } = props
 
   return (
     <div
@@ -30,8 +30,7 @@ const StageHeaderComponent = function (props) {
           className={styles.controls}
           vm={vm}
           isFullScreen={isFullScreen}
-          onGreenFlagClick={() => sendPaEvent('clickAction', gameId, 'Los')}
-          onStopAllClick={() => sendPaEvent('clickAction', gameId, 'Stopp')}
+          logPageInfo={logPageInfo}
         />
         {isFullScreen ? (
           <Fullscreen />
@@ -48,18 +47,14 @@ const StageHeaderComponent = function (props) {
                 iconSvg={mailIcon}
                 external
                 linkTo="mailto:maus@wdr.de"
-                onClick={() => sendPaEvent('clickExit', gameId, 'Feedback')}
               >
                 Feedback
               </MenuButton>
               <MenuButton
                 orientation="vertical"
                 id="save"
                 iconSvg={saveIcon}
-                onClick={() => {
-                  sendPaEvent('clickAction', gameId, 'Speichern')
-                  return onSaveProject()
-                }}
+                onClick={onSaveProject}
               >
                 Speichern
               </MenuButton>
@@ -68,7 +63,6 @@ const StageHeaderComponent = function (props) {
                 linkTo="/"
                 className={styles.headerIcon}
                 iconSvg={menuIcon}
-                onClick={() => sendPaEvent('clickAction', gameId, 'Übersicht')}
               >
                 Übersicht
               </MenuButton>
@@ -80,12 +74,6 @@ const StageHeaderComponent = function (props) {
   )
 }
 
-const sendPaEvent = (eventType, gameId, lastLevel) => {
-  const pages = guiTypePages(gameId)
-  pages.push(lastLevel)
-  return paEvent[eventType]({ pages })
-}
-
 StageHeaderComponent.propTypes = {
   intl: intlShape,
   isFullScreen: PropTypes.bool.isRequired,

diff --git a/src/components/welcome-screen/welcome-screen.jsx b/src/components/welcome-screen/welcome-screen.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Link } from 'redux-little-router'
 
 import Button from '../button/button.jsx'
@@ -8,58 +8,69 @@ import { eduUrl } from '../../lib/routing'
 import helloWorldImage from '../../lib/edu/shared_assets/L00.jpg'
 import mausImage from '../../../assets/img/maus1.png'
 import styles from './welcome-screen.css'
+import { paEvent } from '../../lib/piano-analytics/main.js'
 
-const WelcomeScreenComponent = () => (
-  <div className={styles.container}>
-    <img alt="WDR" className={styles.wdrLogo} draggable={false} src={wdrLogo} />
+const WelcomeScreenComponent = () => {
 
-    <div className={styles.wrapper}>
-      <div className={styles.innerWrapper}>
-        <img className={styles.logo} src={logo} />
+  useEffect(() => {
+    paEvent.pageDisplay({
+      pages: ['Willkommensseite'],
+      pageType: 'Onboarding'
+    })
+  }, [])
 
-        <p>
-          Willkommen zu <strong>Programmieren mit der Maus</strong>!
-        </p>
-        <p>
-          Hier lernst du Schritt für Schritt Bildergeschichten und Spiele mit
-          der Maus zu programmieren. Viel Spaß!
-        </p>
+  return (
+    <div className={styles.container}>
+      <img alt="WDR" className={styles.wdrLogo} draggable={false} src={wdrLogo} />
 
-        <Link href={eduUrl('00')} className={styles.section}>
-          <div className={styles.sectionText}>
-            Spielst du zum ersten Mal?
-            <div className={styles.sectionSmallText}>
-              Fang am besten mit unserem ersten Lernspiel an.
+      <div className={styles.wrapper}>
+        <div className={styles.innerWrapper}>
+          <img className={styles.logo} src={logo} />
+
+          <p>
+            Willkommen zu <strong>Programmieren mit der Maus</strong>!
+          </p>
+          <p>
+            Hier lernst du Schritt für Schritt Bildergeschichten und Spiele mit
+            der Maus zu programmieren. Viel Spaß!
+          </p>
+
+          <Link href={eduUrl('00')} className={styles.section}>
+            <div className={styles.sectionText}>
+              Spielst du zum ersten Mal?
+              <div className={styles.sectionSmallText}>
+                Fang am besten mit unserem ersten Lernspiel an.
+              </div>
+              <Button style="primary">
+                <div style={{ whiteSpace: 'nowrap' }}>Lernen, wie es geht ‣</div>
+              </Button>
             </div>
-            <Button style="primary">
-              <div style={{ whiteSpace: 'nowrap' }}>Lernen, wie es geht ‣</div>
-            </Button>
-          </div>
 
-          <img
-            src={helloWorldImage}
-            alt=""
-            className={styles.imageHelloWorld}
-          />
-        </Link>
+            <img
+              src={helloWorldImage}
+              alt=""
+              className={styles.imageHelloWorld}
+            />
+          </Link>
 
-        <Link href="/" className={styles.section}>
-          <div className={styles.sectionText}>
-            Kennst du dich schon aus?
-            <div className={styles.sectionSmallText}>
-              Gehe direkt zur Übersicht und klicke dein nächstes Lernspiel an.
-              Gespeicherte Spiele findest du unter „Meine Sachen“.
+          <Link href="/" className={styles.section}>
+            <div className={styles.sectionText}>
+              Kennst du dich schon aus?
+              <div className={styles.sectionSmallText}>
+                Gehe direkt zur Übersicht und klicke dein nächstes Lernspiel an.
+                Gespeicherte Spiele findest du unter „Meine Sachen“.
+              </div>
+              <Button style="primary">
+                <div style={{ whiteSpace: 'nowrap' }}>Alle Lernspiele ‣</div>
+              </Button>
             </div>
-            <Button style="primary">
-              <div style={{ whiteSpace: 'nowrap' }}>Alle Lernspiele ‣</div>
-            </Button>
-          </div>
 
-          <img src={mausImage} alt="" className={styles.imageMaus} />
-        </Link>
+            <img src={mausImage} alt="" className={styles.imageMaus} />
+          </Link>
+        </div>
       </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default WelcomeScreenComponent