Тёмный
No video :(

How to Build an Ionic 4 App with Offline Mode 

Simon Grimm
Подписаться 97 тыс.
Просмотров 29 тыс.
50% 1

Опубликовано:

 

27 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 85   
@SumeetChawla
@SumeetChawla 5 лет назад
I saw your other tutorial too. You seemed to be really worried about the sun light. It actually gives a very vacation-y tropical feel to the tutorial haha :)
@HorizonWave1807
@HorizonWave1807 3 года назад
Sir, Can you please create tutorials on RXJS? You are indeed a wonderful teacher.
@selectivemusictracks3372
@selectivemusictracks3372 3 года назад
Thanks mate. I have been digging from quiet a long i have finally found it . thanks and regards.
@galaxies_dev
@galaxies_dev 3 года назад
No problem 👍
@RossRawlins
@RossRawlins 5 лет назад
This is a a great basic set up but for large data I moved over to firestore and it makes life much easier.
@galaxies_dev
@galaxies_dev 5 лет назад
Glad it was helpful Ross!
@turomatulic
@turomatulic 3 года назад
sorry, buy network plugin from ionic returns always "unknown" type network, any help??
@carithocrack1
@carithocrack1 5 лет назад
You are wonderful, saved my life !!! amazing video ♥
@galaxies_dev
@galaxies_dev 5 лет назад
Thanks Carolina, you are welcome :)
@selectivemusictracks3372
@selectivemusictracks3372 3 года назад
you are the guy . God bless you
@PabloGonzalez-ek1vg
@PabloGonzalez-ek1vg 5 лет назад
Excelent! Great and simple solution. Thanks!
@mikeciav
@mikeciav 5 лет назад
Thank you this is great. Also would love some videos on rjxs as well.
@galaxies_dev
@galaxies_dev 5 лет назад
Hey Mike, what would you like to see about RxJS? It's definitely on my list, just looking for a good use case :)
@daniellaerachannel
@daniellaerachannel 5 лет назад
Hi Simon! your tutorials are simply great! thanks a lot! Please can you build a tutorial on how to create a cross platform app with ionic/angular, a online store with a nodejs server? thanks a lot
@galaxies_dev
@galaxies_dev 5 лет назад
Thanks mate :) What exactly would you like to see in interaction with a NodeJS server?
@steala
@steala 5 лет назад
Please do a video on rxjs bits please. Great video. Thanks!
@ashaychavan5651
@ashaychavan5651 2 года назад
Hello Simon, I'm working on ionic offline mode app. 1. Can you please suggest me how to set and get formdata in ionic storage. 2. After capturing image through camera how should I get that image in multipart format.
@monodev7398
@monodev7398 3 года назад
Thank you Simon! Great solution, I need some recomendation for any Web ORM like TypeORM. Do you know anything like this?
@galaxies_dev
@galaxies_dev 3 года назад
I've heard many good things about Prisma: www.prisma.io/
@muhammadayoub4228
@muhammadayoub4228 5 лет назад
The import import { IonicStorageModule } from '@ionic/storage/ngx'; is incorrect. it should be imported as: import { IonicStorageModule } from '@ionic/storage';
@galaxies_dev
@galaxies_dev 5 лет назад
When did I mess this up? You are of course right!
@HorizonWave1807
@HorizonWave1807 3 года назад
if we cache data in localStorage, will OS not clear data automatically without letting us know when the storage is full?
@galaxies_dev
@galaxies_dev 3 года назад
Yeah there is a storage limitation, so if you want to be safe, install the SQLite plugin which will then internally be used by Ionic Storage!
@agunity-developer3516
@agunity-developer3516 4 года назад
Whats about race conditions? For example, if you do you "push" and before it is hitting 'finalize', a new element gets added. I wonder if there is also a race condition for storage management. Reading something, altering, and then writing it async. If that happens more often than once at the time it might do something unexpected.
@galaxies_dev
@galaxies_dev 4 года назад
If you work correctly with the promises from the storage you usually shouldn't experience any race conditions!
@klejz0rPC
@klejz0rPC 5 лет назад
Hi @Simon Grimm. I've got this issue in console log : NetworkService]: StaticInjectorError(Platform: core)[MyApp -> NetworkService]:
@galaxies_dev
@galaxies_dev 5 лет назад
I think you have not added th provider to your app module then.
@codingroom2876
@codingroom2876 5 лет назад
how to make a app like youtube offiline download feature using ionic? please please help me.....
@arvinlorenz
@arvinlorenz 5 лет назад
Very nice! Is there any update for this using Capacitor?
@galaxies_dev
@galaxies_dev 4 года назад
I'll do more on Capacitor in the future!
@Javed.humayun
@Javed.humayun 4 года назад
Hi great tutorial. But i have a use case for play video offline how to achieve this?
@galaxies_dev
@galaxies_dev 4 года назад
Well you could download files upfront and then play them from the local file!
@francopioletti7043
@francopioletti7043 5 лет назад
Please do make a video about the rxjs operators
@galaxies_dev
@galaxies_dev 5 лет назад
Yeah, it's on the list. Noticed the heavy usage only later after creating some tutorials.. I hear you!
@manabroy3036
@manabroy3036 5 лет назад
wow!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! nice thanks
@utpaulsarkar9694
@utpaulsarkar9694 5 лет назад
its great please create tutorial for rxjs asap.
@galaxies_dev
@galaxies_dev 5 лет назад
Yeah I guess I'll have to give some more information about it after all the operators used in this one and the comments below the video x)
@sr0409rr
@sr0409rr 3 года назад
Hi Simon, Is that a simulator that you are using to demo your app? Can you please explain how you are testing your app in the video?
@galaxies_dev
@galaxies_dev 3 года назад
I either use the iOS simulator or show my real device using the Reflector app!
@wagimalick5046
@wagimalick5046 5 лет назад
great stuff
@pankajpandey3164
@pankajpandey3164 4 года назад
Can we do with ionic 5 as well or Ionic 5 has more features for storage. Please give your suggestion.
@galaxies_dev
@galaxies_dev 4 года назад
Yes this should work fine with v5 as well. There are no changes to the storage.
@stammerwithsid
@stammerwithsid 4 года назад
Where we called CheckforEvents??????
@kjellieboy2
@kjellieboy2 4 года назад
Hi Simon, We implemented this in an app which will be used in a warehouse without wifi for stock movements. It works great! We want to implement the offline mode in another app but this is a bit of a struggle. The use case is that the users can create projects and add hour registrations on it. Creating a project and adding hour registrations are separate API calls. The ids are auto generated by the API. Create project: POST /api/projects -> returns auto generated id Create hour registration: POST /api/projects/{projectid}/hourregistrations If we work offline the API call for creating a project is added to the offline cache, and we don't have any id to start our hour registration. Is this a problem you have encountered? What are your thoughts on this? If I find a solution, I'll reply to this post.
@galaxies_dev
@galaxies_dev 4 года назад
That's really challenging indeed..I'm actually not sure what the best solution might look like.. Somehow creating a connection between the first and second call, so the second API call is only triggered when the first is finished (and waiting for the result). But right now I don't know how the code would look like, it certainly is a challenge. Please let us know when you find a solution!
@ramitadembani8604
@ramitadembani8604 5 лет назад
Simon, I'm curious to know what commands should I use if my app type is "ionic-angular" and not angular
@galaxies_dev
@galaxies_dev 5 лет назад
Hmm I'm not sure, this should be exactly the same?!
@cebecoii2018
@cebecoii2018 5 лет назад
hi @Simon Grimm, Thank you for your great tutorial videos.. Can i ask a favor, Ive been trying to make an ionic project and i want to publish as desktop app for windows...Will you make some tutorial please.. I cant find any tutorial for this kind ... I greatly appreciate if you consider.. Thank You and Good Day..
@aaronaaronaaron5922
@aaronaaronaaron5922 5 лет назад
Wow, man! you really help me! Thanks!!!!
@ebrahimmithaiwala9639
@ebrahimmithaiwala9639 4 года назад
Hello can you please make a video on how to make an ionic 1 app run on offline mode.
@galaxies_dev
@galaxies_dev 4 года назад
Sorry but I don't work with Ionic 1 anymore.
@simocennetten5239
@simocennetten5239 5 лет назад
thank you so much
@j-Dor
@j-Dor 5 лет назад
can i know after offline where those datas are storing in my device
@galaxies_dev
@galaxies_dev 5 лет назад
The are inside the SQLite database of your app (if you added the according Cordova plugin), otherwise they will be inside the localstorage of the browser of the app.
@simbaclaws_youtube
@simbaclaws_youtube 4 года назад
Why not always show the local data if it exists and make an additional request to the server when you are online to update the local data? A offline first approach is faster for your app. Since network is slower then disk read. This way information is shown earlier and gets updated accordingly when need be. This would also help in cases where network speed is slow. Having a white screen while you wait with something like a spinner is bad when you can already display previous data. Displaying both a spinner and previous data would be even better. If you really want to be fancy and fast, you can poll the server api for recent changes and only fetch back the latest differences by storing for example a date of retrieval. You can use triggers in mysql databases to store a new date in your database when information in a table changes. This will make the json response smaller and would optimize bandwidth. You would simply fetch the changes between dates. Then there is the idea of shipping a local "seed" database with your app so that when a user first opens your app and is offline while doing so, would still get to see a somewhat recent representation of data. Sort of like a snapshot. Also, service workers can help do caching of requests and offline storage too. I would like to see some coverage on that somewhere, so far I haven't found much information ionic wise on how to do this with service workers. Some positive feedback from me. I love your tutorials by the way. I hope you'll consider some of my ideas.
@galaxies_dev
@galaxies_dev 4 года назад
Thanks for your input Hylke! In fact this is a decision every app/company needs to make: Display data faster, or always display the most up to date version? Sometimes the second is a business requirement. In other cases, I agree that it would be better to display the data fast. But it really depends from app to app!
@simbaclaws_youtube
@simbaclaws_youtube 4 года назад
@@galaxies_dev you can still display the most up to date version after displaying the local version first. The difference is that you have something to look at while fetching updates instead of a white screen. But then again you could be displaying information that has been deleted and those will then be removed when the information is updated. That's the only downside I see.
@muhammadayoub4228
@muhammadayoub4228 5 лет назад
How to call getCurrentNetworkStatus in a component to get Network status I tried getCurrentNetworkStatus() this but it does not work.
@galaxies_dev
@galaxies_dev 5 лет назад
Make sure you are calling it only when the platform is ready!
@muhammadayoub4228
@muhammadayoub4228 5 лет назад
@@galaxies_dev i don't know how to call this event. Please explain i can call this on click of button fro other component.
@sauravverma1138
@sauravverma1138 5 лет назад
Don't go directly to some point, you need to go stepwise, it might be easier for those who have not even tried ionic before, so you need to make them a just quick aware with the process and then move to the exact codebase. Thank you
@galaxies_dev
@galaxies_dev 5 лет назад
Sorry Saurav, will try to keep things easy and straight next time!
@graham859
@graham859 5 лет назад
Do you know where I can find an Ionic4 Vue version of this?
@galaxies_dev
@galaxies_dev 5 лет назад
No sorry, I don't have any Vue material!
@kagwad_in
@kagwad_in 5 лет назад
Sir please start with some basic projects like MakeMyTrip kind of apps .
@galaxies_dev
@galaxies_dev 5 лет назад
I don't know about makemytrip, what is it like? And yes I'm currently planning to do more project style videos in the near future, so any idea for an app would be great!
@sarath9077
@sarath9077 5 лет назад
Hi Simon., Thank you for the wonderful video. I would like to add that for 'rxjs' version more than 5, the type should be given after "this.http.get" this.http.get(`${this.apiBaseUrl}/${url}&apiKey=${this.apiKey}`).... This is one error I personally faced and fixed.
@galaxies_dev
@galaxies_dev 5 лет назад
Thanks a lot for adding the solution here Sarath :)
@filemonek123
@filemonek123 5 лет назад
why the beta network plugin ?
@galaxies_dev
@galaxies_dev 5 лет назад
Because we are using the Ionic 4 beta and need to use Ionic Native 5 which is only available as beta.
@amitshaiwale
@amitshaiwale 3 года назад
This is a 2 year old tutorial, is this still valid to use in 2021 considering there has been many updates made to capacitor, ionic and angular !
@sertrwanda
@sertrwanda 3 года назад
same question
@santhoshsandy3085
@santhoshsandy3085 5 лет назад
Create RXJS operators tutorial :)
@galaxies_dev
@galaxies_dev 5 лет назад
Wow didn't know so many people would ask for it, but yes I'll do :)
@thatchipmunksings
@thatchipmunksings 4 года назад
vielen Dank!
@saajanbajaj641
@saajanbajaj641 3 года назад
what happens when you are connected to WIFI but WIFI has no data?
@galaxies_dev
@galaxies_dev 3 года назад
Yeah that's indeed a problem. Best thing is to make a test HTTP call to some page like google or something on your server like a "ping" to check if you really got an internet connection!
@pratikvaity6833
@pratikvaity6833 5 лет назад
Can we Apply this concept on videos?
@galaxies_dev
@galaxies_dev 5 лет назад
I'm not sure what you mean, but as it's just a general concept I'm sure you could apply it!
@simbaclaws_youtube
@simbaclaws_youtube 4 года назад
I think this person wants to know whether sqlite supports storing data blobs. I think it might be better to do file storage on the device in this case.
@ameerattaa2250
@ameerattaa2250 5 лет назад
its great to make short videos bro
@galaxies_dev
@galaxies_dev 5 лет назад
Thanks Scud!
@koukiadem
@koukiadem 5 лет назад
Please.. for the love of god.. use dark theme.... Thanks
@galaxies_dev
@galaxies_dev 5 лет назад
Hey Adem, why? I've actually heard from many that reading on a light background is a lot easier! But of course people like it different, I also had a dark them for a long time..perhaps I'll make a poll about it x)
@iamloonix
@iamloonix 5 лет назад
Dark theme please! :)
Далее
How to Build a Shopping Cart with Ionic 4
26:32
Просмотров 31 тыс.
А ВЫ УМЕЕТЕ ПЛАВАТЬ?? #shorts
00:21
Просмотров 1,5 млн
How to use SQLite in Ionic with Capacitor
15:17
Просмотров 16 тыс.
10 Tools & Services Every Ionic Developer Should Know
21:25
How Do I Work with Offline Data?
11:33
Просмотров 8 тыс.
When RESTful architecture isn't enough...
21:02
Просмотров 272 тыс.
How to Hide Ionic Header on Scroll
21:13
Просмотров 16 тыс.
React Native vs Flutter - Which should you use?
22:31
No Code App Development is a Trap
9:31
Просмотров 222 тыс.
We Built an App in 24 Hours [No Code]
11:56
Просмотров 424 тыс.