Target โข Technologies โข Route
Type | Tools | References |
---|---|---|
Programming Language (App) | REACT NATIVE | https://reactnative.dev/ |
Open source platform | EXPO | https://expo.dev/ |
IDE | VISUAL STUDIO CODE (VS CODE) | https://code.visualstudio.com/ |
Design Interface Tool | FIGMA (Prototype - UX/UI) | https://www.figma.com/ |
Navigation between pages | REACT NAVIGATION | https://reactnavigation.org/ |
Open source Node.js Headless CMS | STRAPI | https://strapi.io/ |
Promise based HTTP client - browser & Node.js | AXIOS | https://axios-http.com/ |
Data persistence on device | ASYNC STORAGE | https://react-native-async-storage.github.io/async-storage/docs/usage/ |
Animation Library | REACT NATIVE ANIMATABLE | https://github.com/oblador/react-native-animatable |
- Part 1 - Set the development environment (Infrastructure)
- Build the project prototype: https://www.figma.com/file/15HnazfsI1NFV13fIXy1wu/React-Native-Insider-5?node-id=0%3A1
- Install VS Code (IDE)
- Install Expo CLI: npm install --global expo-cli
- Create a new project: expo init my-app
- Navigate to project directory: cd my-app
- Start the development server: expo start
- Configure the Expo Go on a mobile device or use an emulator
- Open the app on a mobile device: * On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal * On your Android device, press "Scan QR Code" on the "Projects" tab of the Expo Go app and scan the QR code you see in the terminal.
- Open the project on VS Code
- Install React Navigation on project: expo install @react-navigation/native expo install react-native-screens expo install react-native-safe-area-context expo install @react-navigation/native-stack
- Part 2 - Build API (Backend) to be consumed
- Install Strapi: npx create-strapi-app@latest my-project
- Set you admin user
- Create Database
- Create new Tables: Category and Post
- Relationship between tables - Category has many Posts
- Populating Tables
- Create a new Post
- Go to Settings > User & Permissions Plugin > Roles > Public
- In Category: check find and findOne
- In Post: check find and findOne
- Save permissions
- *** Obs.: to structure a API endpoint result view on Google Chrome: 3 points > More tools > Extensions > Menu hamburger > Open Chrome Web Store Enter Json viewer and press enter Choose the first one (Highlighted) Select "Use on Chrome" Click "Add extension" Then, reloads the page
- Stop the service
- Enter API folder: cd blog-api
- Run project: npm run develop
- Access the server: https://localhost:1337
- Login with admin credentials
- Part 3 - Mobile Layout: Interface and UX
- Build the Home page: ./src/pages/Home/index.js
- Setting routes: ./src/routes.js
- Update ./App.js
- Repeat the previous procedures for Detail, CategoryPosts and Search pages
- Set header for the pages: ./src/routes.js
- Use SafeAreaView to avoid broken layout: ./src/pages/Home/index.js
- Install Axios (HTTP request) module: expo install axios
- Install Async Storage module: expo install @react-native-async-storage/async-storage
- Stop and restart server
- React Hooks usage
- Creating server: ./src/services/api.js * Obs.: React Native requires a safe connection (e.g. https://) When it is not possible, we need to find our device ipconfig (IPv4) Then, substitute "localhost" with this numbers (e.g. http://192.168....)
- Install react-native-dotenv module: expo install react-native-dotenv
- Enter .env on .gitignore
- Create a .env file for sensible data: ./.env
- Go to the Home page: ./src/pages/Home/index.js
- Recover the api info and build the posts list
- Subdividing some parts in Components: ./src/components
- Creating features/functionalities
- Create a favorite service: ./src/services/favorite.js
- Create a favorite component: ./src/components/FavoritePost/index.js
- Favoriting categories, save on AsyncStorage and show them on screen: ./src/pages/Home/index.js
- Part 4 - Bringing the project to life
- Request posts on Home page: ./src/pages/Home/index.js
- Build PostItem component: ./src/components/RenderItem/index.js
- Link Posts from Home to Details page
- Create Detail interface: ./src/pages/Detail/index.js
- Using ScrollView for long items
- Install React-Native-Webview: expo install react-native-webview
- Create a LinkWeb modal component (link from post): ./src/components/LinkWeb/index.js
- Part 5 - Adding features
- Build Search input: ./src/pages/Search/index.js
- Find a desirable post from title
- Show posts found on screen
- Only stop showing device keyboard if found a post
- Update Home page with refresh option
- Build CategoryPosts page: ./src/pages/CategoryPosts/index.js
- Adding some animations (React Native Animatable): expo install react-native-animatable
- Use animation on Home page