DEV Community

loading...
Cover image for Creating my 1st Ionic App or where you can find great resources for Ionic

Creating my 1st Ionic App or where you can find great resources for Ionic

Hiram
FullStack dev working with Laravel, Node, React, Vue, AWS, MySQL, Redis and more.
・2 min read

Around last October (2020) the production version of Ionic Vue was announced πŸš€. I got curious about how easy it would be to create an app with Vue. So I started digging into the documentation and the quickstart which is a must read for every tech you want to grasp.

Once I understand how to work with ionic main components for views like IonPage, IonContent (if you have used components library like materialui, vueprime or alike you are good to go) and diving into the new changes for Vue 3 I decided it was time to start a side project πŸ”¨.

Tip: You might encounter a lot of issues when developing, so I strongly suggest you to participate in Ionic's forum, a lot of people is willing to help 🀝.

From this point I started adding the basic setup you would do in a page, importing axios, moment, calendar and other handy packages to fasten the development. With the help of some commands you can serve your page for live reload in the browser, or with the android/iOS emulator.

At this point you might be wondering how to continue with android or iOS. For Android you would have to install Android Studio and download at least one sdk platform. Once there you should be able to generate a build for android by following the ionic's Android guide πŸ“².

Once I had the features for the 1st version I searched for admob packages and try to make some money with the apps because why not πŸ’β€β™‚οΈ?

I tried several admob capacitor packages but the one I could make work was capacitor-admob. You can find examples of how to show banners and interstitials here: Implement AdMob in Ionic React Capacitor Apps, I know, I know, it is written in react, but you know this may be your opportunity to dive into react if you haven't.

And voΓ­la, I got the very base of my first ionic app for android & iOS. From here I started making some changes at android level (manifest, fixing classes issues, icons, etc...) which won't be overwritten even if you create new compilations. Or you could follow the Android Play Store Deployment in order to release your app into the play store.

FYI: I only used a few capacitors plugins like Storage, Browser and Toast.

Here you can find the links to the Play Store and App Store of the app I created.

Feel free to ask or make some suggestions in the section below 😁

Discussion (0)