在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):kiwicom/mobile开源软件地址(OpenSource Url):https://github.com/kiwicom/mobile开源编程语言(OpenSource Language):JavaScript 98.0%开源软件介绍(OpenSource Introduction):This is not an actual mobile application. This repository contains only React Native (RN) parts of the project. These parts are being used in the original (private) native code. However, you can still run this application to see these parts in the pure React Native. Table of Contents
Installation and Run
All necessary information are described in the official React Native documentation. Basically you need to install macOS dependencies:
Install Xcode and Android Studio. After that clone this repository and install all the necessary dependencies:
And if you have Xcode already installed - just run It's also possible to open other devices from command line to test tablets for example:
Similarly for Android ( You need to make sure that your Android emulator image supports Google Play Store. Look for this symbol: Moreover, make sure you have a valid personal Gitlab token and set it as your environment variable: export RNKIWIMOBILE_DEPLOYMENT_TOKEN="YOUR_TOKEN_HERE" also you should add two files
and
and you have to create the debug.keystore file:
TestingYou will usually need only this during development:
You can also run tests without all the verbose messages produced by console.(log|warn|error) as such:
It's good idea to run the whole test-set using this command:
It basically consists of code linting, type checking, complete testing and GraphQL schema validation. You can find more possibilities by running BuildingWe use Fastlane as a tool for building, codesigning and uploading to App Store, Google Play and beta testing environments. If you want to build just a JS bundle files simply run following command:
You'll then find output files in the Fastlane installationYou need to do several steps in order to be able to deploy and build this application:
Fastlane run instructionsIn order to build and deploy this project to the TestFlight just navigate to the
This new build has to be distributed to the (external) testers. To do so just go to iTunes Connect, select the right application > TestFlight > iOS builds > select build number > Groups (+) > select the group of testers > next, next, next... On android, navigate to the android folder and run
The newly build apk will be found in EnvironmentAll sensitive environment variables are stored in Information for Kiwi.com employees: all environment variables are shared using Vault. Ask your colleagues how to get them. You'll first need VPN, secret key (token) and Vault namespace. Project structureThis project uses Yarn workspaces so the root directory is actually so called "workspace root". Workspace root is responsible for handling this repository (especially testing). You can find all sources inside of the
In case you need additional dependency for the package, you should add it to the Native modulesThe native developers have prepared some native modules that we can use in our code. They are available through an npm package called Adding a new native module
Logging moduleIt exposes two methods
And 4 types: const Type = {
ANCILLARY_STEP_DETAILS,
ANCILLARY_STEP_PAYMENT,
ANCILLARY_STEP_RESULTS,
ANCILLARY_STEP_SEARCH_FORM,
}; Usage: import { Logger } from '@kiwicom/mobile-shared';
Logger.ancillaryDisplayed(
Logger.type.ANCILLARY_STEP_DETAILS,
Logger.Provider.ANCILLARY_PROVIDER_BOOKINGCOM
);
Logger.ancillaryPurchased(
Logger.type.ANCILLARY_STEP_RESULTS,
Logger.Provider.ANCILLARY_PROVIDER_BOOKINGCOM
); Translation moduleIt exposes one method
Usage: import { Translate } from '@kiwicom/mobile-shared';
const someString = Translate('translation.key.to.translate'); Currency moduleIt exposes one method
Usage: import { CurrencyFormatter } from '@kiwicom/mobile-shared';
const priceInEuros = 500.34;
const currencyCode = 'NOK';
const priceInNOK = CurrencyFormatter(priceInEuros, currencyCode); Note that in development, it uses a "dummy" currency formatter, so it is possible that some decimals appear as Best practicesAccessing arbitrarily nested, possibly nullable properties on a JavaScript objectSometimes (especially in GraphQL environment with nullable results) it's necessary to access deeply nested objects in order to get the value. However the path may contain nullable fields and therefore it's necessary to do checks like this: props.user &&
props.user.friends &&
props.user.friends[0] &&
props.user.friends[0].friends But that's not very friendly and this is why we have const friends = props.user?.friends?.[0]?.friends; Do not use Error handlingError handling is complicated in general - especially in GraphQL environment. There are several scenarios that may occur:
This should be considered as a valid full response and there should not be any errors. There may be nullable fields, however.
This is fatal error. Server was not able to get data and it's probably not operating correctly. It's like equivalent of total GraphQL server error (500). We should display full page error (
Most common scenario (somewhere between). In this case we are able to fetch at least something but it failed partially so there are errors and we can expect some nullable fields. This may be just missing prices but also completely missing data. It's very different to point 2. We are showing little warning in this case. How to handle nullable fields really depends on the situation. Sometimes it's OK to leave it empty instead of for example hotel rating (★★★), sometimes it's necessary to display error message or sad picture in case of completely missing hotels. It depends. We are always trying to render as much as possible. Working with PlaygroundThere is so called Playground for easier development. It's our custom WIP replacement for Storybook. The idea is to write regular component tests with ability to see them in the Playground. Therefore you need to write only the tests and you don't have to maintain additional stories. Example of simple test: it('Works!', () => {
PlaygroundRenderer.render(<AdaptableBadge text="default badge" />);
PlaygroundRenderer.render(<AdaptableBadge text="badge with color" color="red" />);
}); The To start the Playground, you need to switch which //import App from './app/App';
import App from './packages/playground/src/Navigation'; in Working with GraphQL APIThis application uses GraphQL API as a data source. You can find GraphQL schema in
Additional useful tools:
Working with translationsCurrent implementation is little bit dodgy because we have to use native code (requirement from native team). The underlying implementation is basically this: - (NSString *)translate:(NSString *)key {
return key;
} So it returns key back. However, this happens only in development environment and it should return real translation in production (we cannot test or use it in development). For this reason we have custom fallback vocabulary and we touch this repository if underlying code returns unchanged key. You always have to use the following component: <Translation id="Core.Authentication.Login" /> These components should be enforced everywhere we need to use translations (button titles, children of the <Translation passThrough="★★★★★" /> It comply with the translations interface but it returns the property value directly back without even trying to translate it. There are also situations where we need to return multiple translations but this is little bit more tricky because it's not possible to nest (or concat) multiple translations. You can use <TranslationFragment>
<Translation passThrough="★★★★★" />
<Translation id="SingleHotel.Rating.Stars" />
</TranslationFragment> This fragment also comply with Flow types and it has similar behaviour with PhraseAppWe use PhraseApp for managing translations. All keys and relevant screenshots are deployed automatically (the deployment script must be executed manually though):
(we need to improve it - this is just PoC) How to create screenshots? Open iOS simulator and press
Upgrading dependenciesCheck all dependencies with
E2e testingWe use detox for e2e testing.
Note: One of our tests AndroidDetox is currently stable for android on RN-versions <=0.56. It runs on android, but there might be some quirks.
To run, first create an emulator in Android Studio with the name iosios should work just fine. Just do Upgrade react-nativeSince we upload our dependencies to maven, and these depends on the current version of react-native, there are no maven packages whenever we upgrade react-native version. In order to test it locally, you need to replace all occurrences of Remember to undo this changes before commiting. This is just to be able to test after upgrade |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论