 All right, so thank you for coming today and thank you for Tupano to put me on the big huge boom like this so that I can get more nervous So maybe I will try to start Okay Today we are talking about a topic which is the D-Cup Tupo in React Native so We So last last year I make a presentation and the demo didn't work so this time I think that I can improvise it by Shipping the demo to everybody before the presentation. So that is what I did So I built an application for Tupano and it is now available on App Store and Play Store So you can download it and follow the session So today we are talking about the technology behind it and how we build it So first, my name is Robert. I'm not working at Evonbeg Web I'm a food stack developer. I have been doing Tupo since 10th year and I have been working with Swift for the last two years, Gatsby from last year until now and React Native from last year and You can find more information about me on the Evonbeg Web website or on my personal site, which is the Gatsby site First, I would like to talk a bit about Evonbeg Web. So we are a web agency in Montreal We have about more than 10 years experience working with Tupo and We are a very community-centric. We organize a lot of events like Tupo Meetup, UX Makeup, Meetup So if you if you want to get more information about all the activity of Evonbeg Web feel free to check it out on our website Here are some pictures of us. This is the environment of work at Evonbeg Web We have fish, we have food, we have friends, we smile and sometimes we work Okay, so let's get started. It's about D-Cup Tupo with React Native About this project. I want to build a cross-platform mobile application that consume data from TupoNor.org And that will be a very simple application where you can see all the information of Tupo, all the information of the event, like the location, the list of session, the schedule and the list of sponsor And I said the goal for myself on this application is to minimize the server development, which means I would like to use the JSON API data as much as possible The system, the system we have, the server, which is the Tupo JSON Pantheon site And we have the mobile application where I use React navigation, Redux, Redux Tone, Animate API and FastLand. I will talk more about it later today. Let's go with the server So on the server I So the website, the TupoNor website is developed by Foster Interactive So few months ago I sent an email to Foster asking if I can access the website. So they are very Like they give me an environment so that I can work with this So that's how I can access the website. And then what I need to do is just to go there, install a few modules, do some configuration and then I can get all the data from there easily So first, let's talk about JSON API. Have any one of you never touch JSON API? Only one of you? A few of you, yeah Have any one of you never touch JSON API? Never? Yeah, never touch it Okay, so I will have a quick explanation So for a JSON API, what is JSON API? It's like a specification for API in JSON So let's say you need to build a decub system and the back-end developer will argument with the front-end developer on the way how they want to output data So let's say you want to structure data this way or the front-end want to structure it this way so that they can pass it easily So they will just keep arguing about that So JSON API is a specification. There's no argument anymore because you need to follow the structure defined by JSON API And in Drupal, we have a JSON API module What it does is we provide an API that's centered on the Drupal entity type and bundle So that after enabling the module, you can access all the information of Drupal entity like out of the box Like you can just call JSON API, not article and put in the UUID And then you get all the information of that node, for example the title, the body, the creation time, the user who created it The question with JSON API is outside of the box, it will not give you the relation data For example, you have a content type. In that content type you have an image field that reference to a field entity So JSON API will not give you it right away. You need to use the in-clue reference The in-clue reference is, can you see my pointer? No. Can you see? So in order to get the information of the field image in the node article here I will need to get in-clue field image like this And JSON API will return you the object of the node and the object of the image And then after that we need to normalize it yourself. You need to manipulate the data the way that you want So that you can display it on the app You can find out more information about the way to fetch results from JSON API in this link here The next part of the server setup is how can I query the image with image style Because I don't want to get the original image which is huge So in order to do that I need three modules. The first one is JSON API extra Which will have you to customize the API, override the results and enhance the field output The second thing I need is the module name, customer, consumer The consumer will have you to identify where you come from Because we are browsing data of Trooper Psy from the application So the Trooper needs to know who you are, what is the run, what is the type of content that you can access The third one is consumer image style That will have you to override the output of the image field So that you can choose, I want this field to output at this small image style There is a reference link here to a very well detailed article about how to use the consumer image style You can check it out So first let's talk about the JSON API extra module To configure just go to this link, admin, config, service, JSON API, resource type And select a resource that you want to override In my case it will be the node article And I want to override a field image in that node article And I can show you the screenshot of how it looks like right here So when you go to that link, you go to that field, user pictures here You will see the image style here And then you can select to output the speaker big and speaker small through the JSON API Let's go to the consumer module The consumer module, you will need to do some configuration so that it can output the image style that you need To do that you need to go to the admin, sorry Admin, config, service and consumer By default consumer will create a default consumer You can use it if you want or if you are more secure about which application can consume your data You can create a new consumer and define the restriction on that consumer only For example, you can set the role for that consumer You can set that consumer to access the image of speaker small only, not everything So you can configure that kind of thing And if you create a new consumer, then you need to make a call with the consumer ID Where you need to put the UUID of the consumer here So that it understands where you come from and what you need and it will answer you The output of that, the output of all the setup will be like this By default JSON API will not give you the image speaker big and speaker small here But with all the setup that we have done it will give you this link And then you can use it in your application without blowing up the data So let's go to the next part Sorry, I have a question, am I going too fast or you want me to slow down or something? Thank you I will publish the slide after this So let's go to the second part which is quite interesting, which is the mobile app So when I decide to build the app, I think about building it in native code Which is Swift because I like it But I think our iPhone user, but I think many people and many of us are using the Android phones So need to build something for them And React Native is a good solution because you can build cross-platform for Android and iOS at the same time You can share the same business logic in React code and then build it into an application And have any one of you built any React Native application before? Are you familiar with the technology? Personally, I mean, I was out of date Yeah, I think it has changed a lot Okay, so for this application because the timeline for this project, this small project is very sensitive and it's very sharp So I want to keep everything very simple and I don't want to use any third-party package that can cause some problems So I try to use the big pocket only So in this one, I use React Native, the main framework I use React navigation for swiping around the screen I use Redux for state management I use Redux term for async code to the API And spend some time on the anime API in React Native And lastly, I will talk about the fast lane which is a way to build and release the app The first part which is the React navigation So you are using iPhone, you will need to go You always see something like the bottom top bar like this Or sometimes you will see something like this in the top and you can swipe between the screen And then sometimes you can see the back button here When you click back, it will swipe back to the previous screen So all of that can be done using React navigation So the good thing with React navigation is the framework is very major The second thing is it will give your application the same look and feel Because it works really well with the native code And on the animation, on the Chester, it works perfectly with the React navigation React navigation comes with different type of navigator So the first one is Stack Navigator, which I'm using here Stack Navigator will give you the going back button here on the second screen The bottom top bar navigator will give you the five top at the bottom here And the material top bar navigator, I think they name it because that is something from Google That will give you the June 12, 13 and 14 The next part of the project is React Redux So React Redux is like a technology to have you build application in JavaScript It helps you to build the predictable state in application Because as you know, in mobile app, it's very important to know the state of app What data you already load and what data you want to load in the next step So Redux is kind of that thing, the predictable state container for that And React Redux is just the official binding for Redux On the right hand side, we have a screenshot What does it mean when we say predictable state? Predictable state, as you can see here, I'm doing one action which is a fetch article to set One action which is fetch article In that, we can see that the previous state, it will say the article We don't have anything inside the article bar And after doing the action to fetch article with success We will have some information in that object We have the last fetch which is the timestamp when you fetch it When the data received by the app And we have the node which is the information of the node that we get from the server The next part is the reacton So reacton will have you create a middleware so that you can connect to the server Because this is just a definition that I get directly from Wikipedia But I think it's quite important to understand what it is So it will delay the calculation, delay on the action afterward Until when the result is successful and get So reacton will do that part for you It will dispatch the action to call the server And wait until when you get the data, either it's success or failure And then you can do the next thing which is display the message or display the content And together with that, I use the JSON API normalizer To restructure data from the server The image on the right hand side is the way that I implemented in my code As you can see I have the code API which is a wrapper function That code to the server And the endpoint that I call in JSON API, node article I also pass in some parameter like I get the 10 latest one All of them need to be published and include image in here After that I will get the JSON which is the output of the JSON API But right out of the box I cannot use it the right way I need to normalize it, I need to restructure it the way that I can put it into the screen So I use the normalize function from the JSON API normalizer And I do some data manipulation in here When on the fetch has been success, I will dispatch a message saying that the fetch has been done successfully And here is the data, go update the UI Or if there is a problem I will dispatch the failure message So this is what happened when we do those three actions So in the reaction, there is a convention to have three dispatch whenever you make a call The first one is to announce to everybody I'm about to fetch the data right now It is dispatch, fetch, article begin It has nothing to do but it just updates the state of the app to tell that you are doing one action The second step is to dispatch the fetch API success if you get the data In this case on the right hand side I have fetched data correctly successfully And I got the payload in the action here And then it will be passed to the state of the app If we have a problem, we will dispatch another message for the failure Talking about the normalize JSON API So how to say... So imagine that each of us is of the border here is a node object And you want to send three nodes from this point to that point That's what you do when you call the server getting the three nodes So the trooper, instead of shipping the whole body like this It will be cost effective, it's not good So they will decide to cut out your arm, cut out your leg And put on your arm into a basket of the arm Put on your leg into the basket of the leg And put your body into another basket And then it shipped the three baskets all together into the point B, the destination So the app is the point B, the destination We get the three baskets, but how can we glue everything together And that is the normalize JSON API we do So this is the first part here This is the output from the server We have the data like this And we have the attribute in there which has on the node attribute For the body, the creation time, the user, the user ID only Not the user information And we also have So basically the output of this one is not enough for normal case You get the information of the node What if you want to display the information of the user who created that node So you need to make another reference In this case, in my case, it will be the Phi here Because in the node article I have a Phi image A few images, sorry And the JSON API will not put it inside this object It will put the image into an include here And the job of the normalizer is to glue this Phi field Into the corresponding node correctly On the step two, after running the normalizer from the JSON API normalizer It will transform your data into this form It will return you the result which is the list of the article And it put everything into an object here so that you can You have a better structure of it But it's not exactly what you need Because it didn't put the Phi into the node correctly yet That's why I need to have another step to manipulate the data that I need So this is the final output of the data that I want to have in my app So that I can display on the UI As you can see here, I have the few images Okay, I have the few images here In this few images I already have the real image object Where I can get from the Phi Phi from the include part I put it down ready So now that we have all this beautiful data We can start binding it into the UI So that is the third part about fetching data using React and Redux Let's go to another part of the application The main goal of this application is so that you can Bookmark some session that you are interested in And then you can find more information about that Like the description of the session Or the person who will give the speech So in order to do that You need somewhere to store the ID of the session that you bookmark And we can do it using Async Storage On the real application where you need to store complex data You will need to choose another solution For example, Watermelon, DB, S-square light or something else This is an example of how we can save the session So I will pass the session ID in here I will get the list of the existing session If it is known, just pass known here And then push it in there And then set it into the Async Storage like this This is quite a strength for me Do you have any questions for this? What is Async Storage? Async Storage is like an API that gives you access To the local storage of your application So you can store some simple data in Async Storage And you can retrieve it in your app Usually we use it to store the setting of your app Let's say in your application you want to receive notifications So I will store the flag of receive notification in the Async Storage And because Async Storage will store everything at a string So I need to stringify the session ID Because that is an array, so I stringify it Is it related to what is happening in the browser? To the local storage? For instance, can we have index db? It is a similar concept, but it is different It is just for the mobile app The second part, I will talk about it quickly Which is the caching thing So we don't want to keep fetching Whenever you open the screen So I implement a method named shouldFetchArticleUnit Because remember before whenever we fetch data Whenever data received successfully We set the timestamp for the last fetch So I will use it to check if in the last five minutes Did we fetch anything? If we already fetched, don't fetch anymore Just read it out from the state of the app If we don't have any information of the node Or if it is our day, it is more than five minutes Then let's do the fetch And what will it do when it fetch? Oh, no, sorry The next step After implementing the shouldFetch API I have another function Another method which is fetchArticleUnit Which is just a wrapper of all the logic that I put in there So first it will check to see If it needs to fetch or not We will pass the state of the app in here To decide should I fetch or not If it is yes, then fetch it So talking about caching here This is a very simple application But in real world application It will not be that simple And there are other things For example, if you use a watermelon DB You want to store on your data That you fetch from the server into the watermelon DB And you will have all the caching strategy for that Maybe in that solution You don't need to normalize your data Remember the normalize step that I mentioned before So the way that JSON API Cut your arm and your body and put it into the basket It has an advantage Which is let's say two nodes Sharing the same reference image And let's say we have two body here We are sharing the same leg here So whenever... If we keep the JSON API data structure Whenever the server updates something on that person It will update the information of the image Which is shared by multiple nodes And then you don't need to update it on individual nodes Like when you update one of them The sharing part will be updated And it will reflect automatically on the other instance So caching on the real world will be a bit more complex than this The next part It's just a fun part So we want to do some animation like this So in order to do that I use the animate API from React Native So this is from a library from React Native I don't need to install any third party packet or anything First I must say I need to thank Michio Even though he is not here Because he is the person who implement the animation on this one Let's go to see how it works In order to make it work We have a sprite image like this Where we define 27 states of the star And in the code I will define As you can see here we have the input range from 0 to 27 Which is 27 states And the output range will be the offset of the image Like if you are in stage 1 You will offset the image to the left 40 pixel State to offset to the 80 pixel The way that it looks is like this So this is the stage 1 State 2 State 3 State 4 The way that we view it will be a component like this It will be the green square That is what you can see But after that it's the sprite And it keeps scrolling from the left to the right So that you can see a different image And here is how we implement it We use the animate API And run 20 animation Like one after the other And on each animation After running it we will delay 40 millisecond So at the end of the day we have 27 states multiplied by 40 millisecond So on the action when you click it It will happen in one second Or rather And I must say that this animation is inspired By the like animation of Twitter So we didn't invent it The last part will be the build and release application So if you work with mobile development You will see that the deployment step Is quite painful and consume a lot of time Whenever you want to build a new application You hit the button and you need to wait For Excel or Android Studio To build a packet for you So usually it will take me like 10 or 15 minutes Or 20 minutes to finish the process And after that I will need to upload the file Into App Store or Google Play Store It takes a lot of time And then after that I submit, review And run out to the store But with Fastlane Which is the solution that I'm using here We can kind of minimize The work on the first three steps So we only need to run one command And it will do the three steps for you And all you need to do is to submit To the Google App Store Or you need to submit the app to review So Fastlane I think Fastlane is a project Back by Google And it's just quite powerful When it is You can use it not only with React Native application You can use it with Native application as well It's just a tool to automate On the step that you need to release the app So as you can see here For example this is the build for the iOS version First it will build the IPA file And then it will upload the test fly Test fly is like a testing platform Of Apple so that you can share the app Within your college or within your tester They can test it before you run it out to everybody So here we build the app And we upload the test fly And we will wait for it to process it When Fastlane finish running You will see some message like this And as we release our own step That it has done It will increase the build number Build the app and upload to Fastlane It's very cool to say that you saved 19 minutes And when I build this application I have been building multiple version of the app And I must say Fastlane saved me a lot of time Not to mention that you need to build for iOS And for Android at the same time So it takes a lot of time to do that thing But with Fastlane if all the configuration are done right You just need to hit one command And it will do everything for you Lastly, this is the link where you can download the application Which is on App Store, on Google Play Store And do you have any questions? Yes How many times does it take you to do a whole app like that? The first thing that I must say That the app is not very perfect We still have some work in there Because I did it in the rush And I think I started like two months ago And I worked on it half hour after work And during the weekend and on and off But it's not, I must say that not only me working on it There is Michiu who is the developer who makes the animation We have some designer, had with some styling And we discussed like on and off Yeah, I don't want to put you in the corner It's just because I want to know if it's accessible For everyone who would like to jump in such a... I find it, it's not a big project But for me it's something very interesting to do But I don't know if, let's say I'm not really used to the React Change I think it will take you... I think it will take you a while Because learning React is... I find it super hard at the beginning To be honest I have been with React for like two years But React Native I have been with it for more than a year But on and off And from the beginning I cannot get the way that React work But I just keep trying and trying And then when you get it, everything makes sense But the learning curve is quite steep I would recommend you to build some simple application This is considered a bit more than easy So do you need to use Xcode or Android developer studio? We don't really need to use it But sometimes you need to open it in Android or Xcode To build the app to see it And for this application it's very simple So we don't need to dive into the native code But on all the projects where I have the push notification I need to do some customizing in the native code So that you can receive the notification when you are on the phone So this will be good if you know a bit of this and that But it wasn't required? It wasn't required Yes What do you think about React and View? What do I think about React and View? People ask that question quite a lot But I'm not very deep into View so I cannot say about that I will omit on one project but I think it's quite useful It's quite cool but maybe I don't understand much about View And the fact that React hook has been released not long ago I think React is perfect for me right now I mean it's just a personal idea I think React native has been involved quite a lot The app that we are building here is not some hybrid application Because the way that React native works is we compile and translate On the JavaScript that you wrote into the native component So that is the real one So in terms of look and feel, both of them are the same But I think that when you have to work with some Performing heavy application, then the native code will be a lot better You didn't mention the debug Debugging in the React native application is quite stressful You can concern logins everywhere And you can see it in the concern log of Chrome So whenever you run, let's say, React native Run Android or iOS It will pop up the simulator Together with it you will have the browser open on localhost 8081 And then you can see it on the output that you want to print out Simulator in which... The simulator, that is the final part So the simulator of iOS comes from Pixcult The simulator of Android comes from Android Studio So in order to run it, you need to open Android Studio to run the simulator So you do need, to debug you need those two requirements Yes, correct Is there... Can you do any of that debugging in... Are you filming your Visual Studio at all? Sorry, VS Code? Sorry? Microsoft VS Code is an editor Never mind, I was just wondering if there's an alter Because if you're on Linux, for instance I'm not going to have... I'll never run Xcode So which is sort of a problem? I think... I'm not sure that you can view iOS outside of Apple Maybe there's a way, but I... Maybe you will run into some problem Which is very hard to figure out Sure Any question? So I'm not sure about the time Maybe this is the end of my session Thank you Before that, before we finish today I would like to show you a few more slides Which is about... On the web we are offering a few training sessions On September, October and November here If you need any help, feel free to reach out One of us here So thank you Thanks Robert