The app that took us less than 3 minutes to make seems to work on the iPhone as well. When we install and run, the app analyzes and shows what kind of animal face we have. Hello. I am JoCoding who makes a channel where anyone can learn coding easily. Today, we will quickly make an app that will run on both the Android and the iPhone. As we have seen on earlier videos, there are lots of ways to make an app. Today, we will make an app using the 'React Native'. 'React Native' is a library for creating apps, made by Facebook. The biggest advantage of the 'React Native' is that it can be used to create an Android and an IOS app at once, using one language
of JavaScript. This means you won't need to develop your app twice. Today, in order to quickly make an app, we will use the 'React Native''s 'Web View' method. 'Web View' loads the app on the internet browser, so you can create an app by just inserting URL. For practice, we will take the 'AI Animal-Face Test' web service from last time, and make it into a mobile app that can be released in the market. If you don't have a website to do the practice, refer to our previous video to make one by yourself. It will take 5 mins. Now, let's get to it. Watch the screen. Here is our content for today. First, we will set the development environment, then use the 'React Native' to code both the Android and the IOS app at once. It will take 3 mins. Then we will get it ready for publication. We will set an icon or splash image for publication, create an APK file, and directly run it. First of all, let's set the development environment. In order to create an app using the 'React Native,' we need to install these things on our computers. Don't they look complicated and annoying? Yes, we won't be doing it this way. Since it's annoying to install each one of them separately, we will use the 'goormIDE' service that we used in our crawling video. As a recap, the 'goormIDE' is a docker based service, and basically, it provides an artificial computer that has all the required programs readily installed. If we use this service, the development environment will already be set, and we can start coding right away. This is an official website of 'goormIDE'. I'll leave a link in the description below. Sign-up and press the 'Dashboard' button. Then, press the 'New container' button. This is the page for 'Create Container.' The container represents the artificial computer that we will use, with everything already installed. Now, let's quickly make a container. The name will be 'animalfaceapp'. No descriptions needed, and the region is Seoul(KOR). It will be set for 'Public' so that it is visible for anyone, and 'Private' will make it visible only for me. The 'Template' will be kept as 'Template', and the 'Deployment' will be set to 'Not used'. Under the software 'Stack', select 'React Native' that we will use. Now, click on 'Create'. Give it a little time, and our container will be created. Press 'Run Container'. We have entered our artificial computer environment. 'React Native' is already installed, the project is also already created, and it contains all the basic files. To describe the interface for the newcomers, think of it as a window screen. The File Explorer is on the left, and the Notepad is on the right. At the bottom, we have the Command Prompt. We call this easy-to-code environment as the 'Integrated Development Environment(IDE)'. For additional explanation, we will use 'Expo'. 'Expo' is a tool that will help us develop our app while using the 'React Native'. We could simply just use 'React Native', but 'Expo' will help us easily test and distribute our app. Without further description, let's get to it. Since our environment is ready, let's get coding. As always, we don't need to memorize any code. Search for 'expo react native webview' on Google, the first link will direct you to an official documentation provided by 'Expo'. 'Installation', like this, and 'Usage', like this. First, copy the 'Installation' code and paste it onto the 'goormIDE' terminal. Press Enter. Automatically, something is installed. Then, copy the 'Usage' code, open the 'App.js' file, select all by pressing 'Ctrl+A', and finally paste it by pressing 'Ctrl+V'. Now save it. If you look at the code, there is 'Webview source={{ uri:' and then an address. We can recognize that the address will lead to whatever that will be shown in the Web form. So now, we will bring the 'Animal-Face Test' web link that we previously made. Copy by pressing 'Ctrl+C' and paste it in the place of the address, after 'uri'. Save again. Now, we are done with the coding. Let's run it. Press the 'Run' button on the upper-right part of the screen. A QR code will load, like this. Search for 'expo' in Android's Google Store, and you will see 'Expo project' app. Install and run the app, and we will see 'Scan QR Code'. Press it, and scan the QR code. We are now able to test the app on our smartphones. Likewise, connect to the App Store on the iPhone, and search for 'Expo'. Install the 'Expo Client' app. After installation, run the basic camera on the iPhone, focus on the QR code, and a 'Open with Expo' button will pop up. If you click it, we can run and test our app right away. The app works on the iPhone in less than 3 minutes after we made it. After we checked that it works well on the iPhone, it's time to prepare for releasing on the market. Open the app.json file on the left. It contains various information needed to be released on the market. We'll fill them up now. The first one at the top, 'name' is the name of the app that will appear below the application. I'll name it 'animal face app'. Leave others as it is and I'll now change the app icon and splash image. Google 'expo app icon'. There's a document about app icon distributed from expo. If you read them, 1024 x 1024 size is the best and expo creates the rest for you. Make the splash image in 1242 x 2436 size. The original icon is under asset. Like this over here icon in asset. It's currently empty. Delete these files using right click, and delete. And we'll drag and drop the newly made image and splash icon. Then it's in here. And if you google 'expo build app', there's a guide document about how to release the app on the app store or play store. We'll do exactly what the document says. First install something called Install Expo CLI. Then copy this argument written 'npm install'. Then paste it on the terminal screen. It automatically starts to install after you press the enter button. The installation is done. To prevent any error, choose the file titled .expo Right click, and press on delete. Return to the page and if you scroll down, you must write information about android and ios at app.json. Copy this, type in a single comma on the bottom of the app.json file and paste this. And edit the package name. Package is a unique ID that differentiates each app. So you have to come up with a name that doesn't collide with what others have made. It's usually com.your_company_name.app_name. But I'll name it like this. I'll do the same for the iPhone. When you look closely, there was one more ios. If it's also going to work for the tablet, set it true. Bring this and add a comma here, paste it underneath and I'll delete what used to be at the top. Save it. Additionally, because this app uses camera to take pictures or access the album to export the pictures to detect if it's an animal we need an access authority. Google expo permission and you can find a document related to it. Following the guide, you should install this first, so copy and paste it on the terminal screen. Press on enter and it will automatically be installed. Installation is finished. If you look at the bottom of the document in case of Android, all you need to do is add this in app.json. For more information, click 'read more about configuration' to find out. Copy what is written down here in 'permission'. Insert a single comma at the end of android version and paste it. Remove the comma in the back and we don't need this much authorizations for this app. I'll leave what's only necessary. Access for camera, and READ_EXTERNAL_STORAGE which allows you do read albums or files. And leave these two and delete the rest. Save using ctrl+S. Now setting for android is done. We'll download it in APK file format that we can install(release). Of the documents we saw previously, if we look at the one for app release, we added this, and to start building, all you have to do is enter this. Copy this and paste it in the terminal and press enter. Now you get the message that you have to log in. In order to build, you need an expo account. If you don't have one, you can select 'make a new expo account' to make one. Using your email address, user name and password, finish the sign up process. You're done signing up. And now it's building.
It's a question where the keystone will be managed. Let expo do the stuff. Press enter. If the building is somewhat done, you can see this address. Go to the address and you see the sign in page. Sign in by using the ID you made and you can check the building status at expo web page. If you wait a bit more, building is done. Press the download button on the left and you can now download the APK file. If you access using the url through the android smart phone, you can download the APK file using your smartphone if you press on the download button. You get this message because it's not officially registered in the market. Just ignore it and continue installing it. After installing, you can see this splash image, your app screen is working well, and the touch works well too. You can access your files perfectly if you press on the 'upload image' button and if you attach the image, you'll notice the detection of animal face is working very well. Next time, we'll release it on the market and also learn how to make money by adding ads. If you found this video helpful, press on like, subscribe and keep the alarm on. It helps a lot for me to keep making vids. I'll return with much more helpful video next time. Thank you.
