So here's my problem . I have a web app designed in code-igniter php and we're exposing an API for it to talk to a mobile app.
It's an education based CMS app. It allows teachers and students to log in and see grades and any calendar based notifications
We want to quickly build an app which will let students log in and see their notifications or messages . I am sort of a front-end developer and was looking into Ionic and AppGyver's Supersonic UI ?
What would be the best choice to go for now ( I need something within a week ), also , how do I set up my app folder to talk with the api or bind it with the api ?
I've not really worked with APIs a whole lot and a bit lost in how to set up my project. I come from a graphic design background and have been recently using Yeoman for my front-end workflow.
We plan to migrate from code-igniter to AngularJS in the long run , so Ionic would be a good choice then but for now I need to get a working app and was wondering if SuperSonic UI would be a better choice for an hybrid app.
Questions :
From what I've described what would be the best solution to go forward with?
Also, can anyone suggest any tutorials / screencast which does an in-depth project with one of the technologies ? Or maybe some other frameworks I've not taken into account ?
Can I set it up with Yeoman ? Can I use Yeoman and Ionic together ?
Appgyver is doing well with Supersonic and Data. They are working extensively on their Data implementations. I am currently using an API for my application without using Appgyver Data, but also was able to get it working with their data option. They have a few tutorials to get you the basics of building, scaffolding, deploying applications using their framework.
Tutorials
You will notice the third tutorial gets you into the data portion.
This is the documentation for their data options.
What you will see in their framework is AngularJS written in either coffeescript or javascript (you choose which when you first run steroids create projectName in your command line).
There are lots of discussions about this platform happening here.
Personally, I am about to release an application to the app store and google play with little effort. Your application doesn't sound too complicated if you have an API to get the data. This is worth a shot.
They also have a new product coming out May 25th I am told. And with lots of funding recently, they are hiring more developers to tackle the GitHub issues and move the platform forward rapidly.
I've only had good experiences with them.
Yeoman is being used behind the scenes as far as I can tell.
Related
I have this project where I have to code a website and ios and android apps.
I have to do this with a very limited team (basically myself). So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
I have come to consider flutter : the logic (and interaction with the backend) in dart can be compiled to both ios and android, and to javascript for the web site to call. I also like how the UI is built using flutter.
For the web site, I know there is flutter web that can be used to do a web app, but I want my website to feel like a web site more than a single page app. I have thought about using React+Gatsby to do the website's ui, while calling the dart compiled js for the logic. That would enable high page loading speed, good seo, while keeping the interactivity of a react app and the single codebase logic through dart to js compilation.
I am wondering if this seems like a good approach to you, and if not, how you would do it.
In this approach, I am wondering if it would be possible to embedded flutter web widgets inside of react js components, always in a concern of maintaining as low platform specific code as possible. I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
Update
Flutter Web is now available in a stable version for production.
Below answer is relevant back to the time when question was asked.
Flutter Web not recommended
At the current date, I would recommend not to use Flutter Web for production as it's in Beta. The Flutter Team is still working on improving quality, performance and browser compatibility. You must be cautious about using it as you may run into bugs and some other complications.
Also, I believe that the community support for Flutter Web might be on a lower side as it's pretty new.
Limited browser support
Another factor which bugs me is that the Flutter web apps can run on limited browsers as of now which would affect the reach to your user base:
Chrome (mobile & desktop)
Safari (mobile & desktop)
Edge (mobile & desktop)
Firefox (desktop)
What would I prefer?
Well, although it might be a hassle to handle different codebases for mobile and web platforms, I would still prefer to stick with React JS as it's much stable with better browser & community support as opposed to Flutter Web.
Good luck with your app! :)
I am unaware of how to use Flutter widgets inside a React app. But to address your other concerns,
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
Given no other restrictions, this leads to a single Flutter app for both web and native. For a team as small as three we still found it easier than having multiple projects.
The key factor in merging our initial projects to one was the notion of mobile browsers. In a mobile browser you website should reduce itself to the look of your mobile app, unless they have different purposes. And this automatically happens with Flutter projects if you derive your layout breakpoints from screen size. Otherwise you would code your same narrow design twice: in Flutter for native apps and in React for web.
Same goes for native apps for tablets in landscape mode. They call for a layout that resembles your desktop browser version, and you automatically get it with Flutter.
Also in web version you may have more tools than in a native app, just because your screen allows it. Naturally, you would code this logic in JS. But then you get an order to migrate this to native apps. Would you then replace your JS logic with Dart logic compiled to JS and embedded into frames? This is a messy road.
Lastly, think of Mac, Linux and Windows platforms that will come to Flutter soon. Should you ever need a desktop native app, you would want the same layout as with web.
I want my website to feel like a web site more than a single page app.
The difference in feeling between a website and a single page app lies mostly in state management and URL handling. You may do the following to reduce it:
Introduce URLs for your pages. By default, in Flutter every piece of action can happen under a single URL of example.com/#/. The window then feels fragile as there is no URL to copy and get back to. Flutter's Router API, released in Oct 2020, allows you to generate URLs on any change in your app's state and parse the state back from URL. If you do it right, then everything on your screen becomes a function of the URL, just like in traditional websites.
Use url_stragegy package for your URLs to be example.com/path rather than example.com/#/path which immediately feels fake.
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
No, it does not. Mostly because you get too narrow a channel of communication of messages between JS windows. How would you listen to Flutter's BLoC's stream in another frame? It would take too much boilerplate code. Also I cannot think of easy debugging process.
To me, Flutter Web still has drawbacks:
It takes awhile to load.
Many specific JS APIs are not implemented yet.
Many services you integrate with may not have Dart SDK, while having JS SDK. For instance, I struggled to get Ably working.
No search engine optimization.
You cannot use em as a screen unit, so scaling elements may get tricky.
Still with limited resources a single codebase outweights everything else.
To be clear, my team has been working on a web+native project the whole 2021. It now has passed most of the testing, but not yet released. For a sense of scale, it is a marketplace of 40+ screens.
I am a first year "computer programmer" college student and I got an internship where I was asked to develop a simple cross platform mobile app. Nothing too complex, consists in a login screen, then a screen with a form where I'm using jQuery UI autocomplete to get some info from the DB, a select box, datepicker and a text area. The other screen is just a table with information with the current day, week and month records of whoever is logged in.
I am using HTML5 and CSS for the front-end and php with Codeigniter to connect to mySQL DB.
The question is: I intend to use phonegap to turn it into a hybrid mobile app. Would you consider this a good approach? Or would it be worth it to delay the project a little more and learn how to do it using Ionic framework for the front-end and learn how to use node.js to connect with the database? Also I could use Ionic for front-end so it feels more like a native app and still use Codeigniter to connect to my server. I'd love to read your opinions and suggestions on this.
Thanks in advance.
I would highly recommend using Ionic for the app, you get a lot of stuff right out of the box that you will otherwise have to figure out your self.
Getting started with ionic is as easy as writing 'ionic start' and choosing a name for your project and a template to start from.
Depending on you level of web development skills you could really quickly end up with a app of spaghetti code without some kind of framework to set up some guidelines on how to structure your project.
As for the backend I will recommend you to use what ever you feel the most comfortable with as long as it easily can expose the REST endpoints you need.
Lucas Berte Schoenardie,
Since jquery mobile is not updated last two years so it will be better to choice IONIC which is using AngularJS (Google product) and App with Ionic is more native than PhoneGap( using jquery).
This reference on StockOverFlow may help you to take appropriate decision.
Thank you!
I want to create an application using Ionic and AngularJS and Grails?
Also, I want to use Grails Spring Security Core plugin for login or registrations procedure.
Although, Stack Overflow is not the correct site to ask this type of questions which simply needs suggestions and other's opinions.
Well, we are here to help. You can try other StackExchange sites like https://softwareengineering.stackexchange.com/.
Grails + Ionic + AngularJS is a perfect combination of frameworks to build a fully functional and elegant mobile application for all platform. We've build various mobile applications using these three technologies and they work awesome.
Since Grails fully support the concept of rest API for JSON and AJAX based calls, it is absolutely possible to use it along with AngularJS. AngularJS doesn't care about the server-side technology you are using as long as your server side code can communicate over JSON data.
Ionic is just a beautiful front-end SDK which works on the top of AngularJS and provides various utilities to develop a hybrid user-friendly mobile APP.
So you can easily use these 3 technologies and get your mobile app ready in a few weeks.
Ionic doesn't care about what you use as a server stack. As long as you create a service which has well defined interfaces (REST?), you should be fine.
I for example use PHP (yeah, I know, shocking, right?) Slim framework + Postgres database as my backend.
over the last 2 months I taught myself Angular JS and ionic and have built a pretty effective iOS and Android client for a specific idea I have in mind. I am now embarking on prototyping a website for myself that this client will talk to.
The website will be pretty simple:
a) I am thinking the front end will be using a responsive bootstrap theme like this one: http://startbootstrap.com/template-overviews/freelancer/
b) The website will have a login function, and after login, allow subscribers to upload 'coupon' - that consists of a name, description and expiry date. This needs to be stored in the DB. I also plan to offer a search and edit functionality via the website
c) Now, I also want the backend to expose a REST API like, say, this form:
http://server.com/api/login
http://server.com/api/getAllCoupons
http://server.com/api/getCoupon/id=foo
etc
I've been researching various options and have come across:
1) Mean.io
2) Yeoman
3) Strongloop
At this stage, given I am completely new to web development, and only have an idea of Angular JS and a bit of Node js, I am confused on what to use
My criteria really is ease of use. I'd like a framework that lets me get up and running with a website and an API connected to it that can get data out of the website DB
Do you have a recommendation on the simplest and quickest way to go about it? I want to continue focusing on my mobile app and need the website to be as painless as possible.
Thank you
I am preparing e-commerce project in AngularJS, but i have doubts.
SEO? Is it problem or not? If i know it is possible to have good SEO
with AngularJS with google,but what with others searcher engine?
I experienced many tools like tools for tracking users (how users
fill forms, what they do on sites etc.) doesn't work with dynamic
contents.
Is world ready for dynamic webpages like AngularJS or not yet? I am really not sure... do whole project in AngularJS or static pages...
Maybe some example of working e-commerce project, for example shop or something like that which SEO and users tracking are important? Good ready project is always good prove.
I just want be sure i wouldn't lose traffic from SEO and i would track and analyze users behavior on my sites. I am not really sure would i?
Ok , so what I can tell you from my experience with angular :
SEO is definitely a problem, but there is solutions out there (like https://prerender.io/ ). Is it enough for e-commerce ? I don't know.
We use google analytics in our (quite big) Angularjs project, it works (it's not as easy to install though, but some have contribute project that can help https://github.com/revolunet/angular-google-analytics )
[EDIT]
For Angularjs e-commerce exemple app you can look at the builtwith page :
https://builtwith.angularjs.org/
And use e-commerce tag.
One of the e-commerce site was :
https://www.hatch.co/