 Sort of ask, like, who's sort of a beginner for JavaScript encoding? OK, and who's like, does this as like your regular job? Who's like more of a, and who's just here because I had nothing better to do on a, OK, that's all right. So I'm going to talk a little bit about something I built in September. I started in September. I then worked on it and finished it in December. So I normally work in PHP, and I do a lot of business stuff. But I had this objective last year to build something in React Native. Does anybody know what React Native is? All right, cool. So I'll need to. What do you need? Oh, no wonder. Oh, you don't have HDMI? No, this is an old baby. This is the, uh. OK, because we need to connect from here in order for So I think you can, can you do through this work? No, no, no, no, no problem. Ah, got it. Tap the feed. No, no problem. Let me just turn off. It's all right. Let me just turn this off. How much time do you want me to, how much time do I get? Sorry. We'll do 25 minutes. All right, let's do it. All right, so this is where you can find me. Best thing to do is you can find me on email. I like to write a lot of strange stuff about tracking. Oops. Let's see here. Too much technology. So if you want to check out the slides, you can put them up on GitHub. I put it in the Meetup page as well. So I got a question. How many photos do you think the average smartphone user takes in a year? Any guess? How many photos people take in a year? Most smart. A thousand, any other guesses? Three thousand. Three thousand. Bigger, smaller? Two million. Why not? According to some research, and now this is sort of unofficial, the average person takes 475 photos a year. Now in my opinion, I take more than 475. But that's the average. And so I found this to be an interesting data point. There's all of these photos that are being taken, and there's all this kind of magic about the photos, but there's also this data point. And so what I got interested in was trying to understand this data. And so I wanted to understand what do your photos say about you or what do my photos say about me? And so what I'm going to talk about today is I'm going to talk about self-tracking a little bit about quantified self, about photo data, and then I'm going to talk about how I built an app on React Native. Just to give you my background, I'm not like a professional coder. This is just me figuring stuff out, trying stuff. So if some professional coder says that was a stupid way to do it, I love that kind of feedback. So like I said, this is my name is Mark. I'm a tech entrepreneur, mostly a web developer, a writer, and a rather obsessive tracker. And does anybody track stuff here? Does anybody track anything in their lives? Yeah, what do you track? Your expense is your money. Yeah, what about you? I track my sleeping hours. Ah yeah, how much sleeping do you get, you think? I try to get 8 hours, but not every day. Yeah, yeah. Anything else you track? You said you track? Yeah, steps. Steps? Yeah, anything else? You were telling me you use an app called Rescue Time, so that's a way to track your time. Yeah, what about you? Fitness Tracker. Fitness Tracker, yeah. So you're a runner? Yeah, anybody else track anything? Well, I will admit that I'm probably on the extreme of tracking. So last year I decided to do, instead of a coding challenge, I decided to do a tracking challenge. But to give you sort of the background, this is part of this kind of movement or this thing called the quantified self. The quantified self is this idea of measuring or documenting something about yourself so that you gain meaning or some insight. And I will admit that I'm a bit on the extreme side. I track a lot of aspects of my life. What do I track? Well, I track my time. Probably this is where I started. About three, four years ago I started to track my time. And the easiest way to track your time is this thing called Rescue Time. You put it on your computer and it starts looking at what you're doing and then you see, oh no, I spent two hours every afternoon looking at cat videos on YouTube or on Facebook or something. It's a little bit interesting. It's like you collect data and you get these insights from it. I'm also a big fan of tracking my tasks. And I use these because I believe that I can use my time more efficiently. I want to work less but get the same amount of productivity. And I've used this data to then kind of look at how my year goes. Because I think if you work a lot you get these burnout cycles. So that's how I use some of my data. I track way too much. This is some of the health data I track. So like a lot of you I track my fitness and different sort of things. If you want to geek out on something that you've maybe never heard of, look up this thing called Heart Rate Variability. It's a way to measure your stress. And it's extremely, extremely interesting. My guess is that will be the future of a lot of fitness kind of stuff. And so last year I did 4.2 million steps. And this came actually from a problem. Two years ago I was working way too much. I was 15 kilos heavier. I couldn't run, I don't know, 50 meters. And I'd get tired. And in the last year I've done two marathons, two half marathons of 5K. And I just feel better. And I think having data was very helpful for me to learn about different stuff. And then the other things I track, and maybe this gets even more extreme, how many books I read, the music I listen to, the TV I watch. Now this was mostly just for last year because this takes a bit more work. And I also built a year ago I built a podcast tracker. Does anyone listen to podcasts? Yeah, so this is a tool I built to keep track of how many podcasts I listened to. And so last year I listened to 298 hours of podcasts. I'm not sure if that's important data to have, but that's something I learned. And like a lot of you I track my money and stuff like that. And I've got all these explorations in the data as well. And so I can share that later. But what I discovered in tracking all of this data and looking at all of this data is that I think there's two opportunities or two things happening with tracking and the data space. And you're seeing this in startups and you're seeing this in the Singapore government thinking about stuff as well. The first thing I noticed is that there's still a lot of work to be done from deriving meaning, insight and stuff. There's all this data, but we're not really doing anything with it or there's a lot of opportunities to do it. The second thing I learned is I think there's still a lot of new data points to discover. So like I said, you know, working with the data and then getting more and more data. And in thinking about this over an entire year I kind of came up with an idea of a data point to track and to find insight. And that's your photo data. There's sort of two sides to your photo data, right? Does anyone know what computer vision is? What's computer vision? It's right. Like computer is able to understand what is in the photo, right? Like, you know, Google looks at all your photos and says you're taking all these photos of mountains or cats or, you know, sexy girls or whatever. But there's this other kind of data I was surprised nobody was thinking about or looking at. And that's the metadata, the context data. And so metadata is quite simple. It's the extra baggage. So when you take a photo, it tracks a lot of different things. It tracks the camera you used, the time you took it, the place you took it, and all kinds of like extra stuff. And it's like the baggage. So the metadata puts your photos in context. And so what I was thinking about, I'm like, damn it, there's all of these photos, but I don't really get any stories out of it. I don't really understand anything about it. So I kind of started digging in on this data. So I just took my photos and I started pulling out the data with all kinds of different tools, like Python and all kinds of stuff. And I found there's some different aspects of metadata that we can collect or the data's already on there, right? Location, date, camera type, all of this technical data about your photos, but there was no way to sort of aggregate it to think about it and to learn from it. And so I started asking my question, how do you get your metadata? Is that data important? And I tried a bunch of different tools, but like a classic maybe tracker or engineer, I'm like, nobody's built it, so I decided to build my own. And so about maybe three weeks ago, I finally launched the public version. So if you wanted to download it and like break the system, I created an app called Photostats.io. With a very simple idea, just pull all your photos, get all the data, and then if you want, you can try to learn from it. And so this was an experiment for myself and then an experiment in trying to build it in React Native. So just to sort of finish what I wanted to do was I wanted an app that would collect the data on my photos and then export it so that I could study it. Also, I wanted to get the data, so when anybody used like backup services like Google Cloud or any of those things, do you know what the problem with Google Cloud is? They throw away all your data, actually. So only one service that backs up your photos doesn't throw it away. And that's the sexiest one, it's Flickr, right? So if you're backing up your photos into Google or to Dropbox, unfortunately, they remove a lot of that data and so you lose it. So I decided I wanted to build something to sort of collect that data and even when you delete that data, you still have all of this meta-context data. So in early October, I had a business situation that got really fucked up and I said, damn it, I just want to build something. And so I wrote down this list. I'm like, all right, this is a weekend project. So if you're an engineer, you know what a weekend project is? It's a one-year project, right? It wasn't quite a one-year project, but a weekend project turned into much bigger. So I sat down and I'm like, all right, I'm going to build an app. I've built apps a long time ago, but I decided earlier in the year I wanted to do it in React Native. So React Native is a JavaScript library. I'll talk about it more that makes you able to build native apps. And so I made this up like, all right, I'm going to build a list, I'm going to build an app for three things and I'm going to do it in a weekend. And I had three things I wanted. I wanted to access photo library on the phone. I wanted to extract the metadata and I wanted to export the data. I said, all right, I'm going to do it in the weekend. And I decided to do it with React Native just to sort of give you a background about what React Native is. React Native is kind of another kind of framework on top of React. And so React is a JavaScript library to help you do all kinds of dynamic apps. So you're writing JavaScript code, or React code, to then generate an actual app. So anybody who remembers this whole cycle like five years ago, we would build web apps, right? So you'd have these web views. This is not a web view. It's not a hybrid app. It generates is native code in Objective-C and code in Java. So it's extremely powerful and it's built by this very small company called Facebook. And there's a couple of very famous apps that are built on React Native. Probably the most famous one that probably all of you have and you probably didn't know is the Airbnb app. That's built on React Native. So that can give you a sense of how maybe sophisticated an app you can build in React Native. And it's extremely popular. I'm going to try to explain it just really fast, high-level what is React. So React is a kind of... I don't know, is anyone a React programmer? Can you explain what React is? A component-based for what? Yeah, reusable components that work with the DOM, right? So it's a kind of predictable pattern. Is there a better definition to anybody? Because actually, I don't do React. I just do React Native. But this is a good way of sort of explaining it. You create these components that you can reuse over and over and over again. So one of the powers of React Native, like React, is the code is really reusable. And I'll show that a little bit. But the way React Native is slightly different is you build these components and then it uses these connectors that then generates the native code in iOS and stuff like that. I'm going to skip this. So the basic gist is React renders to and manipulates the browser's DOM. There's probably a better definition, but that's how I understand it. React Native is not rendering web-based views. It's in fact invoking the APIs of Objective-C to create iOS components and Java APIs to do Android components. So it's creating real stuff. And the code you write feels a little bit like HTML. So one of the cool things, if you're really a basic programmer or just like a really lazy programmer, you can do all kinds of amazing things with very basic knowledge. And so you have these kind of React components that are HTML components and they kind of fit with what becomes React Native View. So you've got the view, the text, the list view. And you use these and a lot of similar ideas to how you do HTML. I'm going to skip this. If you ever want to learn how to do it, super easy, you go on the Facebook page and it'll explain how to get started, but I don't always time. So my weekend project was these three features. Get to the photo library, extract the metadata, and export the data. And so I'm going to show you real fast how I built this in a weekend in a very bad way. So there's a little command you do is it'll generate all of this code. React initiates. And I want to look at two or three different files. So the first thing is the index.ios.js. And so that's a pretty simple file. I don't know if it's big enough. So there's just a couple of lines of code and this is almost you just do it once and you do it. So this is the code to register it and create your app and create its name. Super simple. And then what we're doing is we're sort of linking it to the app.js file. And so in my case I did a bit of research and I discovered I really only needed one API. So meaning the React Native API for this camera roll. Looking back I may have done it a different way, but I was able to sort of Google, Google, Google, search, search, search and there was the method I needed was get photos. And so we'll just kind of skip over this a little bit but this is the code in the app.js and so this is sort of the navigation flow. I don't really have time to talk about all this but the main thing is that we've got this first image list that's one file that does most of the work. And so I don't really have time to explain it all but you're importing all of these different component parts. So from React Native we've got all of these little pieces and so the main one I ended up using is this one called camera roll here. Oops. And then just to sort of get this a little bit farther along this is the code to create the gallery. And so this is not great code but I had two goals. I needed to collect everything in the dates and then collect the photos. And I then invoked it. So I used this simple method. I mean this code is not beautiful but this is the code I wrote in a weekend and I don't really know JavaScript either. But it's a pretty simple method right so you use the camera roll to then call the methods and then you use all these different steps to extract the data. You can look at it online. So the point was at the end of the weekend I had accomplished one thing. What was that? I was able to access the photo library which was cool. So I was able to access the photo library and to get some basic stats. I wasn't able to get the full metadata. I was able to get some metadata because the camera roll API gave me some stuff. I wasn't able to really export the data because I didn't have a data model. I didn't even really know what the data model was. And so at the end of the weekend I sort of changed my objectives. All right I need to start with figuring out what the library is to get the data. I also needed data model probably for me the biggest problem about thinking about apps and thinking about this different way of doing about it is I didn't know how to manage data. So if you come from a web background you're always like I'll just ask the database. Everything's in the database, get from the database. But when you're in an app world it's a little different and maybe you don't even want a database. So the other thing I discovered is my code had no structure. I didn't know what I was doing and I really had terrible, terrible UI and design. So I decided after the weekend I really wanted to start cheating. So I did a couple of things. I decided I needed starter code. So I built my next version using native base. So this is a really cool library where you can get all kinds of decently designed components for React Native. Meaning how the buttons look, you can get all these different things. But I decided that wasn't even good enough yet. I wanted to cheat one more step. So I decided to buy a React Native theme. I didn't want to do the design. I also needed to learn. So I spent 100 bucks and I got this nice looking design. So this was a cool one. It was called the flat theme. And you'll see how that's the basic design I ended up using. And what was cool about this is from a learning perspective I had a group of people that do their own React Native code all the time so I could copy their structure. So when you're doing anything new, the biggest stress is you have no orientation. So when I got this theme I had a structure to work in and I could relax and say, alright, I can write code here. Their code is the navigation. Or their code manages some of the data structure. And so not only did I get an app that looks better, I also was able to know where I needed to put my own code. And so just to get a sense of the structure is a lot of the same stuff remains, but we're using all of the sort of presentation stuff is in the screens. There's a kind of theme layer. And then there's these components. And so that's what you were saying. This code you can reuse over and over and over again. Alright. So this was the other thing I got from this theme is I got all of these pre-built screens. All these pre-built pages. And so I could use these as the starting point to do whatever I wanted. I wasn't going to use the design exactly. I wasn't exactly going to use the features, but I had starter code, which was awesome. I also found a library. One of the lessons about React Native and probably most coding is use open source code with like vigilance, right? Because unfortunately there's just so much open source code that it might look like it's solving your problem, but you might actually waste more time figuring it out. But this library did work for me. I'll talk about this a little bit. Probably the biggest thing for me to learn and I think learning in general about maybe React Native and apps in general was data management, data storage and data models. Because I come from a background of doing stuff in SQL, right? And so that's kind of the way you think. But what I started working, so I probably had multiple solutions to this problem and I sort of kept thinking do I want to back end some persistent storage? How do I do all of this sort of modeling? And that's probably because I'm sort of a lazy programmer who never really studied stuff. But what's cool is because React Native has so many patterns, you just follow the most popular patterns. And so one of the important patterns is this thing called Redux. And so I don't know how would you explain Redux? You're not familiar with that one. But Redux is basically a library that helps you manage the state. So when you're doing React Native stuff in React in general, you're throwing all kinds of stuff into the state object. I mean, we all know this in JavaScript, your state object can get like pretty crazy. And so this is sort of patterns that make it more manageable. I'm not an expert either. But one of the things I started working this out was I needed to I have other ones, but I really had two objects I needed to define and manage. The object and the image object. The point being is my photos all needed to be stored in an object around dates and I needed to store the information around an image object. We don't really have time to talk about this, but I can kind of give you the gist. The gist is I sort of define the objects in these things called reducers. It's another sort of structural stuff. And then I defined everything in the date object. The actual, I didn't realize this at the time, but essentially what I got was a JSON object that I could then extract. It's not exactly that, but that's how I understand it. I eventually started thinking about how I was going to store this data. And so there's a couple of options. There's this async storage where you can sort of built into RAC Native. You can use SQLite. You can use Firebase, which is the Google thing. There's another one called Realm. You could also build a backend. Something called React Persist. And what I decided was I didn't want a backend. I decided no backend, because one of the cool things, at least for now, is if you're extracting all of your photo data, maybe you don't want to share it. So that's all stays on the app. So I said no backend. That was kind of like the challenge. No backend. Store locally and sort of have a model that's for exporting and doing some stat stuff. Well, so imagine four weeks later, blah, blah, blah, blah. I figure out a bunch of stuff and it looks like it looks okay. I'm getting my stats. And I've started creating some reports. So these are some of the screenshots. I'm going to skip this. So you can ask me more sort of technical questions about this. That's just sort of a general overview. But I wanted to sort of share my lessons learned. Because I don't have a big background in JavaScript or a strong background in JavaScript. So this was kind of my first entry point. And what I found is as a web programmer, it was a pretty cool entry point to doing mobile apps. Because a lot of the syntax is readable. I didn't get to show it very clearly, but as you can see, you have this syntax to create styles that feels very familiar to anyone who does CSS. So like I said, React Native is a good entry point for web developers to get into mobile apps. I actually found that React Native apps perform really well. They're really fast. So if you want to download it, you can try it. When you're doing it on your computer, because it's emulating it, it's a little bit laggy and slow. But once you get it up in the app stores or you generate the executable, it's quite fast. The theming is pretty good. And I was really happy that I could steal or cheat using a theme. They're like, it looks so bad, I don't want to try it. So I was really happy that I had like a theme and people are like, oh, that looks so nice. I'm like, yeah, I'm a great designer. So I found that to be really empowering that I could get over this like, because people are so used to really good-looking apps now. And they don't want to try a not so good-looking app. So I was really happy that I could find a theme. And there's a couple of other ones that are good as well. For 100 bucks to get a good-looking thing, and I'll probably change it one day. But now it's a good start. And of course I think React Native has a huge community of code, and that's what I discovered. I could use Stack Overflow for almost every question I had. There are articles, tutorials. One of the hints, I don't know if anybody uses this thing called js.coach. It's a really good tool for looking for libraries. And I found that to be really beneficial when you're trying to compare. It's a little bit of a curated library. I also learned that not all open-source codes create an equal. I mean, we all use it. And some of the stuff I used was not that good. And so I would say one of the lessons is as much as possible, use the React Native's core APIs. Uh-oh. And sort of the last one that I found interesting, and that I'm still going to keep working on, is you can use React Native code with regular Android or iOS code. So even if I'm never going to learn the deep technical side, I can probably build a very technical app that uses React Native for all the presentations in all of the other parts. All right. And so to conclude, I built this thing. What did I learn about myself and about my photos? And now I've got about a hundred people that have downloaded and tried it and exploring their photos. One of the things I've discovered is that when I stopped taking photos, I'm probably not as happy. It kind of surprised me. Like, because I don't take a lot of photos. But I discovered that if I'm not taking photos, there's probably something weird going on. It could be I'm sick, it could be I'm watching too much TV. But if I'm taking a couple photos every day, it means I'm going out in nature, actually. Probably the biggest thing I'm like, oh, I took some photos, that means I was outside. I've also discovered that when I have huge spikes of a bunch of photos in a small period, it's probably something special. You know, maybe it's a wedding or something. I'm still working on this, right? So this is kind of the next thing. Like, I've got this data. What can we learn from it? You know, can we do some machine learning? Can we come up with some insights? And I've sort of launched this as an experiment just to get a new data point, a new thing about myself. So that's the website. If you want to download a free app to sort of geek out about your photos, it's at photos stats.io and this is all of my information. Thank you. Any questions? Why did I do that? I don't know. I guess probably like a lot of programmer things that heard the name a lot. It sounded really hip and cool. I actually probably didn't know what not to know. And so what I did, I think, I don't know about like you guys at the beginning of the year, I always had to get ambitious. I'm like, I'm going to learn this new thing. And so I guess it was probably in March. I'm like, I'm going to learn React Native. So I took a course and then of course for six months I didn't build anything with it. And then when I had this idea, I'm like, I know enough to be dangerous. And so I decided to actually do it. I'm pretty happy. I guess I, I'm not sure. I mean there's always different stuff to try but I feel like this is going to be a lot of mobile apps are built on this. It's really fast. For as bad as I am, I could build something that's pretty decent. It's pretty robust. It works on both Android and IOS. So I would say that it took me, you know, a month to do it in just my free time to get the IOS one and to get the Android one only took another two days because there was one like data model problem. That's pretty amazing, right? And apparently you can also do it on Windows phone but I don't know why would you, right? Any other questions? Yeah. So you mentioned that you have to do some native code? You can. So I guess the point so looking back, I probably would. If I'd rebuild this, I would probably have a professional person write the code that will extract the data from the photos because it's more efficient. This is, I mean it works and the libraries work but it's not very efficient. So if you really wanted to get high performance from because I'm not taking the photos, pushing it to the cloud and extracting it, it's happening actually on your phone. It's really hard to optimize because you're just kind of too many layers away but what I learned is that I can create component or I mean a library that's actually in the code that's for Android or the code that's for CC and so I guess I could see it as it's very easy to mash them up in the sense if you have a very important thing that really works best as close to the native, you might do that and actually what you also discover so I didn't show this but all of the libraries, like I use Crash Analytics and Fabric to track some of the analytics, all that code is basically just a the React Native code is just sort of a link between the actual iOS or the Android code. So that's actually kind of the standard way stuff is being done I don't know if that makes sense. The React Native is frequently upgraded and they change, they break the compatibility. So how many times do you have to grow? Well, it's only been a month. Ask me another month. I would say one of the other things, I didn't have time to talk about it, I spent a couple of days learning how to do continuous integration. So I used, there's a really cool tool called what is it called? To do deployment bit rise? I don't know if you heard of bit rise. So one of the things that happens as you change computers and as you do different stuff, like, I'll be honest Android always fucking breaks for me. I have just, I don't know, I would say I lost more sleep about trying to get my computer to use the right version of Android to do all that stuff. And so I got so angry at this, I'm like I need a way to deploy this to the cloud. And so bit rise was really cool because you take your Git code and then it does everything to render it and it actually ships it to the Apple store or it ships it to the Play store. And so even if say I don't have time to work on something, I could have someone else work on it and I can still deploy it. But you're probably right. I mean this is still fairly raw. It's only, Rack Native is only two, three years old. It's still changing. I would say the other thing, like the library I use, the Camera Roll API, I will bet that will probably disappear or change. But yeah, yeah. So I mean I've done React Native before and Expo is much easier. But you chose not to use Expo, is there a reason? So I don't know if I told this side of the story. So I live in China most of the year and Expo just was really not working for me in China. So like, because I think there was just too many proxies. I think Expo is a proxy and having a proxy on top of it didn't work. So, but yeah, just to sort of, so there's another system called Expo where how would you explain what it is? It's kind of another, it's another API on top of React Native. So you get some more, some It's an app of apps. It's an app of apps. Yeah. I was a little bit nervous about it because it always, I felt like it has to go through another company. So there's like two sides. One, it wasn't working for me when I tested it because of whatever reason. And the other one I just didn't really like Expo, I don't know if they're good or bad or otherwise. It's like another company that can like screw over my app. But do you think there's a big difference in the kind of code you write? No, so it's, so they are the official provider of the creative React Native app, CLI. Okay. Yeah. So like they're officially recommended by Facebook as like you should start here. But they only, this is related to my first questions because Expo only does what Expo allows you to do. That's true. Once you need to access the native device, for example, playing the sound and you have to inject from Expo and go straight to React Native. And that's, I mean, you know, you seem to have started straight in React Native and that's a little bit harder. But I just found the development experience in Expo so much better. It's got better documentation probably. That's true. Yeah. So deployment is always an issue on mobile apps. So I'm a huge fan of this bitrise after doing it. I mean, it's so awesome. You just, you just hit the little button in the web and it turns out and it's post your app to like test fly and all of this stuff. It's awesome. I mean, I get like celebrate. I open a beer. It's like distributing my app. But it took me two days to figure that out. But like that sort of automation saves me tons of time now. Anybody that does mobile apps knows just how long it takes to render them. And even just for minor changes. Do you think that improved your iteration speed? My thing is I haven't deployed yet so I was very impressed by it. This is your first app and you've already done it before. Yeah, it's just embarrassed. I mean, you just ship it, right? You should download it and tell me how bad it is. Oh, okay. It didn't break your computer? No. Yeah. Yeah. Cool. Any other? Yep. So the next speaker Ian, are you here? Sweet. So he wants this thing?