1 00:00:01,200 --> 00:00:06,900 In this lesson we will be creating the part where the back end receives the sheikh event from your phone. 2 00:00:06,900 --> 00:00:12,140 First I want you to go to get a website where you will find Sheikh J.F.. 3 00:00:12,480 --> 00:00:21,930 The link is get hub dot com slash Alex Gibson slash shake dot J.S. about the licensing click on the 4 00:00:21,930 --> 00:00:23,560 license M.D. link. 5 00:00:23,670 --> 00:00:29,730 It says that it is free of charge and we can modify it although we need to include the copyright in 6 00:00:29,730 --> 00:00:30,570 the software. 7 00:00:30,570 --> 00:00:36,990 So make sure you read the conditions and include the information you need as you scroll down the site 8 00:00:37,200 --> 00:00:39,510 you will see the sample codes. 9 00:00:39,720 --> 00:00:43,700 I'll be explaining how the codes are structured later on in this lesson. 10 00:00:43,710 --> 00:00:50,300 Scroll down to the bottom of the page where you will find the support of web browser information you 11 00:00:50,310 --> 00:00:56,250 will need to set one of the supportive web browser to be able to use the shake function. 12 00:00:56,250 --> 00:01:02,160 Basically the recent funds will be supporting these web browsers so you wouldn't have any problems if 13 00:01:02,160 --> 00:01:04,260 you do encounter any problems. 14 00:01:04,260 --> 00:01:09,150 You can use the get request and make some changes in your code. 15 00:01:09,180 --> 00:01:13,920 Now scroll to the top of the page and click on the shake J S link. 16 00:01:14,400 --> 00:01:18,280 Once the page opens click on Raw. 17 00:01:18,300 --> 00:01:22,020 You need to download this onto your computer. 18 00:01:22,020 --> 00:01:24,880 I'll save this to my desktop as well. 19 00:01:24,960 --> 00:01:30,400 Next we'll place the shake J S in PI term. 20 00:01:30,600 --> 00:01:34,290 Here you can see the shake J S file on my desktop. 21 00:01:34,290 --> 00:01:36,400 Now let's go onto the project tab. 22 00:01:36,480 --> 00:01:40,060 Find the JSF folder and click to open. 23 00:01:40,200 --> 00:01:44,660 Then we can drag the shape J S file to the JSF folder and hit. 24 00:01:44,670 --> 00:01:46,090 OK. 25 00:01:46,380 --> 00:01:53,730 Next we want to read the changes so let's go to the layout H Jamil to read the sheik file. 26 00:01:53,850 --> 00:01:58,990 Copy this last script and paste rewrite the Jake where he mobile. 27 00:01:59,000 --> 00:02:01,660 Part 2 Jake to shake J.S. 28 00:02:04,550 --> 00:02:08,770 now we will move to the Games folder under templates. 29 00:02:08,900 --> 00:02:14,050 Go to the sheik HDMI all file so we can add some codes. 30 00:02:14,060 --> 00:02:16,370 Now let's start by creating a button. 31 00:02:16,760 --> 00:02:23,810 We can set H ref and set sharp data roll we'll be set to button click. 32 00:02:23,810 --> 00:02:30,090 We'll be a new function name send start shake which we will be creating later on. 33 00:02:30,530 --> 00:02:33,140 Return will be false. 34 00:02:33,140 --> 00:02:41,600 Let's name this button start next we'll create the sense start shake function go to the top of the block 35 00:02:41,630 --> 00:02:44,260 content and start a script. 36 00:02:44,480 --> 00:02:48,730 Here we will be creating the function send start shake. 37 00:02:49,580 --> 00:02:59,150 Set left I.D. here we want to get the course name it but name will be set course pick and to the course 38 00:02:59,150 --> 00:03:08,640 that has check on it and set this to the value then we set a post to send this to the back end side. 39 00:03:08,660 --> 00:03:09,250 There you are. 40 00:03:09,250 --> 00:03:18,080 L will be slash API slash Sheik slash start the parameter will be set to I.D. so we can get the course 41 00:03:18,090 --> 00:03:21,890 I.D. once the post is successfully sent. 42 00:03:21,950 --> 00:03:24,660 We will be receiving data from the back end. 43 00:03:24,740 --> 00:03:30,800 The data will be Jason so you can set any name for this data as a result. 44 00:03:30,800 --> 00:03:32,760 We want to set the information. 45 00:03:32,810 --> 00:03:40,110 If the function has been started or not so we set the result with HDMI l data result. 46 00:03:40,340 --> 00:03:43,520 This will be sent as a Jason type. 47 00:03:43,520 --> 00:03:49,460 Once you've completed these codes I want you to go to the get hab Web site where we have the sheik J.S. 48 00:03:49,460 --> 00:03:50,780 code samples. 49 00:03:50,780 --> 00:03:53,490 We've just created the script here. 50 00:03:53,630 --> 00:04:00,710 We will be using the new Sheik without the options in the sample so we can just copy the first line. 51 00:04:01,190 --> 00:04:04,640 Let's rewrite the name to Sheikh event. 52 00:04:04,640 --> 00:04:07,470 Next we go onto start. 53 00:04:07,520 --> 00:04:09,440 The name will be Sheikh event. 54 00:04:09,440 --> 00:04:11,240 Start method. 55 00:04:11,540 --> 00:04:17,940 Once you've created these to Sheikh events I want you to copy and paste this window. 56 00:04:18,120 --> 00:04:25,010 Add event listener here we will be setting the content for this function. 57 00:04:25,010 --> 00:04:29,360 Once the phone has been shaken this sheikh event did occur. 58 00:04:29,360 --> 00:04:31,040 Function will be invoked. 59 00:04:32,570 --> 00:04:37,880 Let's go on and complete this function in the sense start function. 60 00:04:37,970 --> 00:04:43,970 We created a code to get the course I.D. we will be using that again in this function so you can copy 61 00:04:43,970 --> 00:04:45,740 the code and paste. 62 00:04:45,740 --> 00:04:51,890 Also once the phone is shaken we need to send this to the back end side so let's copy the next line 63 00:04:52,010 --> 00:04:53,380 and paste in this code. 64 00:04:53,390 --> 00:04:58,110 We need to rewrite the URL from start to run. 65 00:04:58,160 --> 00:05:00,250 This will also be an adjacent type. 66 00:05:00,740 --> 00:05:02,240 So let's add that to the end. 67 00:05:03,780 --> 00:05:11,620 In this function the result will be the elapsed time the elapsed time can be a long number such as 4.5 68 00:05:11,680 --> 00:05:16,140 6 6 7 7 seconds which is a bit too long. 69 00:05:16,380 --> 00:05:24,360 In this case we can use to fixed and set the number 2 to make the numbers shorter then set the time 70 00:05:24,390 --> 00:05:25,850 as a string. 71 00:05:26,430 --> 00:05:28,820 The result will be based on seconds. 72 00:05:28,890 --> 00:05:32,780 So let's add the alphabet s to the result. 73 00:05:32,790 --> 00:05:39,660 If the data is not running that means the game is over so we will set the result to a text message done 74 00:05:39,840 --> 00:05:41,730 in a new line. 75 00:05:41,730 --> 00:05:49,320 Once the results are in we want to show the results in the Jake worry I.D. as we are using post. 76 00:05:49,380 --> 00:05:55,790 We need to change a couple of codes in the server P why we were using get but as we change the codes 77 00:05:55,790 --> 00:06:00,510 to post we can now change the codes to receive with form. 78 00:06:00,510 --> 00:06:02,280 Now we are ready to run the code. 79 00:06:02,580 --> 00:06:09,300 But before running this code we will need to connect a USB cable and prepare so I'll leave this lesson 80 00:06:09,300 --> 00:06:11,910 here and we'll see you in our next lesson.