How to convert dynamic MERN(full stack) website to Android app(.apk)?
I am having an existing MERN stack app which is not deployed. I want to convert it into an Android app and use it to test mobile features (like Bluetooth connectivity, not using web-Bluetooth). My ReactJS frontend is getting fetched from backend and its entirely based on the MongoDB & NodeJS. I tried to use ionic Capacitor, but only a blank screen gets displayed on my emulator in the Android Studio. Does capacitor work in converting back-end code too? If so, how can we do it? And Is there any other alternative to transform/convert the website without hosting or changing the codebase to other technology like native?
do you know?
how many words do you know
See also questions close to this topic
-
Updating a Single Column In Room Database
That's the function I'm using for updat
private fun updateSettingsDatabase(settingsDao: SettingsDao) { lifecycleScope.launch { settingsDao.update(SettingsEntity( 1, nightMode=nightModeResult, )) } } @Query("SELECT * FROM `settings-table`") fun fetchCurrentSettings(): Flow<List<SettingsEntity>>
I specified
nightMode=
because I thought that this way I'm only updating this colummn, but it turns out that it resets every column, how do I update a single column, while keeping the values the rest of the columns? -
Using EdittextPreference for Goto search
sorry for my poor English. I want to use EditTextPreference in my bottom nav like the pic below, ![screenshot][1]
I have recycleview xml in my project with in many sub cardview layouts(which is scrollable) and I want to create item in the bottom nav which is called "Goto". When the "Goto" item is clicked i want it to pop-up like the screenshot. And when user enters a number(according to the cardviews i.e if the number of cardview is 40 user must enter 1-40) I want to search the cardview by its ID. Thank you and I hope u got it, If u have any questions let me know [1]: https://i.stack.imgur.com/grK8P.jpg
My xml format look like this. As you see in the blow since the cardviews are huge in number it is not cool to scroll all the way down that is why i need Goto item in the bottom nav to search it by its ID when the user click number in the EditTextPreference as u see in the screenshot. i.e The screenshot is not from my app
<LinearLayout> <LinearLayout> <androidx.cardview.widget.CardView> <RealtiveLayout> <Textview/> <RealtiveLayout> </androidx.cardview.widget.CardView> </LinearLayout> <LinearLayout> <androidx.cardview.widget.CardView> <RealtiveLayout> <Textview/> <RealtiveLayout> </androidx.cardview.widget.CardView> </LinearLayout> <LinearLayout> <androidx.cardview.widget.CardView> <RealtiveLayout> <Textview/> <RealtiveLayout> </androidx.cardview.widget.CardView> </LinearLayout> <LinearLayout> <androidx.cardview.widget.CardView> <RealtiveLayout> <Textview/> <RealtiveLayout> </androidx.cardview.widget.CardView> </LinearLayout> .. .. .. .. many more..
-
IOS Launcher in android studio
I'm trying to change the whole Android OS installed app icons into IOS icons, please help me with the proper code or library for android kotlin
-
Error message : MongoServerError: bad auth :Authentication failed
What is the reason behind this error? this code I am using to connect to DB.
const uri =`mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASSWORD}@cluster0.xft2s.mongodb.net/myFirstDatabase?retryWrites=true&w=majority`;
-
In Mongo, If a document I'm saving "Prateek" then I don't want on the next create operation even the "prateek" or "praTEEK", etc is saved
//** If I'm adding a new document with the name: "India", then I don't want that the DB allow another name with the name: "INDIA", "india", "indIA", etc. I'm new and learning, help would be great!!**
// Controller
var Dinosaur = require('../models/dinosaurs'); //addDino module.exports.addDino = (req, res) => { var name = req.body.name; var type = req.body.type; var height = req.body.height; var weight = req.body.weight; var Period = req.body.Period; req.checkBody('name', 'Name is required').notEmpty(); var errors = req.validationErrors(); if (errors) return res.status(400).send({ message: 'Name is Required' }); else { let newDino = { name: name, type: type, height: height, weight: weight, Period: Period } Dinosaur.addDino(newDino, (err, result) => { if (err) { if (err.name) return res.status(409).send({ message: name + ' Already Exist' }); else if (err.url) return res.json({ status: false, error: { url: "Url already exist" }, message: err.url }); else return res.json(err, "Server Error"); } else { return res.status(200).send({ message: "Done" }); } }); } }
// Model
var mongoose = require('mongoose'); //dinosaur schema var DinosaurSchema = mongoose.Schema({ name: { type: String, unique: true }, type: { type: String }, height: { type: Number }, weight: { type: Number }, Period: { type: String } }); var Dinosaur = mongoose.model('dinosaur', DinosaurSchema); //add module.exports.addDino = (query, callback) => { Dinosaur.create(query, callback); }
// GetAll, Already Created a new document with the name "Brachiosaurus"
// > Create, a new create with the first letter lower case "brachiosaurus", Don't want it to be pushed.
- i am trying to run the node of ganache but getting this error
-
how to change prettier format for react native
my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter
from this code
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( <View> <Text>Apps</Text> </View> ) }
it's formatted to this
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( < View > < Text > Apps < /Text> < /View> ) }
-
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
<Route path="list/:id(\d+)" element={<MyComponent/>} />
but it not work in v6.
-
How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."
My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...
This my .env file
REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX REACT_APP_authDomain=XXXXX.firebaseapp.com REACT_APP_projectId=XXXX REACT_APP_storageBucket=XXXXX.appspot.com REACT_APP_messagingSenderId=4997390XXXXX REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX REACT_APP_measurementId=G-M1XDXXXXXX
This my firebase config file
const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, appId: process.env.REACT_APP_appId, measurementId: process.env.REACT_APP_measurementId, }; when I debugging firebaseConfig object console.log(firebaseConfig.apiKey); ==========> undefined console.log(firebaseConfig.authDomain); ==========> undefined console.log(firebaseConfig.projectId); ==========> undefined console.log(firebaseConfig.storageBucket); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined console.log(firebaseConfig.appId); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined
client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
-
Download and Install .apk file form URL programmatically
I want to make a App which is downloading the .apk file from GitHub and installing it at once.
-
Can I use react native to build a app with another frontend?
Sorry if there is already a similar question with answer and if there is, put the link here so I can reach it.
I'm having a difficuty these days... I was told to create a new integration with a terminal called TERMINAL SMART G800 from GERTEC. Here in the company we are usually use Cordova but it is deprecated and abandoned so I decided with my team to do this with React Native.
I started the project but I'm finding some difficulties and I can't find anything in Google... The thing is, in the react native site, they have a tutorial to use react with an exsting andrid app but I didn't see nothing related to using react native to build an apk using an existing frontend project. I mean, like if I wanted to use a responsive site, made with HTML and CSS to build an apk. But it seems that I need to use the react tools to do this. I'll need to recreate my app entirely. Can someone help ?
FrontEnd structure: enter image description here
React excample sructure: enter image description here
-
Need help changing the button text using Android Studio
Sorry if asked before, but I don't find a solution on the web.
As mentioned in the title, I don't know how to change the button text on this app (screenshot) the source code in photo is provided by travelpayouts, I can edit strings with my info, but I need to change the button text using another phrase. I search for the button text Android:text in source code xml files but don't find any results related to button text.
Any help will be appreciated, Thank you in advance.
-
I am getting an error 404 using nodeJS and express
I'm having an issue with the routes in my project called review. My other routes have no issue so I'm not sure where I went wrong here. I keep getting error 404 in my frontend and in postman. I believe everything is linking to the right information. I go the route
http://localhost:8080/api/review/addReview and get the 404 error
This is my server.js
const express = require("express"); const cors = require("cors"); const dbConfig = require("./app/config/db.config"); const app = express(); var corsOptions = { origin: "http://localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); const db = require("./app/models"); // const Role = db.role; app.use('/uploads', express.static('uploads')); db.mongoose .connect(`mongodb+srv://password@cluster0.gmvao.mongodb.net/shop?retryWrites=true&w=majority`, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }) .then(() => { console.log("Successfully connect to MongoDB."); // initial(); }) .catch(err => { console.error("Connection error", err); process.exit(); }); // routes // require(".app/routes/favourite.routes")(app); require("./app/routes/auth.routes")(app); require("./app/routes/user.routes")(app); app.use('/api/admin', require('./app/routes/admin.routes')); app.use('/api/review', require('./app/routes/review.routes')); // set port, listen for requests const PORT = 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); });
My routes file
const express = require('express'); const router = express.Router(); const {authJwt} = require("../middlewares"); const Review = require("../models/review.model") router.use(function(req, res, next) { res.header( "Access-Control-Allow-Headers", "x-access-token, Origin, Content-Type, Accept" ); next(); }); router.post("/addReview", [authJwt.verifyToken], (req, res) => { const review = new Review(req.body) review.save((err, review) => { if(err) return res.json({success:false, err}) Review.find({'_id': review._id}) .populate('author') .exec((err, result) => { if(err) return res.json({success: false, err}) return res.status(200).json({success: true, result}) }) }) }) module.exports = router ;
My review model file
const mongoose = require('mongoose'); const Review = mongoose.model( "Review", new mongoose.Schema({ prodID: String, productTitle: String, reviewId: String, content: String, author: [ { type: mongoose.Schema.Types.ObjectId, ref: "User", }, ] }) ); module.exports = Review;
-
Mongoose findByIdAndUpdate - not updating selection
I'm following a tutorial with MERN (source code here: https://github.com/Nikhilthadani/Book-Store-With-MERN-Stack/blob/Backend/controllers/books-controller.js)
Everything seems fine with the initial routing (get & post) , until we added a route for updating entries (PUT) in mongoDB.
Here is my function for the PUT
//book-controller.js const updateBook = async (req, res, next) => { const id = req.params.id; const { name, code } = req.body; let book; try { book = await Book.findByIdAndUpdate(id, {new: true}, { name, code, }); book = await book.save(); } catch (err) { console.log(err); } if (!book) { return res.status(404).json({ message: "Unable To Update By this ID" }); } return res.status(200).json({ book }); };
Here is my Schema
// Book.js const mongoose = require('mongoose') const bookSchema = new mongoose.Schema({ name: { type: String, required: true, }, code: { type: Number, required: true, }, }); module.exports = mongoose.model("Book", bookSchema);
When I try to test this function in Postman, the GET request returns the entry that I'm attempting to update just fine.
Confirming database entry with Get
However, after testing PUT, the particular entry I'm trying to update will remain unchanged, despite no output errors
-
Populate fields from dropdown select in React
I am trying to populate a dropdown menu with an array and have it so the selected item from the dropdown populates the next section. But as soon as I add the loop to match the selected item's ID and the array item with the same ID I start getting an error around _id.
I also have it setup so that when you hit this page you index 0 of the array populates the fields. But the problem is when I select the dropdown and choose an item, it does not work until I select 1, then another different item and then after that it seems to catch and things populate correctly. It seems as though the first number of selections do not get the value and do not set the value to the item ID. After a couple of drop down selections it catches and then populates on select as expected but not sure why I have to make a couple of selections, which fail, before it starts working
I'm passing in an object elements, which has an array posts and that is what I'm using to populate the dropdown.
import { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { toast } from 'react-toastify'; import { Form } from 'react-bootstrap'; function Journal() { const [val, setVal] = useState(''); const [viewPost, setViewPost] = useState({ title: '', subject: '', entry: '', date: '', }); const dispatch = useDispatch(); const navigate = useNavigate(); const { posts, isLoading, isSuccess, isError, message } = useSelector( (state) => state.posts ); const element = JSON.parse(localStorage.getItem('detailedElement')); const myInitPosts = element.posts.map((post) => post); if (!element) { toast.message('No Element found'); } const handleSelected = (e) => { e.preventDefault(); console.log('Selection made'); setVal(e.target.value); console.log('Val ' + val); for (var i = 0; i <= myInitPosts.length; i++) { console.log(i); if (myInitPosts[i]._id === val) { console.log('We got a match!'); const post1 = { title: myInitPosts[i].title, subject: myInitPosts[i].subject, entry: myInitPosts[i].entry, date: new Date(myInitPosts[i].createdAt).toLocaleString('en-US'), }; console.log('Val ' + val); setViewPost(post1); } } }; return ( <> <section className='content mb-4'> <div className='col mb-4'> <div className='card text-left border-primary shadow-lg'> <div className='card-body'> <span className='ml-4 '> <div className='card-text mt-2'> <h4 className='card-title'> Journal: {element.name}</h4> </div> <div> <Form.Select value={val} disabled={element.posts.length === 1} onChange={handleSelected} > {element.posts.map((post) => { const { title, _id } = post; return ( <option key={_id} value={_id}> {post.title} |{' '} {new Date(post.createdAt).toLocaleString('en-US')} </option> ); })} </Form.Select> </div> <div className='mt-2'> <button className='btn btn-danger btn-sm mb-2' type='button' disabled onClick={''} > Delete Post <span className='badge bg-secondary'></span> </button> </div> </span> </div> </div> </div> </section> <section className='content'> <div className='col'> <div className='card text-left border-primary shadow-lg mb-5'> <div className='card-body'> <span className='ml-4 '> {val ? ( <span> <i>Date: {viewPost.date}</i> </span> ) : ( <span> <i> Date:{' '} {new Date(myInitPosts[0].createdAt).toLocaleString( 'en-US' )} </i> </span> )} <div className='mt-2'> <div className='mt-4'> <label htmlFor='subject'> <h5> <b>Title:</b> </h5> </label> <textfield className='mt-2' type='text' name='subject' id='subject' /> {val ? ( <h5>{viewPost.title}</h5> ) : ( <h5>{myInitPosts[0].title}</h5> )} </div> <div className='mt-1'> <label htmlFor='subject'> <h5> <b>Subject:</b> </h5> </label> <textfield className='mt-2' type='text' name='subject' id='subject' /> {val ? ( <h5>{viewPost.subject}</h5> ) : ( <h5>{myInitPosts[0].subject}</h5> )} </div> <div className='mt-4'> {' '} <label htmlFor='entry'> <h5> <b>Entry:</b> </h5> </label> {val ? ( <p> {' '} <div dangerouslySetInnerHTML={{ __html: viewPost.entry }} ></div> </p> ) : ( <div dangerouslySetInnerHTML={{ __html: myInitPosts[0].entry, }} ></div> )} </div> </div> </span> </div> </div> </div> </section> </> ); } export default Journal;