Creating a note taking app using JQuery mobile and phone gap - javascript

I have an app i'm developing with JQ Mobile and PhoneGap. Within this app, i want to include a 'Notes Taking' page and it has to do the following.
Make new notes and save them locally.
Recall them whenever i need to,
Edit them and delete them
i could not find a good example to follow, i tried this:
http://tutorialzine.com/2012/09/simple-note-taking-app-ajax/
but he lost me at the index php and how to implement that, i also tried this example:
http://miamicoder.com/2011/building-a-jquery-mobile-application-part-1/
but its so complex i got lost in all the code.
I'm a beginner at programming and my JavaScript is very very poor and i have no idea where to start and what kind of code is involved in making this part of the app.
Please help. Thank you.

Your first site (http://tutorialzine.com/2012/09/simple-note-taking-app-ajax/) will not work for you as the examples are embedding PHP into the html and that is not acceptable with phonegap apps.
Your second site is making it way more complicated than it needs to be for your limited scope.
Not going to do this for you but I will give you some advice and places to look.
Draw out what you want the user interface to look like and create that html
Create a load and save function in javascript to... well... load and save your notes. Take a look at the below references:
This will show you how to interact with the local database and store and retrieve info. Always a good thing to read the documentation.
This is a great resource for help all sorts of stuff. In this case, with SQL queries.
Test, test, test. With the above, you will be able to figure it out if you put your mind to it. Come back here and post specific questions with code samples of what you have tried if you get stuck.

Related

What's the best way to create a pdf document with charts and in a decent quality?

First of all, I want to apologize for my English, I know my grammar is not the best, I'm not a native speaker so sometimes I have a hard time finding the right words or trying to explain the things I have in mind. So if you have a problem understanding what I want, please let me know and I'll try to be clearer.
I'm making a web app, the backend is made in PHP.
I need to create some kind of pdf-report for the users with charts, tables, pictures, and I need it to be decent (Quality and Style)
I don't know if the best option is a javascript library, 'cause I've found some libraries, but these make not really good looking pdfs.
So I was looking for a javascript library, but nothing seems to fit my requeriments.
I'll give you some pictures in order for you to have a better idea about what I want:
Sales report: This was the closest I could find to what I want.
Another sales report Something like this
Invoice I need something that allows me to make a really good looking design for the document, similar to this invoice
I'm really getting tired of looking and found nothing... It's been almost 2 months now, maybe more.
So my first idea was to use a javascript library that could convert html to pdf, but I was so naive and I didn't know how hard it was to convert html to pdf and without messing with the structure of the elements (The visual organization)
I first tried jsPDF by MrRio, but it doesn't support css (Something that I really need) or the charts (If the charts are pictures, it works fine, but if they are generated with a library like chartJS or highcharts it won't work).
I tried with some similar plugins but all of them had similar problems
Here is the link for jsPDF and their git
Then I found jsreport, I did a really nice thing in their playground and it worked perfectly. The problem is it needs NodeJS and my Site is made in nodeJS, and I don't know if there is a way to use jsreport with php and if there is I'm not sure if it will work as nice as it did in their playground.
Something that I just tought about if there will be a way that use nodeJS only for this feature, I don't know it is not recommended or something, need to find more about this, idk what you guys think.
Jsreport can use multiple recipes like PhantomJS to generate the PDF
I've found other plugins but they are also for nodeJS only.
Here is jsreport site
Then I tried again jsPDF but this time using it along with html2canvas and it worked almost fine, but the quality decreases a lot and the text cannot be selected or copied. I managed to increase the quality a bit, but nothing further that.
I have other ideas, something related to the print option from the browsers, but haven't found anything good.
The other idea that I don't know if it possible, it's making some kind of document like a template and then somehow add the user data inside that template, to finally have a pdf but with the users data.
Read this, here is some related info.
So, the reason I want this feature it's because most of the clients that use my Web App, require this function. So I can't migrate my app to Node or Rails, because it will take a really long time, and I don't have that time right now, so I don't know what are my options. The solution doesn't need to be free, but if it is, it will be great, because I don't have a big budget for a really expensive plugin.
Thank you for reading my question, I really need help with this, so let me know everything you have in mind, every answer is appreciated even if I've already tried it, because maybe you can came up with a different solution using something that I have used already.
Prepare your Html page with Highcharts or whatever charts you want to get and then use this tool WkHtmltoPDF

How can I create a simple popup for the purposes of giving instructions for my app?

I've been searching for a while but I still haven't found really what I need. I've written a Django app and I want a small dialog box to pop up on each page of my app to provide simple instructions for a new user. I'm not really familiar in javascript, so the simpler the better.
I've used intro.js for this sort of thing several times, and have always been happy with the result.

Providing javascript code to users, instead of showing entire code for the web application?

This question might not be suitable for this website and I am only asking this for information purposes..
So, please let me know if this is not suitable and I will delete it.
I have created a web application using PHP and Javascript.
what I want to do is to find a way to turn the entire thing into a small javascript code so I only give that piece of javascript code to the users and they can copy and paste it in their website in order to be able to use the application on their own website without being able to edit the contents of it!
could someone please advise on this?
Again, please let me know if this question is not suitable for this site and I will delete it.
There are two ways to go about this, make it available as an iframe widget (which could theoretically be injected through javascript) or make a cross-domain API with which the javascript would interface. From the sound of it going down the iframe route sounds most sensible, although it does come with a clickjacking vulnirability.

Unable to see complete scraped web page in Google Apps Script logs

A few weeks ago I started learning Javascript and the Google Apps Script API, specifically in regard to spreadsheets. I have been trying to make a spreadsheet that fetches web pages and pulls stats about my friends for the game League of Legends. However, I have been running into a problem with the site I want to use, which is basically the only free LoL stats site that updates frequently. I'm not familiar at all with web development, but it seems when I try to access a page on lolking.net, for example http://www.lolking.net/summoner/na/60783 with Google's UrlFetchApp.fetch() it does not load the dynamic page. So instead of the final source, I get this which doesn't help me. Is there an easy way around this or would I simply have to use another website?
Thanks for thie info! Although it turns out I was mistaken. The UrlFetchApp was indeed returning the full source code, but I was using GAS's Logger to view the text. It seems the Logger has a length limit, so when I searched for the stats I wanted they weren't there simply because the source code got truncated. So, due to an oversight on my part, I never had a problem in the first place. For other people reading this question, in the end I have no idea how UrlFetchApp works with dynamic pages using clientside js (you'd probably want to talk to the poster below or post a new question).
You are getting fhe raw html page with clientside js included. That wont work from any system not just gas. You need to debug that page js and find where it does an ajax call to get the data you want.
Then do the same from your gas. Might not work if the call is authenticated etc.

Display Comic Book files on a webpage?

I'm thinking about creating a webpage and I'm trying to brainstorm some ways to display them in the page.
If i wanted to get dirty and create everything myself, i think i could do it with html5, CSS3, and javascript/jquery. Just do some kind of page buttons with an image tag and maybe get into some more detailed stuff as it comes up (i dont know how i would do zooming and multiple pages).
But wahat i really want to know is if there is already some way to do this? I've looked around for a bit and cant seem to find any sort of plugin that would read a cbz file or display an set of images with the 'e-reader' type of tools in mind. Just wondering if anyone knows of anything?
Thanks
I used to use an online reader for a long time so I started an experiment to build one myself a while back: netcomix
It's open source so you can see if you find anything appealing in what I did. I figured I'd do all the real UI work client side with HTML, CSS, and JavaScript and the server was strictly responsible for acting as a service (for example, to supply a list of comics or a list of all the pages in a particular issue) and serving up the individual JPG/PNG/GIF files. That compartmentalized things nicely and I was very pleased with how jQuery BBQ gave me a history that I could back through even though I stayed on one page the whole time.
Now if I were to do the same experiment again, I'd use Backbone.js to give some structure to the client side and obviously it needs a lot of love because the server side really does nothing at the moment. Early versions were strictly hard coded although I started putting in some simple SQL stuff in there in the latest version. It's nothing more than an experiment though and should be treated as such. It's there for ideas and little else. If you find it interesting and want some more ideas contact me and I'll be happy to let you know all my wacky ideas for such a program.
I know this is an old question. But web technologies have gotten better in the last few years. There are several comic book readers that can work in the browser using pure HTML and JavaScript. I wrote one called: http://comic-book-reader.com .
If you want to see a very simple example of how to read CBR and CBZ files in the browser. You should check out http://workhorsy.github.io/uncompress.js/examples/simple/index.html which uses the JavaScript library https://github.com/workhorsy/uncompress.js

Categories

Resources