Testing in Android Studio

[00:00:00]
>> Maximiliano Firtman: It's time to talk about how to test and debug your web apps. You already know how to use a desktop browser. I don't think that's gonna be something new for you. And also, you have a lot of content at Frontend Masters to talk about the dev tools and how to use them, but I think that it will be important to talk about the mobile space.

[00:00:17]
So let's talk a little bit about Android. So if you're install Android Studio. Android Studio, by the way, is the IDE we use to create native Android apps. But we are going to use it just for the emulator. By the way, you can download just the emulator. It's the Android SDK, but then there is no GUI, so you will have to deal with the terminal.

[00:00:38]
If you're comfortable with that, go ahead, just download the Android SDK and not Android Studio. But if you are just a standard average web developer, you don't have experience on that. So it's much better to just install Android Studio. When you install Android Studio, actually you will find under the tools, there are a lot of options, by the way, right, of course, in Android Studio, but actually you have the Device Manager.

[00:01:05]
The Device Manager is this first image that you see when you open Android Studio for the first time, where you can actually create emulators. Here they are called virtual devices. And by the way, with Android, we are using emulators. There they are now virtual devices, AVDs, Android Virtual Devices.

[00:01:28]
With IOS, this one it's called simulator. Does anyone know the difference between an emulator and a simulator without saying that one emulates and the other one simulates? So why we are talking about Android emulators, but we are talking about simulators when it comes to iOS? Does anyone know?

[00:01:49]
>> Student 1: Is it the layer of abstraction where you're recapitulating the system, one of them is actually building a virtual machine, and then the other one is just.
>> Maximiliano Firtman: Yeah, it had to do with that. So an emulator, and in fact, the Android one, it's a virtual machine. It's actually a full Android.

[00:02:06]
That's why, for example, here I have a full Android, is this one. That it's so complete that it even has the Play Store. I can install apps as if I'm a normal user. I can install games. You need a Google account assigned to your. It's really a virtual device.

[00:02:25]
And on the iOS side, it's a simulator. So it's an app that looks like an iPhone, but it's not really an iPhone. So it's not really running iOS behind the scenes. The thing is that iOS and macOS are kind of the same OS, the same base. So, yeah, there is a UI layer on top that is different.

[00:02:43]
And let me prove that. So let me open Safari. So I'm in Safari now in the iOS simulator, okay, so I will open what is typically the task manager in Windows, in Mac it's the Activity Monitor, right? So in the activity Activity Monitor, I can see all the processes that I'm running, and I'm going to search for Safari.

[00:03:04]
You can see there are a lot of Safari things. But why? Because plugins, I have Safari open, plugins and things. But there is one in particular that I need to find, this one, that says Mobile Safari. Did you see that? So there is a Mobile Safari process running right now in my Mac.

[00:03:25]
What happens if I kill the process? If I kill the process, I'm killing the IOS one. So here you can see it's not a virtual machine, okay? Makes sense? And what about my PWA? So if I open CodeMapM, is it Mobile Safari? In fact, if I search for Mobile Safari, it's not open.

[00:03:47]
So, no. Also, this proves that the PWA, Steve Jobs was saying, it's a sandbox. This is not really Safari. It's something else. Actually, it's called web app. It's web in Mac. In Mac apps, uses extension app, dot app, so it's web app. So the app is called Web.

[00:04:09]
So if I kill Web, I'm killing my PWA. So that just proves that this is a simulator. It's an app that is running on my Mac as an iPhone, despite that the Web App Engine and the Safari engine are the real ones. Okay, so they're not simulators, but the iOS is a simulator, okay?

[00:04:33]
Does it make sense? Okay, so let's go back to Android, we will talk about iOS in a second. So because it's a real emulator, I can create other instances. So if you go, again, back to the Device Manager, we have the Device Manager and we have the current running devices.

[00:04:50]
If you don't find these icons, they are in the tools menu. So here I can create a new virtual device that will get me to this dialogue where I can actually select the hardware that I wanna simulate, emulate, sorry, we're on Android. So, this is just defining the screen resolution, the version of Android.

[00:05:09]
It's important, at least for PWAs, that you pick one that says Play Store. I mean, you will be able to debug PWAs anyway, but not with the best solution. So we want an emulator that has Play Store. So you pick one, it doesn't matter. Next, then you select the version of Android that you want to use.

[00:05:32]
By the way, you will have to download those versions of Android. In this particular installation, I have version 31, this is Android 12. But if I want Android 14, you go here and say, I wanna download Tiramisu, okay, and it will download this 1.5 gigabytes. I don't need to do that now.

[00:05:51]
And then when it's done, you will assign that version. I can just create another one on 12. You put a name, you can change some properties like on advanced settings, maybe i recommend you to change the amount of RAM. i mean, in this case, because it's a pre-arranged device that i selected, it's already there.

[00:06:11]
But have in mind, here it says two gigabytes, it will consume two gigabytes of your ram, okay? So If you want to emulate the Samsung Galaxy S23, then don't go and put the real ram there because unless you have 128 gigabytes of RAM in your computer. Okay, that emulator will eat RAM from there.

[00:06:36]
Okay, when you have one, you open the emulator from here. So you go and run it with the play button and it will appear here. And kind of that's all. But I have a problem that I didn't have here. I'm not sure, no one asked and no one thought it was a problem initially.

[00:06:55]
But I'm running this on localhost 3000, right? On iOS, it works. You saw it was working.
>> Maximiliano Firtman: I will click Stay On Top so we can see both at the same time, both the Android and the iPhone. So what happens if I go to localhost 3000 here? I'm getting an error.

[00:07:19]
Does anyone know why?
>> Student 1: It's an emulator, not a simulator.
>> Maximiliano Firtman: Because it's an emulator. So it's a virtual machine. So it has its own TCP stack. So it's looking for a server accepting requests at port 3000 on the Android itself, not on my host computer. So we have an initial problem, that there is a solution, okay, but we have this problem.

[00:07:44]
And why we don't have the problem with the IOS simulator? Because it's running on my Mac, because it's a simulator. That's another way to prove that it's a simulator. Okay, makes sense? So how to solve the Android problem, does anyone know? I will show the solution anyway but.

[00:08:01]
>> Student 2: A networking setting.
>> Maximiliano Firtman: And networking settings, so in Chrome Desktop, in Chrome Desktop, you can go to Chrome Inspect, and we are going to use port forwarding. So you open port forwarding and you need to add first the first box is for the port on the device, on the external device.

[00:08:23]
So in this case, my Android emulator 3000. And then IP address or host that you wanna map it to. So localhost 3000. You don't need to use the same port number. And be careful, check that this enabled port forwarding is there. So when you're done, now all the connected devices that you see here should get localhost 3000.

[00:08:49]
So now if I go in here and type localhost 3000, I'm getting my CodePad Masters app running. In localhost, but it's actually connected through a tunnel, through a TCP tunnel that is actually my host computer. If you close this page, port forwarding will terminate. Okay, so keep that Chrome Inspect page open all the time.

[00:09:16]
>> Student 3: Can I ask a question about the emulator?
>> Maximiliano Firtman: Yeah.
>> Student 3: If you want to see what a Samsung Galaxy would look like, for example, but it's not on the menu of options.
>> Maximiliano Firtman: So you go and create your own. So here you see some generic ones. Remember that you cannot actually use because the Samsung Galaxy Firmware is not open source.

[00:09:39]
So you cannot actually download the full layer. Okay, but I will give you a solution for Samsung anyway. But something that you can do when you're creating a new one. From here, of course, you can create a new hardware profile. And then you go to any website, bestbuy.com, whatever, and you check the specs.

[00:09:59]
And then you put here the resolution, here with the RAM, be careful, don't copy the RAM, you don't need to mimic the real RAM. With all the properties, and you can even select the skin, okay, or search for the skin. So if you wanna see really a Samsung, you can get a skin, okay?

[00:10:16]
But if you wanna run or try your PWAs on a Samsung device, you can use a device cloud. Firebase has one, and Samsung has one that is free. It's called the Samsung Remote Test Lab. You can get a free account. I think you have a couple of hours per day for free.

[00:10:38]
Actually, you can actually run these devices, even smart TVs, Galaxy phones, for example. And you can use one real device remotely, that's the idea. And you can open your browser, try your PWA. In that case, you should publish your PWA to a public server, okay? So making that tunnel, you can still tunneling the connection for localhost, but it's more complicated, okay?

[00:11:02]
But just go and try Remote Test Lab for Samsung, this, that will work. And for Firebase, you also have a free tier, it's the, well, here, the test lab, that's the name. It's a cloud-based testing infrastructure, it's actually more optimized for,
>> Maximiliano Firtman: Let's say, native apps, but you can still run your apps, right?

[00:11:29]
So they have real devices, okay, and you can try them and use them remotely.