Translation | "JavaScript Everywhere" Chapter 25 Mobile Application Released
Write at the top
Hello everyone, I am Mao Xiaoyou, a front-end development engineer. An English technical book is being translated.
In order to improve everyone's reading experience, the structure and content of sentences have been slightly adjusted. If you find any flaws in this article, or if you have any comments or suggestions, you can leave a message in the comment area, or add my WeChat: code_maomao, welcome to communicate and learn from each other.
(σﾟ∀ﾟ)σ…:*☆Oh, good
Chapter 25 Mobile Application Release
In my 90high school in the middle of the last century , TI-81downloading games for your graphing calculator was a trend.
Someone will get a copy of the game, and then it will spread like wildfire. Each of us takes turns connecting the calculator to another calculator with a data cable to load the game. Playing games on your calculator is a way for you to finish your spare time after class or in the study room, while maintaining the appearance of doing homework. However, as you can imagine, this distribution method is slow and requires two students to stay connected for a few minutes, while the other students can only wait. Today, our digital pocket computer is much more powerful than my rudimentary graphing calculator, partly because we can easily extend its functionality through installable third-party applications.
With our initial application development complete, we can now publish our application so that others can access it. In this chapter, we will learn how to configure our application.
Then we will Expopublish our application publicly on.
Finally, we will generate Playapplication packages that can be submitted to Apple or Google warehouses.
app.json configuration
ExpoThe application includes a app.jsonfile that is used to configure application-specific settings.
When we generate a new Expoapplication, a app.jsonfile is automatically created for us . Let's take a look at the files generated for our application:
{
"expo": {
"name": "Notedly",
"slug": "notedly-mobile",
"description": "An example React Native app",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 1500
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true
},
"android": {
}
}
}
Most of these configurations are self-explanatory, but let's review their purpose:
-
nameThe name of our application.
-
slugExpoTheURLname used to publish the application , located atexpo.io/project-owner/slug. -
descriptionThe description of our project will be
Expoused when publishing the application. -
privacyExpoPublic availability of the project. It can be set topublicorunlisted. -
sdkVersionExpo SDKversion number. -
platformsOur target platforms, includingios,android,and web. -
versionThe version number of our application should follow the semantic version standard .
-
orientationdirectionThe default orientation of our application can be locked using portrait or landscape values, or the rotation direction of the user device can be matched with the default orientation.
-
iconThe path of the application icon will be used for
iOSand at the same timeAndroid. -
splashImage location and settings of the application loading screen.
-
updatesAfter loading the application, how our application should
OTAupdate the configuration over the air ( ). ThisfallbackToCacheTimeoutparameter allows us to specify the length of time (in milliseconds). -
assetBundlePatternsAllows us to specify the location of resources that should be bundled with our application.
-
ioswithandroidEnable platform-specific settings.
This default configuration provides a solid foundation for our application. ExpoMany other settings can be found in the documentation.
Icons and application loading screen
The small square icon on our device has become one of the most well-known designs in modern society. Close your eyes, I believe you can imagine dozens of icons, including logos or specific background colors. In addition, when the user clicks on the icon, an initial static "startup screen" appears, which is displayed when the application loads. So far, we have used the default blank Expoicon and startup screen. We can replace it with a custom design in the application.
I assets/customincluded a "notable" icon and splash screen in the folder. We can take advantage of them by replacing them with images in the assets directory or updating our app.jsonconfiguration to point to files in a custom subdirectory.
Appicon
icon.pngThe file is a square 1024× 1024pixel PNGfile. If app.jsonthe attributes we are using point to this file, Expoappropriate icon sizes will be generated for various platforms and devices. The icon should be completely square without any transparent pixels. This is the easiest and most straightforward way to include application icons:
"icon": "./assets/icon.png",
In addition to a single cross-platform icon, we can also choose to include platform-specific icons. The main advantage of this method is to include suitable Androidand iOSindividual style icon, especially if you are interested in using Androidicon style.
For iOS, we will continue to use a single 1024× 1024 png. In the app.jsonfile:
"ios": {
"icon": IMAGE_PATH
}
To use Androidthe adaptive icon, we need to specify a foreground image, a background color (or backgroundImage) and a backup static icon:
"android": {
"adaptiveIcon": {
"foregroundImage": IMAGE_PATH,
"backgroundColor": HEX_CODE,
"icon": IMAGE_PATH
}
}
For our use case, we can continue to use a single static icon.
startup screen
The splash screen is a full-screen image that is briefly displayed when our application is launched on the device. We can assets/customreplace the default picture with the default picture found in Expo. Although the size of the device will vary within and between platforms, I still choose to use the size of 1242×2436
Expofile. Then, Expothe image will be resized to work across device screens and aspect ratios.
We can app.jsonconfigure the initial screen in the file as follows:
"splash": { "image": "./assets/splash.png", "backgroundColor": "#ffffff", "resizeMode": "contain" },
By default, we set a white background color, which may be visible when the image is loaded; or, depending on the color we choose.
resizeMode, As a border around the initial screen image. We can update it to match the color of the screen:
"backgroundColor": "#4A90E2",
resizeModeIndicate how to adjust the image size for various screen sizes.
By setting containthe time, we reserve the aspect ratio of the original image.
When you use containit, certain screen sizes or resolutions will be backgroundColorused as a border around the initial screen image.
Or we can resizeModeset it to cover, which will expand the image to fill the entire screen.
Since our application has subtle gradients, we will resizeModeset it to cover:
"resizeMode": "cover"
Figure 25-1. Our application splash screen
This configures our icon and initial screen image (see figure 25-1). Now, we are ready to study how to publish our application so that others can access it.
Published by Expo
During the development process, our application can be accessed in the Expo Clientapplication on the mobile phone through the local area network . This means that as long as our development computer and mobile phone are on the same network, we can access the application. ExpoEnables us to publish the project, which uploads the application to Expo CDNand provides us with publicly accessible URL. In this way, anyone can Expo Clientrun our application through the application. This is useful for testing or quickly releasing applications.
To publish our project, we can click Expo Dev Toolson the "publish or republish project" link in the browser (see figure 25-2), or enter it in our terminal expo publish.
Figure 25-2. We can Expo Dev Toolspublish our application directly from
After packaging is complete, anyone can access https://exp.host/@/pass to Expo Client Appaccess the application.
Create native version
Although direct Exporelease is an excellent choice for testing or quick use, it is likely that we want to pass Apple App Storeor Google Play Storerelease our application. To do this, we upload the build package to the respective store.
Windows users
According to the Expodocumentation, the Windowsuser needs to enable Linuxthe Windowssubsystem ( WSL). To do this, follow Microsoftthe Windows 10installation guide provided.
iOS
The generated iOSversion needs to be available Apple Developer Programand is charged in 99USD per year . Using this account, we can add one to the app.jsonfile .iOSbundleIdentifier
This identifier should follow the reverse DNSnotation:
"expo": {
"ios": {
"bundleIdentifier": "com.yourdomain.notedly"
}
}
As the app.jsonfile is updated, we can generate a build. In the terminal application, enter from the root directory of the project directory:
$ expo build:ios
After running the build, you will be prompted to Apple IDlog in. After logging in, you will be asked a few questions about how to handle your credentials. ExpoBeing able to manage all credentials and certificates for us, you can allow them by selecting the first option at each of the following prompts:
? How would you like to upload your credentials? (Use arrow keys)
❯ Expo handles all credentials, you can still provide overrides
I will provide all the credentials and files needed, Expo does limited validat
ion
? Will you provide your own Apple Distribution Certificate? (Use arrow keys)
❯ Let Expo handle the process
I want to upload my own file
? Will you provide your own Apple Push Notifications service key? (Use arrow keys)
❯ Let Expo handle the process
I want to upload my own file
If you have a valid Apple Developer Programaccount, Expoa file will be generated, which can be submitted to Apple App Store.
Android system
For Android, we can generate Androidpackage file ( APK) or Androidapplication bundle ( AAB) file. Android App BundlesIt's a more modern format, so let's go this way.
If you are interested, the Androiddeveloper documentation describes the App Bundlebenefits in detail .
Before generating the bundle, let's update the app.jsonfile to include an Androididentifier. And iOSsimilar, which should be used reverse DNSnotation:
"android": {
"package": "com.yourdomain.notedly"
}
In this way, we can be used to generate application packages from terminal applications. Make sure to enter the root directory of the project and run the following command:cd
$ build:android -t app-bundle
The app bundle must be signed. Although we can generate signatures ourselves, we Expocan manage the keystore for us. After running the command to generate the bundle, you will see the following prompt:
? Would you like to upload a keystore or have us generate one for you?
If you don't know what this means, let us handle it! :)
1) Let Expo handle the process!
2) I want to upload my own keystore!
If you choose 1, the Expoapplication bundle will be generated for you. At the end of the process, you can download the file, which can be uploaded to the Google Playstore.
Publish to App Store
Due to changes in the review guidelines and related costs, I will not describe the specific process of submitting the application to the Apple App Storeor Google Playstore. EopoThe documentation is a good collection of resources and guides, and is a useful and up-to-date guide on the process of how to publish an app to the store.
in conclusion
In this chapter, we studied how to publish and publish React Nativeapplications.
ExpoThe tool allows us to quickly release the application for testing and generate a production version that can be uploaded to the application warehouse. ExpoIt also provides us with options to control certificates and dependencies.
In this way, we have successfully written and published a back-end data API, an Webapplication, a desktop application and a cross-platform mobile application!
If there is any inadequate understanding, please correct me. If you think it's okay, please like to collect or share it, hoping to help more people.