Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dacili/ionic-app
Mobile development? Why not? :D
https://github.com/dacili/ionic-app
angular cordova cross-platform hybrid-app hybrid-mobile-app ionic ionic6 mobile mobile-development
Last synced: 24 days ago
JSON representation
Mobile development? Why not? :D
- Host: GitHub
- URL: https://github.com/dacili/ionic-app
- Owner: Dacili
- Created: 2023-01-18T13:45:12.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-13T12:47:05.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T00:22:48.287Z (2 months ago)
- Topics: angular, cordova, cross-platform, hybrid-app, hybrid-mobile-app, ionic, ionic6, mobile, mobile-development
- Language: TypeScript
- Homepage:
- Size: 2.84 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ionic-app
**Ionic** (https://ionicframework.com/) is an open source mobile UI toolkit for building modern, high quality **cross-platform** mobile apps from a single code base in React, Vue or **Angular**.
In short, create mobile app with Angular knowledge and use of Ionic components (https://ionicframework.com/docs/components). Components are behaving a bit differently depeding on which operating systems you're running them (ios vs android).
The UI beauty was not my priority haha.
Demo of app:
https://user-images.githubusercontent.com/37112852/218172833-a20a3775-68b8-47ee-a7b6-5faa7a317d53.mp4
App specifications:
```
Ionic CLI: 6.20.8
Ionic Framework: @ionic/angular 6.4.2
@angular/cli: 15.1.1
@angular/core: ^15.0.0
Cordova was used (not Capacitor) - an open source project that runs web apps across multiple platforms
```
Installation of ionic:
``` npm install -g @ionic/cli```
Create a new Ionic app (you can choose some of the existing templates):
``` ionic start```
Enter the folder of newly created app and run:
``` ionic serve```
If you want to create new component, or services, like you usually do with angular cli (ex. ng g service medi) you could do that similarly:
```ionic generate```
and add parameters, or just go trough cmd options that it gives you.
When I was trying to run app on my mobile, I had a lot of issues. First you need to install Android studio, Java SDK. Gradle made me a lot of issues, such as incompatibility with latest Java. Environment variables updates, accepting licences agreements, Unsupported class file major version 61 ionic... And so on... When I fixed all issues, you are running app on mobile with this command:
```ionic cordova run android```
and if everything went well, you should see command like this,
And you're able to run it on your mobile! Yaay
But what about debugging, is it possible to inspect you mobile app, as you do when running on your laptop? Yes!
Go to this link: chrome://inspect/devices#devices, you will see something like this:
At the lowest, you will see my phone connected, if you click on that inspect label, you get view like this:
That one is read only view, so if you click on your mobile you will see changes on that left part, if some error occurs, you will see the console errors. Awesome!
If you leave your app on mobile, the read only view will become something like this 
Some of the commands that I was using you can check in this readme https://github.com/Dacili/Ionic-app/edit/master/README.md