 Okay, so next up, Zun Jie on React Native. Okay, hello everybody, my name is Zun Jie. Brief introduction of myself. I was previously working as a teaching assistant in Jeremy Zabli for the Web Development Inversive. Okay, so today I will present on Building a T-Tacto with Renitif and Soquel. Okay, so the reason why I want to present this is because during my course of training in the General Assembly, the first modules or the first project that the students have submitted is T-Tacto. But at the point of time, they didn't have any knowledge of Create or any other more knowledgeable or programming skillsets. So as the course progresses, we at the last modules, we decided to learn AngularJS and ReactJS. So I was in charge of the ReactJS. And at the point, I slowly after that I decided to proceed with React Native and try to build a T-Tacto based on React Native and Soquel. Okay, before I dive into code base, let me show you the demo. Okay, it's actually nothing fancy-full. Just like that. So the player1 creates a game room with this code given and player2 will insert this code. So once the player2 has drawn the game, they can start the game already. So first player will start with the ads and then second player o. Then go on and proceed. Yup, and then player1 wins. Okay. So that's it for the demo. Yup. Okay. Things that for React Native, it's not as... There's always a learning curve in new languages, including even like Golang, even for newbie to be like JavaScript or this. In case that for React.js, the learning curve is actually steep, but at the point of time you won't be so hard other than that. Okay. To explain more about how I build a T-Tacto, in React.js, it's made out of components. So for React Native, it's the same thing. It's made out of all our components. So there's a wrapper called in. That's IOS.js and the wrapper will contain the tiles. Each individual tiles of the grid which contain the s or o mark. So each of these components have their own various responsibilities. So for the in-desk, it will do the socket connection initiation, creating a room and join a room. For the bot, it will be updating our bot state, rendering our tiles and then togaring the player turn. And finally, the tile will be rendering and then also inviting click event of server. To focus more on the React Native, before you start programming on React Native, you don't need to install 3 various packages. So particularly for MacOS, you need to install the Note, Watchman and the React Native CLI. D3 I require in order to create the React Native app. And in order to communicate to the server, you need to install the socket IO client, which is this line. Okay. So what is a simple navigation app? The simple navigation app is actually what you saw just now during the transition. Ya, this is a navigation. Every time if the two player has already initiated a game, then the navigator will be in charge of propagating the scene, the new scene on top and pushing it on top. So it's defined by here. Switch, route ID, case 1, I return the T-Tatto app. The T-Tatto app will be this layout. This whole layout. Which is done in here. Which is done in here. Ya. Which is under a render method. It is so cool. Okay, so for the React Native, the lifecycle will be something like, if I remember correctly, it's the constructor, then the component will mau, render, and component did mau. There are some other methods that I didn't invoke. But this is a general geeks of fit. Okay, so for constructor, I need to set the initial state. Which is the create an empty code, join code player, and navigator. I then need to buy all the functions to this component instance. In the case, then for following that, in the component will mau, I will try to, I will actually connect to the server. Okay, this is a bit messy but, okay. Ya, here is the part that is quite interesting. Notice the touchable without feedback on press, then you invoke this function because it's miss keyboard. And the miss keyboard will blur out what it put. The reason is because if I don't do this, let's say like that. Okay, toggle. Notice that the keyboard don't disappear if I click somewhere else. You need to blur out and it will produce the same mistake if you deploy it on an actual device. So that's why you need to blur out whenever I click on somewhere else. It will be somewhere? Ya, somewhere like this. So for all the rest of clickable patterns such as create game room and join code will be powered by will be encloser and close by a touchable highlight. This will signify that this particular component has a touch event. Okay, following that moving forward going to the board.js which I mentioned that has two separate, two source plateys. One is the update on game board and one is the rendering of files. Okay, so for the update of render board will be here. We are returning the board update and then setting on state. Once the server will emit the board update through the socket and then once it receive once the reactive app receive it you update the game board based on data receive and then also it will receive which player, which pool player it is. As for rendering part, this is something that's quite okay. So actually it's just a master mapping and map the role and then I map the column after that which is based from here. So I come, I update because what the server will send is actually the whole game board. This game board some, depending on the game state you do something like this. So I return right, once I update the game board I will react native will actually call the render function again we vote this function this function and then render out the appropriate values for each of the tau. Okay, now we go into, we go deeper into the final level which is a tau.js the tau.js only just render out the s or the o and then also emit the click event to the server. So that's a touchable highlight and also yeah, whenever I click I will emit the click specific role and the column of the grid and also the value okay Oh yeah, for the board.js although it's a player num and the player turn the reason why I need to have this is because I need each of the player he's either player 1 or player 2 but I need to tell the board of them whose player turn is it so from here from the tau.js or we're able to know is that player able to make a mark on the grid or not okay okay, how the random code generated is actually pretty quite complex. I'm not sure why but I can't create a random number from 0 to 9999 and then I like a e the app will crash or freeze frequently therefore the walk around is I will create 4 random digits and then I'll let it concatenate we should produce a 4 digit code as shown here and then after that once I create a game code I will emit the grid room event to the server and then in server side you create the game box store so the overview of game box store will be something like this game box store is an object wherever it contains various key values key will be the game code the value will be another object which is the game box the game box is a 3x3 array I'll follow it at the player1 and player2 socket id and after that lastly it will be the player turn itself initially I didn't do that so because I didn't really cater for multi game running at same time so what I do is instead of emitting to so I need this function instead of initially I didn't do this instead I did this broadcast something like that broadcast.emit but this won't work if there are multiple games running at same time finally so that's why I need to change this io.in I emit to generated by the room code so if for these 2 players only if player1 emit player1 and player2 in the game room will receive the event the reset box I never happen to be at okay the thing about real native is they let you learn once write anywhere so that's also I think that's quite a bad point because you have to write one for the in-depth iOS or JS and another one for the in-depth or android.js which I never write for the android and also if for those who have done react.js you understand that you can only render 1 root node something like this like this build and inside of that will be all the various components inside because how JSX compile will be something like this react.js will be something like this so if you if you are trying to return 2 root nodes you create 2 return functions at the same time which don't make any sense in the syntax that's why you have to write 1 root node another key point to take note of a relative is that you can use CSS to style the components something like this but they introduce new such as flats and justify content that's all and the difference is that usually in CSS you do like this very well colour but notice that for react, you have to do a camera casing instead of a slug case anyway last one of these preference link that i took from in learning how to do relative and socket IO finally here is my github report and demo video if you guys didn't see the demo you can see table here she will be here it's actually the same thing i mean that's all any questions or i need feedback we have to take very honest version so do you think it's staplized enough to use in weird production that depends on what kind of features are you trying to make use of or for example if you are trying to make use of apple pay or google wallet, i wouldn't advise it but if i trying to render very basic viewing of items or even shopping cards then maybe it's okay for it to go into production so how much percentage does it convert the API from ios and upload or for now i haven't really researched in all the components that reandative can use but so far i think around 70% 50% to 70% but i cannot really judge because i didn't really use all of the components yeah Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A Q&A IOS Component and Work Component and Work Component is normal React Component. So then I use Redux. Redux manage all the logic. That's another thing. You have some library called React Native or Web, which compiles the React Native to normal React Component. So yeah, but you have to think about the user experience. Like on the web and on mobile apps, it's not the same. So you need to be really good. But you're trying to be... Yeah, you're getting into the question. Any more questions? Okay, thank you.