Git Product home page Git Product logo

empuraan-trading's Introduction

Ionic + Angular Frontend Design: Demo Trading Platform

How to host the app on a browser

Run this ionic serve in the terminal.

The app should be running on the browser at localhost:8100

How to generate the Android APK

First step - generate an Android file

Run this before doing anything:

npm install @capacitor/core @capacitor/cli

Then we need to enable the capacitor by running this in the terminal:

ionic integrations enable capacitor

BEWARE! If for some reason it none of these work, and you're a macOS user, try putting sudo in front of them.

Moving on, the next step is to run this ionic build cordova android in the terminal.
Notice android in the line. We are putting it there because we want android. Makes sense.

Now the next thing is to run this line in the terminal:
ionic cordova platform add android

The next step is to initialize our app by the following line in terminal:

npx cap init [appName] [appId]

where the [appName] should be the actual name of the app, for eg. "tradingApp",
and the [appId] is the domain identifier of your app (ex: com.tradingApp.app).

Solving a potential error:

So for some reason, when you specify a new name for the app, for eg. 'Empuuran Trading App'
and the domain identifier for eg. 'com.empuraanTradingApp.app', and when you open up
Android Studio, you would usually expect it to have these names as well as the domain changed
as you've specified it in npx cap init right? Well yes, but actually no. And to add on,
these changes will not only be updated, but there will also be an error waiting for you in AS.

So how do you fix this?

In VSCode, or whatever IDE you are using, it should have a file locator, and in there search for
strings.xml.

Now in there you will, hopefully, see the wrong names of your app located in there, as well as the
wrong domain name in there. This is where you, once again, change your app and domain name to whatever
you want.

And for the error in Android Studio, it can be ignored, even though it is in the red color.
You can still run an emulator just fine and the app too. So the best way to solve this error
is by ignoring it.

The next thing to do is to run ionic build in the terminal. This generates
a www file, so don't touch it.

If you're a macOS user, put sudo in front of it in case it doesn't work.

Going forward, the next thing to do is to write npx cap add android
and this will generate the native android file ready to be used in Android Studio for eg.

And last but not least, we run npx cap open android.
Now if you have Android Studio installed on your computer, it will open it up for you.
If not, go and install Android studio and try this line again.

1.5th step - Enabling video displaying on Android devices

The iframe tag, that allows us to display videos on our app, doesn't work by default
on Android devices. It instead displays a CleartextTraffic error, which is not ideal.

To counter this, find the AndroidManifest.xml file with the keybind SHIFT + CTRL/COMMAND + A
and find the <application> opening tag. Inside of it write the following:
<application android:usesCleartextTraffic="true">. That should fix the video displaying error.

Second step - Generating an APK in Android Studio for Android devices

In Android Studio, in the Build tab, click on Generate Signed Bundle / APK...

It will open up a window making you choose between two radio points,
and here you will select the APK option.

Then you will see a bunch of form inputs, so you need to go ahead and fill them all out.

After filling them up, click on Next.

Now you have two more options before finishing it all up and that is to choose between
release or debug.

Select release, then tick both of the checkboxes before clicking on Finish.

It will then proceed to build the APK file for you.

The APK file should be generated in the same file the Android Studio is reading the scripts from. To be more specific, the filepath should look something like this:

android -> app -> build -> release -> APP.apk

empuraan-trading's People

Contributors

sefibrah avatar agrawalrahul1094 avatar chetanyadav95 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.