Posts

Showing posts with the label Web-app dev

Recently uploaded post

Insta4, React Native Icons

Image
   For developing mobile application like Instagram with react native and typescript,  this writing explains how to use React Native Icons. This article is continued one from previous article. 1. Install and set up for icons Refer to official document for icons:  https://github.com/oblador/react-native-vector-icons/tree/10.x?tab=readme-ov-file Install following packages and link it to CocoaPod. $ cd InstaTest $ npm i react-native-vector-icons $ npm i -D @types/react-native-vector-icons $ cd ios $ npx pod-install $ cd .. If your Metro server is running, you need to escape from it first by ctrl + c. When Metro is running, packages are locked so other package cannot be added. Set up for iOS : Edit the ios/projectName/Info.plist Below <key>UIAppFonts</key> should be added. ios/InstaTest/Info.plist ... < key > UIViewControllerBasedStatusBarAppearance < /key> < false /> < key > UIAppFonts < /key> < ...

Web-app dev5, Webview app submit to Play Store

Image
Final fifth Step This writing is about how to submit mobile application, especially Webview application to Play Store.  Webview application needs some one more extra verification, such as if the web is owned by the same owner of application, and I will explain about it in this writing. 1. Submit your application in Google Play Console First you should have developer account in Google Play Console. Create one and you may need to pay 25$ one time in:  https://play.google.com/console/signup Create app in your account. After you create application, you will see what you need to do further for application registration in Dashboard. Complete the each stage. All those information is used validation of this application by Google, so make it very clear and correctly. Store presence - Main store listing, here you write app information for Play Store. For example, your app name, description, app icon, screenshot etc. etc. In the description, you can't use repeated word or just list of wo...

Web-app dev4, Google AdMob (Banner and Interstitial ads)

Image
Fourth Step This writing is about my Fourth step (Google AdMob) to make my own mobile application, K-pop celeb like me. I included Banner and Interstitial ads in my React Native Web-view application. 1. Register your application in AdMob First you should have AdMob account. Create one in:  https://admob.google.com/home/ Set up new app in your AdMob account. AdMob account need some verification from Google and this will be done normally within few days. 2. React Native Banner ads For official document refer to:  https://github.com/invertase/react-native-google-mobile-ads First run the command: npm i react-native-google-mobile-ads Check your app ID in AdMob. Go to your app - app setting, then you can see app ID as below. Put your app ID in app.json as below. The app ID should be out of "expo": {}. , "react-native-google-mobile-ads" : { "android_app_id" : "ca-app-pub-111111111~1111111111111" } In App.js, import components to sh...

Web-app dev3, App test and build (Android)

Image
Third Step This writing is about my third step (App test and build) to make my own mobile application, K-pop celeb like me. If you want to see for iOS application build, then leave this page, because I made only Android application and submit to Play Store. To develop Android application, you need to make developer account at Google Play Console, pay 25$ just one time, but for iOS developer it is about 99$ every year. So it is not worth for beginner like me to make iOS developer account now. Maybe later with better skills.. 1. Expo development build to test (Android) Prerequisite: you need to install Android Studio first. Development build will make virtual Android device for real time test and you need Android Studio for that virtual device. Run the command:  npm install -g eas-cli Run the command:  npx expo install expo-dev-client Run the command: eas login You need to have expo account for it. If you don't have it, make one in:  https://expo.dev/ In the App.js, put: im...